/* ================= VARIABLES ================= */
:root {
    --primary-blue: #1A73E8; 
    --shadow-blue: #7FB8FE; 
    --primary-yellow: #FFD166; 
    --accent-pink: #FF4D79; 
    --bg-wood: #Fdfdfd; 
    --bg-sand: #FDE8AB; 
    --text-dark: #1D2D44; 
    --font-main: 'Poppins', sans-serif; 
}

/* ================= RESET & BASE ================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Clip horizontal overflow at the root too: on iOS Safari `overflow-x: hidden` on
       body alone doesn't reliably contain absolutely-positioned decorations that spill
       past the right edge, which let the page slide sideways (white band). */
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-wood);
    color: var(--text-dark);
    /* Root-level horizontal containment (with html above): stops edge decorations (beach
       ball, cactus) from letting the page slide sideways on iOS — position: relative makes
       Safari actually clip that overflow — without clipping any section's own content. */
    position: relative;
    width: 100%;
    overflow-x: hidden;
    touch-action: manipulation;
}

ul {
    list-style: none;
}

/* Accessible visually-hidden helper: keeps content in the a11y tree and readable by
   search engines while removing it visually (e.g. the hero SEO <h1>). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ================= ICON UTILITY ================= */
/* Inline SVG icons (self-hosted — replaces the render-blocking Font Awesome CDN).
   Sized to the current font-size and painted with the current text color, so every
   icon inherits its context exactly like the icon font it replaced. */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -0.125em;
}

/* ================= BUTTON COMPONENT ================= */
.btn {
    display: inline-block;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.btn--primary {
    color: var(--primary-blue);
    background: var(--primary-yellow);
    border: none;
    border-radius: 50px;
    font-weight: 900;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(255, 209, 102, 0.4);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-5px) scale(1.05);
    background: #fff;
    color: var(--primary-yellow);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.5);
    outline: none;
}

/* ================= HEADER & NAVIGATION ================= */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 25px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1003;
    transition: all 0.5s ease-in-out;
}

