/* ============================================================
   base.css — design tokens, reset, typografia, container, utility
   Fonty ładowane z <link> w HTML (preconnect + Google Fonts).
   ============================================================ */

/* ===== 0. FONT FALLBACK METRICS OVERRIDE =====
   Lokalne fonty systemowe dopasowane metrykami do docelowych
   Google Fonts — eliminują flash/layout shift przy swapie.
   */
@font-face {
  font-family: 'Cormorant-Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 108%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla-Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* --- Kolory: tła --- */
  --color-body-bg:		#020304; 
  --color-bg: 			#faf7f2; 
  --color-bg-alt:      #f3ede3;
  --color-bg-soft:     #e8dfd0;
  --color-bg-bright:   #f1ede6;
  --color-bg-dark: linear-gradient(11deg, rgba(0, 0, 0, 1) 0%, rgba(81, 90, 120, 1) 100%);
  --color-bg-black:   #020304;

  /* --- Kolory: tekst --- */
  --color-text:        #2c2723;
  --color-text-soft:   #4a4035;
  --color-text-muted:  #8a7d6b;
  --color-text-invert: #faf7f2;
  --color-text-white: #ffffff;

  /* --- Kolory: akcenty --- */
  --color-accent:      #c4a882;
  --color-accent-soft: #b8a48c;
  --color-line:        #9faac4;

  /* --- Typografia: rodziny --- */
  --font-display: 'Cormorant Garamond', 'Cormorant-Fallback', Georgia, serif;
  --font-body:    'Karla', 'Karla-Fallback', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Typografia: rozmiary --- */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    clamp(1.25rem, 2vw, 1.5rem);
  --fs-2xl:   clamp(1.75rem, 3vw, 2.25rem);
  --fs-3xl:   clamp(2.25rem, 4vw, 3.5rem);
  --fs-hero:  clamp(3rem, 7vw, 6rem);

  /* --- Typografia: line-height i tracking --- */
  --lh-tight:       1.1;
  --lh-snug:        1.3;
  --lh-base:        1.6;
  --lh-loose:       1.8;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.15em;
  --tracking-wider: 0.25em;

  /* --- Odstępy --- */
  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-6:       1.5rem;
  --space-8:       2rem;
  --space-12:      3rem;
  --space-16:      4rem;
  --space-32:      8rem;
  --space-section: clamp(4rem, 10vw, 8rem);
  --space-slider-section: clamp(2rem, 5vw, 4rem);

  /* --- Layout --- */
  --container-max:  1400px;
  --container-text: 720px;
  --gutter:         clamp(1rem, 4vw, 2rem);

  /* --- Efekty --- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --shadow-sm:  0 2px 8px rgba(44, 39, 35, 0.06);
  --shadow:     0 8px 24px rgba(44, 39, 35, 0.10);
  --shadow-lg:  0 20px 60px rgba(44, 39, 35, 0.15);
  --transition: 0.6s cubic-bezier(.2, .8, .2, 1);
  --ease-out:   cubic-bezier(.2, .8, .2, 1);

  /* --- Breakpointy (referencja dla JS) --- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  900px;
  --bp-xl:  1200px;
  

  --header-h: 60px;

}

/* ===== 2. MODERN RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-body-bg);
  overflow-x: clip;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

/* Ukryj stronę do momentu załadowania fontów (lub timeout 1.5s) */
html.fonts-loading body { opacity: 0; }
html.fonts-loaded body { opacity: 1; }
 

img,
picture,
video,
canvas,
svg {
  display: block; 
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none; 
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ===== 3. TYPOGRAFIA ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p {
  line-height: var(--lh-base);
}

p + p {
  margin-top: var(--space-4);
}

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-text-soft);
}

small {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ===== 4. CONTAINER ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text {
  max-width: var(--container-text);
}

/* ===== 5. DIVIDER (komponent bazowy, używany w sekcjach) ===== */
.divider {
  width: 60px;
  height: 1px;
  background: var(--color-accent);
  border: 0;
  margin: var(--space-6) 0;
}

.divider--center { margin-inline: auto; }
.divider--wide   { width: 120px; }

/* ===== 6. UTILITIES ===== */
.u-italic       { font-style: italic; }
.u-uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.u-text-center  { text-align: center; }
.u-text-muted   { color: var(--color-text-muted); }
.u-text-accent  { color: var(--color-accent); }
.u-display      { font-family: var(--font-display); }

.is-hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ikony */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }

/* ===== 7. PREFERS-REDUCED-MOTION (globalne) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Slick Slider — przywróć animację przesuwania slajdów.
     Bez tego iOS "Reduce Motion" zeruje transition na .slick-track
     i slider przeskakuje zamiast przesuwać się płynnie.
     200ms to uczciwy kompromis: ruch widoczny, ale skrócony. */
  .slick-track,
  .slick-list {
    transition-duration: 200ms !important;
  }
}
/* ============================================================
   components.css — reużywalne komponenty (klocki UI)
   Wymaga: base.css (tokeny, reset, typografia)
   ============================================================ */

/* ============================================================
   1. CARD — uniwersalna karta
   Konsoliduje: offer-card, room-card, treatment-item,
   package-card, other-room-card
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 0;
  overflow: hidden;
  transition: border-color var(--transition),
              transform var(--transition),
              box-shadow var(--transition);
}

.card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card__media {
  position: relative;
  width: 100%;
   height:280px;
  overflow: hidden;
  background: var(--color-bg-soft);
  display:block;
}

.card__media picture,
.card__media video,
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.card:hover .card__media img { transform: scale(1.04); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}

.card__body blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--color-text-soft);
}

.card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  border-radius: 0;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.card__type {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.card__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.card__facts {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin-top: auto;
  white-space: nowrap;
}

.card__facts .card__tag {
  padding: 0;
  border: 0;
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  gap: var(--space-1);
}

.card__fact,
.card__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.card__divider {
  height: 1px;
  background: var(--color-line);
  margin: var(--space-3) 0;
  border: 0;
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  margin-top: auto;
  border-top: 1px solid var(--color-line);
}

.card__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  list-style: none;
}

.card__includes li {
  padding-left: var(--space-4);
  position: relative;
}
.card__includes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.card__price--old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  margin-right: var(--space-3);
}

.card__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
  line-height: 1;
}

.card__price-meta {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.card__link {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}

.card__link:hover { opacity: 0.7; }

/* Modyfikatory */
.card--horizontal { flex-direction: row; align-items: stretch; }
.card--horizontal .card__media {
  flex: 0 0 40%;
  width: 40%;
  aspect-ratio: auto;
  height: auto;
  align-self: stretch;
}
.card--horizontal .card__media .media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.card--horizontal .card__body { flex: 1; }

.card--dark {
  background: var(--color-bg-dark);
  border-color: rgba(232, 223, 208, 0.1);
}
.card--dark .card__title  { color: var(--color-text-invert); }
.card--dark .card__desc   { color: rgba(250, 247, 242, 0.7); }
.card--dark .card__footer { border-top-color: rgba(232, 223, 208, 0.1); }

/* Testimonial — karta opinii (używana w reviews strip na index.html) */
.card--testimonial {
  background: var(--color-bg);
  border: 0;
  padding: var(--space-12) var(--space-8);
  min-height: 380px;
  position: relative;
}
.card--testimonial:hover { transform: none; box-shadow: none; }
.card--testimonial .card__body {
  padding: 0;
  gap: var(--space-6);
  justify-content: space-between;
  height: 100%;
}
.card--testimonial blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-text-soft);
  margin: 0;
}

.card__index {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-line);
  letter-spacing: var(--tracking-tight);
}
.card--blog[hidden] {
    display: none;
}

