/* ============================================================================
   LATEST FROM THE BLOG
   Location: /wp-content/themes/blocksy-child/assets/css/recent-blogs.css
   ----------------------------------------------------------------------------
   The three-card blog band that sits directly under "Curated Job Collections"
   on every job board directory archive. Markup and the rules for which pages
   get it live in `inc/recent-blogs.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-recent-blogs__*` 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-recent-blogs__card-title` rule would lose and
   every card headline would render at the 30px h3 step in Louize.

   So the type rules on the `h2`/`h3` in here are `!important` too, qualified by
   the section class - the same escape hatch curated-job-collections.css and
   job-category-seo.css already use, confined to the four properties global.css
   actually claims.
   ============================================================================ */

/* No tinted panel and no full-bleed shadow here, unlike the collections band
   directly above: two coloured bands stacked would blur the boundary between
   them. This one sits on the page surface so the cards read as the foreground
   object.

   `margin-top: 0` because `.gfi-curated-collections` already contributes its
   own `--gfi-space-5` bottom margin, and the two do not collapse through the
   flow the way they would if both declared a gap. */
.gfi-recent-blogs {
    margin: 0 0 var(--gfi-space-6);
}

/* The content stays on the page's normal measure and centred - same inner as
   the collections band, so the two sections line up edge to edge. */
.gfi-recent-blogs__inner {
    max-width: var(--gfi-container-max);
    margin: 0 auto;
    padding: 0 var(--gfi-container-pad);
}

/* Title left, "See all blogs" right, baseline-aligned. `wrap` so the link drops
   under the heading rather than squeezing it at narrow widths. */
.gfi-recent-blogs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gfi-space-1) var(--gfi-space-2);
    margin: 0 0 var(--gfi-space-3);
}

/* Sized at the h2 step to match "Curated Job Collections" above it and
   "Frequently Asked Questions" below. */
.gfi-recent-blogs .gfi-recent-blogs__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;
    margin: 0;
}

/* `brand-accent`, never `brand`: primary-500 is 1.9:1 on white and unreadable
   as text (see the note in tokens.css). */
.gfi-recent-blogs__see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--gfi-space-0-5);
    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;
    white-space: nowrap;
    transition: color var(--gfi-duration-base) var(--gfi-ease);
}

.gfi-recent-blogs__see-all svg {
    flex: none;
    transition: transform var(--gfi-duration-base) var(--gfi-ease);
}

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

.gfi-recent-blogs__see-all:hover svg {
    transform: translateX(2px);
}

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

/* Three equal columns. `minmax(0, 1fr)` rather than `1fr`: a long unbroken word
   in a headline is one unbreakable token to the grid algorithm, and plain `1fr`
   lets it push its column past its share and overflow the band. */
.gfi-recent-blogs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gfi-space-3);
}

/* `position: relative` is load-bearing - it is what the stretched title link
   below anchors to. `height: 100%` + column flex keeps the three cards the same
   height whatever their headlines do. */
.gfi-recent-blogs__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--gfi-color-surface);
    border: 1px solid var(--gfi-color-border);
    border-radius: var(--gfi-radius-lg);
    overflow: hidden;
    transition:
        border-color var(--gfi-duration-base) var(--gfi-ease),
        box-shadow var(--gfi-duration-base) var(--gfi-ease),
        transform var(--gfi-duration-base) var(--gfi-ease);
}

.gfi-recent-blogs__card:hover {
    border-color: var(--gfi-color-brand);
    box-shadow: var(--gfi-shadow-md);
    transform: translateY(-2px);
}

/* The ring goes on the card, not the anchor: the anchor is stretched to the
   card's bounds, so outlining it would paint the same rectangle twice. */
.gfi-recent-blogs__card:focus-within {
    border-color: var(--gfi-color-brand);
    outline: 2px solid var(--gfi-color-focus-ring);
    outline-offset: 2px;
}

/* A fixed ratio rather than the image's own, so three cards whose featured
   images have different proportions still line their headlines up. The tint
   is what a post with no featured image falls back to. */
.gfi-recent-blogs__media {
    aspect-ratio: 16 / 9;
    background: var(--gfi-color-surface-subtle);
    overflow: hidden;
}

