/* ===========================================================================
   KORDYLÓWKA — light warm editorial

   Design language: warm off-white paper, editorial serif + geometric sans,
   generous whitespace, photography as the dark element. Concept D's
   information discipline is kept in the commercial sections (hero facts,
   route specs, difficulty scale, price list).

   THE CORE RHYTHM
   Calm cream band → loud full-bleed photography → calm cream band …
   The fixed background film supplies the "loud" half in four places (both
   heroes and both closing CTAs); the gallery accordion and route photography
   supply it elsewhere. Everything else is warm paper with dark ink.

   Structure of this file:
     1. Tokens
     2. Reset & base
     3. Type primitives
     4. Buttons
     5. Background film layer
     6. Bands & film windows  ← the page rhythm lives here
     7. Nav
     8. Hero
     9. Trasy
    10. Zniżki dla grup
    11. Cennik
    12. Galeria (accordion + strip)
    13. Dlaczego (editorial showcase)
    14. Opinie
    15. Mapa
    16. FAQ
    17. Agroturystyka
    18. CTA
    19. Footer
    20. Sticky CTA
    21. Responsive
    22. Reduced motion
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Paper — warm off-white, sampled from the client's reference (#EFEBE7). */
    --paper:        #EFEBE7;
    --paper-alt:    #E7E1D8;
    --paper-lift:   #F7F4EF;   /* cards sitting ON paper */

    /* Ink — deep warm brown-black. Warm rather than the reference's forest
       green, so the brand's warm palette (logo, orange, golden-hour film)
       stays coherent. */
    --ink:          #241C15;
    --ink-2:        rgba(36, 28, 21, 0.72);
    /* 0.64 not 0.48: this token carries eyebrows, spec labels and FAQ numbers
       at 11px, and the lighter value measured 2.97:1 on paper — below AA. */
    --ink-3:        rgba(36, 28, 21, 0.64);
    --rule:         rgba(36, 28, 21, 0.15);
    --rule-strong:  rgba(36, 28, 21, 0.30);

    /* Text sitting OVER photography / the film */
    --on-dark:      #F7F4EF;
    --on-dark-2:    rgba(247, 244, 239, 0.80);
    --on-dark-3:    rgba(247, 244, 239, 0.58);

    /* Accent — CTAs, prices and free/discount wording ONLY. Never decorative.
       Darkened from the old dark-theme values so it holds contrast on cream. */
    --orange:       #C2551E;
    --orange-lt:    #D97A3C;
    --hl:           #A94A17;   /* .hl on paper */
    --hl-on-dark:   #F0A968;   /* .hl over photography */

    /* Difficulty scale — semantic (green → red), darkened for legibility on
       paper. These are set as 11px uppercase labels, so each one is checked
       against WCAG AA for normal text (≥4.5:1 on --paper), not large text. */
    --d1: #2F6B33;
    --d2: #7A5C0D;
    --d3: #A84614;
    --d4: #A0332A;

    /* Type */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font:         "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Layout */
    --edge:         clamp(1.25rem, 5vw, 5rem);
    --measure:      42ch;
    --band-y:       clamp(5rem, 12vh, 9.5rem);
    --nav-h:        76px;

    /* Motion. --dur/--ease is the house default, measured off the reference
       (~350ms, ease-in-out). The route cards use a slower pair: a 4-property
       card transition at 350ms reads brisk, and the brief asked for "bardzo
       płynna, spokojna i elegancka". --ease-out is decelerating (no overshoot,
       nothing springs). */
    --dur:          350ms;
    --ease:         cubic-bezier(0.42, 0, 0.58, 1);
    --dur-slow:     520ms;
    --dur-zoom:     900ms;   /* the zoom is the slowest thing on the page */
    --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------ 2. Reset/base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0;
}

/* The italic carries the feeling — every headline is roman + one italic word. */
h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 400;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--orange); color: #fff; }

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

/* ------------------------------------------------- 3. Type primitives */
.eyebrow {
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1.5rem;
}

.band-head h2,
.cta-inner h2 {
    font-size: clamp(2.15rem, 4.4vw, 3.6rem);
    max-width: 16ch;
}

.band-lede {
    font-size: clamp(0.98rem, 1.15vw, 1.075rem);
    line-height: 1.75;
    color: var(--ink-2);
    max-width: var(--measure);
    margin-top: 1.75rem;
}

.muted { color: var(--ink-3); }

.hl { color: var(--hl); font-weight: 600; }
/* Over photography the highlight flips to the light warm variant. */
.film-window .hl,
.panel .hl,
.footer .hl { color: var(--hl-on-dark); }

.link-arrow {
    display: inline-block;
    margin-top: 2rem;
    padding-block: 0.375rem;        /* ≥24px tap target (WCAG 2.5.8) */
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 3px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--orange); border-color: var(--orange); }

.link-inline {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    transition: color var(--dur) var(--ease);
}
.link-inline:hover { color: var(--orange); }

/* ------------------------------------------------------------- 4. Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 1.0625rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

.btn-primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 1px 2px rgba(18, 14, 10, 0.10),
                0 10px 24px -16px rgba(146, 62, 18, 0.55);
}
.btn-primary:hover {
    background: #A94A17;
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); }

/* The secondary CTA sits over photography. A translucent outline is easy to
   miss there, so it is a SOLID warm-light button instead: high contrast, no
   extra colour introduced, and it reads as a real button at a glance.
   Visibility comes from contrast and size, never from a louder hue. */