/* .card--horizontal — układ mobilny: media na górze, body na dole */
@media (max-width: 1024px) {
  .card--horizontal {
    flex-direction: column;
    align-items: stretch;
  }

  .card--horizontal .card__media {
    flex: 0 0 auto;
    width: 100%;
    height: 40vh;
    aspect-ratio: auto;
  }

  .card--horizontal .card__media .media {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .card--horizontal .card__body {
    flex: 1 1 auto;
    width: 100%;
  }
}


/* ============================================================
   2. BTN — przyciski
   Konsoliduje: cta-btn, booking-cta, text-cta-btn,
   room-cta-btn, load-more-btn, form-submit
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition),
              color var(--transition),
              border-color var(--transition),
              transform var(--transition);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-bg-bright);
  border-color: var(--color-text-muted);
}
.section--feature-banner .btn--ghost {
 margin-bottom: var(--space-16)
}
.popup__actions .btn--ghost {
  background: var(--color-bg-bright);
  color: var(--color-text-soft);
  border-color: var(--color-text-muted);
}
.form .btn--ghost {
  background: transparent;
  color: var(--color-text-soft);
  border-color: var(--color-text-muted);
}
.btn--ghost:hover {
  background: var(--color-text-soft);
  color: var(--color-text-invert);
  border-color: var(--color-text-soft);
}

.btn--outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-text);
}

.btn--invert {
  background: var(--color-bg);
  color: var(--color-text);
}
.btn--invert:hover { background: var(--color-bg-alt); }

.btn--block { width: 100%; }
.btn--lg    { padding: var(--space-6) var(--space-12); font-size: var(--fs-base); }
.btn--sm    { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }

/* ============================================================
   3. MEDIA — placeholder/obraz (img-placeholder, gallery-item)
   ============================================================ */
.media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; 
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  overflow: hidden; 
}
.card__media  .media { height:280px;}

.media picture ,
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--gallery {
    position: relative;
    overflow: hidden;
}

.media__lightbox-trigger {
    position: absolute;
    inset: 0;                    /* top: 0; right: 0; bottom: 0; left: 0; */
    z-index: 2;
    display: block;
    cursor: zoom-in;             /* wizualna podpowiedź */
    background: transparent;     /* nie zasłaniamy obrazka */
}

/* hover na anchor wpływa na sąsiednie picture/img */
.media__lightbox-trigger ~ picture img,
.media--gallery picture img {
    transition: transform 0.4s ease;
}
/* hover na anchor wpływa na sąsiednie picture/img */
.media__lightbox-trigger:hover ~ picture img,
.media--gallery:hover picture img {
    transform: scale(1.04);
}

/* caption nad anchorem (musi być klikalna inaczej / lub po prostu wyłączamy pointer-events na captionie) */
.media__caption {
    position: relative;
    z-index: 3;
    pointer-events: none;        /* klik przechodzi do anchora pod spodem */
}
.media__icon  { font-size: 2rem; opacity: 0.4; }
.media__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-2);
}

.media__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(to top, rgba(44, 39, 35, 0.85), transparent);
  color: var(--color-text-invert);
  font-size: var(--fs-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}

.media:hover .media__caption {
  opacity: 1;
  transform: translateY(0);
}

.media__count {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(44, 39, 35, 0.7);
  color: var(--color-text-invert);
  font-size: var(--fs-xs);
  border-radius: 999px;
}

.media--gallery     { aspect-ratio: 1 / 1; cursor: pointer; }

