/* =========================================================================
   Blog / Podcast archive — Agentis design export "blog-archive" pattern.
   BugZap #96 / #136. Rendered by template-parts/blog-archive.php on the
   posts page (/blog/) and the podcast CPT archive (/podcast/).

   Measured 2026-08-07 against .../designs/v1-original/blogs/index.html and
   /podcast/index.html: section pads 88/112; head (max 1152) = eyebrow -(24)-
   H2 52 -(8)- deck 30/40 italic, pill search 369x56 right; count 17/300 with
   32 below; grid 3 cols gap 48x32; card = 4:3 thumb, body pad-top 20 and
   8px column gap: category eyebrow, 32/40 serif title, 17/300 date and
   excerpt, 13/300 teal read-more (+4); gold Load more 56 above.

   NOTE: this sheet enqueues at priority 10 - BEFORE the figma layer (100).
   The type system's H2 rule still styles .blog-archive__heading because it
   is !important; do not rely on source order against the figma layer here.
   ========================================================================= */

.blog-archive {
    padding: 88px 0 112px;
}

.blog-archive__container {
    width: min(1280px, 100vw - 128px);
    margin-inline: auto;
}

.blog-archive__head,
.blog-archive__count,
.blog-archive__grid,
.blog-archive__actions,
.blog-archive__empty {
    max-width: 1152px;
    margin-inline: auto;
}

.blog-archive__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 20px;
}

.blog-archive .content-list__eyebrow {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 0.75rem;
    line-height: 1.333;
    font-weight: 700;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    color: #0F7E7C;
    margin: 0;
}

.blog-archive__heading {
    margin: 24px 0 0;
}

.blog-archive__deck {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-style: italic;
    font-size: var(--h2-deck-size, 1.875rem);
    line-height: var(--h2-deck-lh, 1.333);
    font-weight: 300;
    letter-spacing: -0.015em;
    color: #0E1B44;
    margin: 8px 0 0;
}

.blog-archive__search {
    position: relative;
    flex: 0 0 369px;
}

.blog-archive__search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(14, 27, 68, 0.6);
    pointer-events: none;
}

.blog-archive__search input {
    width: 100%;
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1rem;
    font-weight: 300;
    color: #0E1B44;
    padding: 14.4px 16px 14.4px 46.4px;
    border: 1px solid rgba(14, 27, 68, 0.2);
    border-radius: 999px;
    background: transparent;
    box-sizing: border-box;
}

.blog-archive__count {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: #0E1B44;
    margin-bottom: 32px;
}

.blog-archive__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
    padding: 0;
}

.blog-archive__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.blog-archive__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #E7E3DB;
}

.blog-archive__thumb-img,
.blog-archive__thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-archive__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    --stack-gap: 8px; /* audit A4: mobile-v4's tier-B eyebrow rule adds
       calc(8px - --stack-gap) margin-top to the element after the category;
       declaring the prop collapses it to 0 instead of doubling the gap */
    padding: 20px 0 0;
}

.blog-archive__card-title {
    font-family: var(--font-serif, "Hoefler Text", serif);
    font-size: var(--h3-card-size, 2rem);      /* 32/40 */
    line-height: var(--h3-card-lh, 1.25);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #0E1B44;
    margin: 0;
}

.blog-archive__card-date,
.blog-archive__card-excerpt {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: #0E1B44;
    margin: 0;
}

.blog-archive__card-more {
    font-size: 0.8125rem;
    line-height: 1.6;
    font-weight: 300;
    color: #0F7E7C;
    margin-top: 4px;
}

.blog-archive__actions {
    margin-top: 56px;
}

.blog-archive__actions[hidden],
.blog-archive__card[hidden] {
    display: none;
}

@media (max-width: 991px) {
    .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
    .blog-archive__container { width: min(1280px, 100vw - 48px); }
}

@media (max-width: 767px) {
    .blog-archive { padding: 56px 0 72px; }
    .blog-archive__grid { grid-template-columns: 1fr; }
    .blog-archive__head { flex-direction: column; align-items: stretch; }
    .blog-archive__search { flex-basis: auto; }
}