.btn-light {
    background: var(--paper-lift);
    color: var(--ink);
    border-color: var(--paper-lift);
    box-shadow: 0 1px 2px rgba(18, 14, 10, 0.10),
                0 10px 24px -16px rgba(18, 14, 10, 0.40);
}
.btn-light:hover {
    background: #FFFDFA;
    border-color: #FFFDFA;
    transform: translateY(-1px);
}

.btn-large { padding: 1.1875rem 2.25rem; }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------- 5. Background film */
/* ONE fixed layer behind the whole page, scrubbed by scroll. It is only
   *visible* through the film windows; cream bands sit opaquely on top. */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #1B1611;
}

.bg-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-poster {
    display: none;
    position: absolute;
    inset: 0;
    background-image: url("../public/img/poster.jpg");
    background-size: cover;
    background-position: center;
}

.bg-tint {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(20, 16, 12, 0.20) 0%, rgba(20, 16, 12, 0.48) 70%, rgba(20, 16, 12, 0.62) 100%);
}

#page { position: relative; z-index: 1; }

/* ------------------------------------------- 6. Bands & film windows */
/* Calm cream, then loud photography, alternating. */

.band {
    position: relative;
    background: var(--paper);
    padding: var(--band-y) 0;
}

.band-alt { background: var(--paper-alt); }

.band + .band { border-top: 1px solid var(--rule); }

.film-window {
    position: relative;
    background: transparent;
    color: var(--on-dark);
    padding: var(--band-y) 0;
}

.film-window h1,
.film-window h2,
.film-window h3 { color: var(--on-dark); }

/* Local darkening behind the copy. The global .bg-tint alone is not enough on
   the film's brightest frames, and these windows carry small type. */
.film-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg,
        rgba(20, 16, 12, 0.78) 0%,
        rgba(20, 16, 12, 0.54) 44%,
        rgba(20, 16, 12, 0.26) 100%);
    pointer-events: none;
}

.film-window.cta-section::before {
    background: radial-gradient(80% 72% at 50% 50%,
        rgba(20, 16, 12, 0.76) 0%,
        rgba(20, 16, 12, 0.60) 55%,
        rgba(20, 16, 12, 0.38) 100%);
}

/* Dissolve from the photography into the cream band below, so the window
   doesn't terminate on a hard line. */
.film-window::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    height: 18vh;
    background: linear-gradient(to bottom, transparent, var(--paper));
    pointer-events: none;
}
.film-window.cta-section::after { background: linear-gradient(to bottom, transparent, var(--ink)); }

.film-window > * { position: relative; z-index: 2; }

.film-window .eyebrow { color: var(--on-dark-3); }
.film-window .band-lede,
.film-window .cta-lede,
.film-window .hero-lede { color: var(--on-dark-2); }
.film-window .eyebrow,
.film-window .cta-lede,
.film-window .hero-lede,
.film-window .band-lede { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5); }

.band-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--edge);
}

.band-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* -------------------------------------------------------------- 7. Nav */
/* Sticky, and carrying its own warm paper background from the first paint —
   never transparent, so the hero photograph never shows through and the logo
   and menu are always legible. The quiet bar-over-photography treatment
   luxury hotel sites use. */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(239, 235, 231, 0.90);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    transition: background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* Once scrolling starts it firms up very slightly and casts a soft shadow —
   an accent on an already-finished bar, not a change of state. */
.nav.is-stuck {
    background: rgba(239, 235, 231, 0.97);
    box-shadow: 0 1px 28px rgba(36, 28, 21, 0.10);
}

.nav-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--edge);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: 0.5rem;   /* hit area */
}
.nav-logo .logo { width: 30px; height: 30px; object-fit: contain; }
.nav-wordmark {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.nav-menu { display: flex; gap: 2.25rem; }
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* the tap target is the full nav height, not just the 15px text box */
    padding-block: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    transition: color var(--dur) var(--ease);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: calc(0.875rem - 6px);
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }

/* The phone CTA is filled from the start — it is the point of the site. */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.6875rem 1.125rem;
    color: #fff;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 6px;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-cta:hover { background: #A94A17; border-color: #A94A17; }
.nav-cta-ico { font-size: 0.875rem; line-height: 1; }

/* ------------------------------------------------------------- 8. Hero */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: clamp(4rem, 12vh, 8rem);
}

.hero-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--edge);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-eyebrow { margin-bottom: 1.25rem; }

.hero-title {
    font-size: clamp(3rem, 8.5vw, 6.5rem);
    line-height: 0.98;
    max-width: 12ch;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.42);
}

.hero-lede {
    margin-top: 1.5rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
    max-width: 34ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.5rem;
}

.hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    align-self: flex-start;
    margin-top: 3rem;
    padding-block: 0.375rem;        /* ≥24px tap target */
    font-size: 0.875rem;
    color: var(--on-dark-2);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
    transition: color var(--dur) var(--ease);
}
.hero-rating:hover { color: var(--hl-on-dark); }
.hero-rating .stars { color: var(--hl-on-dark); letter-spacing: 0.1em; font-size: 0.8125rem; }
.hero-rating strong { color: var(--on-dark); font-weight: 600; }

/* The award is a genuine credential, so it reads as a badge rather than a
   faint caption — the way a hotel presents a star or a guild mark. Bordered,
   backed and legible, but still quiet: no accent colour, no fill. */