.grid--mosaic .media--gallery:nth-child(5n+1) { background: linear-gradient(160deg, #c5cfc4, #8a7d6b); }
.grid--mosaic .media--gallery:nth-child(5n+2) { background: linear-gradient(160deg, #c4a882, #4a4035); }
.grid--mosaic .media--gallery:nth-child(5n+3) { background: linear-gradient(160deg, #b8a48c, #c5cfc4); }
.grid--mosaic .media--gallery:nth-child(5n+4) { background: linear-gradient(160deg, #e8dfd0, #8a7d6b); }
.grid--mosaic .media--gallery:nth-child(5n+5) { background: linear-gradient(160deg, #c4a882, #2c2723); }
.media--ratio-16-9  { aspect-ratio: 16 / 9; }
.media--ratio-1-1   { aspect-ratio: 1 / 1; }
.media--tall        { aspect-ratio: 3 / 4; }
.media--wide        { aspect-ratio: 21 / 9; }

/* ============================================================
   4. AMENITY — udogodnienie
   ============================================================ */
.amenity {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-alt);
  border-radius: 0;
  border: 1px solid transparent;
  transition: border-color var(--transition);
}



.amenity:hover { border-color: var(--color-line); }

.amenity .icon {
  width: 1.75em;
  height: 1.75em;
  color: var(--color-accent);
}

.amenity__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.amenity__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

/* ============================================================
   5. COUNT — liczba + etykieta (statystyki, liczniki)
   ============================================================ */
.count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.count__num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--color-accent);
  line-height: 1;
}

.count__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

/* ============================================================
   6. NOTE — info-box / highlight / legal-note
   ============================================================ */
.note {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.note__icon {
  flex-shrink: 0;
  width: 1.5rem;
  color: var(--color-accent);
}

.note--info    { border-left-color: var(--color-accent); }
.note--warning { border-left-color: #c4a882; background: #f3ede3; }
.note--boxed   { border: 1px solid var(--color-line); border-left-width: 3px; }

/* ============================================================
   7. FORM
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form__intro {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__row--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.form input,
.form textarea,
.form select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form textarea { min-height: 140px; resize: vertical; }

@media (max-width: 640px) {
  .form__row--double { grid-template-columns: 1fr; }
  .amenity { gap:var(--space-2);padding: var(--space-3) }
   .amenity__desc {width:100%;}
}

/* ============================================================
   8. ACCORDION — FAQ, regulaminy, lista składanych sekcji
   ============================================================ */
.accordion {
 /* max-width: 960px;*/
  margin: 0 auto;
  border-top: 1px solid var(--color-line);
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__title {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}

.accordion__title:hover,
.accordion__title:focus-visible { color: var(--color-accent); }
.accordion__title:focus-visible { outline: none; }

.accordion__num {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
  flex-shrink: 0;
  padding-top: 0.4em; /* optycznie wyrównaj z dużym serif */
}

.accordion__label {
  flex: 1;
}

.accordion__icon {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text-soft);
  transition: transform var(--transition), border-color var(--transition), color var(--transition);
}

.accordion__title:hover .accordion__icon {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.accordion__item.is-active .accordion__icon {
  transform: rotate(180deg);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.accordion__body {
  height: 0;
  overflow: hidden;
  /* Animację wysokości robi GSAP (bez CSS transition, żeby nie kolidowały). */
}

/* Padding zewnętrzny — siedzi na elemencie, którego JS animuje wysokość.
   Dzięki temu mierzona wysokość = wysokość finalna (bez doliczania paddingu),
   więc nie ma "przeskoku" na końcu animacji. */
.accordion__body-inner {
  padding-bottom: var(--space-6);
  max-width: 720px;
  color: var(--color-text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}

/* Wcięcie wyrównane z tekstem nagłówka (po numerze) */
@media (min-width: 640px) {
  .accordion__body-inner {
    padding-left: calc(2ch + var(--space-6)); /* szerokość "01" + gap */
  }
}

/* === Style natywnych tagów WYSIWYG ===
   Redaktor wkleja zwykły HTML — bez custom klas.
   Pierwszy/ostatni element bez marginesu zewnętrznego, żeby
   nie psuł box-modelu animacji. */
.accordion__body-inner > *:first-child { margin-top: 0; }
.accordion__body-inner > *:last-child  { margin-bottom: 0; }

.accordion__body-inner p,
.accordion__body-inner ul,
.accordion__body-inner ol,
.accordion__body-inner blockquote {
  margin: 0 0 var(--space-4) 0;
}

.accordion__body-inner ul,
.accordion__body-inner ol { padding-left: var(--space-6); }
.accordion__body-inner li { margin-bottom: var(--space-2); }
.accordion__body-inner li:last-child { margin-bottom: 0; }

.accordion__body-inner h3,
.accordion__body-inner h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3) 0;
  line-height: var(--lh-snug);
}

.accordion__body-inner strong,
.accordion__body-inner b {
  font-weight: 500;
  color: var(--color-text);
}

.accordion__body-inner em,
.accordion__body-inner i {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text);
}

.accordion__body-inner a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  transition: color var(--transition);
}
.accordion__body-inner a:hover { color: var(--color-accent); }

.accordion__body-inner blockquote {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text);
}

/* Wariant na ciemnym tle */
.section--dark .accordion { border-top-color: rgba(250, 247, 242, 0.18); }
.section--dark .accordion__item { border-bottom-color: rgba(250, 247, 242, 0.18); }
.section--dark .accordion__title { color: var(--color-text-invert); }
.section--dark .accordion__title:hover,
.section--dark .accordion__title:focus-visible,
.section--dark .accordion__item.is-active .accordion__title { color: var(--color-accent); }
.section--dark .accordion__icon {
  border-color: rgba(250, 247, 242, 0.3);
  color: rgba(250, 247, 242, 0.7);
}
.section--dark .accordion__body-inner { color: rgba(250, 247, 242, 0.75); }

@media (max-width: 640px) {
  .accordion__title {
    gap: var(--space-3);
    font-size: var(--fs-lg);
    padding: var(--space-4) 0;
  }
  .accordion__icon { width: 32px; height: 32px; }
}

/* ============================================================
   9. TABS — filtry kategorii
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-alt);
  border-radius: 999px;
}

.tabs button,
.tabs a {
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}

.tabs .is-active,
.tabs button:hover {
  background: var(--color-text);
  color: var(--color-text-invert);
}

/* ============================================================
   10. QUOTE — cytat (featured)
   ============================================================ */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  line-height: var(--lh-loose);
  color: var(--color-text);
}

.quote__line {
  width: 60px;
  height: 1px;
  background: var(--color-accent);
}

.quote__guest {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.quote__detail {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   11. RATING — gwiazdki
   ============================================================ */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent);
}

.rating__value {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.star      { width: 1em; height: 1em; }
.star--mini { width: 0.7em; height: 0.7em; }

/* Quick facts row — kompaktowa lista cech z ikoną (np. w hero pokoju) */
.quick-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-4) 0;
}

.quick-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.quick-fact .icon { color: var(--color-accent); }

/* Price block — używany w hero detail (cena + CTA) */
.price-block {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.price-block__label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.price-block__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--color-accent);
  line-height: 1;
}
.price-block__unit {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

/* Feature — ikona + tytuł + opis (np. cechy procesu rezerwacji) */
.feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature .icon {
  flex-shrink: 0;
  width: 1.75em;
  height: 1.75em;
  color: var(--color-accent);
  margin-top: 2px;
}
.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.feature__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.section--dark .feature__title { color: var(--color-text-invert); }
.section--dark .feature__desc  { color: rgba(250, 247, 242, 0.7); }

/* ============================================================
   12. LOGO
   ============================================================ */
.logo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

.logo--footer { color: var(--color-text-invert); }

/* ============================================================
   13. STANY POCZĄTKOWE GSAP (data-animate)
   Hooki dla animacji — zerowanie opacity przed startem JS,
   żeby uniknąć FOUC. .gsap-ready dodaje JS po inicjalizacji.
   ============================================================ */
[data-animate] { opacity: 0; will-change: transform, opacity; }
[data-animate="fade-up"]   { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(-40px); }
[data-animate="fade-right"]{ transform: translateX(40px); }
[data-animate="zoom-in"]   { transform: scale(0.92); }

/* Fallback: jeśli JS nie wystartuje w 2s, pokaż treść */
.no-js [data-animate],
html:not(.gsap-ready) [data-animate] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; }
}

.lang-switcher{
    position:relative;
    display:inline-block;
}
.lang-switcher:after{
    position:absolute;
    display:block;
	content: '^';
	color:#fff;
	transform:rotate(180deg) scaleX(1.5);
	right:13px;
	top:1px;
}

.lang-switcher__current{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:transparent;
    border:0;
    cursor:pointer;
    padding:.5rem 2rem .5rem .75rem ;
    font:inherit;
    color:var(--color-bg-alt);
}

.lang-switcher__list{
    position:absolute;
    top:100%;
    right:0;
    width:max-content;       /* dopasuj do najszerszej pozycji, nie do triggera */
    min-width:100%;
    margin:0;                 /* reset domyślnego marginesu <ul> */
    padding:.25rem 0;
    list-style:none;          /* bez bulletów */
    background:transparent;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:100;
    /* domyślnie ukryte */
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:opacity .18s,transform .18s,visibility .18s,background-color .18s;
	
}

.header.small .lang-switcher__list{ 
    background:#14161d; 
}

.lang-switcher__list li{
    margin:0;
    padding:0;
    list-style:none;
}

.lang-switcher__list a{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .75rem;
    text-decoration:none;
    color:var(--color-bg-alt);
    white-space:nowrap;
}

.lang-switcher__list a:hover{
    background:transparent;
}

/* Otwarte przez JS */
.lang-switcher.is-open .lang-switcher__list{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Flagi */
.lang-switcher__flag{
    display:inline-block;
    width:20px;
    height:14px;
    background-size:cover;
    background-position:center;
    border-radius:2px;
    flex-shrink:0;
}
.lang-switcher__flag--pl{background-image:url('/images/pl.png')}
.lang-switcher__flag--en{background-image:url('/images/en.png')}
.lang-switcher__flag--de{background-image:url('/images/de.png')}
.lang-switcher__flag--cs{background-image:url('/images/cs.png')}

/* ============================================================
   sections.css — układy / layout / sekcje strony
   Wymaga: base.css, components.css
   ============================================================ */

/* ============================================================
   1. SECTION — uniwersalna sekcja strony
   ============================================================ */
.section {
  padding: var(--space-section) 0;
  background: var(--color-bg);
  position: relative;
}
.section_0 {
  padding-top:200px;
}
.section.blog-header {
  padding: var(--space-32) 0 var(--space-section) 0 ;
  background: var(--color-bg);
  position: relative;
}
.slider-section {
  padding: var(--space-slider-section) 0; 
}

.section--alt   { background: var(--color-bg-alt); }
.section--default  { background: var(--color-bg); }
.section--soft  { background: var(--color-bg-soft); }
.section--dark  { background: var(--color-bg-dark); color: var(--color-text-invert); }
.section--black  { background: var(--color-bg-black); color: #fff; }
.section--black .section__heading {color: rgba(250, 247, 242, 0.75);}
.section--dark .section__heading,
.section--dark .section__label  { color: var(--color-text-invert); }
.section--dark .section__body   { color: rgba(250, 247, 242, 0.75); }

.section--tight   { padding: var(--space-12) 0; }
.section--gallery-mosaic   { padding: var(--space-12) 0; }
.inner-section.blog__index_header { padding: var(--space-12) 0 var(--space-16) 0 ; }
.section--newsletter { padding: var(--space-12) 0 var(--space-16) 0 ; }
.section--flush   { padding: 0; }
.blog-header   { position:relative; min-height:70vh;display:flex; align-items:end;}
.blog-header .container{ position:relative; z-index:10;}
.section--centered { text-align: center; }
.section--centered .divider { margin-inline: auto; }
.blog__index_header{position:relative;}
.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  max-width: 720px;
}

.section--centered .section__header {
  margin-inline: auto;
  align-items: center;
}

.section__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  padding-bottom: var(--space-4) ; 
}

.section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.section__body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-text-soft);
  max-width: 640px;
}

.section__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.blog-header__media_cover {
  width: 100%; 
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute; left:0; top:0; z-index:1;
}
.blog-header__media {
  width: 100%; 
  height:100%;
  overflow: hidden;
  position:absolute; left:0; top:0; z-index:0;
}
.blog-header__content,
.blog-header__content h1.blog-header__title {color:#fff;}
.blog-header__title{margin-bottom:var(--space-8);}
.section__media picture, 
.blog-header__media picture, 
.section__media img , 
.blog-header__media img { width: 100%; height: 100%; object-fit: cover; }
.section__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Media wewnątrz section__media — wypełnia pełną szerokość/wysokość rodzica */
.section__media .media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.section__media .media video,
.section__media .media picture,
.section__media .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Wariant split: obraz + tekst obok siebie */
.section--split .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.section--split.section--reversed .section__media { order: 2; }

.section--split-reversed .section__media { order: -1; }

/* Media-split — tekst po lewej wyrównany z .container, wideo po prawej do krawędzi okna */
.section--media-split { padding: 0; position: relative; overflow-x: clip;background: var(--color-bg-bright); }
.section--media-split > .container {
  display: flex;
  align-items: stretch;
  min-height: 70vh;
}
.section--media-split .section__header {
  flex: 0 0 420px;
  padding-block: var(--space-section);
  padding-right: var(--space-12);
  margin-bottom: 0;
  align-self: center;
  max-width: 420px;
}
.section--media-split .section__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: auto;
}
.section--media-split .section__media video {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
} 
.section--media-split .section__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .section--media-split { position: static; }
  .section--media-split > .container {
    flex-direction: column;
    min-height: auto;
  }
  .section--media-split .section__header {
    flex: 1 1 auto;
    padding: var(--space-12) 0;
    padding-right: 0;
    max-width: 900px;
  }
  .section--media-split .section__body {
    max-width: 900px;
  }
  .section--media-split .section__media {
    position: static;
    min-height: 60vh;
    height: 60vh;
    order: 2;
    margin-bottom: 3rem;
  }
  .slider-section {
  padding-top: 2rem;}
	  
	.section--media-split .section__media video,
	.section--media-split .section__media img {
	  width: 100%; 
	}
  
  
}



