/**
 * Perspective v3 — stacked cards.
 *
 * Layers on perspective-v2.css, which supplies the hero, the article page and
 * the shared measurement JS hooks. Everything here is the index's own grid.
 *
 * The client's reference is a card with the whole cover on top and the copy
 * ranged left beneath it on black — no panel fill, no border, the artwork does
 * the work.
 */

/* The v2 index runs edge to edge; a card grid wants the page's own column. */
.kcv3-list {
    padding-block: 96px 110px;
}

/*
 * Three across, per the client. Explicitly three rather than
 * `auto-fill, minmax(...)`: auto-fill decides the count from the viewport, so
 * it silently becomes two or four at other widths. Stepped down deliberately
 * at the breakpoints below instead.
 *
 * No width cap is needed at three across — a third of the column already lands
 * the covers near the ~520px the client's reference card is drawn at.
 */
.kcv3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px 40px;
    align-items: start;
}

.kcv3-card {
    display: grid;
    gap: 18px;
    align-content: start;
}

/*
 * No forced aspect ratio and no `cover`. These are finished poster artwork with
 * the wordmark, issue number and headline baked in — the whole point of this
 * design is that the cover is shown whole, so the card takes the image's own
 * proportions. Same reason v2 sizes its band to --kcv-cover-ratio.
 */
.kcv3-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--kcp-panel);
    text-decoration: none;
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.kcv3-card__media img {
    display: block;
    width: 100%;
    height: auto;
}

.kcv3-card:hover .kcv3-card__media,
.kcv3-card__media:focus-visible {
    transform: scale(1.02);
}

.kcv3-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 900 / 831;
    width: 100%;
    background:
        radial-gradient(120% 90% at 30% 15%, rgba(232, 115, 90, 0.2), transparent 62%),
        var(--kcp-panel);
    color: var(--kcp-accent);
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 300;
}

/* ---------- Copy ---------- */

.kcv3-card__copy {
    display: grid;
    gap: 12px;
    justify-items: start;
    text-align: left;
}

.kcv3-card__title {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
}

/* Pink, not white — the reference sets the title in the accent. */
.kcv3-card__title a {
    color: var(--kcp-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.kcv3-card:hover .kcv3-card__title a {
    color: var(--kcp-title);
}

.kcv3-card__teaser {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--kcp-text-muted);
    margin: 0;
}

/* ---------- Narrow screens ---------- */

/* Two across before the cards get too narrow to read. */
@media (max-width: 1200px) {
    .kcv3-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .kcv3-list {
        padding-block: 40px 64px;
    }

    .kcv3-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}