.hero-award {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    align-self: flex-start;
    margin-top: 1.5rem;
    padding: 0.8125rem 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--on-dark-2);
    background: rgba(20, 16, 12, 0.40);
    border: 1px solid rgba(247, 244, 239, 0.28);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 46ch;
}
.hero-award strong {
    display: block;
    font-weight: 600;
    color: var(--on-dark);
}
.hero-award-ico {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ------------------------------------------------------------ 9. Trasy */
/* Four comparable cards in one row. Structure follows the client's card
   references directly: a photograph that draws the eye (~57% of the card),
   then a LIGHT information panel carrying everything the visitor needs to
   choose — route name, audience, time, distance, and a filled CTA.

   Why the panel and not text-on-photo: legibility must not depend on the
   photograph. These are candid midday shots with bright sky and water; white
   text over them is never reliably readable. On a solid panel it always is.
   The Airbnb/Booking scanning quality the brief asks for comes from this:
   every card exposes the same four facts in the same place, so the eye can
   compare down a row without reading anything on an image.

   Kordylówka's own identity, not the reference's: warm paper panel instead of
   pure white, Playfair route names, the 4-step difficulty scale as the badge,
   tabular numerals for time/distance (the same treatment as the hero fact bar
   and the price list), and the house orange as the CTA. */

.routes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 1.6vw, 1.625rem);
    align-items: stretch;
}

.rcard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    background: var(--paper-lift);
    border: 1px solid rgba(36, 28, 21, 0.09);
    box-shadow: 0 1px 2px rgba(36, 28, 21, 0.05),
                0 12px 28px -18px rgba(36, 28, 21, 0.30);
    transition: box-shadow var(--dur-slow) var(--ease-out),
                border-color var(--dur-slow) var(--ease-out);
}

/* ---- media: attention, not domination -------------------------------- */
.rcard-media {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 6;            /* lands the photo at ~57% of the card */
    flex: none;
    overflow: hidden;               /* contains the zoom */
    background: var(--paper-alt);
    border-radius: 11px 11px 0 0;
}

.rcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform var(--dur-zoom) var(--ease-out);
    will-change: transform;
}

/* Subtle veil, faded in on card hover. */
.rcard-media::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to top,
        rgba(18, 14, 10, 0.30), rgba(18, 14, 10, 0.10));
    transition: opacity var(--dur-slow) var(--ease-out);
    pointer-events: none;
}

/* ---- difficulty badge, on the photo ---------------------------------- */
.rcard-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 999px;
    background: rgba(247, 244, 239, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(18, 14, 10, 0.18);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}

/* The 4-step scale, semantic green → red, on a light badge. */
.tier-scale { display: inline-flex; gap: 2px; }
.tier-scale i {
    display: block;
    width: 7px;
    height: 3px;
    border-radius: 1px;
    background: rgba(36, 28, 21, 0.20);
}
.rcard-badge.d1 .tier-scale i.on { background: var(--d1); }
.rcard-badge.d2 .tier-scale i.on { background: var(--d2); }
.rcard-badge.d3 .tier-scale i.on { background: var(--d3); }
.rcard-badge.d4 .tier-scale i.on { background: var(--d4); }

/* ---- information panel ------------------------------------------------ */
.rcard-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(0.9375rem, 1.2vw, 1.25rem);
    color: var(--ink);
}

.rcard-body h3 {
    font-size: clamp(1.125rem, 1.45vw, 1.4rem);
    line-height: 1.15;
    text-wrap: balance;
    /* two reserved lines keep every card's panel on the same baseline grid */
    min-height: calc(2 * 1.15em);
}
.rcard-body h3 .dash { color: var(--ink-3); font-style: normal; }

.rcard-audience {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-2);
    min-height: calc(2 * 1.4em);    /* same reason as the title */
    align-items: flex-start;
}
/* group.svg is black line-art — on paper it needs tinting, not inversion. */
.rcard-audience .meta-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 0.1875rem;          /* optical align to the first text line */
    opacity: 0.6;
}

/* Time + distance as a pair of tinted cells — the two facts a visitor
   compares first, so they get their own quiet plate. */
.rcard-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 1rem;
    /* minimum gap before the CTA; the button's auto margin adds any slack */
    margin-bottom: 1rem;
    background: rgba(36, 28, 21, 0.10);
    border-radius: 8px;
    overflow: hidden;
}
.rcard-spec > div {
    background: rgba(36, 28, 21, 0.045);
    padding: 0.625rem 0.75rem 0.6875rem;
    text-align: center;
}
.rcard-spec dt {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.1875rem;
}
.rcard-spec dd {
    font-family: var(--font);
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}

/* ---- CTA: filled and obvious from the first moment ------------------- */
/* margin-top:auto pins it to the bottom, so the button sits on one line
   across all four cards however the titles wrap. The minimum gap above lives
   on .rcard-spec margin-bottom — NOT a margin-block-start here, which maps to
   margin-top and would silently override the auto. */
.rcard-btn {
    margin-top: auto;
    width: 100%;
    padding: 0.9375rem 1rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

/* Only the button's OWN hover changes its colour — never the card's. */
.rcard-btn:hover {
    background: #A94A17;
    border-color: #A94A17;
}

/* ---- card hover: zoom + veil only, layout untouched ------------------ */
@media (hover: hover) {
    .rcard:hover,
    .rcard:focus-within {
        border-color: rgba(36, 28, 21, 0.16);
        box-shadow: 0 1px 2px rgba(36, 28, 21, 0.06),
                    0 22px 44px -20px rgba(36, 28, 21, 0.38);
    }
    .rcard:hover .rcard-media img,
    .rcard:focus-within .rcard-media img { transform: scale(1.06); }

    .rcard:hover .rcard-media::after,
    .rcard:focus-within .rcard-media::after { opacity: 1; }
}

/* -------------------------------------------- 10. Zniżki dla grup */
.promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.promo-copy h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: 18ch; }
.promo-copy .btn { margin-top: 2.5rem; }

