/* ============================================================
   WHATEVER PEOPLE SAY I AM - COMIC GALLERY GRID (v1.6)
   Covers: Gallery Intro, Comic Card Grid, Card Engine
   Architecture: 1250px Wide Horizon | 15px Universal Rhythm
   Companion to chassis.css - loads brand tokens (--brand-primary
   etc.) from chassis.css, so swapping those variables re-skins
   this grid automatically.
   v1.0: First build for the whateverpeoplesayiam.co.uk
         migration. Four columns desktop, two columns tablet,
         one column mobile - same breakpoint philosophy as
         .home-hero-grid in home-portal.css.
   v1.1: Added the branding-intro-bar block. This page loads
         chassis.css and this file only - it never loads
         home-portal.css - so the bar had no background-color
         rule at all and was showing browser-default white.
         Ported from home-portal.css section 1, using
         var(--brand-primary) so it follows the token in chassis.css.
   v1.2: Renamed --brand-blue references to --brand-primary,
         matching the chassis.css v6.8 token rename.
   v1.3: Card links now use --link-accent (chassis.css v6.11)
         instead of --brand-primary - the slate --brand-primary
         read too dark for a link colour on white cards. Also
         added text-decoration-thickness: 2px to the hover state
         so the orange underline matches the weight used on the
         header nav and footer links, rather than the thin
         browser default.
   v1.4: Added a 1px solid #dddddd border to .card-thumb img.
         Colour is a placeholder assumption - light neutral grey
         to define the thumbnail edge against the white card
         body - easy to swap for a brand colour if that reads
         better once the real cover art is in.
   v1.5: Removed the Contact pill button (.hero-action,
         .pill-contact-btn and its hover rule) entirely - the site's
         main job is getting people into the comics and themed
         essays, not to a contact form, so a prominent CTA for it in
         the hero didn't earn its place. Contact stays reachable via
         the main nav and footer only. Branding bar simplified from
         a 5-column grid (logo 2 / statement 2 / action 1) to a
         plain 2-column grid (logo / statement) - mobile stacking
         behaviour unchanged, per Paul's note that no change was
         needed there. Also synced .hero-statement h1/.branding-text
         font-size (both the desktop rule and the mobile override)
         from a stale 19px/18px in this file up to the 30px Paul had
         already set live - this file's copy had drifted behind his
         actual site since that edit.
   v1.6: .hero-statement text-align changed from centre to left on
         desktop, so the strapline sits next to the logo rather than
         floating centred in its own column. Mobile keeps its own
         text-align: center override in the 1080px breakpoint
         unchanged, since centred still reads correctly once the two
         elements stack.
   ============================================================ */

/* --- 1. BRANDING INTRO BAR --- */
.branding-intro-bar {
    background-color: var(--brand-primary);
    padding: 16px 0;
    width: 100%;
    clear: both;
    display: block;
}

.branding-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    align-items: center;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.hero-logotype img { width: 100%; height: auto; display: block; }
.hero-statement { text-align: left; padding: 0 40px; }

.hero-statement h1, .branding-text {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .branding-intro-bar { padding: 30px 0; }
    .branding-flex {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }
    .hero-logotype {
        width: 100%;
        margin-bottom: 20px;
    }
    .hero-logotype img {
        margin: 0 auto;
        max-width: 600px;
    }
    .hero-statement h1, .branding-text { white-space: normal; font-size: 30px; text-align: center; }
}

/* --- 2. GALLERY WRAPPER --- */
.comic-gallery-wrapper {
    background-color: var(--stone-bg);
    padding: 60px 0;
    width: 100%;
    clear: both;
}

.gallery-intro {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    color: #333333;
    margin: 0 0 40px 0;
}

/* --- 3. THE GRID --- */
.comic-gallery-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;
}

/* --- 4. CARD ENGINE --- */
.comic-card {
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.comic-card .card-thumb {
    display: block;
}

.comic-card .card-thumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border: 1px solid #dddddd;
}

.comic-card .card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.comic-card .card-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 10px 0;
}

.comic-card .card-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    line-height: 1.5;
    margin: 0 0 15px 0;
    flex-grow: 1;
}

/* --- 5. CARD FOOTER LINKS --- */
.comic-card .card-links {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.comic-card .card-links a {
    color: var(--link-accent);
    text-decoration: none;
}

.comic-card .card-links a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.comic-card .card-links .divider {
    color: #999999;
    margin: 0 8px;
}

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

@media (max-width: 1080px) {
    .comic-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .gallery-intro {
        font-size: 24px;
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .comic-gallery-wrapper {
        padding: 40px 0;
    }
    .comic-gallery-grid {
        grid-template-columns: 1fr;
    }
}