.section--split-narrow .container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-16);
  align-items: start;
  max-width: 1100px;
}
.section--split-narrow .section__header { margin-bottom: 0; }

@media (max-width: 900px) {
  .section--split-narrow .container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 900px) {
  .section--split .container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ============================================================
   2. HERO — wszystkie warianty
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  padding-block: 3rem 6rem;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}
.hero.first-section { 
  padding-block: 9rem 6rem; 
}
.hero--media-container {width:100%; height:100%; display:flex; position:absolute; z-index:0; top:0; left:0; }
.hero--media-container-shader {width:100%; height:100%; display:flex; position:absolute; z-index:1; top:0; left:0;  background:linear-gradient(11deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);}
.hero--media-container picture,
.hero--media-container img,
.hero--media-container video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity:1
}
 
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 30%,
    rgba(197, 207, 196, 0.05), transparent);
  pointer-events: none;
  z-index: 1;
}
.media__shader {
	position: absolute; height:200px;
  top:0; left:0; width:100%;background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(150, 150, 150, 0) 0%, rgba(0, 0, 0, 0.50) 100%);
  z-index: 10;
	
}
.inner-section .media__shader {
	display:none;
	
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(44, 39, 35, 0.3) 0%,
    rgba(44, 39, 35, 0.6) 100%);
}

.hero > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index:2;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  flex: 1;
  min-height: 100%;
}
.hero__form {
  width: 100%;}
/* Sloty hero — top zawsze u góry, bottom zawsze na dole */
.hero__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-bg-soft);
}

/* Bazowy hero (index.html) — większy tytuł na pełną wysokość */
.hero:not([class*="hero--"]) .hero__title {
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.95;
}

.hero__title em {
  font-style: italic;
  color: var(--color-line);
}

.hero__title-line {
  display: block;
}

.hero__subtitle {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: rgba(250, 247, 242, 0.85);
  max-width: 600px;
}

/* Wariant: hero z tłem video/img — wyśrodkowany (np. index.html) */
.hero--video {
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
.hero--video .hero__content {
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* Wariant: hero podstrony — niski, breadcrumb na górze, treść na dole */
.hero--page {
  min-height: 450px;
  height: auto;
}

/* Reviews split — featured po lewej, przewijany strip po prawej (index.html) */
.section--reviews-split { padding: 0; position: relative; overflow-x: clip; background: var(--color-bg-alt); }
.section--reviews-split > .container {
  display: flex;
  align-items: stretch;
  min-height: 50vh;
  padding-block: var(--space-section);
}
.section--reviews-split .reviews__featured {
  flex: 0 0 420px;
  padding-right: var(--space-12);
  display: flex;
  flex-direction: column; 
  gap: var(--space-6);
}
.section--reviews-split .reviews__strip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.section--reviews-split .reviews__strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}
@media (max-width: 1300px) {
	.section--reviews-split .reviews__featured {flex: 0 0 320px;}
}
@media (max-width: 900px) {
  .section--reviews-split > .container { flex-direction: column; gap: var(--space-12); }
  .section--reviews-split .reviews__featured { flex: 1 1 auto; padding-right: 0; }
}

/* Count + rating wewnątrz featured — inline layout */
.reviews__featured .count {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
}
.reviews__featured .count__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
}
.reviews__featured .count__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  max-width: 140px;
}
.reviews__featured .rating {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.reviews__featured .rating__stars {
  font-size: var(--fs-lg);
  color: var(--color-accent);
  letter-spacing: 0.15em;
}
.reviews__featured .rating__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.hero--detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
  gap: 0;
}
.hero--detail .hero__media {
  position: relative;
  inset: auto;
  z-index: 0;
}
.hero--detail .hero__media::after { display: none; }
.hero--detail > .container {
  width: auto;
  max-width: none;
  padding: 9rem var(--space-12) var(--space-16);
}
.hero--detail .hero__content {
  justify-content: flex-end;
  gap: var(--space-6);
  text-align: left;
}
.hero--detail .hero__title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.05;
}

@media (max-width: 900px) {
  .hero--detail {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero--detail .hero__media { min-height: 50vh; }
}
.hero--page-tall { min-height: 600px; }

.hero__sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
  position: relative;
  z-index: 2;
}

.hero__sub p {
  font-size: var(--fs-base);
  color: rgba(184, 164, 140, 0.9);
  max-width: 460px;
  line-height: var(--lh-loose);
}

.hero__sub .meta-vertical {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  writing-mode: vertical-rl;
}

.hero__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: rgba(250, 247, 242, 0.7);
}

.hero__scroll-hint::after {
  content: "";
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: hint-pulse 2s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(0.5); opacity: 1; }
}

/* Warianty hero — patrz wyżej */

.hero__details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.85);
}

.hero__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .hero { min-height: 100vh; }
  
  .hero--detail.room--hero  > .container { padding: var(--space-6) var(--gutter)  var(--space-12) var(--gutter) ; }
  .hero--page { min-height: 50vh; }
  .hero__form {margin-top:2rem;}
}

/* ============================================================
   3. GRID — uniwersalna siatka
   ============================================================ */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); } 
.grid--5 { grid-template-columns: repeat(5, 1fr); } 
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--map  { grid-template-columns: 1.4fr 1fr; gap: 0; min-height: 55vh; }
.grid--map .map {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
  min-height: 450px;
}
.grid--map .panel {
  border-radius: 0;
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .grid--map { grid-template-columns: 1fr; min-height: 0; }
}

.grid--tight { gap: var(--space-4); }
.grid--loose { gap: var(--space-12); }

/* Bazowe klasy span — działają w każdym .grid */
.grid__col--3  { grid-column: span 3; }
.grid__col--4  { grid-column: span 4; }
.grid__col--6  { grid-column: span 6; }
.grid__col--8  { grid-column: span 8; }
.grid__item--tall { grid-row: span 2; }
.grid__item--wide { grid-column: span 2; }

/* Mosaic dla galerii — siatka 12-kolumnowa */
.grid--mosaic {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px;
  gap: var(--space-4);
}

.grid--mosaic .grid__col--3  { grid-column: span 3; }
.grid--mosaic .grid__col--4  { grid-column: span 4; }
.grid--mosaic .grid__col--6  { grid-column: span 6; }
.grid--mosaic .grid__col--8  { grid-column: span 8; }
.grid--mosaic .grid__item--tall { grid-row: span 2; }
.grid--mosaic .grid__item--wide { grid-row: span 1; }

