/* =============================================
   Casa de Tisno — Layout Components
   Navigation, hero, footer
   ============================================= */

/* --- Navigation ---
   The bar floats at the top of every page. It MUST always be visually
   separated from anything beneath it — otherwise the dark hero gradient,
   the moiré pattern and the video iframe (all of which are positioned
   absolutely *inside* `.hero` with `inset: var(--nav-height) 0 0 0`)
   creep into the nav strip as soon as the user scrolls, since they
   travel with the hero and the bar's `z-index: 1000` only stacks on
   top of *itself*, not the content rendered by descendants of `.hero`.
   A solid alabaster fill defeats that bleed-through and matches
   `.hero__bg` (also alabaster) pixel-for-pixel, so the look at scroll=0
   is unchanged. The scroll-triggered state on top of that lifts the bar
   off the page with a white tint and a soft shadow. */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--alabaster);
    transition: background-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                padding var(--duration-normal) var(--ease-out);
    padding: var(--space-lg) 0;
}

.nav.scrolled {
    background-color: rgb(255 255 255 / 0.97);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) 0;
}

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

.nav__logo {
    height: 40px;
    width: auto;
    transition: height var(--duration-normal) var(--ease-out);
}

.nav.scrolled .nav__logo { height: 32px; }

/* `.nav__brand` groups the logo anchor and the address anchor so they
   share spacing and the address `border-left` keeps its separator without
   nesting two anchors. */
.nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.nav__logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav__tagline-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: color var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.nav__tagline-link:hover .nav__tagline,
.nav__tagline-link:focus-visible .nav__tagline {
    color: var(--text-primary);
}

.nav__tagline-link:hover .nav__tagline-icon,
.nav__tagline-link:focus-visible .nav__tagline-icon {
    color: var(--coral-dark, var(--coral));
}

.nav__tagline-link:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 4px;
    border-radius: 4px;
}

.nav__tagline {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-left: 1px solid var(--border);
    padding-left: var(--space-md);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out),
                opacity var(--duration-normal) var(--ease-out);
}

.nav__tagline-icon {
    width: 1.05em;
    height: 1.05em;
    color: var(--coral);
    flex-shrink: 0;
}

.nav.scrolled .nav__tagline {
    font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    list-style: none;
    margin-left: auto;
}

.nav__link {
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    transition: color var(--duration-fast) var(--ease-out);
    position: relative;
    white-space: nowrap;
}

.nav.scrolled .nav__link { color: var(--text-primary); }
.nav__link:hover { color: var(--coral); }

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--coral);
    transition: width var(--duration-normal) var(--ease-out);
}

.nav__link:hover::after,
.nav__link.active::after {
    width: 100%;
}

.nav__cta {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.5rem 0;
    background: none;
    color: var(--coral);
    border: none;
    border-radius: 0;
    white-space: nowrap;
    text-transform: none;
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
}

.nav__cta::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--coral);
    opacity: 0.3;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__cta:hover {
    color: var(--coral-dark);
    background: none;
    transform: none;
    box-shadow: none;
}

.nav__cta:hover::after {
    opacity: 1;
}

.nav:not(.scrolled) .nav__cta {
    background: none;
    color: var(--coral);
}

.nav:not(.scrolled) .nav__cta:hover {
    background: none;
    color: var(--coral-dark);
}

/* --- Language switcher (direct child of nav__inner) --- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.lang-switch__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
    padding: 6px 4px;
    transition: color var(--duration-fast) var(--ease-out);
    line-height: 1;
}

.lang-switch__link:hover {
    color: var(--coral);
}

.lang-switch__flag {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
}

.lang-switch__label {
    letter-spacing: 0.03em;
}

/* --- Hamburger toggle (mobile only) --- */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    flex-shrink: 0;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--purple);
    transition: all var(--duration-normal) var(--ease-out);
    transform-origin: center;
}

/* --- Close button (mobile only) --- */
.nav__close-wrap {
    display: none;
}

.nav__close {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: var(--space-sm);
    line-height: 0;
    transition: color var(--duration-fast) var(--ease-out);
}

.nav__close:hover {
    color: var(--coral-light);
}

/* --- Overlay ---
   The overlay sits above page content but below the menu panel. The opacity
   is intentionally high and combined with a backdrop-filter blur so dark
   sections of the page (booking, footer) cannot bleed through and create
   uneven shading along the bottom of the screen behind the panel. */
.nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(20 18 36 / 0.72);
    backdrop-filter: blur(6px);
    z-index: 9050;
}

.nav__overlay.open { display: block; }

/* ---- Mobile navigation (max 768px) ---- */
@media (width <= 768px) {
    .nav__inner {
        gap: var(--space-md);
    }

    .nav__links:not(.nav__links--minimal) + .lang-switch {
        margin-left: auto;
    }

    .nav__tagline {
        display: none;
    }

    .nav__toggle {
        display: flex;
        z-index: 9101;
    }

    .nav__close-wrap {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
    }

    /* Slide-out panel — z-index sits above the cookie consent banner (9000)
       and any other fixed UI so the menu always paints on top while open.
       `padding-bottom: env(safe-area-inset-bottom, 0)` keeps the last item
       reachable above the iOS home-bar gesture area. */
    .nav__links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 360px;
        height: 100vh;
        height: 100dvh;
        background-color: var(--purple);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-5xl) var(--space-2xl) max(var(--space-2xl), env(safe-area-inset-bottom, 0));
        gap: 0;
        transition: right var(--duration-slow) var(--ease-out);
        box-shadow: var(--shadow-xl);
        z-index: 9100;
        overflow-y: auto;
        visibility: hidden;
    }

    .nav__links.open {
        right: 0;
        visibility: visible;
    }

    .nav__links > li {
        width: 100%;
    }

    .nav__link,
    .nav.scrolled .nav__link {
        display: block;
        color: var(--white);
        font-size: var(--text-lg);
        padding: var(--space-md) 0;
    }

    .nav__link::after { display: none; }

    .nav__link:hover,
    .nav__link:active {
        color: var(--coral-light);
    }

    .nav__cta,
    .nav.scrolled .nav__cta,
    .nav:not(.scrolled) .nav__cta {
        display: block;
        background: var(--coral);
        color: var(--white);
        font-size: var(--text-xl);
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        margin-top: var(--space-lg);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        text-align: center;
    }

    .nav__cta:hover,
    .nav.scrolled .nav__cta:hover,
    .nav:not(.scrolled) .nav__cta:hover {
        background: var(--coral-dark);
        color: var(--white);
    }

    .nav__cta::after {
        display: none;
    }

    /* Overlay sits between the page and the slide-out panel — z-index 9050
       puts it above the cookie consent banner (9000) so the panel + overlay
       always paint as a single layer. */
    .nav__overlay.open {
        z-index: 9050;
    }

    /* Hamburger animation */
    .nav__toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav__toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

}

/* --- Minimal nav variant (legal pages — always inline, no hamburger) --- */
.nav__links--minimal {
    gap: var(--space-lg);
}

@media (width <= 768px) {
    .nav__links--minimal {
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        background-color: transparent;
        flex-direction: row;
        align-items: center;
        padding: 0;
        box-shadow: none;
        overflow: visible;
    }

    .nav__links--minimal .nav__link,
    .nav.scrolled .nav__links--minimal .nav__link {
        color: var(--text-primary);
        font-size: var(--text-sm);
    }

    .nav__links--minimal + .lang-switch {
        margin-left: 0;
    }
}


/* --- Hero Section ---
   The fixed nav floats above the hero. The base background (`.hero__bg`)
   spans the full hero so the nav strip blends with the alabaster page
   colour, but the dark video, its overlay, the moiré pattern and the
   poster all start below the nav (`top: var(--nav-height)`) so the
   navigation never sits on top of the dark video. The hero content is
   pushed down by the same offset so it stays optically centred over the
   visible video area. */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--alabaster);
    padding-top: var(--nav-height);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--alabaster);
}

.hero__pattern {
    position: absolute;
    inset: var(--nav-height) 0 0 0;
    z-index: 3;
    opacity: 0.025;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgb(64 61 88 / 0.15) 60px, rgb(64 61 88 / 0.15) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgb(64 61 88 / 0.15) 60px, rgb(64 61 88 / 0.15) 61px);
}

.hero__content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: var(--space-2xl);
    max-width: 880px;
    transition: opacity var(--duration-slow) var(--ease-out);
}

