/* ============================================================================
   category.css — "Scrap Metal" category landing pages (Solo/Duo/Trio/Quad/Clan/
   2x2/Bunker/Starter/Farm). PAGE-SPECIFIC LAYOUT ONLY.

   The shared vocabulary (tokens, .rb-container, .rb-crumbs, .rb-chip, .rb-tile /
   .rb-grid, .rb-panel, .rb-hazard, .rb-btn, typography) lives in theme.css — this
   file only positions the three page sections: the noise header band, the tile
   grid spacing, and the submit CTA panel. Loaded after theme.css from the page's
   {% block styles %}.
   ========================================================================= */

/* ---- header band ----------------------------------------------------------
   Noise texture (.rb-noise on the element) + hairline bottom border. Horizontal
   padding + max-width come from .rb-container; we only add the vertical rhythm. */
.cat-header { border-bottom: 1px solid var(--rb-line); }
.cat-header__inner { padding-top: 56px; padding-bottom: 40px; }

.cat-crumbs { margin-bottom: 16px; }
.cat-title { margin: 0; }               /* h1.rb-display already sets the scale */

/* Intro copy: muted, readable measure. Multiple paragraphs stack with even gaps;
   the optional related-link paragraph (bunker page) shares the same look. */
.cat-intro {
    color: var(--rb-muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 720px;
    margin: 16px 0 0;
}
.cat-intro a { color: var(--rb-accent); text-decoration: none; }
.cat-intro a:hover, .cat-intro a:focus { color: var(--rb-accent-hover); }

/* Cross-category chip mesh (links to the OTHER category pages). */
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

/* ---- tile grid ------------------------------------------------------------
   .rb-grid handles the 3/2/1 responsive columns + gutters; we add the section's
   vertical padding (horizontal + max-width from .rb-container). */
.cat-grid-wrap { padding-top: 32px; padding-bottom: 8px; }
.cat-empty {
    color: var(--rb-muted);
    font-size: 16px;
    line-height: 1.7;
    padding: 8px 0 24px;
    margin: 0;
}
.cat-empty a { color: var(--rb-accent); text-decoration: none; }
.cat-empty a:hover, .cat-empty a:focus { color: var(--rb-accent-hover); }
/* Post-grid line (SEO copy carried over from the pre-redesign page). */
.cat-outro {
    color: var(--rb-muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 720px;
    margin: 20px 0 0;
}
.cat-outro a { color: var(--rb-accent); text-decoration: none; }
.cat-outro a:hover, .cat-outro a:focus { color: var(--rb-accent-hover); }

/* ---- submit CTA panel -----------------------------------------------------
   .rb-panel = surface + hairline + sharp corners; .rb-hazard = the 4px diagonal
   stripe across the top. This file lays out the text/button row inside it. */
.cat-cta-wrap { padding-top: 40px; padding-bottom: 64px; }
.cat-cta {
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.cat-cta__text { min-width: 0; }
.cat-cta__heading { margin: 0 0 6px; }
.cat-cta__sub { color: var(--rb-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.cat-cta .rb-btn { flex-shrink: 0; white-space: nowrap; }

/* ---- mobile ---------------------------------------------------------------
   .rb-grid already drops to a single column at 640px; here the header tightens
   and the CTA stacks (button under the text, full width). */
@media (max-width: 700px) {
    .cat-header__inner { padding-top: 36px; padding-bottom: 28px; }
    .cat-grid-wrap { padding-top: 24px; }
    .cat-cta-wrap { padding-top: 32px; padding-bottom: 48px; }
}
@media (max-width: 640px) {
    .cat-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 26px 22px;
    }
    .cat-cta .rb-btn { width: 100%; }
}