/*
 * convQuestPosterStyles.css
 * TNT | Conversation Quests — Poster Edition
 * Page-specific styles for convQuestPoster.html
 * Date: 07/09/2026
 *
 * Companion to tnt-base-styles.css.
 * This file owns everything specific to the poster page:
 *   — full-bleed background art (talkingPic1AExpress.jpg)
 *   — frosted-glass poster card
 *   — four-color stripe header (the visual legend)
 *   — compact 2 × 2 tier grid with coloured question lists
 *   — horizontal tips bar
 *   — print media query (for actual classroom printing)
 *
 * ── Teaching notes ─────────────────────────────────────────────
 * 1. backdrop-filter: blur()
 *    Creates the frosted-glass effect on the poster card.
 *    The browser blurs whatever is behind the element. Combined
 *    with a semi-transparent background-color, this produces a
 *    "smoked glass" surface that keeps text readable while the
 *    background image remains visible underneath.
 *    Supported in all modern browsers (Chrome 76+, FF 103+,
 *    Safari 9+). Degrades gracefully: without it the card is
 *    still fully opaque and fully readable.
 *
 * 2. overflow: hidden on .poster-card
 *    The rainbow stripe uses negative margins to bleed to the
 *    card edges. overflow: hidden clips those edges to the card's
 *    border-radius so the stripe follows the rounded corners.
 *
 * 3. CSS counter-like numbering via data-num attribute
 *    Each <li data-num="01"> holds its display number. The CSS
 *    .poster-qs li::before reads it with content: attr(data-num).
 *    This separates the display label from the content without
 *    JavaScript — a clean, accessible pattern.
 *
 * 4. @media print
 *    Strips the page chrome (navbar, footer, hero) and inverts
 *    the dark theme to white for ink-efficient printing. The
 *    poster card becomes a plain white rectangle — still
 *    structured and readable when printed.
 * ───────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS  — same palette as convQuest1Styles.css
   Redeclared here so this file is self-contained.
═══════════════════════════════════════════════════════════════ */
:root {
    --cq-curiosity:  #5B9BD5;   /* sky blue   — Level 1 */
    --cq-connection: #5DA87A;   /* sage green — Level 2 */
    --cq-vulnerable: #D96A3E;   /* ember      — Level 3 */
    --cq-vision:     #D4A830;   /* gold       — Level 4 */

    --playfair: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --nunito:   'Nunito', 'Inter', Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE BACKGROUND
═══════════════════════════════════════════════════════════════ */
body {
    background-color: #0d0818;
    font-family: var(--nunito);
    color: rgba(255, 255, 255, 0.88);
    min-height: 100vh;
}


/* ═══════════════════════════════════════════════════════════════
   SPARK BAR
═══════════════════════════════════════════════════════════════ */
.spark-bar {
    background: #080415;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.spark-bar a {
    color: var(--cq-vision);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}
.spark-bar a:hover { text-decoration: underline; }
.spark-bar .spark-links { display: flex; gap: 1.2rem; align-items: center; }
.spark-bar span { color: rgba(255, 255, 255, 0.40); font-size: 0.8rem; }


/* ═══════════════════════════════════════════════════════════════
   HERO  — compact context header above the poster
═══════════════════════════════════════════════════════════════ */
#hero {
    background: linear-gradient(160deg, #160830 0%, #0d0818 70%, #0a0a18 100%);
    padding: 2rem 1rem;
    min-height: 160px;
}
.hero-title    { font-family: var(--playfair); font-size: clamp(1.7rem, 5vw, 2.9rem); }
.hero-subtitle { font-size: clamp(0.85rem, 2vw, 1rem); max-width: 560px; margin: 0.5rem auto 0; }
.hero-eyebrow  { color: var(--cq-vision); }


/* ═══════════════════════════════════════════════════════════════
   POSTER SECTION  — full-bleed background image
═══════════════════════════════════════════════════════════════ */
#posterSection {
    /*
     * talkingPic1AExpress.jpg is a watercolor painting of two
     * silhouetted figures at a café table: amber-gold glow at
     * center, deep violet-blue at the edges. The image already
     * carries the four-level colour palette in its composition.
     *
     * background-position: center — on wide viewports, the crop
     * removes equal amounts from each side, keeping the two
     * figures and the warm centre glow visible.
     */
    background: url('../images/talkingPic1AExpress.jpg') center / cover no-repeat;
    background-color: #0d0818; /* solid fallback if image fails */
    padding: 3rem 1rem 4.5rem;
    min-height: calc(100vh - 130px); /* fill most of the viewport */
}