@media (max-width: 900px) {
  .grid--mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 220px;
  }
  .grid--mosaic .grid__col--3  { grid-column: span 3; }
  .grid--mosaic .grid__col--4,
  .grid--mosaic .grid__col--6  { grid-column: span 6; }
  .grid--mosaic .grid__col--8  { grid-column: span 6; }
}

@media (max-width: 640px) {
  .grid--mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .grid--mosaic .grid__col--3,
  .grid--mosaic .grid__col--4,
  .grid--mosaic .grid__col--6,
  .grid--mosaic .grid__col--8  { grid-column: 1 / -1; }
  .grid--mosaic .grid__item--tall { grid-row: span 1; }
}

/* Media wewnątrz mosaic — wypełnia komórkę gridu, nie dyktuje proporcji */
.grid--mosaic .media {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) { 
   .grid--5 { grid-template-columns: repeat(4, 1fr); } 
}
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
   .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .grid--mosaic     { grid-template-columns: repeat(2, 1fr); }
  .grid__item--wide { grid-column: span 2; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4, .grid--mosaic {
    grid-template-columns: 1fr;
  }
  .grid.grid--5 {
    grid-template-columns:repeat(2, 1fr); gap:var(--space-6);
  }
  .grid__item--wide, .grid__item--tall {
    grid-column: auto; grid-row: auto;
  }
}
@media (max-width: 460px) {  
  .grid__item--wide, .grid__item--tall {
    grid-column: auto; grid-row: auto;
  }
}

.wide-button-holder {
	padding-top:var(--space-6);
  display: flex;
  align-items:center; 
  flex-direction: column;
  gap: var(--space-2);
  }

/* ============================================================
   4. STRIP — karuzela pozioma (Slick Slider)
   Przed inicjalizacją JS: flex ze scroll-snap (fallback bez JS)
   Po inicjalizacji (.slick-initialized): Slick przejmuje layout
   ============================================================ */
.strip {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  position: relative;
}

.strip__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: clamp(280px, 38vw, 480px);
}

.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-track { background: var(--color-bg-alt); }
.strip::-webkit-scrollbar-thumb { background: var(--color-accent); }

/* Po inicjalizacji Slicka — porzucamy flex/scroll-snap */
.strip.slick-initialized {
  display: block;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom:0;
}
.strip.slick-initialized .strip__item {
  flex-shrink: initial;
  scroll-snap-align: initial;
  width: auto;
  padding: 0 var(--space-3);
  height: auto;
}
.strip.slick-initialized .slick-track {
  display: flex;
}
.strip.slick-initialized .slick-slide {
  height: auto;
}
.strip.slick-initialized .slick-slide > div {
  height: 100%;
}
.strip.slick-initialized .slick-slide .strip__item {
  height: 100%;
}
.strip.slick-initialized .slick-slide .card {
  height: 100%;
}
.strip.slick-initialized .slick-list {
  padding-bottom:30px
}

/* Wyłączenie hover-lift kart wewnątrz karuzeli (obcinane przez slick overflow) */
.slick-initialized .card:hover {
  transform: none;
  box-shadow: none;
}

/* Grid jako karuzela — data-carousel="true" (np. Pakiety SPA) */
.grid[data-carousel="true"].slick-initialized {
  display: block;
  grid-template-columns: none;
  margin-inline: -1rem;
}
.grid[data-carousel="true"].slick-initialized .slick-slide {
  height: auto;
  margin: 0 1rem;
}
.grid[data-carousel="true"].slick-initialized .slick-track { display: flex; }
.grid[data-carousel="true"].slick-initialized .slick-slide > div { height: 100%; }
.grid[data-carousel="true"].slick-initialized .slick-slide > div > * { height: 100%; }
.grid[data-carousel="true"].slick-initialized .slick-slide .card { height: 100%; }

/* Strzałki dla grid-carousel — te same co dla .strip */
.grid[data-carousel="true"] .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.grid[data-carousel="true"] .slick-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.grid[data-carousel="true"] .slick-arrow.slick-disabled {
  opacity: 0.3;
  cursor: default;
}
.grid[data-carousel="true"] .slick-prev { left: calc(-1 * var(--space-12)); }
.grid[data-carousel="true"] .slick-next { right: calc(-1 * var(--space-12)); }

/* Grid carousel potrzebuje position:relative żeby strzałki były absolutne względem niego */
.grid[data-carousel="true"] { position: relative; }

/* Strzałki — dyskretne, poza trackiem, szare z hoverem na accent */
.strip .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:var(--color-bg);
  border: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.strip .slick-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.strip .slick-arrow.slick-disabled {
  opacity: 0.3;
  cursor: default;
}
.strip .slick-prev { left: calc(-1 * var(--space-12)); }
.strip .slick-next { right: calc(-1 * var(--space-12)); }

@media (max-width: 1460px) {
  .strip .slick-prev { left: -1rem; }
  .strip .slick-next { right: -1rem; }  
}

/* Wariant w reviews — strzałki na górze prawej kolumny */
.reviews__strip .strip .slick-arrow {
  top: auto;
  bottom: calc(100% + var(--space-4));
  transform: none;
}
.reviews__strip .strip .slick-prev { left: auto; right: 64px; }
.reviews__strip .strip .slick-next { left: auto; right: 0; }

/* ============================================================
   5. PROSE — strony prawne (regulaminy, polityka)
   ============================================================ */
.prose {
  max-width: var(--container-text);
  margin-inline: auto;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-text-soft);
}

.prose__section { margin-bottom: var(--space-12); }

.prose__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.prose__header h2 {
  font-size: var(--fs-2xl);
  color: var(--color-text);
}

.prose__footer {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.prose p { margin-bottom: var(--space-4); }
.prose img{ max-width:100%; height:auto;}
.prose ul, .prose ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose a { color: var(--color-accent); border-bottom: 1px solid currentColor; }

.prose h2 { font-size: var(--fs-2xl); color: var(--color-text); margin: var(--space-12) 0 var(--space-4); }
.prose h3 { font-size: var(--fs-xl); color: var(--color-text); margin: var(--space-8) 0 var(--space-3); }

.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-alt);
  font-size: var(--fs-base);
  font-style: italic;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--fs-sm);
}
.prose th, .prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.prose th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-12) 0;
}

/* TOC (table of contents) */
.toc {
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin-bottom: 0;
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toc__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  transition: color var(--transition);
}

.toc__list a:hover { color: var(--color-accent); }

.toc__num {
  font-family: var(--font-display);
  color: var(--color-accent);
  min-width: 1.5rem;
}

.toc__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.toc-anchor {
  scroll-margin-top: calc(var(--header-h) + 1rem); 
}
.place-details-compact-container {display:none}

/* ============================================================
   6. HEADER + NAV
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201; /* powyżej .nav__overlay (200) — toggle zawsze widoczny */
  padding: var(--space-2) 0;
  background: transparent;
 transition: background-color var(--transition);
  /*mix-blend-mode: difference;*/
  pointer-events: none;
  box-sizing:border-box;
}

