/* Event and webinar pages — the live sessions, the on-demand replays, and the
   partner panels. See STYLES.md §16.

   Loads after page.css and depends on it: every event page carries
   `class="pg-page event-page"`, so the bands, buttons, and type scale come from
   page.css and this sheet only handles the blocks that are specific to an event
   listing (the fact strip, the host logos, the speaker cards, the replay
   player, the transcript, and the notify modal).

   The eight pages were written in a shared unprefixed vocabulary
   (`.event-hero`, `.benefit-card`, `.speaker-card`, …). Restyling those names
   here rather than renaming them is what let the page bodies stay as they are;
   everything is scoped under `.event-page` so it cannot reach anything else. */

/* ---------- Hero ---------- */

.event-page .event-hero {
    background: var(--color-ink);
    color: var(--color-white);
}

.event-page .event-hero-content {
    max-width: 72rem;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    text-align: left;
}

@media (min-width: 640px) {
    .event-page .event-hero-content {
        padding: 6rem 1.5rem;
    }
}

.event-page .event-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.event-page .event-label .live-dot,
.event-page .pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
}

.event-page .event-hero h1 {
    max-width: 22ch;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-white);
}

.event-page .event-hero .tagline,
.event-page .hero-tagline-meta {
    max-width: 44rem;
    margin: 1.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-slate-300);
}

.event-page .event-hero .tagline strong {
    color: var(--color-white);
    font-weight: 600;
}

/* ---------- Fact strip ---------- */

/* Date, time, and format as a row of labelled values rather than three
   bordered pills — the same treatment the homepage stat row uses. */
.event-page .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin: 2.5rem 0 0;
}

.event-page .meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.event-page .meta-icon {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--color-accent);
}

.event-page .meta-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}

.event-page .meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.event-page .meta-value {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-white);
}

/* ---------- Hero actions and host logos ---------- */

.event-page .event-hero .btn-register,
.event-page .event-hero .btn-watch,
.event-page .cta-section-event .btn-register,
.event-page .cta-section-event .btn-cta-light,
.event-page .cta-section-event .btn-cta-green {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    padding: 0.8125rem 1.5rem;
    border-radius: var(--radius-button);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.event-page .event-hero .btn-register:hover,
.event-page .event-hero .btn-watch:hover,
.event-page .cta-section-event .btn-register:hover,
.event-page .cta-section-event .btn-cta-light:hover,
.event-page .cta-section-event .btn-cta-green:hover {
    background: var(--color-slate-100);
}

.event-page .btn-register svg,
.event-page .btn-watch svg,
.event-page .btn-cta-light svg,
.event-page .btn-cta-green svg,
.event-page .btn-register-dark svg,
.event-page .btn-youtube svg,
.event-page .btn-spotify svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
}

.event-page .btn-register-dark,
.event-page .btn-youtube,
.event-page .btn-spotify {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-button);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.event-page .btn-register-dark {
    border-color: transparent;
    background: var(--color-brand);
    color: var(--color-white);
}

.event-page .btn-register-dark:hover {
    background: var(--color-brand-dark);
}

.event-page .btn-youtube:hover,
.event-page .btn-spotify:hover {
    border-color: var(--color-slate-300);
    background: var(--color-slate-50);
}

.event-page .cta-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.event-page .hosted-by {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.event-page .hosted-label,
.event-page .host-badges {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.event-page .host-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.5rem;
    margin-top: 1.25rem;
}

/* Partner wordmarks arrive in very different aspect ratios, so the band is
   fixed by height and the logos are knocked out to white on the ink. */
.event-page .host-logo-item img {
    max-height: 1.75rem;
    max-width: 10rem;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* A few partner marks only exist as artwork on their own background. Those
   cannot be knocked out, so they sit on a white chip instead. */
.event-page .host-logo-item img.logo-with-bg {
    max-height: 2.5rem;
    padding: 0.25rem;
    border-radius: 0.375rem;
    background: var(--color-white);
    filter: none;
    opacity: 1;
}

/* ---------- Section shells ---------- */

.event-page .about-section,
.event-page .benefits-section,
.event-page .speakers-section,
.event-page .speaker-section,
.event-page .video-section,
.event-page .spotify-section,
.event-page .transcript-section,
.event-page .cta-section-event {
    padding: 5rem 0;
    background: var(--color-white);
}

@media (min-width: 640px) {
    .event-page .about-section,
    .event-page .benefits-section,
    .event-page .speakers-section,
    .event-page .speaker-section,
    .event-page .video-section,
    .event-page .spotify-section,
    .event-page .transcript-section,
    .event-page .cta-section-event {
        padding: 6rem 0;
    }
}

.event-page .benefits-section,
.event-page .video-section,
.event-page .spotify-section {
    background: var(--color-paper);
}

/* styles.css gives `.about-section` a rounded grey card and `.benefits-section`
   a centred gradient dash above the heading. Both read as decoration from the
   old palette, so they are cleared here. */
.event-page .about-section {
    margin: 0;
    border-radius: 0;
}

.event-page .benefits-section::before {
    content: none;
}

.event-page .cta-section-event {
    background: var(--color-white);
}

.event-page .about-container,
.event-page .benefits-container,
.event-page .speakers-container,
.event-page .speaker-container,
.event-page .transcript-container,
.event-page .cta-container,
.event-page .video-container,
.event-page .spotify-container,
.event-page .replay-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: left;
}

/* styles.css owns `.video-container` as a zero-height 16:9 iframe positioner.
   Here the same name is a section column, so the ratio box has to be undone —
   otherwise the heading and the player collapse to nothing. The ratio lives on
   `.video-wrapper` instead. */
.event-page .video-container {
    position: static;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}


.event-page .section-eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-brand);
}

