/**
 * kids.css — KIDS-only extras.
 *
 * The page itself rides on style-v2.css: kids.html carries a .video-hero and
 * .topic-card grid, so `body:has(.video-hero)` gives it the same navy/gold
 * theme, full-bleed hero and card treatment as the homepage. Nothing is
 * restyled here — this file only adds the two things KIDS needs on top:
 * the four-colour wordmark, and one art-placeholder gradient per topic.
 *
 * Loaded after style-v2.css.
 */

/* ============================================================
   HERO WORDMARK
   ============================================================ */
.kids-wordmark {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-weight: 800;
    font-size: clamp(3.2rem, 9vw, 5.6rem);
    letter-spacing: 6px;
    line-height: 1;
    margin-bottom: 14px;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}
.kids-wordmark .l1 { color: #4ea3ea; }
.kids-wordmark .l2 { color: #f0b93a; }
.kids-wordmark .l3 { color: #ef6a62; }
.kids-wordmark .l4 { color: #4dc07f; }

/* Video hero already right-aligns its content; the wordmark inherits that. */

/* ============================================================
   TOPIC ART PLACEHOLDERS — one gradient per subject, reusing the
   .topic-ph zone style-v2.css already defines (gold rule + Hebrew word)
   ============================================================ */
.topic-ph--color   { background: linear-gradient(135deg, #7d2f2c, #c65a52); }
.topic-ph--stories { background: linear-gradient(135deg, #1f4e79, #4d7ea8); }
.topic-ph--videos  { background: linear-gradient(135deg, #4a327d, #8a6ad4); }
.topic-ph--middos  { background: linear-gradient(135deg, #175e5b, #2fb3ae); }
.topic-ph--mitzvos { background: linear-gradient(135deg, #7a5a12, #d0a13a); }
.topic-ph--chagim  { background: linear-gradient(135deg, #7d4413, #e08b3a); }
.topic-ph--kosher  { background: linear-gradient(135deg, #1d5c39, #4aa877); }

/* "Coming soon" tile: same tile, no hover lift, muted tag instead of a link */
.topic-card--soon { cursor: default; }
body:has(.video-hero) .topic-card--soon:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.topic-soon {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 5px 14px;
}

/* ============================================================
   HERO FRAMING
   The homepage puts its character on the left and the copy on the
   right. This clip is the mirror image: both boys sit centre-right,
   and the open windshield/ocean side is on the left — so the KIDS
   hero flips the layout instead of fighting the artwork.
   ============================================================ */
.video-hero:has(.video-hero__video--kids) {
    justify-content: flex-start;
}

.video-hero:has(.video-hero__video--kids) .video-hero__content {
    text-align: left;
    margin-right: 0;
    margin-left: 4%;
}

.video-hero__video--kids {
    object-position: 62% center;
}

/* Dark side is the left one here. */
.video-hero:has(.video-hero__video--kids) .video-hero__overlay {
    background: linear-gradient(
        270deg,
        rgba(6, 18, 42, 0.06) 0%,
        rgba(6, 18, 42, 0.20) 28%,
        rgba(6, 18, 42, 0.60) 52%,
        rgba(6, 18, 42, 0.86) 74%,
        rgba(6, 18, 42, 0.93) 100%
    );
}

/* The homepage tagline is a small italic quote; here it is a real lede. */
.video-hero__content .kids-lede {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-style: normal;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 440px;
    margin: 0 auto 28px 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   MOBILE
   The clip is 16:9 and there is no portrait cut of it. Stretching
   it over a full-height phone screen crops down to one enormous
   face, so on small screens the hero stops being full-bleed: the
   video keeps its own 16:9 box at the top and the copy sits below
   it on the navy ground.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .video-hero:has(.video-hero__video--kids) {
        display: block;
        height: auto;
        min-height: 0;
        background: #101a30;
        padding-bottom: 38px;
    }

    .video-hero:has(.video-hero__video--kids) .video-hero__video--kids {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center center;
        transform: none;
        z-index: 1;
    }

    /* Overlay becomes a short fade under the video instead of a full sheet */
    .video-hero:has(.video-hero__video--kids) .video-hero__overlay {
        top: auto;
        bottom: 0;
        height: 100%;
        background: linear-gradient(180deg,
            rgba(16, 26, 48, 0) 0%,
            rgba(16, 26, 48, 0) 74%,
            rgba(16, 26, 48, 0.72) 90%,
            #101a30 100%
        );
    }

    .video-hero:has(.video-hero__video--kids) .video-hero__content {
        /* style-v2 pins this absolute at bottom:80px over a full-height hero;
           here it has to sit in normal flow under the video box. */
        position: relative;
        bottom: auto;
        top: auto;
        text-align: center;
        margin: 18px auto 0;
        padding: 0 22px;
        max-width: none;
    }

    /* Hero is short here, so the card grid should not start a screen later */
    body:has(.video-hero) .main-content-v2 { padding-top: 34px; }

    .kids-wordmark {
        letter-spacing: 4px;
        margin-bottom: 10px;
        font-size: clamp(2.8rem, 15vw, 4rem);
    }

    .video-hero__content .kids-lede {
        max-width: none;
        margin: 0 auto 24px;
        font-size: 1rem;
    }

    /* No room for a scroll hint when the page already starts scrolled */
    .video-hero:has(.video-hero__video--kids) .video-hero__scroll { display: none; }
}