.promo-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.promo-tier {
    background: var(--paper-lift);
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
    text-align: center;
}
.promo-pct {
    display: block;
    font-family: var(--font);
    font-size: clamp(3rem, 7vw, 5.25rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--orange);
}
.promo-tier-label {
    display: block;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--ink-2);
}
.promo-tier-label strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------- 11. Cennik */
.pricing-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.pricing-inner .band-head { margin-bottom: 0; }

.price-list { border-top: 1px solid var(--rule); }

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}

.price-item {
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.price-tag {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hl);
    border: 1px solid rgba(169, 74, 23, 0.35);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

/* Uses --hl rather than --orange: at the small end of the clamp these numerals
   are 22px, just under the WCAG "large text" threshold, so they need the full
   4.5:1 that --orange doesn't quite reach on paper. Semantically apt too —
   the same colour carries every mention of money. */
.price-amount {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--hl);
    white-space: nowrap;
}

.price-note {
    margin-top: 1.75rem;
    font-size: 0.875rem;
    color: var(--ink-2);
}

/* --------------------------------------------------------- 12. Galeria */
.gallery { padding-bottom: var(--band-y); }

/* Full-bleed: break out of every padded ancestor. body has overflow-x:hidden
   so 100vw is safe. On paper, this band of photography IS the "loud" beat. */
/* ONE horizontal row of expanding panels — never wrapped, never stacked.
   MODULAR: adding an <article class="panel"> re-divides the row automatically,
   because every panel is `flex: 1 1 0` and the open one simply takes a 2.8
   share. No CSS or JS change is needed to add or swap photographs.

   `flex-basis: 0` is load-bearing: it makes the grow ratios divide the WHOLE
   row (2.8 : 1), which is what produces the wide-open panel. With a percentage
   basis, grow only divides the leftover slack and the expansion nearly
   vanishes — measured 302px vs 274px instead of 439px vs 157px. Do not swap
   the basis for a percentage in order to make the row wrap. */
.accordion {
    display: flex;
    gap: 10px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(340px, 56vh, 560px);
    background: var(--paper);
}

.panel {
    position: relative;
    /* basis 0 — see the note on .accordion above */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: var(--paper-alt);
    cursor: pointer;
    /* Only flex-grow animates, and only on hover — never during scroll, so it
       never competes with the film's seeking for GPU budget. */
    transition: flex-grow var(--dur) var(--ease);
}

.panel.is-open { flex-grow: 2.8; }

/* The image NEVER scales. Panel height is fixed, so narrowing the panel crops
   horizontally rather than zooming — "powiększa, nie zoomuje". */
.panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Legibility scrim, bottom-weighted. */
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12, 10, 8, 0.86) 0%,
        rgba(12, 10, 8, 0.42) 28%,
        rgba(12, 10, 8, 0.06) 55%,
        transparent 100%);
    pointer-events: none;
}

/* "Poznaj Kordylówkę" reuses the accordion but has NO captions, so the heavy
   bottom scrim (which existed to keep caption text legible) is softened to a
   faint vignette — the photographs carry the section. Everything else — the
   flex-grow expand, proportions, timing, touch carousel — is identical. */
.accordion-plain .panel::after {
    background: linear-gradient(to top,
        rgba(12, 10, 8, 0.30) 0%,
        rgba(12, 10, 8, 0.10) 26%,
        transparent 55%);
}

.panel-mark {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Padding is tighter than the 5-panel version: with 7 panels a collapsed one
   is ~157px wide, and 1.75rem each side left too little room for the title. */
.panel-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.5rem 1.25rem;
}

.panel-caption h3 {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
}

/* Description reveals with the panel. grid-template-rows 0fr→1fr collapses the
   row, so the caption block — anchored to the bottom — makes the title rise
   and fall in one connected movement, exactly as the reference does.
   The grid MUST have a single child, hence the .panel-desc wrapper: putting
   the grid on the <p> itself would promote its text runs and .hl spans to
   separate grid items and stack them on separate rows. */
.panel-desc {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows var(--dur) var(--ease),
                opacity 220ms var(--ease),
                margin-top var(--dur) var(--ease);
}
.panel-desc > p {
    min-height: 0;
    overflow: hidden;
    max-width: 42ch;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.84);
}
.panel.is-open .panel-desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.625rem;
}

/* -------------------------------------------------------- 13. Dlaczego */
/* An editorial showcase of what is included, not a feature grid with icons.
   Sits directly below the hero: a visitor learns what they get before they
   start comparing routes.

   Taken from the client's reference: photography is the dominant element, the
   hierarchy is three clean tiers (small uppercase marker → display line →
   quiet supporting description), corners are softly rounded, whitespace is
   generous, and a hairline closes each card off.

   Adapted rather than copied: the reference varies its card proportions and
   image placement. Here all four are identical — one square image, one title,
   one description — so the row scans as a set.

   MODULAR IMAGES: swap public/why/why-N.svg for a real photograph of the same
   square crop and change only the src. `aspect-ratio: 1/1` + `object-fit:
   cover` means no layout change is needed, whatever the source dimensions. */

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
    align-items: stretch;
}

.wcard {
    display: flex;
    flex-direction: column;
    /* the card itself is transparent — the photograph is the object, not a box */
    transition: transform var(--dur-slow) var(--ease-out);
}

/* ---- the photograph: the primary visual element ---------------------- */
.wcard-media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;            /* identical square across all four */
    overflow: hidden;               /* contains the zoom */
    border-radius: 14px;
    background: var(--paper-alt);
    box-shadow: 0 1px 2px rgba(36, 28, 21, 0.05),
                0 16px 32px -22px rgba(36, 28, 21, 0.35);
    transition: box-shadow var(--dur-slow) var(--ease-out);
}

.wcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.005);
    transition: transform var(--dur-zoom) var(--ease-out);
    will-change: transform;
}

/* A whisper of warmth over the image on hover — never a dark veil, because on
   a light page that would read as switching the photograph off. */
.wcard-media::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(to top,
        rgba(36, 28, 21, 0.16), rgba(36, 28, 21, 0.02));
    transition: opacity var(--dur-slow) var(--ease-out);
    pointer-events: none;
}

/* ---- the text: supports the photograph, never competes ---------------- */
.wcard-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
    /* the hairline that closes the composition, as in the reference */
    border-top: 1px solid var(--rule);
    margin-top: 1.5rem;
    transition: border-color var(--dur-slow) var(--ease-out);
}

.wcard-index {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    margin-bottom: 0.75rem;
}

.wcard-body h3 {
    font-size: clamp(1.25rem, 1.7vw, 1.625rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    /* two reserved lines keep all four descriptions on one baseline */
    min-height: calc(2 * 1.14em);
}

.wcard-desc {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 34ch;
}

/* ---- hover: calm, and only on pointer devices ------------------------- */
@media (hover: hover) {
    .wcard:hover { transform: translateY(-4px); }

    .wcard:hover .wcard-media {
        box-shadow: 0 1px 2px rgba(36, 28, 21, 0.06),
                    0 28px 52px -24px rgba(36, 28, 21, 0.42);
    }
    .wcard:hover .wcard-media img { transform: scale(1.05); }
    .wcard:hover .wcard-media::after { opacity: 1; }
    .wcard:hover .wcard-body { border-top-color: var(--rule-strong); }
}

/* ---------------------------------------------------------- 14. Opinie */
.reviews-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.reviews-inner .band-head { margin-bottom: 0; }

.review-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--rule);
    border-block: 1px solid var(--rule);
}

.review {
    background: var(--paper);
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 2px solid var(--orange);
}

.review-stars {
    color: var(--orange);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.review blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}

/* ------------------------------------------------------------ 15. Mapa */
.map-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.map-inner .band-head { margin-bottom: 0; }

.map-address {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 2rem 0;
}

.map-frame {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--rule);
}
/* On a light page Google's own light embed finally belongs — only a whisper of
   desaturation is needed to settle it into the warm palette. */
.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.18) sepia(0.06);
}

/* ------------------------------------------------------------- 16. FAQ */
.faq-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.faq-inner .band-head { margin-bottom: 0; }

.faq-list { border-top: 1px solid var(--rule); }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item summary {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1.5rem 0;
    cursor: pointer;
    list-style: none;
    transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--orange); }

.faq-n {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.faq-q {
    flex: 1;
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.45;
}

.faq-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    align-self: center;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: var(--ink-2);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-icon::before { top: 6px; left: 0; width: 14px; height: 1px; }
.faq-icon::after  { left: 6px; top: 0; width: 1px; height: 14px; }

.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item[open] .faq-icon::before { background: var(--orange); }

.faq-a { padding: 0 0 1.75rem calc(0.6875rem * 2 + 1.25rem); }
.faq-a p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-2);
    max-width: var(--measure);
}

/* -------------------------------------------------- 17. Agroturystyka */
.agro-hero {
    min-height: 58vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-h) + 2rem);
}
.agro-title {
    font-size: clamp(2.5rem, 6.5vw, 5rem);
    line-height: 1;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.42);
}

/* Boutique-hotel room cards. Photograph is the object (~72% of the card),
   the panel below carries only name, capacity, beds, location and the CTA.
   Same design language as the route cards and the "Dlaczego" showcase — warm
   paper panel, house orange CTA, tabular facts — just tuned for a taller,
   more image-led card as in the reference.

   HOVER-READY: .room-media holds two stacked images. The bathroom
   (.room-photo-alt) is positioned on top at opacity 0, so a later step only
   needs to fade it in on hover — the markup and layering are already done.
   No hover animation is wired up yet, by request. */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: stretch;
}

.room-card {
    display: flex;
    flex-direction: column;
    background: var(--paper-lift);
    border: 1px solid rgba(36, 28, 21, 0.09);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(36, 28, 21, 0.05),
                0 16px 34px -22px rgba(36, 28, 21, 0.35);
    transition: box-shadow var(--dur-slow) var(--ease-out);
}

.room-media {
    position: relative;
    margin: 0;
    /* A tall portrait crop so the photograph is ~72% of the card height even
       in the narrow 4-up desktop column — the boutique-hotel proportion from
       the reference. Paired with a deliberately compact info panel below. */
    aspect-ratio: 4 / 6.9;
    flex: none;
    overflow: hidden;
    background: var(--paper-alt);
}
/* Both images fill the frame and are stacked. The room photo is the base; the
   bathroom photo lies on top at opacity 0. On hover they crossfade (opacity)
   with a very subtle scale(1.02) on both — the JW PEI reference effect. No
   flip, rotate or slide. */
.room-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-zoom) var(--ease-out);
    will-change: opacity, transform;
    backface-visibility: hidden;   /* avoids a hairline seam during the fade */
}
.room-photo-alt { opacity: 0; }

@media (hover: hover) {
    .room-card:hover .room-photo { transform: scale(1.02); }
    .room-card:hover .room-photo-alt { opacity: 1; }
}