/* styles.css centres several of these headings by name (`.benefits-section h2`
   and friends). A rule on the container cannot undo that — inheritance loses to
   any direct rule — so the alignment has to be restated on the heading. */
.event-page .about-section h2,
.event-page .benefits-header h2,
.event-page .speakers-header h2,
.event-page .transcript-header h2,
.event-page .video-section h2,
.event-page .spotify-section h2 {
    margin: 0 0 1.5rem;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-ink);
}

.event-page .about-section p,
.event-page .video-intro,
.event-page .benefit-intro,
.event-page .cta-lead {
    max-width: 44rem;
    margin: 0 0 1.125rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-ink-muted);
}

.event-page .about-section p:last-child {
    margin-bottom: 0;
}

.event-page .about-section strong {
    color: var(--color-ink);
    font-weight: 600;
}

.event-page .benefits-header,
.event-page .speakers-header,
.event-page .transcript-header {
    margin-bottom: 2.5rem;
    text-align: left;
}

/* ---------- Topic cards ---------- */

.event-page .benefits-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 700px) {
    .event-page .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.event-page .benefit-card {
    padding: 1.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-white);
}

.event-page .benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    background: var(--color-brand-light);
    color: var(--color-brand-dark);
}

.event-page .benefit-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.event-page .benefit-card h3 {
    margin: 0 0 0.875rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-ink);
}

.event-page .benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-page .benefit-list li {
    position: relative;
    margin-top: 0.625rem;
    padding-left: 1.375rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
}

.event-page .benefit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--color-brand);
}

.event-page .benefit-list li strong {
    color: var(--color-ink);
    font-weight: 600;
}

/* ---------- Speakers ---------- */

.event-page .speakers-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 700px) {
    .event-page .speakers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .event-page .speakers-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.event-page .speaker-card {
    padding: 1.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-white);
}

.event-page .speaker-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.event-page .speaker-photo,
.event-page .speaker-photo-placeholder {
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.event-page .speaker-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate-100);
    font-size: 1.5rem;
}

.event-page .speaker-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.event-page .speaker-name {
    margin: 0.25rem 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
}

.event-page .speaker-title,
.event-page .speaker-role,
.event-page .speaker-company {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}

.event-page .speaker-title strong {
    color: var(--color-ink);
    font-weight: 600;
}

.event-page .speaker-bio p,
.event-page .speaker-info .bio {
    margin: 0 0 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-ink-muted);
}

.event-page .speaker-bio p:last-child {
    margin-bottom: 0;
}

.event-page .speaker-credentials {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-slate-100);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-ink-muted);
}

.event-page .speaker-credentials strong {
    color: var(--color-ink);
    font-weight: 600;
}

.event-page .speaker-logo {
    max-height: 1.75rem;
    width: auto;
    margin-bottom: 1rem;
}

/* ---------- Audience line ---------- */

.event-page .audience-line {
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-slate-200);
    border-bottom: 1px solid var(--color-slate-200);
    background: var(--color-white);
}

.event-page .audience-line-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
}

.event-page .audience-line-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.event-page .audience-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--color-slate-300);
}

/* ---------- Video and audio ---------- */

.event-page .video-wrapper,
.event-page .replay-container .video-container {
    position: relative;
    width: 100%;
    max-width: 56rem;
    margin: 2.5rem 0 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--color-ink);
}