/* Once the background video starts playing, fade the foreground copy
   (title, subtitle, CTAs) back by 30% so the motion footage carries the
   composition. The transition matches the iframe crossfade duration so
   the two reveal in lockstep.

   `:hover` and `:focus-within` lift the copy back to full opacity so
   visitors can clearly read or activate the CTAs once they reach for
   them. `hero-content-idle.js` (a progressive enhancement, no-op on
   touch-only / reduced-motion sessions) layers a 3.5 s idle timer on
   top of `:hover`: after 3.5 s of no `mousemove` over the content
   block the script sets `[data-cursor-idle]`, the `:not(...)` clause
   in the rule below opts back out of the hover lift, and the copy
   fades back to 0.7 even while the cursor is still parked inside the
   block. Any new movement clears the attribute and re-shows the copy.
   Without the script the hover lift simply persists for as long as
   the cursor is inside the block. */
.hero[data-video-playing] .hero__content {
    opacity: 0.7;
}

.hero[data-video-playing] .hero__content:hover:not([data-cursor-idle]),
.hero[data-video-playing] .hero__content:focus-within {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero__content {
        transition: none;
    }
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--white);
    line-height: 1.08;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
    animation: fade-in-up 0.8s var(--ease-out) both;
}

.hero__title em {
    font-style: normal;
    color: var(--coral);
    text-shadow: 0 2px 16px rgb(0 0 0 / 0.55);
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: rgb(255 255 255 / 0.92);
    margin-bottom: var(--space-2xl);
    line-height: 1.7;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.45);
    animation: fade-in-up 0.8s var(--ease-out) 0.2s both;
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    animation: fade-in-up 0.8s var(--ease-out) 0.4s both;
}

/* --- Hero static poster ---
   Preloaded in <head> via `<link rel="preload">` and rendered as a
   `<picture>` so the appropriate orientation paints on first frame.
   Sits below the YouTube iframe so the live video crossfades over it
   once `hero-video.js` reports the player has actually started playing.
   Anchored below the fixed nav so it never tucks under the bar. */
.hero__video-poster {
    position: absolute;
    inset: var(--nav-height) 0 0 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero__video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- Hero YouTube background video ---
   The container is empty until `hero-video.js` injects an iframe; until
   then the static poster + `.hero__bg` layers below provide the fallback.
   Marketing-cookie consent gates iframe injection so the page does not
   load YouTube tracking on first paint. */
.hero__video {
    position: absolute;
    inset: var(--nav-height) 0 0 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 0;
    pointer-events: none;

    /* Slight overscan crops YouTube branding overlays at the edges. */
    transform: translate(-50%, -50%) scale(1.06);

    /* Crossfade in once the player reports it is actually playing —
       hero-video.js sets `[data-video-playing]` on the section after
       the YouTube postMessage `playerState=1` event. */
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.hero[data-video-playing] .hero__video iframe {
    opacity: 1;
}

/* 16:9 iframe — used on landscape viewports. The two media queries
   below pick the dimension that needs to fill so the embed always
   covers the hero (no letterboxing). */
.hero__video iframe[data-aspect="16x9"] {
    aspect-ratio: 16 / 9;
}

@media (aspect-ratio >= 16 / 9) {
    .hero__video iframe[data-aspect="16x9"] {
        width: 100%;
        height: auto;
    }
}

@media (aspect-ratio <= 16 / 9) {
    .hero__video iframe[data-aspect="16x9"] {
        width: auto;
        height: 100%;
    }
}

/* 4:3 iframe — used on portrait viewports (mobile-first). */
.hero__video iframe[data-aspect="4x3"] {
    aspect-ratio: 4 / 3;
}

@media (aspect-ratio >= 4 / 3) {
    .hero__video iframe[data-aspect="4x3"] {
        width: 100%;
        height: auto;
    }
}

@media (aspect-ratio <= 4 / 3) {
    .hero__video iframe[data-aspect="4x3"] {
        width: auto;
        height: 100%;
    }
}

/* Rich-black overlay sits between the video/poster and the hero content.
   The poster always paints (preloaded), so the overlay is always active
   too — that keeps the dark, branded feel consistent whether the user
   eventually sees the static poster (no marketing consent) or the live
   YouTube embed crossfading in over it.

   The overlay is a vertical gradient: nearly opaque at the top edge
   (where it meets the nav) so the headline reads cleanly, easing to
   roughly half opacity over the lower third so the video still shows
   through. Anchored below the nav so the navigation strip stays clean
   alabaster. */
.hero__video-overlay {
    position: absolute;
    inset: var(--nav-height) 0 0 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgb(0 4 8 / 0.72) 0%,
            rgb(0 4 8 / 0.58) 55%,
            rgb(0 4 8 / 0.48) 100%
        );
}

/* CTAs stay clickable through the faded layer regardless of opacity —
   the iframe and overlay above already have `pointer-events: none`. */
.hero__actions a, .hero__actions button {
    pointer-events: auto;
}

/* Reduced motion — never load the video. The poster + overlay still
   paint so the dark, branded look is preserved. JS exits early before
   injecting the iframe; this CSS rule is a belt-and-suspenders hedge
   in case the script is bypassed. */
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (width <= 768px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-xl));
        padding-bottom: var(--space-2xl);
    }

    .hero__content {
        padding-inline: var(--space-lg);
    }

    .hero__title {
        font-size: var(--text-4xl);
    }
}

