/* ═══════════════════════════════════════════════════════════════════
 *  Media hub page — /media/ (and /id/media/).
 *  Layered on top of ptst-content-pages.css (which gives .container
 *  its max-width and provides the .page-hero base treatment).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb (sits below hero on body bg, mirrors other archives) ── */
.ptst-media-hub > .container {
    padding-top: 18px;
    padding-bottom: 4px;
}
.ptst-media-hub .ptst-crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-3, #5A6B86);
    padding: 0;
}
.ptst-media-hub .ptst-crumb a { color: var(--ink-3, #5A6B86); text-decoration: none; }
.ptst-media-hub .ptst-crumb a:hover { color: var(--brand-blue, #0E4A9C); text-decoration: underline; text-underline-offset: 3px; }
.ptst-media-hub .ptst-crumb__sep { color: var(--ink-4, #93A1B8); }
.ptst-media-hub .ptst-crumb__current { color: var(--ink, #0B1B33); }

/* ── Card grid ─────────────────────────────────────────────────── */
.ptst-media-hub__cards-section { padding: 32px 0 80px; }
.ptst-media-hub__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
@media (max-width: 760px) {
    .ptst-media-hub__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Card ──────────────────────────────────────────────────────── */
.ptst-media-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #E2E8F2);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink, #0B1B33);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.ptst-media-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-blue, #0E4A9C);
    box-shadow: 0 18px 44px -22px rgba(11, 27, 51, 0.30);
}
/* Suppress global a:hover underline rule on descendants */
.ptst-media-card,
.ptst-media-card:hover,
.ptst-media-card:focus,
.ptst-media-card:hover *,
.ptst-media-card:focus * { text-decoration: none; }
.ptst-media-card:hover .ptst-media-card__title,
.ptst-media-card:focus .ptst-media-card__title { color: var(--brand-blue, #0E4A9C); }

/* ── Cover image ───────────────────────────────────────────────── */
.ptst-media-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-soft, #F4F7FB);
}
.ptst-media-card__cover-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11, 27, 51, 0) 55%, rgba(11, 27, 51, 0.20) 100%);
}

/* ── Body ──────────────────────────────────────────────────────── */
.ptst-media-card__body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column; gap: 8px;
}
.ptst-media-card__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-blue, #0E4A9C);
}
.ptst-media-card__title {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.014em;
    color: var(--ink, #0B1B33);
    transition: color 140ms ease;
}
.ptst-media-card__description {
    margin: 6px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2, #2A3D5C);
}
.ptst-media-card__cta {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-blue, #0E4A9C);
}

@media (max-width: 480px) {
    .ptst-media-card__body { padding: 18px 18px 20px; }
    .ptst-media-card__title { font-size: 20px; }
}