.event-page .video-wrapper iframe,
.event-page .replay-container .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.event-page .spotify-wrapper,
.event-page .podcast-player {
    max-width: 56rem;
    margin: 2.5rem 0 0;
}

.event-page .podcast-player h3 {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.event-page .podcast-player .listen-caption {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-ink-faint);
}

.event-page .spotify-wrapper iframe {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
}

/* ---------- Downloadable resource ---------- */

.event-page .event-resource {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 56rem;
    margin: 2rem 0 0;
    padding: 1.5rem;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-white);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.event-page .event-resource:hover {
    border-color: rgba(12, 110, 117, 0.35);
    box-shadow: 0 10px 15px -3px rgba(22, 41, 77, 0.06);
}

.event-page .event-resource-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    background: var(--color-brand-light);
    color: var(--color-brand-dark);
}

.event-page .event-resource-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.event-page .event-resource-text {
    flex: 1;
}

.event-page .event-resource h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
}

.event-page .event-resource p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
}

.event-page .event-resource-action {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
}

.event-page .event-resource-action svg {
    width: 1rem;
    height: 1rem;
}

/* ---------- Transcript ---------- */

.event-page .transcript-content {
    max-height: 30rem;
    overflow-y: auto;
    padding: 1.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    background: var(--color-slate-50);
}

.event-page .transcript-content p {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-ink-muted);
}

.event-page .transcript-content p:last-child {
    margin-bottom: 0;
}

.event-page .transcript-content strong {
    color: var(--color-ink);
    font-weight: 600;
}

.event-page .transcript-content::-webkit-scrollbar {
    width: 8px;
}

.event-page .transcript-content::-webkit-scrollbar-track {
    background: transparent;
}

.event-page .transcript-content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--color-slate-300);
}

.event-page .transcript-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-faint);
}

/* ---------- Closing CTA ---------- */

.event-page .cta-section-event .cta-container,
.event-page .cta-panel {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    border-radius: 1rem;
    background: var(--color-ink);
    color: var(--color-white);
    text-align: center;
}

@media (min-width: 640px) {
    .event-page .cta-section-event .cta-container,
    .event-page .cta-panel {
        padding: 4rem 3rem;
    }
}

.event-page .cta-section-event .section-eyebrow,
.event-page .cta-panel .section-eyebrow {
    color: var(--color-accent);
}

.event-page .cta-container h2,
.event-page .cta-panel h2 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-white);
}

.event-page .cta-container > p,
.event-page .cta-panel p,
.event-page .cta-section-event .cta-lead {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--color-slate-300);
}

.event-page .cta-section-event .cta-buttons-row {
    justify-content: center;
}

.event-page .cta-reminder {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.event-page .cta-reminder strong {
    color: var(--color-white);
    font-weight: 600;
}

.event-page .cta-reminder a {
    color: var(--color-accent);
    font-weight: 600;
}

.event-page .cta-back-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.event-page .cta-back-link:hover {
    text-decoration: underline;
}

/* ---------- Notify modal ---------- */

.event-page .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(22, 41, 77, 0.6);
}

.event-page .modal-overlay.active {
    display: flex;
}

.event-page .modal-content {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 2.25rem;
    border-radius: 0.75rem;
    background: var(--color-white);
    text-align: center;
}

.event-page .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    padding: 0.25rem;
    border: 0;
    background: none;
    color: var(--color-ink-faint);
    cursor: pointer;
}

.event-page .modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.event-page .modal-close:hover {
    color: var(--color-ink);
}

.event-page .modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    border-radius: 0.625rem;
    background: var(--color-brand-light);
    color: var(--color-brand-dark);
}

.event-page .modal-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.event-page .modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.event-page .modal-content > p {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-ink-muted);
}

.event-page .modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-page .modal-form input {
    padding: 0.8125rem 1rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-button);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--color-ink);
}

.event-page .modal-form input:focus {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.event-page .modal-form button {
    padding: 0.8125rem 1.5rem;
    border: 0;
    border-radius: var(--radius-button);
    background: var(--color-brand);
    color: var(--color-white);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.event-page .modal-form button:hover {
    background: var(--color-brand-dark);
}

.event-page .modal-form button:disabled {
    opacity: 0.6;
    cursor: default;
}

.event-page .modal-note {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-ink-faint);
}

.event-page .modal-success {
    display: none;
    padding: 1rem 0;
    color: var(--color-brand);
}

.event-page .modal-success-title {
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.event-page .modal-success-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
}