/* ============================================================
   WHATEVER PEOPLE SAY I AM - FEATURES GALLERY (v1.4)
   Covers: Theme Head Blocks, Feature Card Grid, Section Dividers
   Architecture: 1250px Wide Horizon | 15px Universal Rhythm
   Companion to chassis.css - loads brand tokens (--brand-primary,
   --link-accent, --brand-orange) from chassis.css, matching the
   pattern used in whatever-comic-gallery.css.
   v1.0: First build - converts the legacy features-gallery-01.html
         (topnav / .row / .column table-style markup) into the
         new framework. Four columns desktop, two columns tablet,
         one column mobile - same breakpoint philosophy as
         .comic-gallery-grid.
   v1.1: Removed the alternating theme-block background - every
         theme-block now sits on --stone-bg uniformly. Added
         .section-divider as a thin orange bar - later corrected,
         see v1.2.
   v1.2: Replaced the v1.1 divider with the actual technique found
         in thinkamigo.com's gallery.css (.gallery-full-bleed) -
         a 100vw breakout using position: relative, left/right 50%
         and negative 50vw margins, rather than a thin coloured
         line. Background set to white rather than their #F9F8F4,
         since our theme-blocks already sit on --stone-bg and
         using their near-identical colour would make the divider
         invisible against its own surroundings.
   v1.3: The white fill from v1.2 was still invisible - it matched
         the page's own default white background exactly, so there
         was no edge anywhere and it just read as a gap. Added a
         1px solid #dddddd border top and bottom (same tone as the
         thumbnail borders elsewhere on the site) so the band has
         a defined edge regardless of fill colour. Padding reduced
         from 60px to 40px, since the divider now reads clearly
         without needing as much extra whitespace to do the work.
   v1.4: Wrong approach entirely - a banded break was never what
         was wanted. Stripped the fill, padding and both borders
         back to a single 1px #dddddd line with no vertical space
         of its own. The stone background now runs continuously
         across every theme-block, with just a hairline seam
         between sections rather than a break in the colour.
   ============================================================ */

/* --- 1. THEME BLOCK WRAPPER --- */
.theme-block {
    background-color: var(--stone-bg);
    padding: 60px 0;
    width: 100%;
    clear: both;
}

/* --- 2. FULL WIDTH SECTION DIVIDER --- */
/* Full-bleed breakout technique, matching .gallery-full-bleed in
   thinkamigo.com's gallery.css (100vw + negative margin trick,
   safe because chassis.css sets overflow-x: hidden on html/body).
   No fill and no padding this time - the stone background needs
   to run continuously across every theme-block, with just a
   single hairline marking the seam between sections, rather than
   a banded break. */
.section-divider {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    height: 1px;
    background-color: #dddddd;
}

/* --- 3. THEME HEAD --- */
.theme-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.theme-head img {
    max-width: 80%
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

.theme-head h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--brand-primary);
    margin: 0 0 10px 0;
}

.theme-head p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: 0;
    line-height: 1.5;
}

/* --- 4. FEATURE GRID --- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    align-items: stretch;
}

/* --- 5. FEATURE CARD ENGINE --- */
.feature-card a {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.feature-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border: 1px solid #dddddd;
}

.feature-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0;
    padding: 15px;
    line-height: 1.4;
    flex-grow: 1;
}

.feature-card a:hover h4 {
    color: var(--link-accent);
}

/* --- 6. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1280px) {
    .feature-grid {
        padding: 0 20px;
    }
    .theme-head {
        padding: 0 20px;
    }
}

@media (max-width: 1080px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .theme-head h2 {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .theme-block {
        padding: 40px 0;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
}