.gfi-recent-blogs__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* `flex: 1` so the "Read more" line pins to the bottom of the tallest card
   rather than floating under a short excerpt. */
.gfi-recent-blogs__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gfi-space-2);
}

.gfi-recent-blogs__date {
    display: block;
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-eyebrow);
    line-height: var(--gfi-lh-eyebrow);
    letter-spacing: var(--gfi-ls-eyebrow-m);
    font-weight: var(--gfi-fw-medium);
    text-transform: uppercase;
    color: var(--gfi-color-text-muted);
    margin: 0 0 var(--gfi-space-1);
}

/* h6 rather than h4: three headlines sit side by side in third-width cards and
   these are real post titles, not the short sample strings a design frame
   uses - "Why most ESG-tech startups don't succeed? And what can you do to
   increase your odds" runs to fifteen words. */
.gfi-recent-blogs .gfi-recent-blogs__card-title {
    font-family: var(--gfi-font-heading) !important;
    font-size: var(--gfi-font-h6) !important;
    line-height: var(--gfi-lh-h6) !important;
    letter-spacing: var(--gfi-ls-heading-sm) !important;
    font-weight: var(--gfi-fw-bold);
    color: var(--gfi-color-text) !important;
    margin: 0 0 var(--gfi-space-1);
}

.gfi-recent-blogs__link {
    color: inherit;
    text-decoration: none;
}

/* The stretched link: the card is clickable anywhere, but the only anchor in it
   is the headline, so its accessible name stays the headline instead of the
   headline plus the date plus the excerpt. */
.gfi-recent-blogs__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.gfi-recent-blogs__card:hover .gfi-recent-blogs__link {
    color: var(--gfi-color-brand-accent);
}

/* The card already carries the focus ring via :focus-within. */
.gfi-recent-blogs__link:focus-visible {
    outline: none;
}

/* `margin-bottom: auto` is what pushes "Read more" to the card's foot. */
.gfi-recent-blogs__excerpt {
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
    color: var(--gfi-color-text-muted);
    margin: 0 0 var(--gfi-space-2);
}

.gfi-recent-blogs__more {
    margin-top: auto;
    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);
}

.gfi-recent-blogs__more::after {
    content: ' \2192';
}


/* ----------------------------------------------------------------------------
   TABLET (<= 1024px) - two columns, third card drops to a full-width row.

   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-recent-blogs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gfi-space-2);
    }

    /* Without `grid-column` the orphaned third card sits at half width with a
       gap beside it, which reads as a missing fourth post. At full width the
       16:9 media would then be enormous, so that card goes side-by-side. */
    .gfi-recent-blogs__card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .gfi-recent-blogs__card:last-child:nth-child(odd) .gfi-recent-blogs__media {
        flex: 0 0 40%;
        aspect-ratio: auto;
    }

    .gfi-recent-blogs__card:last-child:nth-child(odd) .gfi-recent-blogs__body {
        flex: 1;
    }
}


/* ----------------------------------------------------------------------------
   MOBILE (<= 767px) - single column, every card back to the stacked shape.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .gfi-recent-blogs {
        margin: 0 0 var(--gfi-space-5);
    }

    .gfi-recent-blogs__inner {
        padding: 0 var(--gfi-space-2);
    }

    .gfi-recent-blogs__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gfi-space-2);
    }

    /* Undo the tablet side-by-side rule - `:last-child:nth-child(odd)` still
       matches the single trailing card in a one-column grid. */
    .gfi-recent-blogs__card:last-child:nth-child(odd) {
        flex-direction: column;
    }

    .gfi-recent-blogs__card:last-child:nth-child(odd) .gfi-recent-blogs__media {
        flex: none;
        aspect-ratio: 16 / 9;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .gfi-recent-blogs__card,
    .gfi-recent-blogs__see-all,
    .gfi-recent-blogs__see-all svg {
        transition: none;
    }

    .gfi-recent-blogs__card:hover {
        transform: none;
    }

    .gfi-recent-blogs__see-all:hover svg {
        transform: none;
    }
}