.header--scrolled {
    /*padding: 15px 50px;*/
    /*background: rgba(255, 255, 255, 0.95);*/
    backdrop-filter: blur(18px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

/* While the fullscreen mobile menu is open, drop the scrolled header's blur/shadow so
   the opaque menu reads as a clean full-screen layer. The header stays on top only to
   keep the logo and the close (X) button visible over the menu. */
.header--menu-open {
    backdrop-filter: none;
    box-shadow: none;
}

.header__logo-link {
    position: relative;
    display: inline-block;
    height: 50px;
}

.header__logo {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transition: transform 0.3s ease, opacity 0.4s ease;
}

.header__logo--white {
    position: relative;
    opacity: 1;
}

.header__logo--blue {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Fades when scrolled */
.header--scrolled .header__logo--white {
    opacity: 0;
}

.header--scrolled .header__logo--blue {
    opacity: 1;
}

/* While the fullscreen mobile menu is open its background is light, so force the blue
   logo regardless of scroll position — otherwise the white logo sits invisibly on white
   until a scroll flips it, which reads as a glitch. */
.header--menu-open .header__logo--white { opacity: 0; }
.header--menu-open .header__logo--blue { opacity: 1; }

/* The gallery sits on a light background, so show the blue logo from the start; the
   header stays transparent (no blur/shadow) until scroll, exactly like the home page. */
.gallery-page .header__logo--white { opacity: 0; }
.gallery-page .header__logo--blue { opacity: 1; }

.header__logo-link:hover .header__logo,
.header__logo-link:focus-visible .header__logo {
    transform: scale(1.05) rotate(-2deg);
}

.nav__list {
    display: flex;
    gap: 35px;
}

.nav__link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.nav__link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: -2px;
    left: 0;
    background: var(--primary-yellow);
    border-radius: 5px;
    /* Animate a GPU-composited transform instead of width: growing width forces a
       layout + paint every frame, which stutters on index.html while the hero's
       continuous animations load the main thread. scaleX runs on the compositor,
       so the underline stays smooth regardless of the hero. */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link--active::after {
    transform: scaleX(1);
}

.nav__link--active {
    color: var(--primary-blue);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1004;
    background: transparent;
    border: none;
    padding: 5px;
}

.hamburger__bar {
    width: 30px;
    height: 4px;
    background-color: var(--primary-blue);
    border-radius: 5px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.hamburger--active .hamburger__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger--active .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger--active .hamburger__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(253, 253, 253, 0.98);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1002;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
    visibility: hidden;
}

.mobile-menu--active {
    transform: translateY(0);
    visibility: visible;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

.mobile-menu__link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -2px 2px 0px var(--shadow-blue);
    transition: transform 0.3s ease;
    display: inline-block;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible,
.mobile-menu__link--active {
    transform: scale(1.1);
}

.mobile-menu__link--active {
    color: var(--primary-yellow);
}

/* ================= HERO SECTION ================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: 
        url('../assets/images/hero-bg.webp') center calc(100% + 15vh) / 100% auto no-repeat,
        linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
}

@media (max-width: 1024px) {
    .hero {
        background: 
            url('../assets/images/hero-bg.webp') center calc(100% + 12vh) / 150% auto no-repeat,
            linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
    }
}
@media (max-width: 768px) {
    .hero {
        background: 
            url('../assets/images/hero-bg.webp') center calc(100% + 10vh) / 250% auto no-repeat,
            linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
    }
}

/* Freeze all hero motion when the hero is scrolled off-screen (class toggled by JS) to
   free CPU/GPU and battery. Every animation resumes seamlessly on the way back up. */
.hero--paused,
.hero--paused *,
.hero--paused *::before,
.hero--paused *::after {
    animation-play-state: paused !important;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background: linear-gradient(to bottom, rgba(253, 253, 253, 0.4) 0%, rgba(253, 253, 253, 0.6) 30%, rgba(253, 253, 253, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero__sun-glow {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 209, 102, 0.5) 0%, transparent 70%);
    z-index: 3;
    pointer-events: none;
}

/* Kite Animation */
/* Positioned relative to the logo wrapper, so the kite stays "hooked" to the logo at any screen size */
.hero__kite-wrapper {
    position: absolute;
    top: 25px;
    left: 60%;
    z-index: 4;
    pointer-events: none;
}

.hero__kite {
    width: 80px;
    height: auto;
    /* Pivot the gentle sway around the string tip (near the "I" of the logo), so the
       string end stays visually pinned to the letter while the kite swings above it. */
    transform-origin: 86% 96%;
    animation: swayKite 4s ease-in-out infinite alternate;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

@keyframes swayKite {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* Sandstorm Gusts */
.hero__sandstorm {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    z-index: 25; 
    pointer-events: none;
    overflow: hidden;
}
.hero__gust {
    position: absolute;
    left: -150vw; 
    width: 150vw;
    background: linear-gradient(to right, transparent, rgba(255, 210, 140, 0.5), transparent);
    filter: blur(12px);
    opacity: 0;
}
.hero__gust--1 {
    bottom: 10%;
    height: 15vh;
    animation: blowGust 14s linear infinite;
}
.hero__gust--2 {
    bottom: 30%;
    height: 20vh;
    background: linear-gradient(to right, transparent, rgba(255, 230, 160, 0.4), transparent);
    animation: blowGust 20s linear infinite 3s;
}
.hero__gust--3 {
    bottom: 20%;
    height: 10vh;
    background: linear-gradient(to right, transparent, rgba(255, 200, 120, 0.6), transparent);
    animation: blowGust 16s linear infinite 7s;
}

@keyframes blowGust {
    0% { transform: translateX(0) skewX(-45deg); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateX(300vw) skewX(-45deg); opacity: 1; }
    60%, 100% { transform: translateX(300vw) skewX(-45deg); opacity: 0; }
}

/* Birds Animation */
.hero__birds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.hero__bird {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 30px;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.2));
    opacity: 0.8;
}

.hero__bird--1 { animation: flyArc1 40s ease-in-out -12s infinite; width: 40px; }
.hero__bird--2 { animation: flyArc2 50s ease-in-out -25s infinite; opacity: 0.6; }
.hero__bird--3 { animation: flyArc3 60s ease-in-out -40s infinite; width: 35px; }

@keyframes flyArc1 {
    0%   { transform: translate(-10vw, 30vh) rotate(80deg) scale(0.5); }
    25%  { transform: translate(20vw, 15vh) rotate(100deg) scale(0.8); }
    50%  { transform: translate(50vw, 25vh) rotate(85deg) scale(1); }
    75%  { transform: translate(80vw, 10vh) rotate(110deg) scale(0.8); }
    100% { transform: translate(110vw, 20vh) rotate(90deg) scale(0.5); }
}
@keyframes flyArc2 {
    0%   { transform: translate(110vw, 30vh) rotate(-80deg) scale(0.5); }
    30%  { transform: translate(70vw, 15vh) rotate(-100deg) scale(0.9); }
    60%  { transform: translate(40vw, 25vh) rotate(-85deg) scale(1); }
    100% { transform: translate(-10vw, 10vh) rotate(-100deg) scale(0.6); }
}
@keyframes flyArc3 {
    0%   { transform: translate(-10vw, 15vh) rotate(95deg) scale(0.6); }
    50%  { transform: translate(50vw, 5vh)  rotate(85deg) scale(1.2); }
    100% { transform: translate(110vw, 20vh) rotate(105deg) scale(0.6); }
}



/* Oasis (Footer Hero) */
/* Oasis (Footer Hero) */
/* Oasis container removed, using global background instead */

/* Hero Content Details */
/* Real Water Ripple Hack */
/* Real Water Ripple Hack */
/* Real Water Ripple Hack */
.hero__water-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        url('../assets/images/hero-bg.webp') center calc(100% + 15vh) / 100% auto no-repeat,
        linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
    clip-path: ellipse(20% 9% at 50% 76%);
    filter: url(#water-ripple);
    pointer-events: none;
    z-index: 1;
    transform: translateZ(0);
    will-change: filter;
    backface-visibility: hidden;
}

@media (max-width: 1024px) {
    .hero__water-layer {
        background: 
            url('../assets/images/hero-bg.webp') center calc(100% + 12vh) / 150% auto no-repeat,
            linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
        clip-path: ellipse(35% 7% at 50% 76%);
    }
}
@media (max-width: 768px) {
    .hero__water-layer {
        background:
            url('../assets/images/hero-bg.webp') center calc(100% + 10vh) / 250% auto no-repeat,
            linear-gradient(rgb(222, 236, 245), rgb(120, 147, 174));
        /* Anchor the ripple to the background geometry (not the viewport height) so it
           stays on the water at any screen size / aspect ratio. The background image
           bottom is pinned at (100% + 10vh); its rendered height is
           250% * 100vw * (1397/2560) = 136.426vw. The water surface sits ~0.356 of that
           height above the image bottom → offset 0.356 * 136.426 ≈ 48.6vw. */
        clip-path: ellipse(50% 10.5vw at 50% calc(100% + 10vh - 48.6vw));
    }
}

/* Scroll Indicator */
.hero__scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.hero__scroll-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    animation: bounceScroll 2s infinite ease-in-out;
}

.hero__scroll-link:hover {
    color: var(--primary-yellow);
    border-color: var(--primary-yellow);
    background: rgba(255, 255, 255, 0.2);
}

@keyframes bounceScroll {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.hero__content {
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: floatLogo 6s ease-in-out infinite;
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.hero__logo {
    width: 380px;
    max-width: 80vw;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(255,255,255,0.7));
    margin-bottom: 40px;
}

/* ================= GENERAL SECTIONS ================= */
.section {
    padding: 100px 10vw;
    text-align: center;
    position: relative;
    z-index: 10;
    /* NB: no overflow clipping here — the hero→sponsors wave (.section-divider) is a child
       that overflows the top of this section, and clipping would cut it off. Horizontal
       overflow from edge decorations is contained at the root instead (html/body below). */
}

.section__title {
    font-size: 55px;
    font-weight: 900;
    margin-bottom: 50px;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -5px 5px 0px var(--shadow-blue);
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.section--wood-bg {
    background-color: #fdfdfd;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 50px, rgba(0,0,0,0.03) 51px, rgba(0,0,0,0.03) 52px);
}

.section--sand-bg { background-color: var(--bg-sand); }

.section__torn-paper {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 10;
    transform: translateY(-90%);
}

.section__beach-ball {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-pink) 0deg 60deg, 
        #fff 60deg 120deg, 
        var(--primary-blue) 120deg 180deg, 
        #fff 180deg 240deg, 
        var(--primary-yellow) 240deg 300deg, 
        #fff 300deg 360deg
    );
    box-shadow: inset -20px -20px 40px rgba(0,0,0,0.1), 0 20px 40px rgba(0,0,0,0.15);
    top: 5%;
    left: -80px;
    opacity: 0.8;
    animation: spinAndFloat 15s linear infinite;
    z-index: 20;
    overflow: hidden;
}

.section__beach-ball::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--primary-yellow);
    border-radius: 50%;
}

@keyframes spinAndFloat {
    0% { transform: rotate(0deg) translateY(0px) scale(1); }
    33% { transform: rotate(120deg) translateY(-20px) scale(1.05); }
    66% { transform: rotate(240deg) translateY(10px) scale(0.95); }
    100% { transform: rotate(360deg) translateY(0px) scale(1); }
}



/* ================= SPONSORS ================= */
.section-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: translateY(-99%);
    z-index: 15;
}
.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 40px;
}
.section-divider .shape-fill {
    fill: var(--bg-wood);
}

