/* ------------------------------------------------------------------
   Homepage-only styles
------------------------------------------------------------------ */

/* ===== Hero (rebuilt again: full-bleed photo background) =====
   One immersive section: full-width/full-height photo, gradient overlay,
   text over the image, and the category cards anchored near the
   bottom, fully INSIDE the hero (not below it, not overlapping it via
   negative margin). See templates/pages/home.html for the markup.

   Stage 7.54.4: the category count is no longer capped at 4 (see
   apps/pages/views.py::HomeView) and .cat-grid already wraps extra rows
   on its own — but .hero__categories is absolutely positioned inside
   this FIXED-height section, so an extra row previously had nowhere to
   go and overlapped the hero text above it. --cat-extra-rows-tablet/
   --cat-extra-rows-desktop are set inline on <section class="hero"> from
   real row-count math (not guessed here), so each extra row grows .hero
   by exactly the room .cat-grid needs. With exactly 4 categories both
   variables are 0, so these calc()s resolve to the exact original pixel
   values below — byte-identical to the previously-approved design. */

.hero {
    position: relative;
    overflow: hidden;
    height: 780px; /* mobile: 2x2 cards need more vertical room */
}

@media (min-width: 640px) {
    .hero {
        /* tablet-ish: still 2-column cards until 1024px; +230px per row
           beyond the 2 rows the base 700px already assumes. */
        height: calc(700px + (var(--cat-extra-rows-tablet, 0) * 230px));
    }
}

@media (min-width: 1024px) {
    .hero {
        /* desktop: 4-column cards; +250px per row beyond the 1 row the
           base 630px already assumes. */
        height: calc(630px + (var(--cat-extra-rows-desktop, 0) * 250px));
    }
}

.hero__slider {
    position: absolute;
    inset: 0;
}

.hero__track {
    display: grid;
    height: 100%;
}

.hero__slide {
    grid-area: 1 / 1;
    position: relative;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

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

/* Layer 1: the photo itself, full-bleed */
.hero__bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
}

/* Honest dev fallback for when the real photo hasn't been placed yet at
   static/img/hero/hero-water-play.jpg (see static/img/hero/README.md) — a
   plain labelled placeholder, not a decorative substitute pretending to be
   the photo. */
.hero__bg-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Extra bottom padding keeps the centered message clear of the
       category cards zone (which sits on top, z-index 4) instead of
       centering across the full hero height and running under them. */
    padding: 20px 20px 190px;
    text-align: center;
    background: repeating-linear-gradient(135deg, #EAF1F7, #EAF1F7 12px, #E1EAF2 12px, #E1EAF2 24px);
    color: #5B6572;
}

@media (min-width: 1024px) {
    .hero__bg-fallback {
        padding: 20px 20px 230px;
    }
}

.hero__bg-fallback .icon {
    width: 34px;
    height: 34px;
    color: #8A94A3;
}

.hero__bg-fallback p {
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0;
}

.hero__bg-fallback code {
    display: block;
    width: min(260px, 80vw);
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 3px 8px;
    border-radius: 6px;
    direction: ltr;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Layer 2: readable LIGHT gradient overlay — a soft white haze behind the
   text (left side), never a dark wash. Fully clear by ~72% across so the
   child on the right stays completely visible. */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(to right, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 72%);
}

/* Layer 3: hero text, directly on the image (no white box behind it) */
.hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 2;
}

.hero__copy {
    position: relative;
    padding-top: 34px;
    max-width: 30ch;
}

.hero__decor-splash {
    position: absolute;
    top: 4px;
    right: -6px;
    width: 22px;
    height: 22px;
    color: var(--yellow-500);
    transform: rotate(-18deg);
    opacity: 0.9;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.85);
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    color: var(--pink-600);
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 10px;
}

.hero__title {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.3;
}

.hero__title-navy {
    color: var(--blue-900);
}

.hero__title-pink {
    color: var(--pink-600);
}

.hero__subtitle {
    margin-top: 10px;
    color: #2B4C6F;
    font-size: 0.94rem;
    max-width: 34ch;
    line-height: 1.6;
}

