/* ==========================================================================
   GLOBAL HERO SECTION TEMPLATE
   ==========================================================================
   One system for every hero section variant on the site.

   HOW IT WORKS (read this once):
   - .hero-container is a flex row. By default, flex items STRETCH to match
     the tallest item in the row (that's just how align-items: stretch works,
     and it's the default value, so we don't even need to write it).
   - .hero-media (the image side) gets its natural height from its own
     aspect-ratio at whatever width the variant class gives it.
   - .hero-text-stack has no fixed height of its own — it just gets
     stretched to match .hero-media automatically. The text boxes inside
     use flex: 1 so they expand/contract to fill whatever height they're
     given, evenly, whether there are 2 or 3 of them.
   - Net result: image sets the height, text stack always matches it,
     and you never write a page-specific pixel height again.

   VARIANTS — pick ONE media modifier class per hero section:
   - .hero-media--square       square jpg (1:1)
   - .hero-media--vertical     vertical rectangle jpg
   - .hero-media--capped       horizontal rectangle jpg + png caption
                                stacked below it, combined into a square
   Add .has-caption to .hero-text-stack if that variant also has a caption
   png sitting above the text boxes.
   ========================================================================== */

/* ====================
   HERO SECTION WRAPPER
   ==================== */
.hero-section {
    margin: 5px auto 5px;
    display: block;
}

.hero-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    margin-bottom:;
    display: flex;
    justify-content: center;
    gap: 9px;
}

/* ====================
   HERO MEDIA (image side)
   ==================== */
.hero-media {
    flex-shrink: 1;
    min-width: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Variant: square jpg (1:1) --- */
.hero-media--square {
    flex-basis: 505px;
}
.hero-media--square img {
    aspect-ratio: 1 / 1;
}

/* --- Variant: vertical rectangle jpg ---
   Swap the aspect-ratio numbers below for your actual image's exact
   pixel dimensions (e.g. 397 / 508), same trick used on the titles grid. */
.hero-media--vertical {
    flex-basis: 320px;
}
.hero-media--vertical img {
    aspect-ratio: 397 / 508;
}

/* --- Variant: horizontal rectangle jpg + png caption below,
   combined into an overall square footprint --- */
.hero-media--capped {
    flex-basis: 420px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-media--capped .hero-image {
    flex: 1;
    min-height: 0;
}
.hero-media--capped .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-media--capped .hero-caption {
    flex: 0 0 auto;
}
.hero-media--capped .hero-caption img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* ====================
   HERO TEXT STACK (right side)
   ==================== */
.hero-text-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Optional caption png sitting above the text boxes.
   flex: 0 0 auto keeps it at its natural size; the .text-box elements
   below share whatever height remains. */
.hero-text-stack .hero-caption {
    flex: 0 0 auto;
}
.hero-text-stack .hero-caption img {
    width: 100%;
    height: auto;
    display: block;
        margin-bottom: -4px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* Works identically whether there are 2 or 3 of these —
   flex: 1 on each just splits whatever height is available. */
.text-box {
    flex: 1;
    min-height: 0;
    border-radius: 20px;
    border-width: 4px;
    border-style: solid;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.text-box p {
    margin: 0;
    font-family: 'Sniglet', arial, sans-serif;
    line-height: 1.2;
    text-align: center;
}

/* Per-page-still color variants — keep adding text-box-N as needed,
   these don't affect layout, only appearance. */
.text-box-1 { background: #FEF3F6; border-color: #8F6378; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }
.text-box-1 p { color: #8F6378; font-size: 2.45rem; line-height: 1.1; }

.text-box-2 { background: #FEF5E1; border-color: #755118; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }
.text-box-2 p { color: #755118; font-size: 2.4rem; line-height: 1.15; }

.text-box-3 { background: #F4FEE1; border-color: #18754A; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); }
.text-box-3 p { color: #18754A; font-size: 2.6rem; line-height: 1.1; }

/* ====================
   MOBILE RESPONSIVE
   ==================== */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 100%;
        padding: 0 2px;
        box-sizing: border-box;
    }

    .hero-media,
    .hero-media--square,
    .hero-media--vertical,
    .hero-media--capped {
        flex-basis: auto;
        width: 99%;
        max-width: none;
    }

    .hero-text-stack {
        width: 100%;
        max-width: none;
    }

    .text-box p {
        font-size: 1.6rem;
    }
}