.sponsor-grid { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    gap: 50px;
    margin-top: 60px;
    position: relative;
    z-index: 2; 
}

.sponsor-card {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    min-height: 100px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sponsor-card__img { 
    max-height: 90px;
    max-width: 180px; 
    object-fit: contain;
    border-radius: 8px; 
    transition: transform 0.4s ease, filter 0.4s ease; 
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.1)); 
}

.sponsor-card:hover { transform: translateY(-10px) rotate(-3deg); }

.sponsor-card:hover .sponsor-card__img { 
    transform: scale(1.1); 
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2)) !important;
}

/* ================= POLAROID GALLERY ================= */
.polaroid-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.polaroid {
    display: block;
    background: #fff;
    padding: 20px 20px 70px 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    width: 100%;
    transform: rotate(-2deg);
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.45s ease;
    position: relative;
}

/* Each card lives in a floating tile, so the gentle idle float and the hover lift
   live on different elements and never fight — the hover stays perfectly smooth. */
.polaroid-tile {
    width: 100%;
    max-width: 450px;
    animation: floatTile 6s ease-in-out infinite;
}
.polaroid-tile:nth-child(2) { animation-duration: 7s; animation-delay: 0.7s; }
@keyframes floatTile {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.polaroid-tile:nth-child(even) .polaroid { transform: rotate(3deg); }

.polaroid:hover,
.polaroid:focus-within {
    transform: translateY(-16px) rotate(0deg) scale(1.04);
    box-shadow: 0 28px 55px rgba(29, 45, 68, 0.22);
    z-index: 10;
}

/* A cactus rising from the bottom-right of the section, behind the cards */
.snack__cactus {
    position: absolute;
    right: -2vw;
    bottom: -20px;
    z-index: 1;
    width: clamp(210px, 26vw, 360px);
    opacity: 0.4;
    pointer-events: none;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
}

.polaroid__content {
    background: var(--bg-sand);
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.05);
}

