/* ============================================================
   Case archive — the listing in the content slot of the case archive
   template. Scoped to .fab-case-archive; the hero above and the CTA /
   events / insights bands below are template-zone BLOCKS.
   ============================================================ */

.fab-case-archive {
    font-family: var(--fabrement-font-body, "DM Sans", sans-serif);
    color: var(--fabrement-text, #455060);
}

/* The site leaves --fabrement-pad-inline / --fabrement-content-max undefined, so the bare
   .fabrement-block-inner would have no gutter. Restate the blocks' 1320px container. */
.fab-case-archive .fabrement-block-inner {
    max-width: 1368px;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

.fab-case-archive .fca-list {
    background: var(--fabrement-surface, #ffffff);
    padding: 96px 0 104px;
}

.fab-case-archive .fca-heading {
    margin: 0 0 56px;
    font-family: var(--fabrement-font-heading, "DM Sans", sans-serif);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--fabrement-heading, #1d3557);
}

/* ---------- rows ---------- */

.fab-case-archive .fca-rows {
    border-top: 1px solid rgba(29, 53, 87, 0.14);
}

.fab-case-archive .fca-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    padding: 36px 0;
    border-bottom: 1px solid rgba(29, 53, 87, 0.14);
}

.fab-case-archive .fca-row--nomedia {
    grid-template-columns: minmax(0, 1fr);
}

.fab-case-archive .fca-media {
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
}

.fab-case-archive .fca-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 480ms ease-out;
}

.fab-case-archive .fca-row:hover .fca-img {
    transform: scale(1.04);
}

.fab-case-archive .fca-text {
    display: block;
    min-width: 0;
    text-decoration: none;
}

.fab-case-archive .fca-title {
    margin: 0 0 18px;
    font-family: var(--fabrement-font-heading, "DM Sans", sans-serif);
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fabrement-heading, #1d3557);
    overflow-wrap: break-word;
    hyphens: auto;
    transition: color 250ms ease;
}

.fab-case-archive .fca-read {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--impact-navy-soft, #2a4a75);
}

.fab-case-archive .fca-read svg {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 250ms ease;
}

.fab-case-archive .fca-text:hover .fca-title,
.fab-case-archive .fca-text:focus-visible .fca-title {
    color: var(--impact-navy-soft, #2a4a75);
}

.fab-case-archive .fca-row:hover .fca-read svg,
.fab-case-archive .fca-text:focus-visible .fca-read svg {
    transform: translateX(4px);
}

/* ---------- empty state ---------- */

.fab-case-archive .fca-empty {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
    text-align: center;
    color: var(--fabrement-text, #455060);
}

/* ---------- pagination ---------- */

.fab-case-archive .pagination {
    margin-top: 64px;
}

.fab-case-archive .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fab-case-archive .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(29, 53, 87, 0.18);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--fabrement-heading, #1d3557);
    text-decoration: none;
    transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.fab-case-archive .pagination a.page-numbers:hover,
.fab-case-archive .pagination a.page-numbers:focus-visible {
    background: var(--fabrement-secondary, #c7d3a5);
    border-color: var(--fabrement-secondary, #c7d3a5);
}

.fab-case-archive .pagination .page-numbers.current {
    background: var(--fabrement-primary, #1d3557);
    border-color: var(--fabrement-primary, #1d3557);
    color: var(--fabrement-text-inverse, #ffffff);
}

.fab-case-archive .fca-pg-ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.fab-case-archive .fca-pg-ic svg {
    display: block;
}

.fab-case-archive .fca-pg-back svg {
    transform: rotate(180deg);
}

.fab-case-archive .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- focus ---------- */

.fab-case-archive a:focus-visible {
    outline: 2px solid var(--fabrement-heading, #1d3557);
    outline-offset: 4px;
}

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
    .fab-case-archive .fca-list {
        padding: 64px 0 72px;
    }

    .fab-case-archive .fca-row {
        gap: 32px;
        padding: 32px 0;
    }
}

@media (max-width: 781px) {
    .fab-case-archive .fabrement-block-inner {
        padding-inline: 20px;
    }

    .fab-case-archive .fca-list {
        padding: 48px 0 56px;
    }

    .fab-case-archive .fca-heading {
        margin-bottom: 36px;
    }

    .fab-case-archive .fca-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 28px 0;
    }

    .fab-case-archive .fca-title {
        margin-bottom: 12px;
    }

    .fab-case-archive .fca-pg-lbl {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-case-archive .fca-img,
    .fab-case-archive .fca-title,
    .fab-case-archive .fca-read svg,
    .fab-case-archive .pagination .page-numbers {
        transition: none;
    }

    .fab-case-archive .fca-row:hover .fca-img,
    .fab-case-archive .fca-row:hover .fca-read svg {
        transform: none;
    }
}

/* ---------- the archive record's own blocks ----------
   fabrement_archive_content() prints whatever an editor wrote on the Cases record. Those
   blocks carry their own container, background and vertical padding, so this zone is a bare
   full-width wrapper that must NOT restate the 1320px container above. When the zone renders,
   the list drops part of its own top padding so the two paddings do not stack into a gap.
   Declared after the media queries above on purpose: those set `padding` as a shorthand at the
   same specificity, so an earlier padding-top would lose to them. */

.fab-case-archive .fca-own > :last-child {
    margin-bottom: 0;
}

.fab-case-archive .fca-list--tight {
    padding-top: 56px;
}

@media (max-width: 1023px) {
    .fab-case-archive .fca-list--tight {
        padding-top: 40px;
    }
}

@media (max-width: 781px) {
    .fab-case-archive .fca-list--tight {
        padding-top: 28px;
    }
}

/* Plain CORE blocks written on the record (a paragraph, a heading, a list) have NO container
   of their own, so in this full-width zone they would run edge-to-edge while the list beside
   them sits in the 1320px container. Give just those the same container. Fabrement blocks are
   deliberately NOT matched: their roots are sections and divs carrying .fabrement-block-inner,
   never these prose tags, so they keep the width and background they set themselves. */

.fab-case-archive .fca-own .entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre) {
    max-width: 1368px;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

/* Prose written first in the zone would otherwise sit flush under the hero block above. */
.fab-case-archive .fca-own .entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre):first-child {
    margin-top: 56px;
}

@media (max-width: 781px) {
    .fab-case-archive .fca-own .entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre) {
        padding-inline: 20px;
    }

    .fab-case-archive .fca-own .entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table, pre):first-child {
        margin-top: 32px;
    }
}

.fab-case-archive .fca-list--tight-end {
    padding-bottom: 56px;
}

@media (max-width: 1023px) {
    .fab-case-archive .fca-list--tight-end {
        padding-bottom: 40px;
    }
}

@media (max-width: 781px) {
    .fab-case-archive .fca-list--tight-end {
        padding-bottom: 28px;
    }
}