/* ==========================================================================
   HOME PAGE LAYOUT  (css/front-page.css)
   13 October 2026

   Loaded on the home page only, after style.css and mobile.css
   (ss_enqueue_front_page_styles in functions.php), so these rules win
   any tie. Every class here starts fp- or sspz-fp-, and nothing here
   touches another page.

   Order of the page: slogan and tiles, featured episode, browse strip,
   Latest Episodes, Interactive Lessons, Educators, Puzzle of the Week,
   Science News, Go Deeper, Voyager band, closing quote.

   Written for the classroom TV browser as well (old Chromium): no min(),
   max() or clamp(), and nothing sized from a width-only aspect ratio.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Section rhythm: one heading line, "see all" on the right
   -------------------------------------------------------------------------- */
.fp-section {
    margin-bottom: 2.25rem;
}

.fp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.fp-head .rf-section-title {
    margin: 0;
    font-size: 1.5rem;
}

/* Amber, never blue: blue on this site means another site. */
.fp-seeall {
    margin-left: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--amber);
    text-decoration: none;
}

.fp-seeall:hover,
.fp-seeall:focus-visible {
    color: var(--highlight-yellow);
}

#hands-on,
#latest-episodes,
#live-now,
#go-deeper {
    scroll-margin-top: 8rem;
}


/* --------------------------------------------------------------------------
   2. Hero: the featured episode leads, with a Top Story and the educator
      spotlight beside it. The picture is one link, the two buttons are
      two more, so the text block ignores clicks except on those buttons.
   -------------------------------------------------------------------------- */
.fp-hero {
    margin-bottom: 1.25rem;
}

.fp-feature {
    cursor: default;
}

.fp-feature .fp-feature-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: auto;
}

.fp-feature .bento-hero-content {
    pointer-events: none;
}

.fp-feature .fp-feature-actions {
    margin-top: 0.9rem;
}

.fp-feature .fp-feature-actions a {
    display: inline-block;
    height: auto;
    margin: 0 0.6rem 0.4rem 0;
    text-align: center;
    pointer-events: auto;
}

/* Buttons for this page. The site's .rf-btn turns blue on hover, and blue
   on this site means another site, so these go amber instead. Both kinds
   share one box (same border, same line height), so they sit level. */
.fp-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--supernova-orange);
    border-radius: 3px;
    background: var(--supernova-orange);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fp-btn:hover,
.fp-btn:focus-visible {
    background: var(--supernova-orange-light);
    border-color: var(--supernova-orange-light);
    color: #fff;
}

.fp-btn--ghost {
    background: transparent;
    border-color: rgba(247, 250, 252, 0.55);
    color: var(--starlight);
}

.fp-btn--ghost:hover,
.fp-btn--ghost:focus-visible {
    background: rgba(250, 219, 103, 0.1);
    border-color: var(--highlight-yellow);
    color: var(--highlight-yellow);
}


/* --------------------------------------------------------------------------
   3. Browse strip (was the box at the very bottom of the page)
   -------------------------------------------------------------------------- */
.fp-browse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 2.25rem;
    padding: 0.85rem 1.1rem;
}

.fp-browse:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.08);
}

.fp-browse-label {
    margin-right: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--starlight);
}

.fp-browse .fp-topic-tiles {
    flex: 1 1 auto;
    justify-content: flex-start;
    margin: 0 1rem 0 0;
}

.fp-browse .fp-tile {
    display: flex;
    height: auto;
}

.fp-browse > a {
    display: inline-block;
    height: auto;
    margin-left: auto;
}

/* Topic tiles. Colour tokens mirror catalog.css so both pages speak one
   language. (Moved here from the old inline style block in front-page.php.) */