.polaroid__title {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: var(--primary-blue);
    font-weight: 800;
    letter-spacing: 1px;
}

.polaroid__text {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Gallery teaser card — a clickable polaroid showing a random gallery photo */
.polaroid--gallery {
    text-decoration: none;
    cursor: pointer;
}
.polaroid--gallery .polaroid__content {
    display: block;
    padding: 0;
    overflow: hidden;
}
.polaroid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.polaroid--gallery:hover .polaroid__img,
.polaroid--gallery:focus-within .polaroid__img {
    transform: scale(1.06);
}

/* ================= FAQ ================= */
.faq {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.faq__item {
    background: #fff;
    border: 2px solid rgba(26, 115, 232, 0.12);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq__item[open] {
    border-color: var(--primary-yellow);
    box-shadow: 0 10px 30px rgba(26, 115, 232, 0.08);
}

/* summary = the clickable question row; native disclosure marker removed */
.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-blue);
    cursor: pointer;
    list-style: none;
    transition: color 0.3s ease;
}

.faq__question::-webkit-details-marker { display: none; }

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

.faq__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-yellow);
    color: var(--primary-blue);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* the "+" rotates into an "x" when the item is open */
.faq__item[open] .faq__icon {
    transform: rotate(45deg);
}

.faq__answer {
    padding: 0 26px 24px;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.7;
}

.faq__item[open] .faq__answer {
    animation: faqReveal 0.35s ease;
}

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq__link {
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary-yellow);
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

.faq__link:hover,
.faq__link:focus-visible {
    color: var(--accent-pink);
}

@media (max-width: 768px) {
    .faq__question { padding: 18px 18px; font-size: 16px; gap: 14px; }
    .faq__answer { padding: 0 18px 20px; font-size: 15px; }
}

/* ================= FOOTER ================= */
.footer {
    background: var(--primary-blue);
    padding: 80px 50px 40px;
    text-align: center;
    border-top: 5px solid var(--primary-yellow);
    color: #fff;
}