/* Keyboard parity: focusing "Zobacz więcej" reveals the bathroom too. */
.room-card:focus-within .room-photo-alt { opacity: 1; }
.room-card:focus-within .room-photo { transform: scale(1.02); }

.room-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(1rem, 1.3vw, 1.25rem);
}
.room-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.room-facts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.75rem;
    /* minimum gap before the CTA; the auto margin below adds any extra slack */
    margin-bottom: 1.25rem;
    border-top: 1px solid var(--rule);
}
.room-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.room-facts dt {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.room-facts dd {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    text-align: right;
}

.room-btn {
    /* pins the CTA to the card bottom so it aligns across a row whatever the
       facts height. (Do NOT also set margin-block-start: it maps to margin-top
       and, declared later, silently overrides this auto — the min gap lives on
       .room-facts margin-bottom instead.) */
    margin-top: auto;
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--orange);
    border: 1px solid var(--orange);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
.room-btn:hover { background: #A94A17; border-color: #A94A17; }

@media (hover: hover) {
    .room-card:hover {
        box-shadow: 0 1px 2px rgba(36, 28, 21, 0.06),
                    0 26px 48px -22px rgba(36, 28, 21, 0.40);
    }
}

/* ---- Udogodnienia w obiekcie — four icon groups --------------------- */
.facility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.facility {
    background: var(--paper-alt);   /* sits on a band-alt section */
    padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.375rem, 2vw, 1.75rem);
}
.facility-ico {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin-bottom: 1.5rem;
    color: var(--orange);
}
.facility-ico svg { width: 100%; height: 100%; }
.facility h3 {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}
.facility-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border-top: 1px solid var(--rule);
    padding-top: 1rem;
}
.facility-list li {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.facility-muted { display: block; font-size: 0.75rem; color: var(--ink-3); }

.amenities-inner,
.food-inner,
.attractions-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.amenities-inner .band-head,
.food-inner .band-head,
.attractions-inner .band-head { margin-bottom: 0; }

.amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--rule);
}
.amenities-list li {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--ink-2);
}
.amenities-list li:nth-child(odd) { padding-right: 2rem; }
.amenities-list li:nth-child(even) { padding-left: 2rem; }

.food-copy {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    max-width: 32ch;
}

/* Okolica — a compact list: place + a short evocative note. A touch richer than
   a bare label, but still one line per place (not paragraphs). */
.attractions-list { border-top: 1px solid var(--rule); }
.attractions-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--rule);
}
.attractions-list .a-name {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    color: var(--ink);
    white-space: nowrap;
}
.attractions-list .a-note {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-2);
    text-align: right;
}
@media (max-width: 560px) {
    .attractions-list li { flex-direction: column; gap: 0.2rem; padding: 1rem 0; }
    .attractions-list .a-name { white-space: normal; }
    .attractions-list .a-note { text-align: left; }
}

/* ------------------------------------------------------------- 18. CTA */
.cta-section {
    text-align: center;
    padding: clamp(6rem, 16vh, 11rem) 0;
}
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-inner .eyebrow { margin-bottom: 1.5rem; }
.cta-inner h2 { max-width: 14ch; }

.cta-lede { margin-top: 1.5rem; font-size: 1.0625rem; }

.cta-phone {
    display: block;
    margin-top: 2.5rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--on-dark);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
    transition: color var(--dur) var(--ease);
}
.cta-phone:hover { color: var(--hl-on-dark); }

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 2.5rem;
}

/* ---------------------------------------------------------- 19. Footer */
/* The one deep block on the page — a full stop after all that paper. */
.footer {
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--on-dark);
    padding: clamp(3.5rem, 8vh, 6rem) 0 2.5rem;
}

.footer-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid rgba(247, 244, 239, 0.16);
}
.footer-mark {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
}
.footer-phone {
    display: inline-block;
    padding-block: 0.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--on-dark-2);
    transition: color var(--dur) var(--ease);
}
.footer-phone:hover { color: var(--hl-on-dark); }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.footer-col h4 {
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-dark-3);
    margin-bottom: 1.25rem;
}
.footer-col p, .footer-col address {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.7;
    color: var(--on-dark-2);
}
.footer-col .muted { color: var(--on-dark-3); }
/* 18px text boxes → padded to clear the 24×24 minimum. */
.footer-col a {
    display: inline-block;
    padding-block: 0.3125rem;
    transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--hl-on-dark); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid rgba(247, 244, 239, 0.16);
    font-size: 0.75rem;
    color: var(--on-dark-3);
}
.footer-bottom .muted { color: var(--on-dark-3); }

/* ------------------------------------------------------ 20. Sticky CTA */
.sticky-cta {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(239, 235, 231, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------ 21. Responsive */
@media (max-width: 1080px) {
    /* Two up: four cards side by side get too narrow to read. */
    .routes-grid { grid-template-columns: repeat(2, 1fr); }
    .rcard-media { aspect-ratio: 4 / 3; }

    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); }
    .facility-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .promo,
    .pricing-inner,
    .reviews-inner,
    .map-inner,
    .faq-inner,
    .amenities-inner,
    .food-inner,
    .attractions-inner {
        grid-template-columns: 1fr;
    }
    .pricing-inner .band-head,
    .reviews-inner .band-head,
    .map-inner .band-head,
    .faq-inner .band-head,
    .amenities-inner .band-head,
    .food-inner .band-head,
    .attractions-inner .band-head { margin-bottom: 2.5rem; }
}