.header.small { background: #14161d; }
.header a{display:block;}
.header .lang-switcher__list a{display:flex;}
.header a,
.header button { pointer-events: auto; }


.header .nav li a {padding: 0.25rem;border:1px transparent solid;} 
.header .nav li:last-child a {padding: 0.25rem 0.5rem;border:1px transparent solid;} 
.header .nav li:last-child a:hover { background:var(--color-text-invert); color:var(--color-text)}
.header .nav li:last-child {
	border:1px var(--color-text-invert) solid;
}
.header .logo{margin-right: auto; position:relative; height:80px;transition: all var(--transition)}
.header .logo img{width:auto;height:60px; position:absolute; top:10px;left:0;transition: all var(--transition)} 
.header.small .logo { }  
.header.small .logo img{  top:22px; }  
.header .logo,
.header .nav a, div.phone {
  color: var(--color-text-invert);transition: color var(--transition)
}
.header .nav a:hover {
  color: var(--color-accent);
}
.header .nav li.current a {
  color: var(--color-accent);
}
 div.phone {position:relative; padding-right:40px; }
 div.lang-holder {position:fixed; right:0; top:34px;transition: top var(--transition)}
.header.small div.lang-holder { top:12px}
 div.phone:before {background:transparent; width:12px; height:20px; border:1px #fff solid; display:inline-block; content:''; margin-right:6px;transform:translateY(4px); }
 div.phone:after {background:transparent; border-top:1px #fff solid;border-bottom:1px #fff solid; width:12px; height:14px; display:inline-block; content:''; left:0; top:6px; position:absolute; }
.header__inner {
  height:80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8); overflow:hidden; transition: all var(--transition)
}
.header.small  .header__inner {
  height:40px; 
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}

.nav a {
	display:block;
  text-align: center;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-small);
  color: var(--color-text-soft);
  transition: color var(--transition), background var(--transition);
}

.nav a:hover,
.nav a.is-active { color: var(--color-text-white); } 

/* ============================================================
   NAV MOBILE — hamburger + fullscreen overlay
   ============================================================ */

/* Hamburger button — widoczny tylko na mobile */
.nav__toggle {
  display: none;
  position: relative;
  z-index: 201;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  margin-right:40px;
}

/* Trzy kreski hamburgera */
.nav__toggle .bar {
  display: block;
  position: absolute;
  width: 24px;
  height: 1.5px;
  background: var(--color-text-white);
  border-radius: 1px;
  transform-origin: center;
  transition: none; /* GSAP przejmuje kontrolę */
}

.nav__toggle .bar--top    { transform: translateY(-7px); }
.nav__toggle .bar--mid    { transform: translateY(0); }
.nav__toggle .bar--bot    { transform: translateY(7px); }

/* Fullscreen overlay — bezpośrednio w <body>, poza .header */
.nav__overlay {
  display: none; /* JS ustawi visibility po załadowaniu */
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Reset blend mode - overlay jest poza .header ale izolujemy na wszelki wypadek */
  mix-blend-mode: normal;
  isolation: isolate;
  background: #020304; /* --color-bg-black — hard-coded żeby uniknąć dziedziczenia */
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 96px var(--gutter);
  overflow: hidden;
  /* Stan początkowy (GSAP ustawi przed otwarciem) */
  clip-path: circle(0% at calc(100% - 38px) 44px);
}

/* Dekoracyjna linia pionowa */
.nav__overlay::before {
  content: '';
  position: absolute;
  left: var(--gutter);
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-accent) 30%,
    var(--color-accent) 70%,
    transparent
  );
  opacity: 0.4;
}

/* Lista linków w overlay */
.nav__overlay-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: calc(var(--gutter) + var(--space-6));
  width: 100%;
}

.nav__overlay-list li {
	padding-bottom:1px;
  overflow: hidden; /* Clip dla slide-in animacji */
}

.nav__overlay-list a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--color-text-invert);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav__overlay-list a:hover {
  color: var(--color-accent);
}

/* Ostatnia pozycja (CTA) — wyróżniona */
.nav__overlay-list li:last-child a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
}

.nav__overlay-list li:last-child a:hover {
  background: var(--color-accent);
  color: var(--color-bg-black);
}

/* Footer overlay — kontakt / social */
.nav__overlay-footer {
  position: absolute;
  bottom: var(--space-8);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(250, 247, 242, 0.1);
  padding-top: var(--space-4);
}

.nav__overlay-footer a, .nav__overlay-footer span {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__overlay-footer a:hover {
  color: var(--color-text-invert);
}

/*//  FOOTER NAV //*/

.footer__nav {
	width:100%;padding-top:var(--space-2);
  display: block;text-align: left; border-top:1px #50555f solid; 
  }

.footer__nav li {
  display: inline-block; 
	padding-bottom:1px;
  overflow: hidden;margin-right:1rem; 
}

.footer__nav a {
  display: inline-block; 
  font-size: var(--fs-base);
  font-weight: 400; 
  color: rgba(250, 247, 242, 0.7); 
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  
  transition: color var(--transition);
}
.footer__nav a:hover { 
  color: var(--color-accent); 
}
/* Blokada scrolla na body gdy menu otwarte */
body.nav-is-open {
  overflow: hidden;
}
.cookie-consent-trigger {margin-top:1rem}
/* ===== BREAKPOINT — pokaż toggle, ukryj desktop nav ===== */
@media (max-width: 900px) {  
	.footer__nav li { display: block; }
}
@media (max-width: 1200px) {
  .nav__toggle {
    display: flex;
  }

  /* Ukryj listę desktopową */
  .nav__list, div.phone  {
    display: none;
  }

  /* Overlay domyślnie ukryty — JS zmienia na display:flex i ustawia clip-path */
  /* display: none zostaje — GSAP przejmuje kontrolę po załadowaniu */
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.footer {
  padding: 0 0 var(--space-8);
  background: var(--color-bg-black);
  color: rgba(250, 247, 242, 0.7); 
}
.footer .container{ 
  padding-top:var(--space-section);
  position:relative;
}
.eupop__wrapper {
  position: absolute;
  top: 20px;
  left: 0.5rem;
  width: 180px;
  height: 60px; 
}
.eupop__wrapper a{
	display:block;
  width: 180px;
  height: 60px; 
  background:url(/images/ue_efrr.1.svg) left top no-repeat;
  text-indent:-2000em;
  overflow:hidden;
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__col h3 {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-invert);
  margin-bottom: var(--space-2);
}
.footer__col h4 {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-invert);
  margin-bottom: var(--space-2);
}

.footer__col a, .footer__col span {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.7);
  transition: color var(--transition);
  word-break: break-word;
}

.footer__col p {
  font-size: var(--fs-sm);
  color: rgba(250, 247, 242, 0.7);
  line-height: var(--lh-loose);
  white-space: normal;
  word-break: break-word;
}

.footer__col a:hover { color: var(--color-accent); }

.footer__bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(232, 223, 208, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  color: rgba(250, 247, 242, 0.5);
}

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer .container{ padding-top:105px; }
}

/* ============================================================
   8. BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.breadcrumb a { color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current] { color: var(--color-text); }
.breadcrumb .sep { opacity: 0.5; }

/* Breadcrumb wewnątrz hero — jaśniejsze kolory na ciemnym tle */
.hero .breadcrumb,
.hero .breadcrumb a {
  color: var(--color-accent-soft);
}
.hero .breadcrumb [aria-current] {
  color: var(--color-bg-soft);
}
.hero .breadcrumb a:hover { color: var(--color-line); }

/* ============================================================
   9. PAGINATION / LOAD MORE
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

/* ============================================================
   10. MAP
   ============================================================ */
.map {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.25) contrast(1.1) brightness(1.05);
  transition: filter 0.5s;
}

.map:hover iframe { filter: saturate(0.5) contrast(1) brightness(1); }

.map__info {
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin-top: var(--space-6);
}

/* ============================================================
   11. INFO-PAIR — etykieta + wartość (kontakt, dane firmy)
   ============================================================ */
.info-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}

.info-pair__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.info-pair__body {
  font-size: var(--fs-base);
  color: var(--color-text);
}

.info-pair__body a {
  color: inherit;
  transition: color var(--transition);
}

.info-pair__body a:hover { color: var(--color-accent); }

/* Kontekst ciemnego panelu — odwrócone kolory */
.panel--dark .info-pair {
  border-bottom-color: rgba(232, 223, 208, 0.12);
}

.panel--dark .info-pair__label {
  color: var(--color-accent);
}

.panel--dark .info-pair__body,
.panel--dark .info-pair__body p,
.panel--dark .info-pair__body a {
  color: rgba(250, 247, 242, 0.85);
}

.panel--dark .info-pair__body a:hover { color: var(--color-accent); }