.footer__title {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: -4px 4px 0px var(--accent-pink);
}

.footer__location {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    display: block;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__location:hover {
    color: var(--primary-yellow);
}

.footer__icon {
    color: var(--primary-yellow);
    margin-right: 10px;
}

.footer__email {
    display: inline-block;
    font-size: 22px;
    color: var(--primary-yellow);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 10px;
}

.footer__email:hover,
.footer__email:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.footer__place {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Practical info (opening hours + season) — event essentials */
.footer__info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px 70px;
    max-width: 620px;
    margin: 0 auto 45px;
}

.footer__info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.footer__info-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-yellow);
}

.footer__info-value {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    color: #fff;
}

.footer__social-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 18px;
}

.footer__social {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 0 45px;
}

.footer__social-link {
    color: var(--primary-blue);
    font-size: 2rem;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
    color: #fff;
    background: var(--accent-pink);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    outline: none;
}

.footer__copyright {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
    .nav__list { display: none; } 
    .hamburger { display: flex; } 
    
    .header { padding: 20px 30px; }
    .header--scrolled { padding: 15px 30px; }
    
    .hero__logo { width: 280px; }
    
    .section { padding: 60px 5vw; }
    /* On mobile the stacked cards are full-width, so give the section extra bottom room
       and let the cactus emerge UNDER them (keeps it visible and the same size). */
    #snack-drink { padding-bottom: 135px; }
    .snack__cactus { right: 3vw; }
    .section__title { font-size: 40px; text-shadow: -3px 3px 0px var(--shadow-blue); }
    
    .sponsor-grid { gap: 30px; }
    .sponsor-card { min-width: 100px; min-height: 80px; }
    .sponsor-card__img { max-height: 70px; max-width: 140px; }
    
    .section__beach-ball { width: 150px; height: 150px; top: -80px; right: -40px; left: auto; }

    .hero__kite { width: 55px; }
}


@keyframes panHeroBg {
    0% { background-position: 0% 50%; background-size: 100%; }
    100% { background-position: 100% 50%; background-size: 110%; }
}

/* ================= CLOUDS AND KITE ================= */
.hero__clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.hero__cloud {
    position: absolute;
    width: 150px;
    opacity: 0.8;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.hero__cloud--1 { top: 8%; left: 0; animation: floatCloudLtoR 85s linear infinite both; width: 220px; }
.hero__cloud--2 { top: 18%; left: 0; animation: floatCloudRtoL 110s linear infinite both 15s; width: 140px; opacity: 0.6; }
.hero__cloud--3 { top: 12%; left: 0; animation: floatCloudLtoR 95s linear infinite both 45s; width: 180px; opacity: 0.9; }

/* Persistent Clouds */
.hero__cloud--4 { top: 15%; left: 15%; animation: swayCloud1 45s ease-in-out infinite; width: 160px; opacity: 0.85; }
.hero__cloud--5 { top: 9%; left: 70%; animation: swayCloud2 55s ease-in-out infinite; width: 130px; opacity: 0.7; }

@keyframes floatCloudLtoR {
    0% { transform: translateX(-250px); }
    100% { transform: translateX(120vw); }
}
@keyframes floatCloudRtoL {
    0% { transform: translateX(120vw); }
    100% { transform: translateX(-250px); }
}
@keyframes swayCloud1 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(80px, -40px); }
    50%  { transform: translate(130px, 20px); }
    75%  { transform: translate(50px, 50px); }
    100% { transform: translate(0, 0); }
}
@keyframes swayCloud2 {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-90px, 50px); }
    66%  { transform: translate(-40px, -60px); }
    100% { transform: translate(0, 0); }
}



/* Promo Bottle Message */
.hero__bottle-wrapper {
    position: absolute;
    /* The hero background is width-scaled (100/150/250%) but offset vertically with vh, so the
       bottle position mixes vw (to track the image scale) and vh (to track that vertical offset),
       keeping it locked to the pond at any screen size. */
    bottom: calc(12.8vw - 15vh);
    left: 50%;
    margin-left: 9.5vw;
    width: 14px;
    height: 42px;
    z-index: 50;
    cursor: pointer;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    transform: rotate(35deg); 
}

@media (max-width: 1024px) {
    .hero__bottle-wrapper {
        /* Background is 150% (1.5x), vertical offset 12vh */
        bottom: calc(19.2vw - 12vh);
        margin-left: 14.25vw;
    }
}