.fp-topic-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.fp-tile {
    --fp-accent: var(--starlight-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
    background: var(--glass-inset);   /* inside a glass card: tint, no blur */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.fp-tile:hover {
    border-color: var(--fp-accent);
    transform: translateY(-2px);
}

.fp-tile-sym {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border: 1.5px solid var(--fp-accent);
    border-radius: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fp-accent);
    flex-shrink: 0;
}

.fp-tile-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--starlight);
    white-space: nowrap;
}

.fp-tile:hover .fp-tile-name {
    color: var(--fp-accent);
}

.fp-tile-interactive .fp-tile-sym {
    border-style: dashed;
}


/* --------------------------------------------------------------------------
   4. Educators: five portrait cards in one row
   -------------------------------------------------------------------------- */
.fp-educators {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

.fp-ch-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--amber);
    opacity: 0.85;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   5. Puzzle of the Week: one big card and one small one
   -------------------------------------------------------------------------- */
/* Episode cards take their height from a 16:9 shape and lay their text
   over the picture. Puzzle cards have no picture, so they drop the shape,
   hold their own height, and let the text block sit in the flow. */
.fp-puzzles .bento-episode-card {
    aspect-ratio: auto;
    min-height: 230px;
}

.fp-puzzles .bento-episode-card .sspz-fp-body {
    position: relative;
    z-index: 2;
    min-height: 230px;
    padding: 1.4rem 1.5rem;
}

.fp-puzzle-big .sspz-fp-body h3 {
    max-width: 30rem;
    font-size: 1.5rem;
}

.fp-puzzle-cta {
    display: inline-block;
    margin-top: 0.9rem;
}

/* Cards like episode cards, but with a difficulty chip and a topic corner
   icon instead of a thumbnail. (Moved here from the old inline style block.) */
.sspz-fp-card a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: inherit;
}

/* A light scrim behind the text, so the title keeps its contrast where it
   crosses the icon. It was 0.85 dark and hid the glass completely; this
   keeps the see-through look the other cards have. */
.sspz-fp-card a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(255deg, rgba(26, 12, 8, 0.3) 0%, rgba(26, 12, 8, 0.18) 45%, rgba(26, 12, 8, 0) 80%);
    z-index: 0;
    pointer-events: none;
}

/* Episode cards fade the bottom of their picture to dark so white text
   reads over a photo. Puzzle cards have no photo, so no fade. */
.fp-puzzles .bento-episode-card > a::after {
    display: none;
}

.sspz-fp-body {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.2rem;
    min-height: 150px;
}

.sspz-fp-body h3 {
    margin: 0.35rem 0 0.6rem;
    line-height: 1.3;
}

.sspz-fp-chip {
    display: inline-block;
    font-family: 'Fira Code', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 3px;
    color: var(--amber);
    background: rgba(226, 144, 0, 0.1);
    border: 1px solid rgba(226, 144, 0, 0.25);
}

/* The icon sits BEHIND the title (z-index 0 against the text at 1), at low
   opacity, bleeding off the right and bottom edges. */
.sspz-fp-card .sspz-card-icon {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: auto;
    height: 90%;
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.sspz-fp-card:hover .sspz-card-icon {
    opacity: 0.32;
    transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   6. Live Now: the Voyager band (slimmer on phones) and four cam pictures
   -------------------------------------------------------------------------- */
.fp-voyager {
    margin-bottom: 1.25rem;
}

.fp-voyager .ss-vgt {
    margin-bottom: 0;
}

/* The cam pictures come from YouTube as 4:3 with black bars built in, and
   the card crops them away by filling the box. mobile.css forces every
   picture to height: auto !important on phones, which would stop that and
   show the bars, so this rule has to be !important too (and more specific). */
.fp-cams .ep-img-wrap img {
    height: 100% !important;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   7. Closing quote. Upright Inter, because only the upright weights are
      loaded and a browser-made slant looks cheap. The curly marks come
      from CSS, so the script can swap plain text in and out.
   -------------------------------------------------------------------------- */
.fp-quote {
    margin: 0 0 2rem;
    padding: 2.25rem 1.5rem 2rem;
    text-align: center;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--supernova-orange);
    border-radius: 12px;
}

.fp-quote-figure {
    margin: 0;
}

.fp-quote-text {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    quotes: "\201C" "\201D";
}

.fp-quote-text p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--starlight);
}

