/* Videos directory page styles - rebuilt 2026-06-07.
   Mirrors articles.css tokens + adds .vid-* grid card styles from the approved mockup. */

.vid-wrap {
    --accent:      var(--bmm-accent);
    --accent-deep: var(--bmm-accent-deep);
    --accent-soft: var(--bmm-accent-soft);
    --accent-wash: var(--bmm-accent-soft);
    --line:        #e7e4ef;
    --line-soft:   #f1eff5;
    --ink:         #14121a;
    --ink-soft:    #4a4757;
    --muted:       #8a8797;
    font-family: 'Fraunces', Georgia, serif;
    color: var(--ink);
}
.vid-wrap * { box-sizing: border-box; }

/* ---- Editorial header (mirrors .art-hdr) ---- */
.vid-hdr {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 18px 20px 14px;
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px;
    margin-bottom: 22px;
}
.vid-hdr .crn {
    position: absolute; width: 10px; height: 10px;
    border: 1px solid var(--accent); opacity: .75;
}
.vid-hdr .crn.tl { top: -1px;    left: -1px;  border-right: none;  border-bottom: none; }
.vid-hdr .crn.tr { top: -1px;    right: -1px; border-left: none;   border-bottom: none; }
.vid-hdr .crn.bl { bottom: -1px; left: -1px;  border-right: none;  border-top: none; }
.vid-hdr .crn.br { bottom: -1px; right: -1px; border-left: none;   border-top: none; }

.vid-title-block { flex: 1 1 320px; min-width: 0; }

.vid-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent); font-weight: 500;
}
.vid-kicker .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmm-accent) 15%, transparent);
}
.vid-hdr h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500; font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1; letter-spacing: -0.01em;
    margin: 4px 0 4px;
    color: var(--ink);
}
.vid-hdr h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.vid-hdr .sub {
    font-size: 13px; color: var(--ink-soft);
    margin: 0; max-width: 64ch;
}

/* ---- Category tabs (mirrors .art-tabs) ---- */
.vid-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    width: 100%; margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.vid-tabs a {
    font-family: 'Fraunces', serif;
    font-size: 13px; font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.vid-tabs a:hover { color: var(--accent); border-color: var(--line); }
.vid-tabs a.on {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.vid-tabs .lbl {
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
    padding: 8px 6px 8px 0;
    align-self: center;
}

/* ---- Section heading ---- */
.vid-sec {
    margin: 26px 0 12px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}
.vid-sec h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500; font-size: 19px; margin: 0;
    color: var(--ink);
}
.vid-sec h2 .c { color: var(--accent); }
.vid-sec .all {
    font-size: 12px; color: var(--accent); text-decoration: none;
    white-space: nowrap;
}
.vid-sec .all:hover { text-decoration: underline; }
.vid-sec-note {
    font-size: 11px; color: var(--muted);
}

/* ---- 3-up responsive grid ---- */
.vid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 6px;
}

/* ---- Video card ---- */
.vid-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.vid-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--bmm-accent) 20%, transparent);
}

/* Premium left accent (mirrors .art-item.is-premium) */
.vid-card.is-premium {
    border-color: color-mix(in srgb, var(--bmm-accent) 45%, transparent);
    border-left: 3px solid var(--accent);
}
.vid-card.is-premium::before {
    content: ""; display: block;
    position: absolute; top: -1px; left: -3px; width: 8px; height: 8px;
    border: 1px solid var(--accent);
    border-right: none; border-bottom: none;
    pointer-events: none;
}
/* Position context needed for ::before */
.vid-card { position: relative; }

/* ---- 16:9 thumbnail wrap ---- */
.vid-th {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #241a3a;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.vid-th img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .84;
    transition: opacity .3s ease, transform .4s ease;
}
.vid-card:hover .vid-th img {
    opacity: 1;
    transform: scale(1.03);
}

/* Play button overlay (decorative border-radius:50% allowed per spec) */
.vid-th .play {
    position: absolute; inset: 0; margin: auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
    pointer-events: none;
}
.vid-th .play::after {
    content: "";
    margin-left: 3px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--accent);
}
.vid-card:hover .vid-th .play {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
}

/* Provider badge (top-left) */
.vid-th .prov {
    position: absolute; top: 6px; left: 6px;
    font-family: ui-monospace, monospace;
    font-size: 9px; color: #fff;
    background: rgba(0, 0, 0, .55);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: .08em; text-transform: uppercase;
    pointer-events: none;
}

/* Duration badge (bottom-right) */
.vid-th .dur {
    position: absolute; bottom: 6px; right: 6px;
    font-family: ui-monospace, monospace;
    font-size: 10px; color: #fff;
    background: rgba(0, 0, 0, .72);
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: .04em;
    pointer-events: none;
}

/* ---- Card body ---- */
.vid-cb {
    padding: 11px 13px 13px;
    display: flex; flex-direction: column; gap: 5px;
    flex: 1;
}

/* Category eyebrow */
.vid-eyebrow {
    font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent); font-weight: 500;
}
.vid-eyebrow a {
    color: inherit; text-decoration: none;
}
.vid-eyebrow a:hover { text-decoration: underline; }
/* Non-main categories get muted colour */
.vid-eyebrow--custom { color: var(--ink-soft); }
.vid-eyebrow--custom a { color: var(--ink-soft); }

/* Title */
.vid-ct {
    font-family: 'Fraunces', serif;
    font-size: 15px; font-weight: 500; line-height: 1.25;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vid-ct a {
    color: var(--ink); text-decoration: none;
    transition: color .2s ease;
}
.vid-ct a:hover { color: var(--accent); }

/* Meta row */
.vid-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    font-size: 11px; color: var(--muted);
    margin-top: auto;
}
.vid-meta .game {
    font-style: italic; font-family: 'Fraunces', serif; font-size: 12px;
    color: var(--ink-soft); text-decoration: none;
}
.vid-meta .game:hover { color: var(--accent); }
.vid-meta .sep { color: var(--line); }
.vid-meta .by { font-family: 'Fraunces', serif; font-size: 12px; }
.vid-meta .by a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.vid-meta .by a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Empty state ---- */
.vid-empty {
    background: #fff; border: 1px dashed var(--line);
    padding: 28px; text-align: center;
    color: var(--ink-soft); font-size: 14px;
    border-radius: 2px;
}
.vid-empty a { color: var(--accent); text-decoration: none; }
.vid-empty a:hover { text-decoration: underline; }

/* ---- Pagination (reuse global .pagination, add spacing) ---- */
.pagination.mt-6 { margin-top: 24px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .vid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .vid-grid { grid-template-columns: 1fr; }
    .vid-hdr { padding: 14px 14px 12px; }
    .vid-hdr h1 { font-size: 22px; }
}