/*
 * .gp-vcard — video card atom for the Performance design.
 *
 * Two main variants:
 *   .gp-vcard--featured   4:5 ratio, used in "Fresh from the Vault"
 *   .gp-vcard             16:9 ratio, used in vault grid + related
 *
 * Anatomy:
 *   .gp-vcard__media       wrapper with aspect-ratio
 *     .gp-vcard__thumb     background-image, fills media
 *     .gp-vcard__tag       top-left tag pill
 *     .gp-vcard__duration  bottom-right duration chip
 *     .gp-vcard__play      centered circle play button (optional)
 *   .gp-vcard__body
 *     .gp-vcard__title     Bebas Neue title
 *     .gp-vcard__meta      mono meta line OR "WATCH ━━" link
 */

.gp-vcard {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gp-vcard__media {
    position: relative;
    background: var(--gp-surface);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.gp-vcard--featured .gp-vcard__media { aspect-ratio: 4 / 5; }

.gp-vcard__thumb {
    position: absolute;
    inset: 0;
    background-color: #161310;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform var(--gp-dur-slow) var(--gp-ease-out);
}
.gp-vcard:hover .gp-vcard__thumb { transform: scale(1.04); }

/* Subtle vignette for legibility of overlay tags */
.gp-vcard__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.gp-vcard__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}
.gp-vcard--featured .gp-vcard__tag { right: 14px; left: auto; }

.gp-vcard__duration {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
}

.gp-vcard__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity var(--gp-dur-base) var(--gp-ease-standard);
}
.gp-vcard:hover .gp-vcard__play { opacity: 1; }

/* ── body ─────────────────────────────────────────────────────────── */
.gp-vcard__body {
    margin-top: 14px;
}

.gp-vcard__title {
    font-family: var(--gp-font-display);
    font-size: var(--gp-fs-card);
    font-weight: 400;
    line-height: var(--gp-lh-display-normal);
    letter-spacing: var(--gp-ls-display-wide);
    color: var(--gp-text);
    margin: 0;
    text-transform: uppercase;
}

/* "WATCH ━━" — gold mono label + 14px gold underline */
.gp-vcard__watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--gp-font-mono);
    font-size: 10px;
    letter-spacing: var(--gp-ls-meta-wide);
    text-transform: uppercase;
    color: var(--gp-text-dim);
}
.gp-vcard__watch-rule {
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--gp-gold);
}

/* Meta line (alternative to WATCH — used on grid cards) */
.gp-vcard__meta {
    margin-top: 8px;
    font-family: var(--gp-font-mono);
    font-size: 10px;
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-text-muted);
}