.hero__cta {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__nav {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: var(--blue-900);
    z-index: 5;
}

.hero__nav--prev { right: 8px; }
.hero__nav--next { left: 8px; }

.hero__dots {
    position: absolute;
    bottom: 340px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 5;
}

.hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.hero__dot.is-active {
    width: 20px;
    background: var(--white);
}

/* Layer 4: category cards, anchored near the bottom of the hero — inside
   it, above the wave, never overlapping the next section. */
.hero__categories {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 4;
}

.hero__categories .container {
    max-width: 1300px;
}

@media (min-width: 1024px) {
    .hero__categories {
        bottom: 36px;
    }
}

/* Stage 7.48.2: premium two-part mobile hero. Text no longer floats on
   top of the photo (that required a harsh white gradient wash over the
   image and risked the face landing under text) — Part A is a clean
   content block in normal flow (soft pastel background, centered copy,
   one CTA), Part B is the photo in its own large organic-framed block
   directly below, completely unobstructed. The category section still
   follows in normal flow after both (Stage 7.48.1), so overall order on
   mobile is: content -> photo -> categories. Height is content-driven
   throughout (no fixed/viewport-locked .hero height). Tablet/desktop
   (>=768px) keep the original overlay composition, untouched below. */
@media (max-width: 767px) {
    .hero {
        height: auto;
        display: block;
    }

    .hero__slider {
        position: relative;
        inset: auto;
        height: auto;
    }

    .hero__track {
        height: auto;
    }

    .hero__slide {
        height: auto;
        display: grid;
        grid-template-rows: auto auto;
        row-gap: 0;
    }

    /* Decorative accents live on this grid container (a plain element,
       not a replaced <img>) so no extra markup is needed for them. Both
       are bottom-anchored — the photo is the last grid row, so "near the
       bottom of the slide" reliably means "near the photo" regardless of
       how tall the text content above happens to render. Kept to two
       small soft blobs — restrained, not a sticker collage. */
    .hero__slide::before,
    .hero__slide::after {
        content: "";
        position: absolute;
        z-index: 0;
        border-radius: 50%;
        filter: blur(2px);
        pointer-events: none;
    }

    .hero__slide::before {
        width: 44px;
        height: 44px;
        bottom: calc(54vh - 10px);
        right: 26px;
        background: radial-gradient(circle, rgba(255, 193, 222, 0.6), rgba(255, 193, 222, 0) 72%);
    }

    .hero__slide::after {
        width: 58px;
        height: 58px;
        bottom: 46px;
        left: 20px;
        background: radial-gradient(circle, rgba(191, 230, 251, 0.65), rgba(191, 230, 251, 0) 72%);
    }

    /* ===== Part A: content — in normal flow, soft pastel background ===== */
    .hero__content {
        position: relative;
        inset: auto;
        grid-row: 1;
        z-index: 1;
        display: block;
        padding: 30px 0 22px;
        background: linear-gradient(180deg, #FFF7FA 0%, var(--blue-100) 100%);
        text-align: center;
    }

    .hero__copy {
        max-width: none;
        padding-top: 0;
    }

    .hero__decor-splash {
        display: none;
    }

    .hero__eyebrow {
        margin-right: auto;
        margin-left: auto;
    }

    .hero__subtitle {
        margin-right: auto;
        margin-left: auto;
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__overlay {
        display: none;
    }

    /* ===== Part B: photo — large, organic-framed, fully unobstructed ===== */
    .hero__bg-photo,
    .hero__bg-fallback {
        position: relative;
        inset: auto;
        grid-row: 2;
        z-index: 1;
        width: calc(100% - 32px);
        height: 54vh;
        min-height: 320px;
        max-height: 440px;
        margin: 0 16px 30px;
        border-radius: 36px;
        box-shadow: 0 20px 44px rgba(27, 58, 99, 0.16);
    }

    .hero__bg-fallback {
        padding: 20px;
    }

    .hero__nav {
        top: auto;
        bottom: calc(27vh - 20px);
    }

    .hero__dots {
        bottom: 46px;
    }

    .hero__categories {
        position: static;
        padding: 8px 0 8px;
        background: none;
    }

    .hero__wave {
        display: none;
    }
}

/* Layer 5: subtle organic wave right at the hero's bottom edge, entirely
   below the cards (never cutting through them). */
.hero__wave {
    display: block;
    width: 100%;
    height: clamp(20px, 4vw, 34px);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

.hero__wave path {
    fill: var(--white);
}

@media (min-width: 640px) {
    .hero__title {
        font-size: 1.8rem;
    }
}

@media (min-width: 768px) {
    .hero__nav--prev { right: 20px; }
    .hero__nav--next { left: 20px; }
}

@media (min-width: 1024px) {
    .hero__copy {
        padding-top: 54px;
        max-width: 34ch;
    }
    .hero__title {
        font-size: 2.3rem;
    }
    .hero__subtitle {
        font-size: 0.95rem;
        max-width: 38ch;
    }
    .hero__dots {
        bottom: 220px;
    }
}

@media (min-width: 1440px) {
    .hero__title {
        font-size: 2.6rem;
    }
}

/* ===== Category cards — glossy candy-glass clouds =====
   Stage 7.54.4.1: flexbox instead of CSS Grid, specifically because
   `flex-wrap: wrap; justify-content: center` centers EACH wrapped row
   independently — a 5th/6th/7th card never sits alone at an edge the way
   a `grid-template-columns: repeat(4,1fr)` row would naturally leave it
   (Grid fills tracks left-to-right and does not re-center a partial final
   row). The two `:has()` rules below are the only count-specific CSS —
   they exist precisely to match this stage's two required exact patterns
   (5 -> 3+2, 6 -> 3+3); everything else (<=4 or >=7) uses the default
   4-per-row basis and still gets correct auto-centering of its own
   partial last row for free from flexbox, with zero extra CSS needed as
   more categories are added.

   The percentages below are chosen so they are the exact same formula as
   the old `1fr` grid tracks (track = (container - (n-1)*gap) / n), so a
   card's rendered width is pixel-identical to the previous design for
   any n this stage didn't change (n=2 tablet/mobile, n=4 desktop). */
.cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.cat-grid .cat-card {
    flex: 0 0 calc(50% - 7px); /* (1 gap * 14px) / 2 columns = 7px */
    max-width: calc(50% - 7px);
}

@media (min-width: 1024px) {
    .cat-grid {
        gap: 16px;
    }

    .cat-grid .cat-card {
        flex-basis: calc(25% - 12px); /* (3 gaps * 16px) / 4 columns = 12px */
        max-width: calc(25% - 12px);
    }

    /* Exactly 5 or exactly 6 total cards -> 3 per row (3+2 / 3+3),
       instead of the default 4-per-row (which would give an isolated
       4+1 or an uneven 4+2). */
    .cat-grid:has(.cat-card:nth-child(5):last-child) .cat-card,
    .cat-grid:has(.cat-card:nth-child(6):last-child) .cat-card {
        flex-basis: calc(33.333% - 10.667px); /* (2 gaps * 16px) / 3 columns */
        max-width: calc(33.333% - 10.667px);
    }
}

/* Layered architecture, per spec: the cloud silhouette (clip-path) lives on
   its OWN layer (.cat-card__cloud) and only ever affects that layer. The
   illustration/title/subtitle/arrow live on a separate, never-clipped
   layer (.cat-card__content) stacked on top, so the illustration is free
   to visually float above the cloud's upper edge without being cut off.

     .cat-card (link, hover transform only)
       .cat-card__float (fixed height, idle float animation)
         .cat-card__cloud   <- clip-path + glass material HERE ONLY
         .cat-card__content <- illustration/title/subtitle/arrow, never clipped
*/
.cat-card {
    position: relative;
    display: block;
    overflow: visible;
    text-align: center;
    transition: transform 0.25s ease;
}

.cat-card:hover,
.cat-card:focus-visible {
    transform: translateY(-8px) scale(1.02);
}

/* Continuous idle float lives on this wrapper so it can compose with the
   hover lift/scale on the outer `.cat-card` without the two fighting over
   the same `transform`. Each card gets a different duration/delay/amount
   via inline custom properties (see components/category_card.html) so the
   four never move in sync. Fixed height (rather than auto, content-based)
   is what lets .cat-card__cloud use a percentage height safely, and keeps
   all four cards visually consistent regardless of 1- vs 2-line titles. */
.cat-card__float {
    position: relative;
    display: block;
    height: 212px;
    overflow: visible;
    animation: catCardFloat var(--float-dur, 5s) ease-in-out infinite alternate;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

@keyframes catCardFloat {
    from { transform: translateY(0); }
    to { transform: translateY(var(--float-y, -4px)); }
}

@media (prefers-reduced-motion: reduce) {
    .cat-card__float {
        animation: none;
    }
    .cat-card {
        transition: none;
    }
    .cat-card__arrow {
        transition: none;
    }
    .cat-card:hover .cat-card__arrow {
        transform: none;
    }
    .cat-card:hover,
    .cat-card:focus-visible {
        transform: none;
    }
}

/* The cloud layer: covers the lower ~70% of the card so the illustration
   (positioned by .cat-card__media below) has clear room above it to float
   over. This is the ONLY element with clip-path — nothing here affects
   .cat-card__content. */
.cat-card__cloud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72%;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    filter: drop-shadow(0 10px 18px rgba(15, 40, 70, 0.16));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        inset 0 14px 22px rgba(255, 255, 255, 0.35),
        inset 0 -14px 22px rgba(15, 40, 70, 0.05);
    transition: filter 0.25s ease, box-shadow 0.25s ease;
}

/* Glossy reflection — a soft blurred white ellipse, clipped to the same
   cloud path (pseudo-elements inherit their parent's clip-path), so it
   always reads as light hitting the polished glass, not a flat shine. */
.cat-card__cloud::before {
    content: "";
    position: absolute;
    top: 8%;
    right: 14%;
    width: 46%;
    height: 34%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0) 78%);
    filter: blur(2px);
    transform: rotate(-14deg);
    opacity: 0.85;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.cat-card:hover .cat-card__cloud,
.cat-card:focus-visible .cat-card__cloud {
    filter: drop-shadow(0 18px 28px rgba(15, 40, 70, 0.24));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 16px 26px rgba(255, 255, 255, 0.45),
        inset 0 -14px 22px rgba(15, 40, 70, 0.06);
}

.cat-card:hover .cat-card__cloud::before,
.cat-card:focus-visible .cat-card__cloud::before {
    opacity: 1;
}

@media (min-width: 768px) {
    .cat-card__cloud {
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }
}

/* Each card gets a different hand-tuned cloud silhouette (see
   templates/partials/cloud-shapes.html) — 5-7 large soft lobes, not a
   shared border-radius blob — filled with a translucent pastel "glass"
   tint (not an opaque color block) so the hero photo stays subtly visible
   through the backdrop-filter blur. */
.cat-card--cream {
    background: rgba(255, 240, 176, 0.72);
    clip-path: url(#cat-cloud-cream);
}

.cat-card--blue {
    background: rgba(173, 220, 255, 0.72);
    clip-path: url(#cat-cloud-blue);
}

.cat-card--pink {
    background: rgba(255, 195, 224, 0.72);
    clip-path: url(#cat-cloud-pink);
}

.cat-card--mint {
    background: rgba(170, 240, 210, 0.72);
    clip-path: url(#cat-cloud-mint);
}

/* The content layer: absolutely positioned over the full float box (same
   size as the cloud's containing box) but NEVER clipped itself, so the
   illustration can extend above the cloud's own top edge on purpose. */
.cat-card__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    padding: 0 12px;
    pointer-events: none;
}

/* Stage 7.29: the longest category title ("نمایش‌های عروسکی و موزیکال")
   wraps to two lines whose longest line fills the full padded width,
   landing right at the cloud shape's irregular edge on narrow screens.
   A little extra side padding here (matching the 16px already used at
   the 1024px breakpoint below) gives every card's title breathing room
   from the shape's edge — generic, not scoped to one category. */
@media (max-width: 480px) {
    .cat-card__content {
        padding: 0 16px;
    }
}

.cat-card__content > * {
    pointer-events: auto;
}

/* Illustration: sized to its own 3:2 aspect ratio, NOT a cropped circular
   avatar. margin-top is tuned so the image starts above the cloud's top
   edge and its lower portion overlaps into the cloud — intentional. */
.cat-card__media {
    position: relative;
    width: 80px;
    aspect-ratio: 3 / 2;
    height: auto;
    margin: 20px auto 2px;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Opt-in larger size for illustrations that are wider/busier than the
   standard 3:2 artwork (set per-category via CATEGORY_THEME.media_size in
   apps/pages/views.py) — scoped to this modifier class only, so the other
   three cards' media size is completely unaffected. */
.cat-card__media--lg {
    width: 92px;
    margin-top: 12px;
}

.cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.cat-card__title {
    font-weight: 800;
    color: var(--blue-900);
    font-size: 0.92rem;
    line-height: 1.3;
}

.cat-card__subtitle {
    color: var(--gray-600);
    font-size: 0.74rem;
    line-height: 1.3;
}

/* Pushed to the bottom of the content column with margin-top:auto rather
   than a fixed corner offset — with an irregular cloud silhouette, a fixed
   corner can land outside the shape's safe zone on some rotations. Centered
   and bottom-anchored in flow guarantees it always renders inside the
   visible cloud regardless of shape/rotation or title length. */
.cat-card__arrow {
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(15, 40, 70, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cat-card__arrow .icon {
    width: 12px;
    height: 12px;
}

/* Each card's arrow carries its own accent color (set via the arrow class
   from apps/pages/views.py::CATEGORY_THEME) rather than swapping to a
   single shared color on hover. */
.cat-arrow--yellow { background: var(--yellow-500); color: var(--blue-900); }
.cat-arrow--blue { background: var(--blue-600); color: var(--white); }
.cat-arrow--pink { background: var(--pink-600); color: var(--white); }
.cat-arrow--green { background: var(--green-600); color: var(--white); }

.cat-card:hover .cat-card__arrow {
    transform: scale(1.12);
    filter: brightness(1.08);
}

@media (min-width: 1024px) {
    .cat-card__float {
        height: 232px;
    }
    .cat-card__content {
        padding: 0 16px;
    }
    .cat-card__media {
        width: 104px;
        margin: 26px auto 4px;
    }
    .cat-card__media--lg {
        width: 136px;
        margin-top: 18px;
    }
    .cat-card__title {
        font-size: 1rem;
    }
    .cat-card__subtitle {
        font-size: 0.8rem;
    }
    .cat-card__arrow {
        margin-bottom: 16px;
        width: 26px;
        height: 26px;
    }
    .cat-card__arrow .icon {
        width: 13px;
        height: 13px;
    }
}

/* ===== Festival section: clean layered background + minimal decorations =====
   Deliberately light-touch — the sitewide body gradient (base.css) already
   carries most of the atmosphere; this section only adds two very soft
   corner blooms (kept off the center, behind nothing) and a handful of
   isolated decorative marks, per "background must stay clean, cards are
   the focus" direction. */
.section--festivals {
    position: relative;
    overflow: hidden;
    padding-bottom: 8px;
}

/* Stage 7.48.3/7.48.4: premium pink pastel aurora background for this
   section. Two pseudo-elements (no raster image, no extra DOM):
   ::before carries soft-edged radial-gradient "aurora" blooms (blush/
   baby pink/soft rose/pastel lavender/warm peach, plus a small pastel-
   blue accent for balance — Stage 7.48.4's palette) over a pink-tinted
   base. ::after carries the fine-grain noise on its OWN very-low-
   opacity layer with `mix-blend-mode: overlay`, decoupled from the
   gradients so it reads as a subtle premium paper texture rather than
   visible static. Both sit behind .fest-bloom/.fest-deco and the
   container (already z-index 1+), purely decorative/non-interactive. */
.section--festivals::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(620px 520px at 12% 10%, rgba(255, 217, 233, 0.55), transparent 68%),
        radial-gradient(640px 500px at 88% 8%, rgba(240, 228, 255, 0.4), transparent 68%),
        radial-gradient(900px 700px at 50% 42%, rgba(255, 240, 246, 0.65), transparent 62%),
        radial-gradient(620px 520px at 10% 92%, rgba(255, 196, 221, 0.46), transparent 68%),
        radial-gradient(520px 440px at 30% 98%, rgba(255, 233, 220, 0.3), transparent 68%),
        radial-gradient(640px 480px at 90% 96%, rgba(231, 244, 255, 0.3), transparent 68%),
        linear-gradient(180deg, #FFF0F6 0%, #FFF5F0 100%);
    background-repeat: no-repeat;
}

.section--festivals::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
    mix-blend-mode: overlay;
    opacity: 0.045;
}

@media (max-width: 767px) {
    /* Softer, less busy: three blooms instead of six, slightly lower
       noise opacity so body text above keeps full contrast. */
    .section--festivals::before {
        background-image:
            radial-gradient(420px 360px at 10% 6%, rgba(255, 217, 233, 0.5), transparent 70%),
            radial-gradient(460px 420px at 50% 50%, rgba(255, 240, 246, 0.55), transparent 65%),
            radial-gradient(420px 380px at 8% 94%, rgba(255, 196, 221, 0.4), transparent 70%),
            linear-gradient(180deg, #FFF0F6 0%, #FFF5F0 100%);
    }

    .section--festivals::after {
        opacity: 0.035;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No animation lives on these layers anyway; nothing to disable —
       kept as an explicit no-op marker so a future animated layer added
       here is forced to consider this preference too. */
    .section--festivals::before,
    .section--festivals::after {
        animation: none;
    }
}

.fest-bloom {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.fest-bloom--a { top: -8%; right: -6%; width: 320px; height: 280px; background: radial-gradient(circle, rgba(173, 220, 255, 0.26), transparent 70%); }
.fest-bloom--b { bottom: -8%; left: -6%; width: 300px; height: 260px; background: radial-gradient(circle, rgba(255, 195, 224, 0.2), transparent 70%); }

.fest-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.fest-deco svg {
    width: 100%;
    height: 100%;
}

.fest-deco--star {
    top: 3%;
    left: 5%;
    width: 22px;
    height: 22px;
    animation: festStarPulse 4.5s ease-in-out infinite;
}

.fest-deco--bubble {
    top: 8%;
    right: 6%;
    width: 26px;
    height: 26px;
    animation: festBubbleFloat 6.5s ease-in-out infinite;
}

.fest-deco--splash-a {
    top: 2px;
    right: calc(50% + 150px);
    animation: festSplashSway 5s ease-in-out infinite;
}

.fest-deco--splash-b {
    top: 2px;
    left: calc(50% + 150px);
    animation: festSplashSway 5.6s ease-in-out infinite .4s;
}

@keyframes festStarPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.15) rotate(8deg); opacity: 1; }
}

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

@keyframes festSplashSway {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.75; }
    50% { transform: translateY(-6px) rotate(-6deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fest-deco--star,
    .fest-deco--bubble,
    .fest-deco--splash-a,
    .fest-deco--splash-b {
        animation: none;
    }
}

.section--festivals .container {
    position: relative;
    z-index: 1;
}

/* ===== Centered season hero: eyebrow + heading + subtitle + pills ===== */
.season-hero {
    position: relative;
    max-width: 640px;
    margin: 0 auto 8px;
    text-align: center;
}

.season-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pink-600);
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0 0 8px;
}

.season-hero__eyebrow .icon {
    width: 15px;
    height: 15px;
    color: var(--yellow-500);
}

.season-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #173B6C;
    line-height: 1.35;
}

.season-hero__subtitle {
    margin-top: 8px;
    color: var(--gray-600);
    font-size: 0.92rem;
}

@media (min-width: 768px) {
    .season-hero__title {
        font-size: 2rem;
    }
}

.season-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.season-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        0 6px 14px rgba(27, 58, 99, 0.08);
    color: var(--gray-600);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.25s ease-out, color 0.25s ease-out;
}

.season-pill .icon {
    width: 16px;
    height: 16px;
}

.season-pill:hover {
    transform: translateY(-2px);
}

.season--all.is-active { background: linear-gradient(155deg, #C7B4FF, #8B5CF6); color: var(--white); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 10px 20px -6px rgba(139,92,246,0.45); }
.season--spring.is-active { background: linear-gradient(155deg, #A3ECBB, #4CAF6E); color: var(--white); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 10px 20px -6px rgba(76,175,110,0.4); }
.season--summer.is-active { background: linear-gradient(155deg, #FFE29A, #FFC845); color: #5C3B00; box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 10px 22px -6px rgba(255,200,69,0.5); }
.season--autumn.is-active { background: linear-gradient(155deg, #FFC299, #F0824A); color: var(--white); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 10px 20px -6px rgba(240,130,74,0.42); }
.season--winter.is-active { background: linear-gradient(155deg, #BEE6F5, #4FAEDB); color: var(--white); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), 0 10px 20px -6px rgba(79,174,219,0.4); }

@media (prefers-reduced-motion: reduce) {
    .season-pill {
        transition: none;
    }
    .season-pill:hover {
        transform: none;
    }
}

.festival-empty {
    text-align: center;
    color: var(--gray-600);
    font-size: 0.9rem;
    padding: 40px 20px;
}

/* ===== Event cards: top image + bottom glass panel ===== */
.festival-scroller {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Stage 7.29: tightened from 30px so the section feels connected to
       the season tabs above it, without getting cramped. */
    padding: 20px 20px 26px;
    margin: 0 -20px;
    scrollbar-width: none;
}

.festival-scroller::-webkit-scrollbar {
    display: none;
}

.festival-scroller > * {
    scroll-snap-align: start;
    flex: 0 0 84vw;
    max-width: 310px;
}

@media (min-width: 560px) {
    .festival-scroller > * {
        flex-basis: 46%;
    }
}

/* Stage 7.48.1: below 560px, a horizontal 84vw-peek scroller with no
   visible nav/dots read as an accidentally-clipped card, not a
   deliberate carousel. A clean full-width vertical stack is simpler,
   never clips anything, and needs no extra navigation UI to be
   understandable — matches "prefer a vertical listing" guidance.
   560px+ (tablet) and 1024px+ (desktop grid) are unchanged. */
@media (max-width: 559px) {
    .festival-scroller {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 16px 0 8px;
        margin: 0;
        gap: 20px;
    }

    .festival-scroller > * {
        flex: none;
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .festival-scroller {
        margin: 0;
        padding: 20px 4px 26px;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        /* Stage 7.33: stretch (not start) so every card in a row shares
           the tallest card's height — .festival-card/__inner already use
           height:100% and the panel's CTA uses margin-top:auto, so this
           is what actually makes the CTA buttons land on a common
           baseline instead of each card sizing to its own content. */
        align-items: stretch;
    }
    .festival-scroller > * {
        flex: none;
        max-width: none;
    }
}

/* Stage 7.29: when a seasonal filter leaves only 1–2 cards visible, center
   them instead of leaving them start-aligned (in RTL, flex/grid-start is
   the right edge — a single grid item in the 4-column layout below was
   landing flush right with a large empty area to its left). The class is
   toggled purely by visible-card count in season-filter.js, never by
   season name or Festival id, so it applies the same way regardless of
   which festival(s) happen to be showing. */
.festival-scroller--count-1,
.festival-scroller--count-2,
.festival-scroller--count-3 {
    justify-content: center;
}

.festival-scroller--count-2 > * {
    flex-basis: 44vw;
}

@media (min-width: 560px) {
    .festival-scroller--count-2 > * {
        flex-basis: 46%;
    }
}

/* Stage 7.48.3: the same "center instead of leaving a large empty gap"
   fix as count-1/count-2, extended to 3 visible cards — the desktop grid
   below is 4 columns, so 3 cards (a common real case, e.g. the default
   season filter) were left start-aligned with one whole column's worth
   of empty space beside them (the left side, in RTL). */
@media (min-width: 1024px) {
    .festival-scroller--count-1,
    .festival-scroller--count-2,
    .festival-scroller--count-3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .festival-scroller--count-1 > * {
        flex: 0 1 340px;
        max-width: 360px;
    }
    .festival-scroller--count-2 > *,
    .festival-scroller--count-3 > * {
        flex: 0 1 320px;
        max-width: 340px;
    }
}

/* Outer <article> only carries the slow independent float; hover's lift
   lives on .festival-card__inner instead, so the two transforms never
   fight over the same element's `transform` property (a running CSS
   animation continuously repaints it, which would otherwise swallow a
   plain :hover rule on that element). */
.festival-card {
    position: relative;
    /* Stage 7.33: no explicit height here on purpose — a literal `100%`
       is not the `auto` keyword, so per the flexbox spec it opts this
       item OUT of align-items: stretch in the mobile horizontal scroller
       (it happened to look fine in the >=1024 grid only because grid row
       tracks get a definite size either way). Leaving height unset lets
       both the flex scroller and the grid layouts stretch every card in
       a row/line to the tallest one's height, same as before but now
       actually equal — .festival-card__inner's height:100% below then
       correctly fills that stretched, definite size. */
    animation: fcFloat 6s ease-in-out infinite alternate;
}

.festival-scroller > *:nth-child(1) .festival-card { animation-duration: 5.4s; }
.festival-scroller > *:nth-child(2) .festival-card { animation-duration: 6.1s; animation-delay: .6s; }
.festival-scroller > *:nth-child(3) .festival-card { animation-duration: 5.7s; animation-delay: 1.1s; }
.festival-scroller > *:nth-child(4) .festival-card { animation-duration: 6.4s; animation-delay: .3s; }

@keyframes fcFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .festival-card {
        animation: none;
    }
}

.festival-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: var(--white);
    box-shadow:
        0 24px 55px rgba(37, 73, 125, 0.16),
        0 10px 25px rgba(68, 113, 170, 0.12),
        0 3px 8px rgba(255, 255, 255, 0.65),
        0 30px 60px -24px rgba(200, 180, 255, 0.16);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease;
}

.festival-card:hover .festival-card__inner,
.festival-card:focus-within .festival-card__inner {
    transform: translateY(-9px) scale(1.015);
    box-shadow:
        0 30px 64px rgba(37, 73, 125, 0.22),
        0 14px 30px rgba(68, 113, 170, 0.16),
        0 3px 8px rgba(255, 255, 255, 0.75),
        0 36px 68px -22px rgba(200, 180, 255, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .festival-card__inner {
        transition: none;
    }
    .festival-card:hover .festival-card__inner,
    .festival-card:focus-within .festival-card__inner {
        transform: none;
    }
}

.festival-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    background: var(--gray-100);
    overflow: hidden;
}

.festival-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.4s ease;
}

/* Per-card face/subject framing (see templates/components/festival_card.html
   — apps/pages/views.py::_season_event_cards() sets the modifier). Tune
   these once the real artwork is in place; defaults favor the upper part
   of the frame where character faces typically sit. */
.festival-card--water .festival-card__media img { object-position: center 22%; }
.festival-card--puppet .festival-card__media img { object-position: center 18%; }
.festival-card--birthday .festival-card__media img { object-position: center 15%; }
.festival-card--hollywood .festival-card__media img { object-position: center 20%; }

.festival-card:hover .festival-card__media img {
    transform: scale(1.05);
}

.festival-card__media-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 44%;
    background: linear-gradient(180deg, transparent, rgba(20, 30, 45, 0.28));
    pointer-events: none;
}

.festival-card__media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    text-align: center;
    background: repeating-linear-gradient(135deg, #EAF1F7, #EAF1F7 10px, #E1EAF2 10px, #E1EAF2 20px);
    color: #5B6572;
}

.festival-card__media-fallback .icon {
    width: 26px;
    height: 26px;
    color: #8A94A3;
}

.festival-card__media-fallback p {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .festival-card__media img {
        transition: none;
    }
    .festival-card:hover .festival-card__media img {
        transform: none;
    }
}

.festival-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(15, 40, 70, 0.22);
    overflow: hidden;
}

.festival-card__badge::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.festival-card__fav {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--pink-600);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(15, 40, 70, 0.18);
    transition: transform 0.2s ease-out;
}

.festival-card__fav .icon {
    width: 15px;
    height: 15px;
}

.festival-card__fav:hover {
    transform: scale(1.15) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
    .festival-card__fav {
        transition: none;
    }
    .festival-card__fav:hover {
        transform: none;
    }
}

.festival-card__panel {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: -16px;
    padding: 18px 18px 20px;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.festival-card__title {
    font-weight: 800;
    color: var(--blue-900);
    font-size: 1rem;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Stage 7.33: reserves a consistent 2-line block whether a given
       title actually wraps to 1 or 2 lines, so the rows below it (chip,
       meta, price, CTA) start at the same offset across every card in a
       row instead of shifting per-title-length. Still not a fixed/clipping
       height — line-clamp above keeps handling genuine overflow. */
    min-height: calc(1.32em * 2);
}

.festival-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--fc-chip, var(--blue-100));
    color: var(--fc-chip-fg, var(--blue-700));
    font-size: 0.7rem;
    font-weight: 700;
}

.festival-card__chip .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.festival-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 6px;
    color: var(--gray-600);
    font-size: 0.76rem;
}

/* Stage 7.33: each icon+label pair wraps as one unbreakable unit — if the
   row runs out of width, wrapping happens between groups (after the ·
   separator), never mid-label (e.g. splitting "4 تا" from "12 سال"). */
.festival-card__meta-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.festival-card__meta-row .icon {
    width: 13px;
    height: 13px;
    color: var(--blue-600);
    flex-shrink: 0;
}

.festival-card__meta-sep {
    color: var(--gray-400);
    margin: 0 1px;
}

.festival-card__price {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.festival-card__price strong {
    color: var(--pink-600);
    font-size: 0.98rem;
}

.festival-card__cta {
    margin-top: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: var(--radius-pill);
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    color: var(--white);
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        0 10px 18px -4px rgba(240, 80, 140, 0.42);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.festival-card__cta .icon {
    width: 14px;
    height: 14px;
}

.festival-card__cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.65),
        0 14px 24px -4px rgba(240, 80, 140, 0.52);
}

/* Festival Detail lands in Stage 7.2 — until then, cards render this
   inert state instead of a dead href="#" link. */
.festival-card__cta--soon {
    background: var(--gray-100);
    color: var(--gray-600);
    box-shadow: none;
    cursor: default;
}

.festival-card__cta--soon:hover {
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .festival-card__cta {
        transition: none;
    }
    .festival-card__cta:hover {
        transform: none;
    }
}

@media (min-width: 1024px) {
    .festival-card__panel {
        padding: 20px 20px 22px;
        gap: 10px;
    }
}

.festival-viewall {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.festival-viewall__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 14px rgba(27, 58, 99, 0.08);
    color: var(--blue-700);
    font-weight: 700;
    font-size: 0.86rem;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.festival-viewall__btn .icon {
    width: 16px;
    height: 16px;
}

.festival-viewall__btn:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 18px rgba(27, 58, 99, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .festival-viewall__btn {
        transition: none;
    }
    .festival-viewall__btn:hover {
        transform: none;
    }
}

/* ===== Trust strip: compact cloud/glass strip below the festival cards ===== */
.trust-strip {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    padding: 20px 22px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 20px 40px -22px rgba(27, 58, 99, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-strip__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(15, 40, 70, 0.12);
}

.trust-strip__icon .icon {
    width: 20px;
    height: 20px;
}

.trust-strip__icon--blue { background: linear-gradient(155deg, #CFE6FF, #9CC8F5); color: #1E63A8; }
.trust-strip__icon--pink { background: linear-gradient(155deg, #FFD3E2, #FF9FBE); color: #B4266E; }
.trust-strip__icon--yellow { background: linear-gradient(155deg, #FFEFC2, #FFD879); color: #8A5A0F; }
.trust-strip__icon--green { background: linear-gradient(155deg, #D6F5DD, #9FE3B3); color: #1E7A43; }

.trust-strip__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.trust-strip__text strong {
    color: var(--blue-900);
    font-size: 0.86rem;
    font-weight: 800;
}

.trust-strip__text small {
    color: var(--gray-600);
    font-size: 0.72rem;
}

@media (min-width: 768px) {
    .trust-strip {
        grid-template-columns: repeat(4, 1fr);
        padding: 22px 32px;
    }
}

/* ===== چرا تهران کودک؟ =====
   heading, the 5 benefits and the 3 cards are all children of ONE
   .why-tk__panel wrapper that only handles layout (width/centering/
   padding/spacing) — it has no background, border, radius or shadow of
   its own, so the content sits directly on the page's own background;
   visual depth comes only from the inner .why-tk__benefit / .why-card
   glass items. */
.why-tk {
    position: relative;
    /* .how-it-works's own padding-bottom is already spent inside its own
       box, so the only space between that section's rendered edge and this
       panel's outer edge is this padding-top — set directly to the 32-45px
       target rather than the shared .section class's much larger default. */
    padding-top: 36px;
}

.why-tk__panel {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin-inline: auto;
    direction: rtl;
    padding: 28px 20px 30px;
    background: transparent;
}

@media (min-width: 768px) {
    .why-tk__panel {
        padding: 28px 38px;
    }
}

.why-tk__glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.why-tk__glow--a { top: -6%; left: -4%; width: 320px; height: 280px; background: radial-gradient(circle, rgba(255, 195, 224, 0.22), transparent 70%); }
.why-tk__glow--b { bottom: -6%; right: -4%; width: 320px; height: 280px; background: radial-gradient(circle, rgba(173, 220, 255, 0.22), transparent 70%); }

.why-tk__heading {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 0;
}

.why-tk__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #173B6C;
    margin: 0 0 6px;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .why-tk__title {
        font-size: 36px;
    }
}

.why-tk__subtitle {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .why-tk__subtitle {
        font-size: 16px;
    }
}

/* --- 5 benefits: soft glass mini-items inside the panel --- */
.why-tk__benefits {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    text-align: center;
    margin: 30px 0 0;
}

@media (min-width: 640px) {
    .why-tk__benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .why-tk__benefits {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
        margin-top: 22px;
    }
}

.why-tk__benefit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.why-tk__benefit:hover {
    transform: translateY(-4px);
    box-shadow:
        0 14px 28px -14px rgba(139, 92, 246, 0.2),
        0 10px 20px -12px rgba(240, 80, 140, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .why-tk__benefit {
        transition: none;
    }
    .why-tk__benefit:hover {
        transform: none;
    }
}

@media (min-width: 1024px) {
    .why-tk__benefit {
        gap: 7px;
        padding: 12px 10px;
    }
}

.why-benefit__glow {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 40px;
    border-radius: 50%;
    filter: blur(16px);
    z-index: 0;
}

.why-benefit__glow--blue { background: rgba(173, 220, 255, 0.55); }
.why-benefit__glow--pink { background: rgba(255, 195, 224, 0.55); }
.why-benefit__glow--purple { background: rgba(196, 175, 245, 0.5); }
.why-benefit__glow--yellow { background: rgba(255, 216, 121, 0.55); }

.why-benefit__img {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    animation: whyBenefitFloat 5.4s ease-in-out infinite alternate;
}

.why-benefit__img--d1 { animation-delay: 0s; }
.why-benefit__img--d2 { animation-delay: 0.2s; animation-duration: 5.8s; }
.why-benefit__img--d3 { animation-delay: 0.4s; animation-duration: 5.1s; }
.why-benefit__img--d4 { animation-delay: 0.6s; animation-duration: 6.1s; }
.why-benefit__img--d5 { animation-delay: 0.8s; animation-duration: 5.6s; }

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

@media (prefers-reduced-motion: reduce) {
    .why-benefit__img {
        animation: none;
    }
}

@media (min-width: 1024px) {
    .why-benefit__img {
        width: 58px;
        height: 58px;
    }
}

.why-benefit__label {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue-900);
}

@media (min-width: 1024px) {
    .why-benefit__label {
        font-size: 15px;
    }
}

/* --- 3 cards: testimonial / gallery / newsletter --- */
.why-tk__cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 33px 0 0;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .why-tk__cards {
        grid-template-columns: 1fr 1fr;
    }
    .why-card--gallery { grid-column: 1 / 3; order: -1; }
    .why-card--testimonial { order: 0; }
    .why-card--newsletter { order: 1; }
}

@media (max-width: 639px) {
    .why-card--gallery { order: -1; }
    .why-card--testimonial { order: 0; }
    .why-card--newsletter { order: 1; }
}

@media (min-width: 1024px) {
    .why-tk__cards {
        grid-template-columns: 0.9fr 1.25fr 0.9fr;
        gap: 20px;
        align-items: stretch;
        margin-top: 24px;
    }
}

.why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 22px 46px -22px rgba(240, 80, 140, 0.14),
        0 18px 40px -22px rgba(80, 140, 230, 0.14),
        0 8px 18px -8px rgba(139, 92, 246, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 28px 54px -20px rgba(240, 80, 140, 0.2),
        0 22px 46px -20px rgba(80, 140, 230, 0.18),
        0 10px 22px -8px rgba(139, 92, 246, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

@media (prefers-reduced-motion: reduce) {
    .why-card {
        transition: none;
    }
    .why-card:hover {
        transform: none;
    }
}

.why-card__title {
    font-weight: 800;
    color: var(--blue-900);
    font-size: 1.02rem;
    margin-bottom: 8px;
}

.why-card__subtitle {
    color: var(--gray-600);
    font-size: 0.8rem;
    margin-top: -4px;
    margin-bottom: 10px;
}

/* Testimonial */
.why-card__quote-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(155deg, #FFD3E2, #FF9FBE);
    color: var(--white);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(240, 80, 140, 0.25);
    margin-bottom: 8px;
}

.why-card__quote-icon svg {
    width: 16px;
    height: 16px;
}

.why-card__quote {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1;
}

.why-card__empty {
    color: var(--gray-600);
    font-size: 0.92rem;
    line-height: 1.8;
    flex: 1;
    display: flex;
    align-items: center;
}

.why-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.why-card__author img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.why-card__author strong {
    font-size: 0.86rem;
    color: var(--blue-900);
}

/* Testimonial carousel — only shows nav dots when there is more than one
   approved review; with a single review it renders identically to the old
   static single-quote markup. */
.why-testimonial-track {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.why-testimonial-slide {
    display: none;
    flex-direction: column;
    flex: 1;
}

.why-testimonial-slide.is-active {
    display: flex;
}

.why-testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.why-testimonial-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(139, 92, 246, 0.22);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.why-testimonial-dot.is-active {
    background: var(--pink-600);
    transform: scale(1.2);
}

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

/* Gallery collage */
.why-card--gallery {
    padding: 22px 22px 24px;
}

.why-card__head {
    margin-bottom: 10px;
}

.gallery-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    height: 180px;
}

.gallery-collage__item {
    position: relative;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    background: var(--gray-100);
}

.gallery-collage__item--big { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-collage__item--a { grid-column: 3 / 5; grid-row: 1; }
.gallery-collage__item--b { grid-column: 3; grid-row: 2; }
.gallery-collage__item--c { grid-column: 4; grid-row: 2; }

.gallery-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gallery-collage__item--big img { object-position: center 30%; }
.gallery-collage__item--a img { object-position: center 35%; }
.gallery-collage__item--b img { object-position: center 25%; }
.gallery-collage__item--c img { object-position: center 30%; }

.gallery-collage__item:hover img {
    transform: scale(1.04);
}

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

.gallery-collage__badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--blue-900);
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 10px rgba(15, 40, 70, 0.16);
}

@media (max-width: 639px) {
    .gallery-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        height: 320px;
    }
    .gallery-collage__item--big { grid-column: 1 / 3; grid-row: 1 / 2; }
    .gallery-collage__item--a { grid-column: 1 / 3; grid-row: 2 / 3; }
    .gallery-collage__item--b { grid-column: 1; grid-row: 3; }
    .gallery-collage__item--c { grid-column: 2; grid-row: 3; }
}

.why-card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--blue-700);
    font-weight: 700;
    font-size: 0.85rem;
}

.why-card__more .icon {
    width: 16px;
    height: 16px;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 45, 0.82);
    padding: 24px;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__img {
    max-width: min(90vw, 900px);
    max-height: 85vh;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.lightbox__close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    color: var(--blue-900);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.lightbox__close .icon {
    width: 18px;
    height: 18px;
}

body.lightbox-open {
    overflow: hidden;
}

/* Newsletter */
.why-card--newsletter {
    text-align: center;
    align-items: center;
}

.why-card__newsletter-img {
    width: 88px;
    height: auto;
    object-fit: contain;
    margin: -8px auto 6px;
    animation: whyBenefitFloat 5.6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .why-card__newsletter-img {
        animation: none;
    }
}

.why-card--newsletter .why-card__title {
    margin-bottom: 6px;
}

.why-card__desc {
    color: var(--gray-600);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.newsletter-form input {
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 18px;
    font-family: inherit;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    outline: none;
    text-align: center;
}

.why-card__cta {
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    padding: 13px 18px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--white);
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        0 12px 22px -4px rgba(240, 80, 140, 0.4);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.why-card__cta::after {
    content: "";
    position: absolute;
    top: 0;
    right: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    animation: whyCtaSweep 4s ease-in-out infinite;
}

@keyframes whyCtaSweep {
    0%, 30% { right: -60%; }
    60%, 100% { right: 130%; }
}

.why-card__cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.65),
        0 16px 28px -4px rgba(240, 80, 140, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .why-card__cta,
    .why-card:hover .why-card__cta {
        transition: none;
    }
    .why-card__cta:hover {
        transform: none;
    }
    .why-card__cta::after {
        animation: none;
        display: none;
    }
}

.newsletter-form__note {
    font-size: 0.72rem;
    color: var(--gray-400);
    margin-top: 6px;
}

.newsletter-form__status {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--green-600);
    display: none;
}

.newsletter-form__status.is-visible {
    display: block;
}

/* ===== How it works ("از انتخاب جشن تا ساختن خاطره!") ===== */
.how-it-works {
    position: relative;
    overflow: hidden;
    /* This section's own top padding (from the shared .section class) is
       untouched; only the bottom is tightened at this specific boundary —
       stacked with .why-tk's own reduced top padding below, the combined
       gap between the two sections lands in the 48-64px target instead of
       the shared class's default 72+72=144px. */
    padding-bottom: 28px;
}

.hiw-highlight {
    color: var(--pink-600);
}

.hiw-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    display: none;
}

.hiw-deco svg {
    width: 100%;
    height: 100%;
}

.hiw-deco--cloud { top: 4%; left: 4%; width: 60px; height: 32px; animation: hiwCloudDrift 8s ease-in-out infinite; }
.hiw-deco--star { top: 8%; right: 6%; width: 20px; height: 20px; animation: hiwStarSpin 12s linear infinite; }
.hiw-deco--plane { bottom: 8%; left: 8%; width: 26px; height: 26px; animation: hiwPlaneDrift 7s ease-in-out infinite; }

@media (min-width: 768px) {
    .hiw-deco {
        display: block;
    }
}

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

@keyframes hiwStarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hiwPlaneDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hiw-deco--cloud,
    .hiw-deco--star,
    .hiw-deco--plane {
        animation: none;
    }
}

.how-it-works .container {
    position: relative;
    z-index: 1;
}

.hiw-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 8px;
}

@media (min-width: 1024px) {
    .hiw-steps {
        grid-template-columns: 1fr 70px 1fr 70px 1fr;
        align-items: center;
        gap: 0;
    }
}

.hiw-connector {
    display: none;
}

@media (min-width: 1024px) {
    .hiw-connector {
        display: block;
        width: 70px;
        height: 60px;
    }
}

.hiw-connector--pink { color: var(--pink-600); }
.hiw-connector--blue { color: var(--blue-600); }
.hiw-connector--mint { color: var(--green-600); }

/* Gentle asymmetric radii — "not a perfect rectangle" rather than a full
   cloud-lobe silhouette (like the category cards), so title/description
   text always keeps a clean, safe rectangle-ish reading area. */
.hiw-step {
    position: relative;
    padding: 26px 22px 24px;
    border-radius: 34px 40px 36px 42px;
    text-align: center;
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    box-shadow:
        0 22px 44px -20px rgba(37, 73, 125, 0.18),
        0 8px 18px -8px rgba(68, 113, 170, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease;
}

.hiw-step:hover {
    transform: translateY(-5px);
    box-shadow:
        0 28px 52px -18px rgba(37, 73, 125, 0.24),
        0 10px 22px -8px rgba(68, 113, 170, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

@media (prefers-reduced-motion: reduce) {
    .hiw-step {
        transition: none;
    }
    .hiw-step:hover {
        transform: none;
    }
}

.hiw-step--pink { background: linear-gradient(165deg, rgba(255, 222, 236, 0.85), rgba(255, 255, 255, 0.85)); }
.hiw-step--blue { background: linear-gradient(165deg, rgba(214, 236, 255, 0.85), rgba(255, 255, 255, 0.85)); }
.hiw-step--mint { background: linear-gradient(165deg, rgba(215, 245, 231, 0.85), rgba(255, 255, 255, 0.85)); }

.hiw-step__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    color: var(--white);
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 4px 10px rgba(15, 40, 70, 0.18);
}

.hiw-step__media {
    display: block;
    height: 130px;
    margin: 4px auto 14px;
}

.hiw-step__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    animation: hiwFloat 5.5s ease-in-out infinite alternate;
}

.hiw-step--pink .hiw-step__media img { animation-delay: 0s; }
.hiw-step--blue .hiw-step__media img { animation-delay: 0.3s; animation-duration: 6.1s; }
.hiw-step--mint .hiw-step__media img { animation-delay: 0.6s; animation-duration: 5.8s; }

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

@media (prefers-reduced-motion: reduce) {
    .hiw-step__media img {
        animation: none;
    }
}

.hiw-step__title {
    font-weight: 800;
    color: var(--blue-900);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 6px;
}

.hiw-step__desc {
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.6;
}

.hiw-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.hiw-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 28px;
    border-radius: var(--radius-pill);
    background: linear-gradient(155deg, var(--pink-500), var(--pink-600));
    color: var(--white);
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        0 12px 22px -4px rgba(240, 80, 140, 0.4);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hiw-cta__btn .icon {
    width: 16px;
    height: 16px;
}

.hiw-cta__btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.65),
        0 16px 28px -4px rgba(240, 80, 140, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .hiw-cta__btn {
        transition: none;
    }
    .hiw-cta__btn:hover {
        transform: none;
    }
}