/* ==========================================================================
   PB Blog Index  (.pb-blog-index)
   --------------------------------------------------------------------------
   Styles for the blog index / posts parent page (index.php → is_home()).

   SCOPING: this file is enqueued conditionally on is_home() (functions.php,
   purebold_scripts) and is NOT part of the global @import bundle in
   assets/styles/pb-styles.css. As a belt-and-braces second guard, EVERY rule
   below is also scoped under the wrapper class `.pb-blog-index` (added to
   index.php's <main>), so even if it were ever loaded elsewhere it could not
   affect another template.

   DESIGN: full-width dark teal ground (#002c35 = --colour-teal-dark). Centred
   1267px content column, 64px side + vertical padding, 64px gap between the
   header block and a 3-column grid of post cards. Each card: 16:9 featured
   image, mono uppercase title, clamped Outfit excerpt, date pinned to the
   bottom. Whole card is one link (title = accessible name); hover / focus
   fills the card with --colour-primary-teal (#09414e). Linked-card pattern
   (whole-card <a>, 16:9 media, aria-hidden placeholder, orange focus ring)
   mirrors blocks/pb_f_projects_grid/pb_projects_grid.css.
   ========================================================================== */

/* ---- Section ground + content container --------------------------------- */
/* Spec: 1267px max-width, 64px side padding, 64px vertical padding. The base
   .pb-section padding is 12rem 0 and .pb-section-margin-wrap is calc(100% - Npx)
   with no internal padding — override both here so the 64px frame is exact. */

.pb-blog-index .pb-blog-index-section {
    padding: 64px 0;
}

.pb-blog-index .pb-blog-index-inner {
    width: 100%;
    max-width: var(--max-width, 1267px);
    margin: 0 auto;
    padding-left: 64px;
    padding-right: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ---- Header (title + intro) --------------------------------------------- */

.pb-blog-index .pb-blog-index-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Page title — h1.heading2style already supplies --font-mono, uppercase,
   600 weight and the 40px desktop size (!important) from pb-template-globals.
   On .bg-teal-dark the global heading rule already colours it teal-light.
   Here we only need the line-height / letter-spacing from the spec and to
   neutralise any inherited heading margin. */
.pb-blog-index .pb-blog-index-heading {
    margin: 0;
    line-height: 1;
    letter-spacing: 0.8px;
    color: var(--colour-teal-light);
}

/* Intro paragraph — Outfit 18px / 1.4, muted near-white, max 700px. */
.pb-blog-index .pb-blog-index-intro {
    margin: 0;
    max-width: 700px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    color: rgba(247, 248, 250, 0.7);
}

/* ==========================================================================
   Grid — 3 columns of post cards
   Cards are flex-1 with their own 24px padding, so their padding boxes sit
   edge-to-edge (no column gap); only a 24px row gap. max-width 456px per card.
   Flex (not grid) so a short final row's cards keep the same width as a full
   row, matching the projects-grid behaviour.
   ========================================================================== */

.pb-blog-index .pb-blog-index-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 0;
}

.pb-blog-index .pb-blog-index-item {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    min-width: 0;
    /* 3 across: each item is one third, capped so a card's content box (after
       its 24px padding) tops out around the 456px the design shows. */
    flex: 1 1 33.3333%;
    max-width: 456px;
}

/* ---- Card (whole-card link) --------------------------------------------- */

.pb-blog-index .pb-blog-index-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    margin: 0;
}

.pb-blog-index .pb-blog-index-card-link {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* The whole card is a link, so it must NOT carry the global body-link
   underline (.pb-section.bg-* ul > li > a). Kill it at higher specificity —
   the affordance is the hover fill + focus ring, not an underline. */
.pb-blog-index .pb-blog-index-grid > .pb-blog-index-item > .pb-blog-index-card > .pb-blog-index-card-link,
.pb-blog-index .pb-blog-index-grid > .pb-blog-index-item > .pb-blog-index-card > .pb-blog-index-card-link:hover,
.pb-blog-index .pb-blog-index-grid > .pb-blog-index-item > .pb-blog-index-card > .pb-blog-index-card-link:focus,
.pb-blog-index .pb-blog-index-grid > .pb-blog-index-item > .pb-blog-index-card > .pb-blog-index-card-link:focus-visible {
    text-decoration: none;
}

/* Hover / focus state — fill with --colour-primary-teal (matches the one
   highlighted card in the design). Applied on hover and keyboard focus. */
.pb-blog-index .pb-blog-index-card-link:hover,
.pb-blog-index .pb-blog-index-card-link:focus-within {
    background-color: var(--colour-primary-teal, #09414e);
}

/* Focus-visible ring — orange, matching the theme linked-card convention
   (projects-grid / pb-template-globals focus styling). */
.pb-blog-index .pb-blog-index-card-link:focus-visible {
    outline: 2px solid var(--colour-primary-orange, #e61e09);
    outline-offset: 2px;
}

/* ---- Card media (16:9 cover) -------------------------------------------- */

.pb-blog-index .pb-blog-index-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pb-blog-index .pb-blog-index-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Graceful fallback when a post has no featured image — keep the 16:9 slot
   with a teal placeholder block (mirrors block-preview placeholders). */
.pb-blog-index .pb-blog-index-card-img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12));
}