@media (hover: none), (max-width: 768px) {
    /* The scroll-scrubbed film is desktop-only; a still stands in for it. */
    .bg-video { display: none; }
    .mobile-poster { display: block; }

    body { padding-bottom: 74px; }
    .sticky-cta { display: block; }

    .nav-menu { gap: 1rem; }
    .nav-link { font-size: 0.75rem; }
    .nav-wordmark { display: none; }
    .nav-cta {
        padding: 0.5625rem 0.75rem;
        font-size: 0.6875rem;
        gap: 0.3125rem;
    }

    .hero { min-height: 92vh; }
    .hero-actions .btn { flex: 1 1 100%; }

    /* Accordion → scroll-snapping row of portrait panels. Hover doesn't exist
       here, so every caption is shown rather than hidden behind an interaction. */
    /* One swipeable, scroll-snapping row — hover does not exist here, so every
       caption is shown rather than hidden behind an interaction. */
    .accordion {
        height: auto;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--edge);
        scrollbar-width: none;
    }
    .accordion::-webkit-scrollbar { display: none; }
    .panel {
        flex: 0 0 78%;
        height: 60vh;
        scroll-snap-align: center;
        cursor: default;
    }
    .panel.is-open { flex-grow: 0; }
    .panel-desc {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 0.625rem;
    }
    .panel-caption h3 { white-space: normal; }

    /* Routes stay TWO up on phones (client request) — 4 on desktop, 2 on mobile.
       A taller crop + tighter type keep the narrow card elegant, like the rooms. */
    .routes-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
    .rcard { border-radius: 12px; }
    .rcard-media { aspect-ratio: 4 / 5; }
    .rcard-body { padding: 0.875rem; }
    .rcard-body h3 { font-size: 1.0625rem; }
    .rcard-audience { font-size: 0.6875rem; }
    .rcard-spec { margin-top: 0.75rem; margin-bottom: 0.875rem; }
    .rcard-spec > div { padding: 0.5rem 0.375rem 0.5625rem; }
    .rcard-spec dt { letter-spacing: 0.1em; }
    .rcard-spec dd { font-size: 0.8125rem; letter-spacing: -0.02em; }
    .rcard-btn { padding: 0.75rem 0.5rem; font-size: 0.75rem; }
    .rcard-badge { font-size: 0.5625rem; padding: 0.3125rem 0.5rem; }

    /* Two up stays readable on a phone and keeps the row scannable; a single
       column would push the fourth card three screens down. */
    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
    .wcard-body { padding-top: 1.125rem; margin-top: 1.125rem; }
    .wcard-body h3 { font-size: 1.0625rem; }
    .wcard-desc { font-size: 0.75rem; }

    /* Rooms stay TWO up on phones (client's explicit request — never one full
       screen wide). Tighter gap + rounding so two cards fit elegantly at 375px. */
    .rooms-grid { gap: 0.875rem; }
    .room-card { border-radius: 16px; }
    .room-body { padding: 1rem 0.875rem; }
    .room-body h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
    .room-btn { padding: 0.8125rem 0.75rem; font-size: 0.75rem; }

    /* A ~160px-wide card can't fit label and value side by side — the value
       wrapped raggedly and "Poddasze" was clipped. Stack them left-aligned:
       small label, value beneath, so any length wraps cleanly. */
    .room-facts > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.0625rem;
    }
    .room-facts dd { font-size: 0.8125rem; text-align: left; }

    .amenities-list { grid-template-columns: 1fr; }
    .amenities-list li:nth-child(odd),
    .amenities-list li:nth-child(even) { padding-left: 0; padding-right: 0; }

    .cta-actions .btn { flex: 1 1 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 560px) {
    /* Facilities: one column on narrow phones so labels sit on clean lines
       instead of wrapping mid-phrase in a cramped two-column grid. */
    .facility-grid { grid-template-columns: 1fr; }
    .facility { padding: 1.375rem 1.25rem; }
}

@media (max-width: 520px) {
    :root { --nav-h: 64px; }
    /* number hidden, glyph kept — the sticky bar below carries the full CTA */
    .nav-cta { font-size: 0; padding: 0.5rem 0.625rem; gap: 0; }
    .nav-cta-ico { font-size: 0.9375rem; }
    .promo-tiers { grid-template-columns: 1fr; }
    .faq-a { padding-left: 0; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; }
}

/* -------------------------------------------------- 22. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        /* delay must go too: the modal overlay delays its `visibility` flip by
           --dur on close, and without this it would keep swallowing clicks for
           350ms after the dialog had visually gone. */
        transition-delay: 0s !important;
        animation-delay: 0s !important;
    }
    /* No zoom, no lift. Everything is already visible at rest, so nothing is
       lost by removing the motion entirely. */
    .rcard:hover .rcard-media img,
    .rcard:focus-within .rcard-media img { transform: scale(1.01); }
    .wcard:hover { transform: none; }
    .wcard:hover .wcard-media img { transform: scale(1.005); }
    /* Room cards: keep the crossfade (opacity is safe) but drop the scale. */
    .room-card:hover .room-photo,
    .room-card:focus-within .room-photo { transform: none; }
}

/* ===========================================================================
   23. MULTI-PAGE additions (home paths, gallery teaser, contact, mobile nav)
   =========================================================================== */

/* ---- mobile hamburger (4 nav items no longer fit inline) ---------------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Home: two pillar paths ------------------------------------------- */
.paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.path-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    background: var(--paper-lift);
    border: 1px solid rgba(36, 28, 21, 0.09);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(36, 28, 21, 0.05),
                0 16px 34px -22px rgba(36, 28, 21, 0.35);
    transition: box-shadow var(--dur-slow) var(--ease-out);
}
.path-media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.path-media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.01);
    transition: transform var(--dur-zoom) var(--ease-out);
}
@media (hover: hover) {
    .path-card:hover { box-shadow: 0 1px 2px rgba(36,28,21,.06), 0 26px 50px -24px rgba(36,28,21,.42); }
    .path-card:hover .path-media img { transform: scale(1.05); }
}
.path-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
}
.path-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.path-body p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.path-more {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--orange);
}