/* --- Footer --- */
.footer {
    background-color: var(--purple);
    color: rgb(255 255 255 / 0.6);
    padding: var(--space-3xl) 0 var(--space-xl);
}

/* The footer used to host four columns (brand, nav, legal, connect). The
   "connect" column has been merged into `.footer__brand` so the social
   icons + Booking.com chip live naturally beneath the description. The
   grid drops to three columns: a wider brand block, a navigation list,
   and a legal list. */
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-2xl);
}

/* Pin every brand item to the start of the cross-axis so the inverse
   logo, description and connect block all line up on the same left
   edge. Without `align-items: flex-start` the default `stretch` resizes
   the `<img>` to the column width, and the SVG's `xMidYMid` aspect
   ratio then visually centres the artwork inside that stretched box. */
.footer__brand {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__logo {
    height: 36px;
    width: auto;
    margin-bottom: var(--space-lg);
}

.footer__brand-description {
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.footer__heading {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
}

.footer__links { list-style: none; }
.footer__links li { margin-bottom: var(--space-sm); }

.footer__links a {
    color: rgb(255 255 255 / 0.6);
    font-size: var(--text-base);
    transition: color var(--duration-fast);
}

.footer__links a:hover { color: var(--coral); }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-xl);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    font-size: var(--text-xs);
}

.footer__bottom a { color: rgb(255 255 255 / 0.6); }
.footer__bottom a:hover { color: var(--coral); }

.footer__cookie-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgb(255 255 255 / 0.6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 0;
    transition: color var(--duration-fast);
}

.footer__cookie-btn:hover { color: var(--coral); }

/* --- Connect block (lives inside the brand column) ---
   Stacks "we are also on" tagline → social icons → Booking.com chip.
   The tagline labels the social icon list (aria-labelledby). */
.footer__connect {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Booking.com chip — a translucent surface that sits on the purple footer
   without competing with it. Only the inner score badge wears the
   Booking.com navy so the "9,7" rating is the part that reads as the
   brand. Hover keeps the lift purely as a shadow/colour change with no
   transform, so the chip can't trigger a layout shift in surrounding
   text. */
.footer__booking {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--radius-md);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-body);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    width: max-content;
    max-width: 100%;
}

.footer__booking:hover,
.footer__booking:focus-visible {
    background-color: rgb(255 255 255 / 0.1);
    border-color: var(--booking-navy);
    color: var(--white);
    box-shadow: 0 6px 18px rgb(0 53 128 / 0.35);
}

.footer__booking:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}

.footer__booking-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    padding: 0.25em 0.55em;
    background-color: var(--booking-navy);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1;
    letter-spacing: -0.01em;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.footer__booking:hover .footer__booking-score,
.footer__booking:focus-visible .footer__booking-score {
    background-color: var(--booking-navy-dark);
}

.footer__booking-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.footer__booking-label,
.footer__booking-source {
    color: var(--white);
}

.footer__booking-label {
    font-weight: 600;
    font-size: var(--text-sm);
}

.footer__booking-source {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    opacity: 0.92;
}

.footer__social-tagline {
    margin: 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgb(255 255 255 / 0.6);
}

.footer__social {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.92);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
    background-color: var(--coral);
    border-color: var(--coral);
    color: var(--white);
    box-shadow: 0 6px 16px rgb(252 119 83 / 0.4);
}

.footer__social-link:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}

.footer__social-link svg {
    width: 26px;
    height: 26px;
    display: block;
}

@media (width <= 1024px) {
    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    /* Brand column spans the full row so its booking chip never collides
       with the narrower nav / legal columns. */
    .footer__brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (width <= 768px) {
    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}