@media (max-width: 768px) {
    .hero__bottle-wrapper {
        /* Background is 250% (2.5x), vertical offset 10vh */
        bottom: calc(32vw - 10vh);
        margin-left: 23.75vw;
    }
}
/* Zone de clic élargie invisible pour éviter les bugs au hover */
.hero__bottle-wrapper::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px; bottom: -30px; left: -30px;
    z-index: 1;
}
.hero__bottle {
    width: 100%;
    height: 100%;
    transition: filter 0.2s, transform 0.2s;
}
.hero__bottle-wrapper:hover .hero__bottle {
    filter: brightness(1.2) drop-shadow(0 2px 8px rgba(255,255,255,0.4));
    transform: scale(1.1);
}
/* Claimed state: the bottle sails away, then the whole wrapper is removed until tomorrow */
.hero__bottle-wrapper--claimed {
    pointer-events: none;
}
.hero__bottle-wrapper--claimed .hero__bottle {
    animation: bottleFloatAway 1.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero__bottle-wrapper--hidden {
    display: none;
}
@keyframes bottleFloatAway {
    to {
        transform: translateY(-55px) scale(0.4);
        opacity: 0;
    }
}
.hero__bottle-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    background: #fff;
    color: #1a73e8;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
}
.hero__bottle-code {
    font-size: 18px;
    letter-spacing: 3px;
}
.hero__bottle-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-pink);
    letter-spacing: 0;
}
.hero__bottle-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.hero__bottle-bubble.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
}

/* Wooden Weather Plaque */
.hero__weather-plaque {
    position: absolute;
    bottom: -15px;
    left: -20px;
    background: #8b5a2b;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%), repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 10px);
    color: #fff;
    padding: 8px 15px 5px 15px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 20px;
    font-family: var(--font-main);
    box-shadow: 2px 6px 15px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.6);
    transform: rotate(-12deg);
    border: 3px solid #5c3a21;
    z-index: 20;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 1px 2px 2px rgba(0,0,0,0.8);
    cursor: default;
    user-select: none;
    white-space: nowrap;
}
.hero__weather-plaque:hover {
    transform: rotate(-5deg) scale(1.1);
}
.hero__weather-plaque::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #222;
    border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}
@media (max-width: 768px) {
    .hero__weather-plaque {
        font-size: 16px;
        bottom: -10px;
        left: -10px;
    }
}

/* Wooden Status Plaque */
.hero__status-plaque {
    position: absolute;
    bottom: -15px;
    right: -20px;
    background: #8b5a2b;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%), repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(0,0,0,0.1) 5px, rgba(0,0,0,0.1) 10px);
    color: #fff;
    padding: 8px 15px 5px 15px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 20px;
    font-family: var(--font-main);
    box-shadow: 2px 6px 15px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.6);
    transform: rotate(8deg);
    border: 3px solid #5c3a21;
    z-index: 20;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s;
    text-shadow: 1px 2px 2px rgba(0,0,0,0.8);
    cursor: default;
    user-select: none;
    white-space: nowrap;
}
.hero__status-plaque.is-open {
    color: #a8ffb2;
}
.hero__status-plaque.is-closed {
    color: #ffa8a8;
}
.hero__status-plaque:hover {
    transform: rotate(12deg) scale(1.1);
}
.hero__status-plaque::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #222;
    border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.4);
}
@media (max-width: 768px) {
    .hero__status-plaque {
        font-size: 16px;
        bottom: -10px;
        right: -10px;
    }
}

/* -----------------------------
   GALLERY PAGE — "MEMORY WALL" SCRAPBOOK
----------------------------- */
/* Warm sun-over-sand backdrop — on-brand, replaces the old repeated hero photo. */
.gallery-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-dark);
    background: linear-gradient(180deg, #FFF9EC 0%, #FDEFC6 42%, var(--bg-sand) 100%);
}

/* Focused sun glow behind the header (fixed px size, independent of page height) */
.gallery-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 130vw);
    height: 460px;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 209, 102, 0.55), rgba(255, 209, 102, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.album {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 150px 2rem 90px;
}

/* Drifting clouds behind the wall — reuses the hero sway keyframes to tie the pages together */
.album__cloud {
    position: absolute;
    z-index: 0;
    width: 200px;
    opacity: 0.55;
    pointer-events: none;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.06));
}
.album__cloud--1 { top: 120px; left: -30px; width: 230px; animation: swayCloud1 50s ease-in-out infinite; }
.album__cloud--2 { top: 80px; right: -20px; width: 160px; opacity: 0.4; animation: swayCloud2 62s ease-in-out infinite; }