/* ---- Home: gallery teaser --------------------------------------------- */
.teaser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}
.teaser-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    transition: opacity var(--dur) var(--ease);
}
.teaser-grid img:hover { opacity: 0.85; }

/* ---- Contact page ------------------------------------------------------ */
.contact-inner { max-width: 640px; }
.contact-phone {
    color: var(--ink);
    text-shadow: none;
    margin-top: 0.5rem;
}
.contact-phone:hover { color: var(--orange); }
.contact-address {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 1.5rem 0 1rem;
}
.contact-mail { margin-bottom: 2rem; font-size: 0.9375rem; }
.contact-actions { justify-content: flex-start; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 760px) {
    .paths-grid { grid-template-columns: 1fr; }
}
@media (hover: none), (max-width: 768px) {
    .nav-toggle { display: flex; color: inherit; }
    /* menu becomes a drop panel toggled by the hamburger */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem var(--edge) 1rem;
        background: rgba(239, 235, 231, 0.98);
        backdrop-filter: blur(18px) saturate(1.1);
        -webkit-backdrop-filter: blur(18px) saturate(1.1);
        border-bottom: 1px solid var(--rule);
        box-shadow: 0 12px 28px rgba(36, 28, 21, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    }
    .nav.nav-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-menu .nav-link {
        display: block;
        padding: 0.875rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--rule);
    }
    .nav-menu .nav-link::after { display: none; }
    .teaser-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   24. Lightbox — tap/click a gallery photo to see it enlarged full-screen.
   On touch this replaces the (hover-less) expand; on desktop it's click-to-zoom.
   =========================================================================== */
.panel { cursor: zoom-in; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(18, 14, 10, 0.93);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform var(--dur) var(--ease-out);
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
    position: absolute;
    top: clamp(0.75rem, 3vw, 1.75rem);
    right: clamp(0.75rem, 3vw, 1.75rem);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    background: rgba(247, 244, 239, 0.14);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.lightbox-close:hover { background: rgba(247, 244, 239, 0.28); }

@media (prefers-reduced-motion: reduce) {
    .lightbox img { transform: none; }
}

/* ===========================================================================
   25. Masonry gallery (Galeria page) — photography-led.
   A natural multi-column masonry: images keep their aspect ratio (varied
   heights), sit on the design-system radius, and zoom gently on hover — no
   overlay, no colour shift, no glass. Add a photo by appending one
   <figure class="masonry-item"> inside .masonry; the columns re-balance
   themselves — no other change needed.
   =========================================================================== */
.band.gallery-head {
    /* compact header (no film hero): clear the fixed nav, then a small gap */
    padding-block: calc(var(--nav-h) + clamp(1.5rem, 4.5vh, 3.25rem)) clamp(1rem, 2.5vh, 1.75rem);
}
.gallery-title {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-top: 0.4rem;
}
.gallery-intro {
    margin-top: 0.6rem;
    color: var(--ink-2);
    font-size: 0.95rem;
}
.band.gallery-masonry { padding-block: 0 var(--band-y); }
.gallery-head + .gallery-masonry { border-top: 0; }   /* read as one paper surface */

.masonry {
    columns: 4;
    column-gap: 12px;                 /* small gaps between photos */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--edge);
}
.masonry-item {
    break-inside: avoid;              /* never split a photo across columns */
    margin: 0 0 12px;                 /* the vertical gap */
    border-radius: 14px;             /* uniform, design-system radius */
    overflow: hidden;                 /* contains the hover zoom */
    background: var(--paper-alt);
    box-shadow: 0 1px 2px rgba(36, 28, 21, 0.05),
                0 16px 32px -24px rgba(36, 28, 21, 0.30);
    cursor: zoom-in;
    transition: box-shadow var(--dur-slow) var(--ease-out);
}
.masonry-item img {
    display: block;
    width: 100%;
    height: auto;                     /* keep aspect ratio → varied heights */
    transform: scale(1.001);          /* pre-promote to its own layer */
    transition: transform var(--dur-zoom) var(--ease-out);
    will-change: transform;
}
.masonry-item:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}
@media (hover: hover) {
    .masonry-item:hover {
        box-shadow: 0 1px 2px rgba(36, 28, 21, 0.06),
                    0 30px 56px -26px rgba(36, 28, 21, 0.40);
    }
    .masonry-item:hover img { transform: scale(1.06); }   /* gentle, very slow zoom */
}
@media (max-width: 1080px) { .masonry { columns: 3; } }
@media (max-width: 700px)  {
    .masonry { columns: 2; column-gap: 10px; }
    .masonry-item { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .masonry-item img { transition: none; }
    .masonry-item:hover img { transform: none; }
}

/* ----- Lightbox: prev/next navigation + counter (added for the gallery) --- */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: rgba(247, 244, 239, 0.14);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.lightbox-nav:hover { background: rgba(247, 244, 239, 0.28); }
.lightbox-prev { left: clamp(0.5rem, 3vw, 1.75rem); }
.lightbox-next { right: clamp(0.5rem, 3vw, 1.75rem); }
.lightbox-nav[hidden] { display: none; }
.lightbox-counter {
    position: absolute;
    bottom: clamp(0.75rem, 3vw, 1.6rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--on-dark-2);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}
@media (max-width: 700px) {
    .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
}