/* ============================================================================
   CURATED JOB COLLECTIONS
   Location: /wp-content/themes/blocksy-child/assets/css/curated-job-collections.css
   ----------------------------------------------------------------------------
   The four-column interlinking band at the foot of every job board directory
   archive except the main board. Markup and the rules for which pages get it
   live in `inc/curated-job-collections.php`.

   Enqueued by that same file with `gfi-tokens` as a dependency, so every value
   below resolves against the design system. Everything is namespaced
   `.gfi-curated-collections__*` so nothing here can collide with Blocksy,
   Elementor or WP Job Manager.

   -- Why the !importants ---------------------------------------------------

   global.css sets `font-family`, `font-size`, `line-height` and
   `letter-spacing` on the bare `h1..h6` selectors with `!important`, to beat
   the Customizer typography Blocksy and Elementor emit late in the cascade.

   An `!important` declaration wins over a non-important one no matter how
   specific the loser is, so a plain `.gfi-curated-collections__heading` rule
   does NOT win - the first cut of this file lost, and every column heading
   rendered as 30px Louize instead of 12px Inter, wrapped onto two lines, and
   roughly doubled the height of the band.

   So the type rules on the `h2`/`h3` in here are `!important` too, qualified by
   the section class. That is the same escape hatch the rest of the job board
   CSS already uses (see job-category-seo.css). It is confined to the four
   properties global.css actually claims.
   ============================================================================ */

/* Full-bleed background, without breaking out of the layout.

   The band sits inside `#job-board-wrapper`, which is width-constrained by its
   Blocksy ancestors, so the tinted panel has to paint past its own box. A huge
   `box-shadow` spread does that: box-shadow never affects layout, so nothing
   reflows and no horizontal scrollbar appears.

   `100vw` + negative margins is the more common trick and is deliberately NOT
   used here: 100vw includes the classic scrollbar on Windows, so it overhangs
   the viewport by the scrollbar width and adds a horizontal scrollbar to every
   archive.

   `clip-path` then trims the spread back to the band's own top and bottom
   edges, leaving it free horizontally - without it the shadow would flood the
   whole page. No border-radius: the band runs edge to edge, so there are no
   corners to round. */
.gfi-curated-collections {
    background: var(--gfi-color-surface-accent);
    box-shadow: 0 0 0 100vmax var(--gfi-color-surface-accent);
    clip-path: inset(0 -100vmax);
    margin: var(--gfi-space-6) 0 var(--gfi-space-5);
    padding: var(--gfi-space-4) 0;
}

/* The content stays on the page's normal measure and centred. */
.gfi-curated-collections__inner {
    max-width: var(--gfi-container-max);
    margin: 0 auto;
    padding: 0 var(--gfi-container-pad);
}

/* Sized at the h2 step to match the "Frequently Asked Questions" heading that
   sits alongside this band on the job board archives. Note that the FAQ rule
   (`.category-faqs-section .section-title` in job-category-seo.css) declares
   the h3 step but sets no `!important`, so global.css's `h2 { font-size:
   var(--gfi-font-h2) !important }` overrides it and it renders at h2. Match
   what those headings actually compute to, not what their own rule says. */
.gfi-curated-collections .gfi-curated-collections__title {
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h2) !important;
    line-height: var(--gfi-lh-h2) !important;
    letter-spacing: var(--gfi-ls-heading) !important;
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-text) !important;
    text-align: center;
    margin: 0 0 var(--gfi-space-3);
}

/* Four equal columns. `minmax(0, 1fr)` rather than `1fr`: a long company or
   category name is one unbreakable-looking token to the grid algorithm, and
   plain `1fr` lets it push its column past its share and overflow the band. */
.gfi-curated-collections__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gfi-space-3);
}

/* Inter, not Louize, and `nowrap` so each of the four headings holds a single
   line. The longest is "SEARCH JOBS BY LOCATION"; at this size it is around
   180px, comfortably inside a quarter column at the 1200px measure and inside a
   half column at the two-column breakpoint. */
.gfi-curated-collections .gfi-curated-collections__heading {
    font-family: var(--gfi-font-body) !important;
    font-size: var(--gfi-font-eyebrow) !important;
    line-height: var(--gfi-lh-eyebrow) !important;
    letter-spacing: var(--gfi-ls-eyebrow-m) !important;
    font-weight: var(--gfi-fw-bold);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gfi-color-text) !important;
    margin: 0 0 var(--gfi-space-2);
}

.gfi-curated-collections__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gfi-curated-collections__item + .gfi-curated-collections__item {
    margin-top: var(--gfi-space-1);
}

/* `brand-accent`, never `brand`: primary-500 on this tint is nowhere near
   readable as text (see the note in tokens.css). */
.gfi-curated-collections__link {
    display: inline-block;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
    font-weight: var(--gfi-fw-medium);
    color: var(--gfi-color-brand-accent);
    text-decoration: none;
    transition: color var(--gfi-duration-base) var(--gfi-ease);
}

.gfi-curated-collections__link:hover,
.gfi-curated-collections__link:focus-visible {
    color: var(--gfi-color-accent-600);
    text-decoration: underline;
}

.gfi-curated-collections__link:focus-visible {
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--gfi-radius-xs);
}


/* ----------------------------------------------------------------------------
   TABLET (<= 1024px) - two columns.

   Only layout moves here. Font sizes are NOT touched: the --gfi-font-* tokens
   are already reassigned per breakpoint in tokens.css, and re-shrinking them
   here would double-shrink.
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .gfi-curated-collections__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gfi-space-3) var(--gfi-space-2);
    }
}


/* ----------------------------------------------------------------------------
   MOBILE (<= 767px) - single column.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .gfi-curated-collections {
        margin: var(--gfi-space-5) 0 var(--gfi-space-4);
        padding: var(--gfi-space-3) 0;
    }

    .gfi-curated-collections__inner {
        padding: 0 var(--gfi-space-2);
    }

    .gfi-curated-collections__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gfi-space-3);
    }
}


/* ----------------------------------------------------------------------------
   MOTION
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gfi-curated-collections__link {
        transition: none;
    }
}