/* Birds gliding across the sky near the clouds (reuses the hero's bird artwork) */
.album__bird {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 34px;
    opacity: 0.85;
    pointer-events: none;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18));
}
.album__bird--1 { animation: albumFly 34s linear infinite; }
.album__bird--2 { width: 26px; opacity: 0.7; animation: albumFlyBack 44s linear infinite; }
.album__bird--3 { width: 30px; animation: albumFly 40s linear infinite -16s; }

/* Wavy paths whose heading follows the slope, so the birds bank naturally
   instead of gliding stiffly (bird.svg points up at 0deg, so ~90deg = flying
   right, ~-90deg = flying left). */
@keyframes albumFly {
    0%   { transform: translate(-20vw, 60px) rotate(84deg)  scale(0.85); }
    15%  { transform: translate(8vw,   88px) rotate(99deg)  scale(0.9); }
    30%  { transform: translate(30vw,  54px) rotate(80deg)  scale(1); }
    45%  { transform: translate(50vw,  80px) rotate(96deg)  scale(1); }
    60%  { transform: translate(68vw,  50px) rotate(80deg)  scale(0.98); }
    75%  { transform: translate(88vw,  82px) rotate(99deg)  scale(0.9); }
    100% { transform: translate(120vw, 58px) rotate(86deg)  scale(0.85); }
}
@keyframes albumFlyBack {
    0%   { transform: translate(120vw, 118px) rotate(-84deg) scale(0.8); }
    18%  { transform: translate(90vw,  148px) rotate(-99deg) scale(0.9); }
    36%  { transform: translate(64vw,  112px) rotate(-80deg) scale(1); }
    54%  { transform: translate(44vw,  144px) rotate(-99deg) scale(1); }
    72%  { transform: translate(22vw,  110px) rotate(-80deg) scale(0.92); }
    100% { transform: translate(-20vw, 132px) rotate(-86deg) scale(0.8); }
}

/* Light, faded oasis accents behind the content: a palm frond cropped into the
   bottom-left and a cactus cropped into the right edge. Sized and positioned in vw
   (with clamp bounds) so they scale smoothly all the way down to mobile. */
.album__palm {
    position: absolute;
    z-index: 0;
    bottom: -1.5vw;
    width: clamp(110px, 19vw, 290px);
    opacity: 0.4;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.06));
}
.album__palm--left { left: -6vw; transform: rotate(180deg); }

.album__cactus {
    position: absolute;
    z-index: 0;
    right: -11vw;
    bottom: -2vw;
    width: clamp(190px, 33vw, 500px);
    opacity: 0.4;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}

/* --- Intro header --- */
.album__intro {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 70px;
}

.album__eyebrow {
    font-family: 'Caveat', cursive;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--accent-pink);
    transform: rotate(-3deg);
}

.album__title {
    font-size: clamp(2.6rem, 8vw, 4.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.02;
    color: var(--primary-blue);
    text-shadow: -5px 5px 0 var(--shadow-blue);
    margin: 0;
}

.album__subtitle {
    max-width: 480px;
    margin: 16px auto 0;
    font-size: 1.1rem;
    color: var(--text-dark);
    opacity: 0.65;
}

.album__squiggle {
    display: block;
    width: 240px;
    max-width: 60%;
    height: auto;
    margin: 14px auto 0;
}

/* --- Theme filter chips --- */
.album__filters {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto 46px;
}

.album__filter {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-blue);
    background: #fff;
    border: 2px solid rgba(26, 115, 232, 0.18);
    border-radius: 50px;
    padding: 9px 20px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.album__filter:hover,
.album__filter:focus-visible {
    transform: translateY(-2px);
    border-color: var(--primary-yellow);
    outline: none;
}

.album__filter--active {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.28);
}

/* Photos filtered out under the active theme */
.photo--hidden {
    display: none;
}

/* Loading / empty state while the wall is fetched from Cloudinary */
.album__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    color: var(--text-dark);
    opacity: 0.7;
    padding: 40px 0;
}

/* --- The "wall" — a tidy grid of uniform polaroids so every row stays full --- */
.album__wall {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 44px 30px;
    align-items: start;
}

