/*
 * Video Card — video-card.css
 *
 * Column card for 3-column video grid.
 * Thumbnail, type eyebrow, title, meta, speakers, description.
 * Globally enqueued.
 *
 * GridBuilder resets font/color on all elements inside `.wpgb-card`.
 * Prefix with `.wp-grid-builder .wpgb-card` where needed (0-3-0 specificity).
 */

/* --- Grid layout: 3 columns --- */

.wpgb-grid-8 .wpgb-viewport {
    height: auto !important;
}

.wpgb-grid-8 .wpgb-masonry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    height: auto !important;
}

.wpgb-grid-8 .wpgb-card {
    width: auto !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.wpgb-grid-8 .wpgb-card-wrapper {
    padding: 0;
}

.wpgb-grid-8 .wpgb-card.wpgb-card-hidden {
    display: none !important;
}

/* --- Card --- */

.video-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
}

/* Match the parent section's background so cards stay visually integrated
 * but expose an explicit, detectable background for a11y contrast tools. */
.section-block--warm .video-card {
    background-color: var(--color-neutral-warm-light);
}

.section-block--cream .video-card {
    background-color: var(--color-cream);
}

/* --- Thumbnail --- */

.wp-grid-builder .wpgb-card .video-card__thumb,
.video-card__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
    display: block;
}

.video-card__thumb--yt img {
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}

/* --- Content --- */

.video-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

/* --- Type eyebrow --- */

.wp-grid-builder .wpgb-card .video-card__type,
.video-card__type {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-berkeley-blue);
    margin: 0;
}

/* --- Title --- */

.wp-grid-builder .wpgb-card .video-card__type + .video-card__title,
.video-card__type + .video-card__title {
    margin-top: calc(-1 * var(--space-3));
}

.wp-grid-builder .wpgb-card .video-card__title,
.video-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-black);
    line-height: var(--leading-snug);
    margin: 0;
}

.wp-grid-builder .wpgb-card .video-card__title a,
.video-card__title a {
    color: var(--color-blue-dark);
    text-decoration-line: none;
}

.wp-grid-builder .wpgb-card .video-card__title a:hover,
.video-card__title a:hover {
    text-decoration-line: underline;
    color: var(--color-berkeley-blue);
}

/* --- Meta row --- */

.wp-grid-builder .wpgb-card .video-card__meta,
.video-card__meta {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    line-height: var(--leading-snug);
    color: var(--color-neutral-warm-dark);
    margin: 0;
}

.wp-grid-builder .wpgb-card .video-card__meta span + span::before,
.video-card__meta span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-inline: var(--space-2);
    background-color: var(--color-neutral-warm-mid);
    vertical-align: middle;
}

/* --- Speaker names --- */

.wp-grid-builder .wpgb-card .video-card__meta + .video-card__speaker-names,
.video-card__meta + .video-card__speaker-names {
    margin-top: calc(-1 * var(--space-2));
}

.wp-grid-builder .wpgb-card .video-card__speaker-names,
.video-card__speaker-names {
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    line-height: var(--leading-snug);
    color: var(--color-neutral-warm-dark);
    text-wrap: balance;
    margin: 0;
}

.wp-grid-builder .wpgb-card .video-card__speaker-names a,
.video-card__speaker-names a {
    color: var(--color-berkeley-blue);
    font-weight: var(--font-weight-semibold);
    text-decoration-line: none;
}

.wp-grid-builder .wpgb-card .video-card__speaker-names a:hover,
.video-card__speaker-names a:hover {
    text-decoration-line: underline;
}

/* --- Description --- */

.wp-grid-builder .wpgb-card .video-card__description,
.video-card__description {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-neutral-warm-dark);
    margin: 0;
}

/* --- Responsive --- */

@media (max-width: 900px) {
    .wpgb-grid-8 .wpgb-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wpgb-grid-8 .wpgb-masonry {
        grid-template-columns: 1fr;
    }
}