/*
 * Event Landing Card — event-card.css
 *
 * Rich card for the events landing page.
 * Calendar date icon | body (meta, title, speakers) | thumbnail.
 * Globally enqueued.
 *
 * GridBuilder resets font/color on all h3/p/span/a inside cards via
 * `.wp-grid-builder .wpgb-card h3 { font: inherit }` (specificity 0-2-1).
 * We use `.wp-grid-builder .event-landing-card__*` (0-2-0) plus the BEM
 * class to reach 0-2-0, but need 0-3-0 to win. Prefix with
 * `.wp-grid-builder .wpgb-card` where needed.
 */

/* ==========================================================================
   Event card (card-row variant) — used in cross-content feeds (topic, research area)
   ========================================================================== */

/* Thumbnail layout — mirrors pub-card pattern */
@media (min-width: 701px) {
    .event-card--has-thumb {
        display: grid;
        grid-template-columns: 1fr 25%;
        grid-template-rows: 1fr auto;
    }

    .event-card--has-thumb .event-card__thumb-link {
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .event-card--has-thumb .card-row__content {
        grid-column: 1;
        grid-row: 1;
    }

    .event-card--has-thumb .card-row__meta {
        grid-column: 1;
        grid-row: 2;
    }
}

.event-card__thumb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-keyline);
}

.event-card__thumb-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(4px) brightness(0.7);
    transform: scale(1.3);
}

@media (min-width: 701px) {
    .event-card__thumb-link {
        border-top: none;
        border-left: 1px solid var(--color-keyline);
    }
}

.event-card__thumb {
    position: relative;
    width: 80%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

.event-card__desc {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-black);
    margin: 0;
}

/* ==========================================================================
   Event Landing Card — rich card for events landing page
   ========================================================================== */

/* Override GridBuilder masonry inline styles — force full-width single column */
.wpgb-grid-7 .wpgb-card {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.wpgb-grid-7 .wpgb-masonry {
    display: flex;
    flex-direction: column;
    height: auto !important;
}

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

/* Separator between GridBuilder cards — match upcoming list spacing */
.wpgb-grid-7 .wpgb-card + .wpgb-card {
    border-top: 1px solid var(--color-keyline);
    padding-top: var(--space-6);
}

.event-landing-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-keyline);
}

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

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

.event-landing-card:first-child {
    padding-top: 0;
}

.event-landing-card:last-child {
    border-bottom: none;
}

/* --- Calendar date icon --- */
a.event-landing-card__date-icon,
.event-landing-card__date-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-berkeley-blue);
    color: var(--color-white);
    text-align: center;
    flex-shrink: 0;
    text-decoration-line: none;
    transition: background-color var(--transition-base);
}

a.event-landing-card__date-icon:hover {
    background: var(--color-blue-medium);
}

.wp-grid-builder .wpgb-card .event-landing-card__month,
.event-landing-card__month {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    color: var(--color-white);
}

.wp-grid-builder .wpgb-card .event-landing-card__day,
.event-landing-card__day {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-white);
}

/* --- Body --- */
.event-landing-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.wp-grid-builder .wpgb-card .event-landing-card__meta,
.event-landing-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-neutral-warm-dark);
}

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

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

/* Pipe after type label */
.wp-grid-builder .wpgb-card .event-landing-card__type + span::before,
.event-landing-card__type + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: var(--space-2);
    background-color: var(--color-neutral-warm-mid);
    vertical-align: middle;
}

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

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

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

.wp-grid-builder .wpgb-card .event-landing-card__description,
.event-landing-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;
}

.wp-grid-builder .wpgb-card .event-landing-card__speakers,
.event-landing-card__speakers {
    font-family: var(--font-sans);
    font-size: var(--text-medium);
    color: var(--color-neutral-warm-dark);
    margin: 0;
}

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

.wp-grid-builder .wpgb-card .event-landing-card__speakers a:hover,
.event-landing-card__speakers a:hover {
    text-decoration-line: underline;
}

/* Recording CTA — override GridBuilder's display:block and font:inherit on <a> */
.wp-grid-builder .wpgb-card .event-landing-card__recording,
.event-landing-card__recording {
    display: inline-flex !important;
    width: auto !important;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-neutral-warm-dark);
    color: var(--color-white);
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    text-decoration-line: none;
    margin-top: var(--space-3);
    transition: background-color var(--transition-base);
}

.wp-grid-builder .wpgb-card .event-landing-card__recording:hover,
.event-landing-card__recording:hover {
    background-color: var(--color-neutral-warm-dark-hover);
    color: var(--color-white);
    text-decoration-line: none;
}

.event-landing-card__recording svg {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* --- Thumbnail --- */
.event-landing-card__thumbnail {
    grid-row: 1;
    grid-column: 3;
    width: 280px;
    flex-shrink: 0;
}

.event-landing-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-landing-card__thumbnail--yt {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.event-landing-card__thumbnail--yt img {
    transform: scale(1.02);
}

/* When thumbnail present, expand grid */
.event-landing-card:has(.event-landing-card__thumbnail) {
    grid-template-columns: auto 1fr 280px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .event-landing-card,
    .event-landing-card:has(.event-landing-card__thumbnail) {
        grid-template-columns: auto 1fr;
    }

    .event-landing-card__thumbnail {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .event-landing-card {
        grid-template-columns: 1fr;
    }

    .event-landing-card__date-icon {
        width: 56px;
        height: 56px;
    }
}