/* ---- Card body (text + bottom-pinned date) ------------------------------ */
/* Column flex so the date can be pushed to the card bottom; the design shows
   a ~64px minimum gap above the date when content is short. */
.pb-blog-index .pb-blog-index-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* 40px gap between the image and the title (spec). */
    margin-top: 40px;
    min-height: 64px;
}

.pb-blog-index .pb-blog-index-card-text {
    display: flex;
    flex-direction: column;
    /* 16px gap between title and excerpt (spec). */
    gap: 16px;
}

/* Title — mono Medium 32px / lh 1, uppercase, near-white. Must override the
   global `.pb-section.bg-teal-dark h2` rule (0,2,1 → teal-light); this
   selector is 0,2,0, so raise it to win without !important by adding the
   wrapper + card-link ancestry. */
.pb-blog-index .pb-blog-index-card-link .pb-blog-index-card-title {
    margin: 0;
    font-family: var(--font-mono, 'Source Code Pro', monospace);
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--colour-background-light, #f7f8fa);
}

/* Excerpt — Outfit 18px / 1.4, muted near-white, clamped to ~4 lines. */
.pb-blog-index .pb-blog-index-card-excerpt {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.4;
    color: rgba(247, 248, 250, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-blog-index .pb-blog-index-card-excerpt p {
    margin: 0;
}

/* The_excerpt wraps a "[...]" / read-more in the same paragraph; inherit
   colour and drop any underline so it reads as plain truncation. */
.pb-blog-index .pb-blog-index-card-excerpt a {
    color: inherit;
    text-decoration: none;
}

/* Date — pinned to the card bottom (min 64px below the text via margin-top
   auto + the body's min-height). Outfit 14px / 1.6, muted near-white. */
.pb-blog-index .pb-blog-index-card-date {
    display: block;
    margin-top: auto;
    padding-top: 64px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(247, 248, 250, 0.7);
}

/* ==========================================================================
   Pagination + empty state — legible on the dark ground
   get_numeric_posts_nav() outputs a bare <ul><li> with .active / .prev-page
   / .next-page (.arrow) — wrapped here in .pb-blog-index-pagination.
   ========================================================================== */

.pb-blog-index .pb-blog-index-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pb-blog-index .pb-blog-index-pagination li {
    margin: 0;
    list-style: none;
}

.pb-blog-index .pb-blog-index-pagination li a,
.pb-blog-index .pb-blog-index-pagination li.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    color: var(--colour-background-light, #f7f8fa);
    border: 1px solid rgba(247, 248, 250, 0.3);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pb-blog-index .pb-blog-index-pagination li a:hover {
    background-color: var(--colour-primary-teal, #09414e);
    border-color: var(--colour-primary-teal, #09414e);
}

.pb-blog-index .pb-blog-index-pagination li.active {
    background-color: var(--colour-primary-teal, #09414e);
    border-color: var(--colour-primary-teal, #09414e);
    color: var(--colour-teal-light, #3cab97);
    font-weight: 600;
}

.pb-blog-index .pb-blog-index-pagination li a:focus-visible {
    outline: 2px solid var(--colour-primary-orange, #e61e09);
    outline-offset: 2px;
}

.pb-blog-index .pb-blog-index-empty {
    margin: 0;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.4;
    color: rgba(247, 248, 250, 0.7);
}

/* ==========================================================================
   Responsive — 3 → 2 (≤1023px) → 1 (≤767px), matching the sibling block grids.
   ========================================================================== */

@media (max-width: 1023px) {
    .pb-blog-index .pb-blog-index-item {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .pb-blog-index .pb-blog-index-section {
        padding: 48px 0;
    }

    .pb-blog-index .pb-blog-index-inner {
        padding-left: 24px;
        padding-right: 24px;
        gap: 48px;
    }

    .pb-blog-index .pb-blog-index-item {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Edge-to-edge single column — drop the card's own side padding so the
       image spans the content width on mobile. */
    .pb-blog-index .pb-blog-index-card-link {
        padding-left: 0;
        padding-right: 0;
    }

    .pb-blog-index .pb-blog-index-card-title {
        font-size: 26px;
    }

    /* Less dead space before the date when stacked. */
    .pb-blog-index .pb-blog-index-card-date {
        padding-top: 32px;
    }
}