/* ═══════════════════════════════════════════════════════════════
   POSTER CARD  — frosted glass floating over the image
═══════════════════════════════════════════════════════════════ */
.poster-card {
    max-width: 900px;
    margin: 0 auto;

    /*
     * Frosted glass effect:
     * — rgba background: 82% opacity keeps most of the card dark
     *   so white text is readable, while 18% transparency lets
     *   the blurred image show through as a subtle texture.
     * — backdrop-filter: blur(12px) blurs the image behind the
     *   card's boundary. Without this, the card is still fully
     *   readable (solid rgba background degrades gracefully).
     */
    background: rgba(8, 5, 20, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari */

    /* Gold border gives the "framed" quality */
    border: 1.5px solid rgba(212, 168, 48, 0.35);
    border-radius: 16px;
    padding: 2.6rem 2.6rem 2rem;
    box-shadow:
        0 0 0 5px rgba(212, 168, 48, 0.07), /* outer glow ring */
        0 40px 80px rgba(0, 0, 0, 0.75);

    /*
     * overflow: hidden is required for the .poster-stripe trick:
     * the stripe uses negative margins to bleed to the card edges.
     * overflow: hidden clips those extended edges to the border-radius
     * so the stripe follows the rounded top corners correctly.
     */
    overflow: hidden;
}

/* ── Four-colour stripe ────────────────────────────────────────
 * This one element encodes the entire colour legend.
 * The negative top and side margins pull it flush to the card
 * edges (padding is 2.6rem, so -2.6rem cancels it exactly).
 * overflow: hidden on .poster-card clips it to the border-radius.
 * ─────────────────────────────────────────────────────────────
 */
.poster-stripe {
    height: 5px;
    background: linear-gradient(
        to right,
        var(--cq-curiosity)  0%  25%,
        var(--cq-connection) 25% 50%,
        var(--cq-vulnerable) 50% 75%,
        var(--cq-vision)     75% 100%
    );
    margin: -2.6rem -2.6rem 2rem;
    /* bottom margin creates space before the poster header */
}


/* ── Poster header ─────────────────────────────────────────── */
.poster-header {
    text-align: center;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.poster-main-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.45rem;
    color: var(--cq-vision);
}
.poster-title {
    font-family: var(--playfair);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    color: #ffffff;
    margin-bottom: 0.25rem;
    line-height: 1.1;
}
.poster-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.50);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   TIER BLOCKS  — the 2 × 2 question grid
═══════════════════════════════════════════════════════════════ */

/* Colour token set by modifier class, consumed by header and list */
.poster-tier--curiosity  { --tier-color: var(--cq-curiosity); }
.poster-tier--connection { --tier-color: var(--cq-connection); }
.poster-tier--vulnerable { --tier-color: var(--cq-vulnerable); }
.poster-tier--vision     { --tier-color: var(--cq-vision); }

.poster-tier {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 3px solid var(--tier-color, rgba(255,255,255,0.3));
    border-radius: 0 10px 10px 0;
    padding: 0.9rem 1rem 0.85rem;
    height: 100%;
}

/* Tier header row: emoji + badge + title */
.poster-tier-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.poster-tier-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
.poster-tier-badge {
    display: block;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tier-color);
    margin-bottom: 0.08rem;
}
.poster-tier-title {
    font-family: var(--playfair);
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

/* Question list ─────────────────────────────────────────────
 * list-style: none  — we supply our own number via ::before
 * data-num attribute — the HTML sets data-num="01" etc.
 * content: attr(data-num) — CSS reads it without JavaScript
 * ─────────────────────────────────────────────────────────── */
.poster-qs {
    list-style: none;
    padding: 0;
    margin: 0;
}
.poster-qs li {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    font-size: 0.79rem;
    color: rgba(255, 255, 255, 0.87);
    margin-bottom: 0.34rem;
    line-height: 1.45;
}
.poster-qs li:last-child { margin-bottom: 0; }
.poster-qs li::before {
    content: attr(data-num);
    color: var(--tier-color);
    font-weight: 700;
    font-size: 0.60rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    padding-top: 0.12rem;
    font-family: var(--nunito);
}


/* ═══════════════════════════════════════════════════════════════
   TIPS BAR  — three science tips, horizontal below the grid
═══════════════════════════════════════════════════════════════ */
.poster-tips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3rem 2.2rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.poster-tip {
    text-align: center;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.4;
    min-width: 110px;
}
.poster-tip-stat {
    display: block;
    font-family: var(--playfair);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--cq-vision);
    margin-bottom: 0.1rem;
}
.poster-tip-sep {
    color: rgba(255, 255, 255, 0.18);
    font-size: 1.3rem;
    line-height: 2.2;
}


/* ═══════════════════════════════════════════════════════════════
   ATTRIBUTION
═══════════════════════════════════════════════════════════════ */
.poster-attribution {
    text-align: center;
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.26);
    margin-top: 1rem;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}
.poster-attribution a {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 400;
}
.poster-attribution a:hover { color: var(--cq-vision); text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   For actual classroom printing:
   Strips the dark web chrome. The poster card becomes a clean
   white panel — all four tiers remain structured and readable.
═══════════════════════════════════════════════════════════════ */
@media print {
    #mainNav,
    .spark-bar,
    #hero,
    footer { display: none !important; }

    body {
        background: white !important;
        color: black !important;
    }
    #posterSection {
        background: none !important;
        padding: 0 !important;
        min-height: unset !important;
    }
    .poster-card {
        background: white !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        border-radius: 4px !important;
        padding: 1.5rem !important;
    }
    .poster-stripe {
        background: linear-gradient(
            to right,
            #5B9BD5 0% 25%, #5DA87A 25% 50%, #D96A3E 50% 75%, #D4A830 75% 100%
        ) !important;
        margin: -1.5rem -1.5rem 1.5rem !important;
    }
    .poster-title,
    .poster-tier-title { color: black !important; }
    .poster-sub,
    .poster-tier-badge,
    .poster-tip      { color: #444 !important; }
    .poster-qs li    { color: #333 !important; }
    .poster-tier     { background: #f8f8f8 !important; border: 1px solid #ddd !important; }
    .poster-tips-bar { border-top-color: #ccc !important; }
    .poster-attribution { color: #888 !important; }
    .poster-tip-sep  { color: #ccc !important; }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
═══════════════════════════════════════════════════════════════ */

/* Phones: tighten card padding; update stripe margins to match */
@media (max-width: 575px) {
    .poster-card { padding: 1.8rem 1.4rem 1.5rem; }
    .poster-stripe { margin: -1.8rem -1.4rem 1.6rem; }
    .poster-qs li { font-size: 0.75rem; }
    .poster-tips-bar { gap: 0.4rem 1rem; }
}

/* Small-medium phones: tier grid becomes single column */
@media (max-width: 767px) {
    .poster-tier + .poster-tier { margin-top: 0; } /* row gap handles spacing */
}