.photo {
    margin: 0;
}
.photo:focus-visible { outline: none; }

/* Polaroid card — the tilt lives here so it never fights the AOS fade on .photo */
.photo__card {
    position: relative;
    margin: 0;
    padding: 14px 14px 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(29, 45, 68, 0.16);
    transform: rotate(var(--tilt, -2deg));
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.45s ease;
    cursor: pointer;
}
.photo:nth-child(2n) .photo__card { --tilt: 2.5deg; }
.photo:nth-child(3n) .photo__card { --tilt: -3deg; }
.photo:nth-child(5n) .photo__card { --tilt: 1.5deg; }

.photo__card:hover,
.photo:focus-visible .photo__card {
    transform: rotate(0deg) translateY(-12px) scale(1.03);
    box-shadow: 0 26px 50px rgba(29, 45, 68, 0.28);
    z-index: 5;
}
.photo:focus-visible .photo__card {
    outline: 3px solid var(--primary-blue);
    outline-offset: 4px;
}

/* Washi tape holding the polaroid to the wall */
.photo__card::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    width: 96px;
    height: 28px;
    transform: translateX(-50%) rotate(-5deg);
    background: repeating-linear-gradient(45deg,
        rgba(255, 209, 102, 0.65) 0 7px, rgba(255, 209, 102, 0.4) 7px 14px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 1px;
}
.photo:nth-child(2n) .photo__card::before {
    transform: translateX(-50%) rotate(4deg);
    background: repeating-linear-gradient(45deg,
        rgba(255, 77, 121, 0.5) 0 7px, rgba(255, 77, 121, 0.3) 7px 14px);
}
.photo:nth-child(3n) .photo__card::before {
    transform: translateX(-58%) rotate(6deg);
    background: repeating-linear-gradient(45deg,
        rgba(127, 184, 254, 0.6) 0 7px, rgba(127, 184, 254, 0.35) 7px 14px);
}

.photo__frame {
    overflow: hidden;
    border-radius: 2px;
    background: #ece5d5;
    line-height: 0;
    aspect-ratio: 4 / 5;
}

.photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.photo__card:hover .photo__img { transform: scale(1.06); }

/* Album label (solo tiles have no caption) — handwritten name + a stacked-photos glyph */
.photo__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px 16px;
    font-family: 'Caveat', cursive;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    color: var(--text-dark);
}

.photo__stack { fill: currentColor; }
.photo__caption .photo__stack {
    width: 20px;
    height: 20px;
    color: var(--primary-blue);
    flex: none;
}

/* Hidden album photos — kept in the DOM so the lightbox can read their sources */
.photo__extra { display: none; }

/* "Multiple photos" badge on an album cover */
.photo__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: rgba(29, 45, 68, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.photo__badge .photo__stack { width: 13px; height: 13px; }

@media (max-width: 768px) {
    .album { padding: 120px 1.5rem 70px; }
    .album__title { text-shadow: -3px 3px 0 var(--shadow-blue); }
    .album__filters { gap: 8px; margin-bottom: 34px; }
    .album__filter { font-size: 12px; padding: 7px 15px; }
    .album__wall { gap: 34px 20px; }
    .album__cloud, .album__bird { display: none; }
}

/* -----------------------------
   LIGHTBOX MODAL STYLES
----------------------------- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}

.lightbox--active {
    opacity: 1;
    visibility: visible;
}

.lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.lightbox--active .lightbox__image {
    transform: scale(1);
}

/* Album name + counter at the bottom of the lightbox (shown for multi-image sets only) */
.lightbox__caption {
    display: none;
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 82vw;
    padding: 7px 18px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: center;
    border-radius: 50px;
    backdrop-filter: blur(3px);
    z-index: 10000;
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10000;
    transition: transform 0.3s ease, color 0.3s ease;
}

.lightbox__close:hover {
    transform: scale(1.1);
    color: var(--primary-yellow);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10000;
    transition: background 0.3s ease, color 0.3s ease;
}

.lightbox__nav:hover {
    background: #fff;
    color: #000;
}

.lightbox__nav--prev {
    left: 20px;
}

.lightbox__nav--next {
    right: 20px;
}

@media (max-width: 768px) {
    .lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    .lightbox__nav--prev {
        left: 10px;
    }
    .lightbox__nav--next {
        right: 10px;
    }
    .lightbox__close {
        top: 15px;
        right: 15px;
        font-size: 2rem;
    }
}