/*
 * Blog — listing (home.php / category.php) and article (single.php).
 * Same grid as the rest of the site: 5 columns inside the container, 16px gap.
 */

/* ── Listing: hero ──────────────────────────────────────────────────────── */
.bl-hero { padding: 48px 0 0; }
.bl-hero__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap:            16px;
    align-items:           end;
}
.bl-hero__head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.bl-hero__title { margin: 0; font-size: clamp(72px, 7.222vw, 104px); }
.bl-hero__lead { grid-column: 5; margin: 0; padding-bottom: 12px; color: var(--color-muted); }

/* ── Listing: category filter ───────────────────────────────────────────── */
.bl-list { padding: 72px 0 220px; }
.bl-filter { margin-bottom: 40px; }
.bl-filter__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Same chip as the FAQ topics: light fill, the active one is dark */
.bl-filter__link {
    display:         inline-block;
    padding:         6px 16px;
    line-height:     var(--line-height);
    color:           var(--color-text);
    text-decoration: none;
    background:      rgba(14, 14, 16, .04);
    transition:      background-color var(--transition), color var(--transition);
}
.bl-filter__link:hover { background: rgba(14, 14, 16, .1); }
.bl-filter__link.is-active { color: var(--color-light); background: var(--color-dark); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.bl-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap:            16px;
    row-gap:               56px;
}
.bl-card { min-width: 0; }
.bl-card__link { display: flex; flex-direction: column; gap: 24px; height: 100%; color: inherit; text-decoration: none; }
.bl-card__figure { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: rgba(14, 14, 16, .04); }
.bl-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bl-card__link:hover .bl-card__img { transform: scale(1.03); }
.bl-card__cat {
    position:    absolute;
    top:         16px;
    left:        16px;
    padding:     4px 8px;
    font-family: var(--font-mono);
    font-size:   var(--fs-small);
    line-height: var(--line-height);
    color:       var(--color-light);
    background:  var(--color-dark);
}
.bl-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bl-card__meta { display: flex; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-muted); }
.bl-card__title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: 1.15; letter-spacing: var(--ls-tight); }
.bl-card__text { margin: 0; color: var(--color-muted); }
.bl-card__more { margin-top: auto; padding-top: 8px; }
.bl-card__more svg { flex: 0 0 16px; }
.bl-empty { margin: 0; color: var(--color-muted); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.bl-pagination { margin-top: 64px; }
.bl-pagination ul { display: flex; justify-content: flex-end; align-items: center; margin: 0; padding: 0; list-style: none; }
.bl-pagination .page-numbers {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       32px;
    height:          32px;
    color:           var(--color-muted);
    text-decoration: none;
}
.bl-pagination .page-numbers.current { color: var(--color-text); }
.bl-pagination a.page-numbers:hover { color: var(--color-text); }
.bl-pagination__flip { transform: scaleX(-1); }

/* ── Article ────────────────────────────────────────────────────────────── */
.bp-crumbs { padding: 24px 0 0; }
.bp-crumbs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.bp-crumbs__list li + li::before { content: '/'; margin-right: 8px; color: var(--color-muted); }
.bp-crumbs__list a { color: var(--color-muted); text-decoration: none; }
.bp-crumbs__list a:hover { color: var(--color-text); }
.bp-crumbs__list [aria-current] { color: var(--color-text); }

.bp-head { padding: 56px 0 0; }
.bp-head__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: calc((100% - 64px) / 5 * 4 + 48px); }
.bp-head__cat { color: inherit; text-decoration: none; }
.bp-head__cat:hover { opacity: .6; }
.bp-head__title { margin: 0; font-size: clamp(48px, 6.111vw, 88px); }
.bp-head__meta { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-mono); color: var(--color-muted); }
.bp-head__dot { width: 6px; height: 6px; background: var(--color-dark); }

.bp-hero { padding: 56px 0 0; }
.bp-hero__figure { aspect-ratio: 1264 / 560; margin: 0; overflow: hidden; background: rgba(14, 14, 16, .04); }
.bp-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bp-body { padding: 72px 0 160px; }
.bp-body__inner { max-width: calc((100% - 64px) / 5 * 3 + 32px); margin-left: calc((100% - 64px) / 5 + 16px); }

/* Article typography (Gutenberg output) */
.bp-body__inner > * { margin-top: 0; margin-bottom: 24px; }
.bp-body__inner > :last-child { margin-bottom: 0; }
.bp-body__inner p,
.bp-body__inner li { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: var(--ls-base); }
.bp-body__inner h2 { margin: 56px 0 24px; font-size: clamp(32px, 3.333vw, 48px); line-height: 1; letter-spacing: var(--ls-tight); }
.bp-body__inner h3 { margin: 40px 0 16px; font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: 1.15; letter-spacing: var(--ls-tight); }
.bp-body__inner h2:first-child,
.bp-body__inner h3:first-child { margin-top: 0; }
.bp-body__inner a { text-decoration: underline; text-underline-offset: 3px; }
.bp-body__inner a:hover { opacity: .6; }
.bp-body__inner ul,
.bp-body__inner ol { padding-left: 24px; }
.bp-body__inner ul { list-style: square; }
.bp-body__inner li + li { margin-top: 8px; }
.bp-body__inner blockquote {
    margin:       48px 0;
    padding:      24px 0 24px 24px;
    border-left:  2px solid var(--color-dark);
}
.bp-body__inner blockquote p { font-size: var(--fs-title); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: var(--ls-tight); }
.bp-body__inner blockquote cite { display: block; margin-top: 16px; font-family: var(--font-mono); font-size: var(--fs-small); font-style: normal; color: var(--color-muted); }
.bp-body__inner figure { margin-left: 0; margin-right: 0; }
.bp-body__inner img { display: block; max-width: 100%; height: auto; }
.bp-body__inner figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-muted); }
.bp-body__inner hr { border: 0; border-top: 1px solid var(--grid-line-dark, rgba(14, 14, 16, .12)); margin: 48px 0; }

/* Related */
.bp-related { padding: 0 0 220px; }
.bp-related__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; padding-top: 32px; border-top: 1px solid var(--grid-line-dark, rgba(14, 14, 16, .12)); }
.bp-related__title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }

/* ── Tablet / mobile ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bl-hero__head { grid-column: 1 / 6; }
    .bl-hero__lead { grid-column: 1 / 6; margin-top: 24px; padding-bottom: 0; }
    .bl-list { padding: 56px 0 120px; }
    .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .bp-head__inner { max-width: none; }
    .bp-body__inner { max-width: 720px; margin-left: 0; }
    .bp-body { padding: 56px 0 120px; }
    .bp-related { padding-bottom: 120px; }
}

@media (max-width: 767px) {
    .bl-hero { padding-top: 32px; }
    .bl-hero__title { font-size: 56px; }
    .bl-grid { grid-template-columns: 1fr; }
    .bl-filter { margin-bottom: 32px; }
    .bl-pagination ul { justify-content: center; }
    .bp-head { padding-top: 40px; }
    .bp-head__title { font-size: 40px; }
    .bp-hero { padding-top: 40px; }
    .bp-hero__figure { aspect-ratio: 4 / 3; }
    .bp-body__inner h2 { margin-top: 40px; }
    .bp-related__bar { flex-direction: column; align-items: flex-start; }
}

/* Larger touch targets for the small breadcrumb links (same look) */
@media (max-width: 1023px) {
    .bp-crumbs__list a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}