.fp-quote-text p::before {
    content: open-quote;
}

.fp-quote-text p::after {
    content: close-quote;
}

.fp-quote-by {
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--amber);
}

.fp-quote-from {
    font-weight: 400;
    color: var(--starlight-muted);
}


/* --------------------------------------------------------------------------
   8. Phones and small tablets (up to 768px, the same line mobile.css uses):
      rows swipe sideways instead of stacking. The next card peeks in at the
      edge, which is the hint that the row moves.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #hands-on,
    #latest-episodes,
    #live-now,
    #go-deeper {
        scroll-margin-top: 5rem;
    }

    .fp-section {
        margin-bottom: 1.75rem;
    }

    .fp-head .rf-section-title {
        font-size: 1.3rem;
    }

    .fp-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.9rem;
        padding-top: 4px;
        padding-bottom: 0.6rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .fp-row::-webkit-scrollbar {
        display: none;
    }

    .fp-row > * {
        flex: 0 0 78%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .fp-educators.fp-row > * {
        flex: 0 0 44%;
    }

    .fp-browse {
        margin-bottom: 1.75rem;
    }

    .fp-browse-label {
        width: 100%;
        margin: 0 0 0.6rem;
    }

    .fp-browse .fp-topic-tiles {
        flex-wrap: nowrap;
        width: 100%;
        margin: 0 0 0.8rem;
        padding-bottom: 0.3rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fp-browse .fp-topic-tiles::-webkit-scrollbar {
        display: none;
    }

    .fp-browse .fp-tile {
        flex: 0 0 auto;
    }

    .fp-browse > a {
        margin-left: 0;
    }

    .fp-puzzles .sspz-fp-body {
        min-height: 190px;
    }

    .fp-puzzle-big .sspz-fp-body h3 {
        font-size: 1.25rem;
    }

    .fp-quote {
        padding: 1.75rem 1.1rem 1.5rem;
    }

    .fp-quote-text p {
        font-size: 1.2rem;
    }
}

/* Small tablets: cards narrower, so two and a bit show at once. */
@media (min-width: 481px) and (max-width: 768px) {
    .fp-row > * {
        flex-basis: 42%;
    }

    .fp-educators.fp-row > * {
        flex-basis: 27%;
    }
}

/* Small laptops and big tablets (769px to 1024px): style.css drops cards to
   two a row here. Four fit comfortably, so keep four (and three for news),
   and set the two puzzle cards side by side. */
@media (min-width: 769px) and (max-width: 1024px) {
    .fp-row > .bg-col-3 {
        grid-column: span 3;
    }

    .fp-row > .bg-col-4 {
        grid-column: span 4;
    }

    .fp-puzzles > .bento-card {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .fp-feature .bento-hero-content {
        padding: 1.25rem;
    }

    /* The two buttons share one row and never wrap. If they could wrap,
       the web font arriving late would flip them between one line and two,
       and the whole text block would jump 40px. */
    .fp-feature .fp-feature-actions {
        display: flex;
        flex-wrap: nowrap;
    }

    .fp-feature .fp-feature-actions a {
        flex: 1 1 0;
        margin: 0 0.5rem 0.4rem 0;
        padding-right: 0.4rem;
        padding-left: 0.4rem;
        white-space: nowrap;
    }

    .fp-feature .fp-feature-actions a:last-child {
        margin-right: 0;
    }

    .fp-voyager .ss-vgt {
        min-height: 0;
    }

    .fp-voyager .ss-vgt-stats .ss-vgt-stat:nth-child(3) {
        display: none;
    }

    .fp-tile-name {
        font-size: 0.6rem;
    }

    .fp-tile-sym {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }
}