.panel--dark .card__link {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* ============================================================
   12. PANEL — pudełko informacyjne
   ============================================================ */
.panel {
  padding: var(--space-8);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

.panel--boxed {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
}

.panel--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}

/* ============================================================
   13. LOKALIZACJA — mapa, atrakcje, grid odległości, obiekt polecany
   ============================================================ */

/* Mapa fullwidth na początku strony (bez hero) */
.map--hero {
  width: 100%;
  min-height: 75vh;
  aspect-ratio: auto;
  border-radius: 0;
  position: relative;
}
.section-map--hero { 
  background:var(--color-bg-black);
}
.section-map--hero.first-section {
  padding-top:96px; 
}
.map--hero iframe {
  width: 100%;
  height: 100%;
  min-height: 75vh;
  border: 0;
  filter: saturate(0.3) contrast(1.1) brightness(1.05);
  transition: filter 0.6s;
  display: block;
}

.map--hero:hover iframe {
  filter: saturate(0.6) contrast(1) brightness(1);
}

/* Sekcja: naprzemienny grid atrakcji (obraz / tekst) — każda atrakcja to osobna sekcja */
.section--attraction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 480px;
}

.section--attraction + .section--attraction {
  border-top: 1px solid var(--color-line);
}

.attraction__media {
  width: 100%;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.attraction__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.attraction__media picture, 
.attraction__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}

.section--attraction:hover .attraction__media img {
  transform: scale(1.04);
}

.attraction__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-section) clamp(var(--space-8), 5vw, var(--space-16));
}

.section--attraction--reversed .attraction__media { order: 2; }
.section--attraction--reversed .attraction__content { order: 1; }

.attraction__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

.attraction__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.attraction__body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-text-soft);
  max-width: 520px;
}

.attraction__distance {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  align-self: flex-start;
}

.attraction__distance::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

@media (max-width: 900px) {
  .section--attraction {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .attraction__media { min-height: 280px; }
  .section--attraction--reversed .attraction__media { order: 0; }
  .section--attraction--reversed .attraction__content { order: 0; }
  .attraction__content {
    padding: var(--space-12) var(--gutter);
  }
}

/* Grid ikon / odległości */
.section--icon-grid {
  padding: var(--space-section) 0;
  background: var(--color-bg-alt);
}

.distances-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-bg-soft);
  margin-top: var(--space-12);
}

.distance-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8);
  background: var(--color-bg-alt);
  transition: background 0.4s;
  position: relative;
}

.distance-item:hover {
  background: var(--color-bg);
}

.distance-item__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.distance-item__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.distance-item__name {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.distance-item__time {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--color-text);
  margin-top: auto;
}

.distance-item__mode {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

@media (max-width: 900px) {
  .distances-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .distances-grid {
    grid-template-columns: 1fr;
  }
  .distance-item {
    padding: var(--space-8);
  }
}

/* Sekcja: polecany obiekt w pobliżu */
.section--feature-banner {
  padding: 0;
  position: relative;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.media-banner {
  position: relative;
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.media-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  
} 
.media-banner__media img {
  width: 100%;
  height: 140%; /* marginesy na parallax ±20% */
  object-fit: cover;
  display: block;
  will-change: transform;
}

.media-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(2, 3, 4, 0.85) 0%,
    rgba(2, 3, 4, 0.55) 50%,
    rgba(2, 3, 4, 0.2) 100%
  );
}

.media-banner__content {
  position: relative;
  z-index: 1;
  padding: var(--space-section) 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.media-banner__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

.media-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: var(--lh-tight);
  color: var(--color-text-invert);
  font-weight: 300;
}

.media-banner__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: rgba(250, 247, 242, 0.75);
  max-width: 460px;
}

@media (max-width: 640px) {
  .media-banner__media::after {
    background: linear-gradient(
      to bottom,
      rgba(2, 3, 4, 0.3) 0%,
      rgba(2, 3, 4, 0.85) 100%
    );
  }
  .media-banner__content {
    padding: var(--space-16) 0;
  }
	.media-banner__media picture,
	.media-banner__media img {
	  width: 100%;
	  height: 100%; 
	  object-fit: cover;
	  display: block;
	  will-change: transform;
	}
}


/* sections.css albo dedykowane post-footer.css */
.post-footer-section { padding: 4rem 0; border-top: 1px solid var(--border); }

.post-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}
.post-footer__col--prev   { justify-self: start;  }
.post-footer__col--center { justify-self: center; text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.post-footer__col--next   { justify-self: end;    }

.post-footer__link {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none; color: var(--text);
    transition: opacity .2s ease;
}
.post-footer__link:hover { opacity: .7; }
.post-footer__arrow      { font-size: 1.25rem; line-height: 1; }
.post-footer__label      { font-weight: 600; }

.post-footer__date {
    font-size: .875rem; color: var(--text-muted); letter-spacing: .05em;
}
.post-footer__home {
    text-decoration: none; color: var(--accent); font-weight: 600;
    border-bottom: 1px solid currentColor;
}

@media (max-width: 768px) {
    .post-footer { grid-template-columns: 1fr; gap: 1.5rem; }
    .post-footer__col--prev,
    .post-footer__col--next { justify-self: center; }
}
/* ─────────────────────────────────────────────────────────────
   REVIEWS — sekcja z pełną listą opinii i paginacją (JS)
   ───────────────────────────────────────────────────────────── */

.reviews { 
    margin: 0 auto;
    padding: 1rem 0 0;
}

/* ─── Grid ─────────────────────────────────────────────────── */

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .reviews__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ─── Karta opinii ─────────────────────────────────────────── */

.review-card {
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, .08));
    border-radius: var(--radius-card, 8px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    border-color: var(--color-border-hover, rgba(0, 0, 0, .14));
}

.review-card[hidden] {
    display: none;
}

.review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.review-card__meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.review-card__author {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text, #1a1a1a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card__date {
    font-size: .8125rem;
    color: var(--color-text-muted, #777);
    font-variant-numeric: tabular-nums;
}

.review-card__rate {
    display: flex;
    align-items: baseline;
    gap: .15rem;
    flex-shrink: 0;
    background: var(--color-accent-soft, rgba(196, 168, 130, .12));
    color: var(--color-bg-bright);
    padding: .35rem .65rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.review-card__rate-value {
    font-size: 1.05rem;
    font-weight: 700;
}

.review-card__rate-max {
    font-size: .8125rem;
    opacity: .65;
}

.review-card__text {
    margin: 0;
    color: var(--color-text, #1a1a1a);
    line-height: 1.55;
    font-size: .95rem;
    /* Klamp na 6 linii — długie opinie ucinane wizualnie 
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;*/
    overflow: hidden;
}

/* ─── Paginacja ────────────────────────────────────────────── */

.reviews__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 1.5rem 0;
}

.reviews__page-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.reviews__page-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-border, rgba(0, 0, 0, .12));
    color: var(--color-text, #1a1a1a);
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    border-radius: 6px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reviews__page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--color-bg-hover, rgba(0, 0, 0, .04));
    border-color: var(--color-border-hover, rgba(0, 0, 0, .18));
}

.reviews__page-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.reviews__page-btn.is-active {
    background: var(--color-accent, #c4a882);
    border-color: var(--color-accent, #c4a882);
    color: #fff;
    cursor: default;
}

.reviews__page-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.reviews__page-btn--prev,
.reviews__page-btn--next {
    font-size: 1.1rem;
}

/* Mobile: chowamy zewnętrzne numery — okienko ±2 wokół aktywnego */
@media (max-width: 560px) {
    .reviews__page-btn--num.is-distant {
        display: none;
    }
    .reviews__page-btn--num.is-ellipsis {
        pointer-events: none;
        border-color: transparent;
    }
}



/* === section--video-dragger: scroll-driven animation === */
.section--video-dragger {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	background: #f3ede3;
	/* Całkowita wysokość sekcji: 170vh pin + 100vh po unpin = 270vh.
	   Po unpinie tekst (top:170vh, min-height:100vh) kończy się dokładnie
	   na dolnej krawędzi sekcji. Dolna krawędź paska video (260vh w sekcji)
	   pozostaje 10vh nad końcem sekcji = ten sam oddech 10vh co w stanie
	   końcowym fazy C. Brak pustej przestrzeni. */
	height: 270vh;
	overflow: visible;
}
/* Wrapper pinowany — tylko video w środku */
.section--video-dragger .vd__pin {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 1;
}
.section--video-dragger .hero--intro-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	/* Animujemy właściwości boksu (top/left/width/height), żeby video
	   z object-fit:cover re-cover'owało materiał przy każdej zmianie
	   rozmiaru kontenera. Dzięki temu główny temat video pozostaje
	   wyśrodkowany niezależnie od fazy animacji.
	   GPU compositing przez translate3d wymusza dedykowaną warstwę
	   kompozytora — eliminuje migotanie i artefakty przy zmianie boksu. */
	will-change: top, left, width, height;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.section--video-dragger .hero--intro-video picture, 
.section--video-dragger .hero--intro-video img, 
.section--video-dragger .hero--intro-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Tekst — pozycjonowany absolutnie na CAŁEJ sekcji (300vh), w prawej kolumnie.
   NIE jest pinowany, więc razem z sekcją scrolluje się naturalnie do góry,
   podczas gdy video pozostaje pinned. Top: 170vh = tekst zaczyna się 1.7 ekranu
   poniżej startu pinu, dzięki czemu wjeżdża w widok PO zakończeniu zwężania
   video + krótkiej pauzie separacyjnej. */
.section--video-dragger .hero--intro-text-holder {
	position: absolute;
	top: 160vh;
	right: 0;
	width: 50%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9rem var(--gutter);
	z-index: 2;
}
.section--video-dragger .hero--intro-text {
	width: 100%;
	max-width: 520px;
	color: var(--color-text);
}
.section--video-dragger .hero--intro-text .section__label {
	font-size: var(--fs-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}
.section--video-dragger .hero--intro-text .section__heading {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
	margin-bottom: var(--space-6);
}
.section--video-dragger .hero--intro-text .section__body {
	font-size: var(--fs-lg);
	line-height: var(--lh-base);
	color: var(--color-text-soft);
}
/* === Mobile / tablet: stack — bez animacji, bez pinu ===
   gsap.matchMedia z '(min-width: 901px)' nie uruchomi timeline'a poniżej 901px,
   a po przejściu z desktop -> mobile (resize) automatycznie revertuje inline
   styles ustawione przez GSAP. CSS poniżej daje sensowny "static" fallback. */
@media (max-width: 900px) {
	.section--video-dragger {
		height: auto;
		padding: 0;
	}
	.section--video-dragger .vd__pin {
		position: relative;
		height: auto;
		overflow: visible;
	}
	.section--video-dragger .hero--intro-video {
		position: relative;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 60vh !important;
		transform: none !important;
		will-change: auto;
	}
	.section--video-dragger .hero--intro-text-holder {
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		min-height: 0;
		height: auto;
		padding: 4rem var(--gutter);
	}
}
/* ───────────────────────────────────────────────────────────────
   Blog — paginacja kafelków (mirror konwencji .reviews__pagination)
   ─────────────────────────────────────────────────────────────── */

.blog__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 1.5rem 0;
}

.blog__page-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.blog__page-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-border, rgba(0, 0, 0, .12));
    color: var(--color-text, #1a1a1a);
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    border-radius: 6px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog__page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--color-bg-hover, rgba(0, 0, 0, .04));
    border-color: var(--color-border-hover, rgba(0, 0, 0, .18));
}

.blog__page-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.blog__page-btn.is-active {
    background: var(--color-accent, #c4a882);
    border-color: var(--color-accent, #c4a882);
    color: #fff;
    cursor: default;
}

.blog__page-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.blog__page-btn--prev,
.blog__page-btn--next {
    font-size: 1.1rem;
}

/* Mobile: chowamy zewnętrzne numery — okienko ±2 wokół aktywnego */
@media (max-width: 560px) {
    .blog__page-btn--num.is-distant {
        display: none;
    }
    .blog__page-btn--num.is-ellipsis {
        pointer-events: none;
        border-color: transparent;
    }
}
/* ============================================================
   newsletter.css — Villa Verdi
   Style sekcji newslettera.
   Wklej do all.css (lub extras.css) w bloku sekcji.
   ============================================================ */

/* ── Sekcja ── */
.section--newsletter { 
  text-align: center;
}

/* Ciemne tło = tekst jasny (section--dark / section--black) */
.section--dark .section__label,
.section--dark .section__heading,
.section--dark .section__body,
.section--black .section__label,
.section--black .section__heading,
.section--black .section__body {
  color: var(--color-text-invert);
}

/* ── Wrapper formularza ── */
.newsletter {
  max-width: 560px;
  margin-inline: auto;
  margin-top: var(--space-8);
}

/* ── Rząd: input + przycisk ── */
.newsletter__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.newsletter__field {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Input ── */
.newsletter__input {
  width: 100%;
  padding: 0.75rem var(--space-4);
  border: 1.5px solid var(--color-bg-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
}

.newsletter__input::placeholder {
  color: var(--color-text-muted);
}

.newsletter__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.18);
}

/* Jasne tło sekcji — obramowanie ciemniejsze */
.section--default .newsletter__input,
.section--alt .newsletter__input,
.section--bright .newsletter__input {
  border-color: var(--color-bg-soft);
  background: #fff;
}

/* Ciemne tło sekcji — input jasny */
.section--dark .newsletter__input,
.section--black .newsletter__input {
  border-color: rgba(250, 247, 242, 0.3);
  color: var(--color-text-invert);
}

.section--dark .newsletter__input::placeholder,
.section--black .newsletter__input::placeholder {
  color: rgba(250, 247, 242, 0.5);
}

/* Błąd pola */
.newsletter__field.has-error .newsletter__input {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* ── Komunikat błędu przy polu ── */
.newsletter__field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: #c0392b;
  text-align: left;
  min-height: 1.2em;
}

/* ── Przycisk ── */
.newsletter__btn {
  flex-shrink: 0;
  position: relative;
  padding: 0.75rem var(--space-6);
  white-space: nowrap;
  font-size: var(--fs-base);
}

.newsletter__btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: newsletter-spin 0.7s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes newsletter-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Zgoda RODO ── */
.newsletter__consent {
  margin-top: var(--space-4);
  text-align: left;
}

.newsletter__consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.newsletter__consent-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.newsletter__consent-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
}

.newsletter__consent-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section--dark .newsletter__consent-text,
.section--black .newsletter__consent-text {
  color: rgba(250, 247, 242, 0.6);
}

.newsletter__consent.has-error .newsletter__consent-check {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* ── Komunikat globalny (success / error) ── */
.newsletter__message {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  min-height: 1.4em;
  transition: opacity 0.3s ease;
}

.newsletter__form.is-error .newsletter__message {
  color: #c0392b;
}

.newsletter__form.is-success .newsletter__message {
  color: #2e7d32;
}

.section--dark .newsletter__form.is-success .newsletter__message,
.section--black .newsletter__form.is-success .newsletter__message {
  color: #a5d6a7;
}

/* ── Stany formularza ── */

/* Loading — ukryj label przycisku, pokaż spinner */
.newsletter__form.is-loading .newsletter__btn-label {
  visibility: hidden;
}
.newsletter__form.is-loading .newsletter__btn-spinner {
  display: block;
}
.newsletter__form.is-loading .newsletter__btn {
  cursor: not-allowed;
  opacity: 0.8;
}

/* Success — ukryj rząd z inputem, zostaw komunikat */
.newsletter__form.is-success .newsletter__row,
.newsletter__form.is-success .newsletter__consent {
  display: none;
}
.newsletter__form.is-success .newsletter__message {
  font-size: var(--fs-base);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
}

/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile ── */
@media (max-width: 500px) {
  .newsletter__row {
    flex-direction: column;
  }

  .newsletter__btn {
    width: 100%;
    justify-content: center;
  }
  .newsletter__field {
    width: 100%;
    justify-content: center;
	}
}