/**
 * ThreatsView — Events section
 * ---------------------------------------------------------------
 * Layered on top of css/style.css and css/colors/default-color.css.
 * Nothing here overrides a core theme rule; every selector is
 * namespaced `tv-ev-` or `tv-` so the rest of the site is untouched.
 *
 * Palette is taken from the live site:
 *   #2a1fbc  primary indigo      #009DFF  CTA blue
 *   #488fed  gradient top        #485974  body text
 * plus the dark hero tones from the event artwork.
 */

:root {
    --tv-navy:      #0a1226;
    --tv-navy-2:    #101c38;
    --tv-navy-3:    #16244a;
    --tv-teal:      #35d0d4;
    --tv-blue:      #009DFF;
    --tv-indigo:    #2a1fbc;
    --tv-grad-top:  #488fed;
    --tv-ink:       #1b2437;
    --tv-body:      #485974;
    --tv-line:      #e3e8f0;
    --tv-tint:      #f5f7fb;
    --tv-radius:    14px;
    --tv-shadow:    0 10px 40px rgba(16, 28, 56, .10);
}

/* ===============================================================
   1. Shared furniture
   =============================================================== */

.tv-ev-wrap { overflow-x: hidden; }

.tv-section { padding: 78px 0; }
.tv-section--tint { background: var(--tv-tint); }
.tv-section--tight { padding: 54px 0; }

.tv-eyebrow {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tv-blue);
    margin-bottom: 14px;
}

.tv-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.22;
    color: var(--tv-ink);
    margin: 0 0 18px;
}

.tv-h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--tv-ink);
    margin: 0 0 10px;
}

.tv-lead {
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--tv-body);
    margin: 0 0 16px;
}

.tv-lead--big { font-size: 19px; }

.tv-measure { max-width: 760px; }
.tv-center  { text-align: center; }
.tv-center .tv-measure { margin-left: auto; margin-right: auto; }

/* ===============================================================
   2. Registration button
   =============================================================== */

.tv-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #fff !important;
    background: var(--tv-blue);
    border: 0;
    border-radius: 10px;
    padding: 19px 34px;
    text-decoration: none !important;
    box-shadow: 0 8px 26px rgba(0, 157, 255, .32);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    /* Comfortable thumb target — most visitors arrive from LinkedIn on a phone. */
    min-height: 56px;
}

.tv-register:hover,
.tv-register:focus {
    background: #0b8ae0;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 157, 255, .40);
}

.tv-register:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.tv-register--ghost {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}
.tv-register--ghost:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }

.tv-register--wide { width: 100%; }

.tv-register__sub {
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: var(--tv-body);
    margin-top: 12px;
}

.tv-hero .tv-register__sub { color: rgba(255, 255, 255, .66); }

/* ===============================================================
   3. Dark hero
   =============================================================== */

.tv-hero {
    position: relative;
    background: var(--tv-navy);
    color: #fff;
    padding: 150px 0 68px;
    overflow: hidden;
}

.tv-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .30;
}

/* Keeps the headline legible over the artwork without washing it out. */
.tv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(10, 18, 38, .95) 0%, rgba(10, 18, 38, .72) 46%, rgba(10, 18, 38, .58) 100%),
        radial-gradient(120% 90% at 78% 10%, rgba(53, 208, 212, .16) 0%, transparent 60%);
}

.tv-hero__inner { position: relative; z-index: 2; }

.tv-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tv-teal);
    border: 1px solid rgba(53, 208, 212, .42);
    background: rgba(53, 208, 212, .10);
    border-radius: 999px;
    padding: 8px 16px;
    margin-bottom: 22px;
}

.tv-hero__badge--past {
    color: #b9c6de;
    border-color: rgba(185, 198, 222, .34);
    background: rgba(185, 198, 222, .08);
}

.tv-hero__badge i { font-size: 8px; font-style: normal; }

.tv-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 52px;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -.5px;
}

.tv-hero__sub {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.32;
    color: var(--tv-teal);
    margin: 0 0 22px;
}

.tv-hero__intro {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .84);
    max-width: 620px;
    margin: 0 0 30px;
}

.tv-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.tv-hero__poster {
    border-radius: var(--tv-radius);
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .12);
}
.tv-hero__poster img { width: 100%; height: auto; display: block; }

/* Hero and CTA backdrops.
   Kept in CSS rather than inline so phones can be served a smaller
   file — the large banner is wasted bandwidth on a 375px screen,
   and most of our visitors arrive from LinkedIn on a phone. */

.tv-bg-ttb  { background-image: url('../images/events/ttb-hero.jpg'); }
.tv-bg-difc { background-image: url('../images/events/difc-hero.jpg'); }
.tv-bg-grc  { background-image: url('../images/events/grc-og.jpg'); }

@media (max-width: 991px) {
    .tv-bg-ttb  { background-image: url('../images/events/ttb-hero-sm.jpg'); }
    .tv-bg-difc { background-image: url('../images/events/difc-hero-sm.jpg'); }
}

/* ---- Meta strip under the hero ---- */

.tv-metabar {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, .05);
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-top: 52px;
}

.tv-metabar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .12);
}

.tv-metabar__cell {
    background: var(--tv-navy);
    padding: 22px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tv-metabar__icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(53, 208, 212, .13);
    color: var(--tv-teal);
    font-size: 17px;
}

.tv-metabar__k {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .52);
    margin-bottom: 4px;
}

.tv-metabar__v {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: #fff;
}

/* ---- Countdown ---- */

.tv-countdown {
    display: flex;
    gap: 10px;
    margin: 0 0 28px;
    flex-wrap: wrap;
}

.tv-countdown__unit {
    min-width: 74px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}

.tv-countdown__n {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tv-countdown__l {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.tv-countdown__closed {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
}

/* ===============================================================
   4. Sticky registration bar
   =============================================================== */

.tv-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: rgba(10, 18, 38, .97);
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 12px 0;
    transform: translateY(105%);
    transition: transform .28s ease;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .28);
}

.tv-sticky.is-shown { transform: translateY(0); }

.tv-sticky__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.tv-sticky__t {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.tv-sticky__d {
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

.tv-sticky .tv-register { padding: 14px 26px; font-size: 15px; min-height: 48px; }

/* ===============================================================
   5. Event cards (listing page)
   =============================================================== */

.tv-next-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--tv-navy);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(10, 18, 38, .28);
}

.tv-next-card__media { position: relative; min-height: 340px; }
/* The link and <picture> wrappers are inline by default, which leaves the
   image's height:100% with nothing to resolve against. */
.tv-next-card__media a,
.tv-next-card__media picture { display: block; height: 100%; }
.tv-next-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-next-card__body { padding: 46px 44px; color: #fff; align-self: center; }

.tv-next-card__body h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.14;
    color: #fff;
    margin: 0 0 8px;
}

.tv-next-card__sub {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--tv-teal);
    margin: 0 0 16px;
}

.tv-next-card__p {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 22px;
}

.tv-facts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }

.tv-facts li {
    display: flex; align-items: center; gap: 11px;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
}

.tv-facts i { color: var(--tv-teal); font-size: 18px; width: 20px; text-align: center; }

/* ---- Past event cards ---- */

.tv-past-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    overflow: hidden;
    box-shadow: var(--tv-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tv-past-card:hover {
    transform: translateY(-4px);
    border-color: #cfd9e8;
    box-shadow: 0 18px 50px rgba(16, 28, 56, .16);
}

/* 16:9 so the GRC promo graphic — which is natively 16:9 — fills the
   card with nothing cropped off its title. */
.tv-past-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--tv-navy); }
.tv-past-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-tag {
    position: absolute; top: 14px; left: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: rgba(10, 18, 38, .82);
    color: #fff;
    border-radius: 6px;
    padding: 6px 11px;
}

.tv-past-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }

.tv-past-card__meta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--tv-blue);
    margin-bottom: 9px;
}

.tv-past-card__body h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 21px; line-height: 1.3;
    color: var(--tv-ink);
    margin: 0 0 10px;
}

.tv-past-card__body p {
    font-family: 'Rubik', sans-serif;
    font-size: 15px; line-height: 1.68;
    color: var(--tv-body);
    margin: 0 0 18px;
}

.tv-minifigs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 20px; padding: 0; list-style: none;
}

.tv-minifigs li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 600;
    color: var(--tv-ink);
    background: var(--tv-tint);
    border: 1px solid var(--tv-line);
    border-radius: 7px;
    padding: 6px 10px;
}

.tv-minifigs b { color: var(--tv-indigo); font-weight: 800; }

.tv-textlink {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--tv-indigo) !important;
    text-decoration: none !important;
}
.tv-textlink i { transition: transform .18s ease; }
.tv-textlink:hover i { transform: translateX(4px); }

/* ===============================================================
   6. Stats
   =============================================================== */

.tv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.tv-stat {
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    padding: 30px 24px;
    text-align: center;
}

.tv-stat--dark {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
}

.tv-stat__n {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: var(--tv-indigo);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.tv-stat--dark .tv-stat__n { color: var(--tv-teal); }

.tv-stat__l {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tv-body);
}

.tv-stat--dark .tv-stat__l { color: rgba(255, 255, 255, .66); }

.tv-stat--hero .tv-stat__n { color: #0e9f6e; }

.tv-note {
    font-family: 'Rubik', sans-serif;
    font-size: 14px; line-height: 1.7;
    color: var(--tv-body);
    background: var(--tv-tint);
    border-left: 3px solid var(--tv-blue);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-top: 26px;
}

/* ===============================================================
   7. Agenda / learn list / speakers
   =============================================================== */

.tv-agenda { display: grid; gap: 14px; }

.tv-agenda__row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 26px;
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    padding: 26px 28px;
}

.tv-agenda__when {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--tv-indigo);
    line-height: 1.5;
}

.tv-agenda__when span {
    display: block;
    font-weight: 600;
    color: var(--tv-body);
    font-size: 13px;
    margin-top: 3px;
}

.tv-agenda__what h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 18px;
    color: var(--tv-ink);
    margin: 0 0 6px;
}

.tv-agenda__what p {
    font-family: 'Rubik', sans-serif;
    font-size: 15px; line-height: 1.7;
    color: var(--tv-body);
    margin: 0;
}

.tv-learn { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.tv-learn li {
    display: flex; gap: 14px; align-items: flex-start;
    font-family: 'Rubik', sans-serif;
    font-size: 16px; line-height: 1.66;
    color: var(--tv-body);
}

.tv-learn i {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(0, 157, 255, .12);
    color: var(--tv-blue);
    font-size: 14px;
    margin-top: 2px;
}

.tv-speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.tv-speaker {
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    overflow: hidden;
    box-shadow: var(--tv-shadow);
    display: flex; flex-direction: column;
}

.tv-speaker__img { aspect-ratio: 1 / 1; background: var(--tv-tint); }
.tv-speaker__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-speaker__body { padding: 24px 24px 26px; }

.tv-speaker__body h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 19px;
    color: var(--tv-ink);
    margin: 0 0 4px;
}

.tv-speaker__role {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--tv-blue);
    margin: 0 0 12px;
}

.tv-speaker__body p {
    font-family: 'Rubik', sans-serif;
    font-size: 14.5px; line-height: 1.7;
    color: var(--tv-body);
    margin: 0;
}

/* Panel list — names only, no photos, so nobody is mis-captioned. */
.tv-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.tv-panel li {
    list-style: none;
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: 10px;
    padding: 20px 22px;
}

.tv-panel strong {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 17px;
    color: var(--tv-ink);
    margin-bottom: 4px;
}

.tv-panel span {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: var(--tv-body);
}

.tv-audience {
    display: flex; flex-wrap: wrap; gap: 10px;
    list-style: none; margin: 0; padding: 0;
}

.tv-audience li {
    font-family: 'Rubik', sans-serif;
    font-size: 14.5px;
    color: var(--tv-ink);
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    padding: 10px 18px;
}

/* ===============================================================
   8. Gallery + lightbox
   =============================================================== */

/* Nineteen photos across a 4-column grid. The group photograph leads at
   double size, and two landscape room shots run double-width, which
   makes the cell count land exactly on a whole number of rows — no
   ragged gap at the bottom. `dense` backfills if a wide tile ever
   lands where only one column is left. */
.tv-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 14px;
}

.tv-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tv-navy-2);
    border: 0; padding: 0;
    cursor: pointer;
}

.tv-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.tv-gallery__item:hover img { transform: scale(1.05); }
.tv-gallery__item:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: 2px; }

.tv-gallery__item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10, 18, 38, .35), transparent 55%);
    opacity: 0;
    transition: opacity .25s ease;
}
.tv-gallery__item:hover::after { opacity: 1; }

/* First tile is the group photograph — give it more room. Height comes
   from the two rows it spans, so it always lines up with its neighbours. */
.tv-gallery__item--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Double-width tiles for the wide room shots. Like the lead tile, the
   height is taken from the row rather than from a fixed ratio, so they
   line up to the pixel with the square tiles beside them. Both of these
   rows always contain a normal tile at three and four columns; the
   min-height is only a guard so the tile can never collapse outright. */
.tv-gallery__item--wide {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 120px;
}

/* Both ratio-free tiles need their image taken out of flow. Left in
   flow, the image's own aspect ratio sets the tile height and the tile
   ends up driving the row instead of following it — which shows as a
   few pixels of dead space under every square tile beside it. */
.tv-gallery__item--lead img,
.tv-gallery__item--wide img {
    position: absolute;
    inset: 0;
}

.tv-lightbox {
    position: fixed; inset: 0;
    z-index: 2000;
    background: rgba(6, 11, 24, .96);
    display: none;
    align-items: center;
    justify-content: center;
}

.tv-lightbox.is-open { display: flex; }

.tv-lightbox__fig {
    margin: 0;
    max-width: min(1180px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tv-lightbox__fig img {
    max-width: 100%;
    max-height: 78vh;
    width: auto; height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.tv-lightbox__cap {
    font-family: 'Rubik', sans-serif;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .78);
    text-align: center;
    max-width: 640px;
}

.tv-lightbox__cap span { display: block; color: rgba(255, 255, 255, .45); font-size: 13px; margin-top: 4px; }

.tv-lb-btn {
    position: absolute;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 22px;
    cursor: pointer;
    transition: background .18s ease;
}
.tv-lb-btn:hover { background: rgba(255, 255, 255, .22); }
.tv-lb-btn:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: 2px; }

.tv-lb-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.tv-lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.tv-lb-close { right: 24px; top: 24px; }

/* ===============================================================
   9. Share
   =============================================================== */

.tv-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.tv-share__label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--tv-body);
    margin-right: 4px;
}

.tv-share__btn {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--tv-line);
    color: var(--tv-ink) !important;
    font-size: 19px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.tv-share__btn:hover {
    transform: translateY(-2px);
    color: #fff !important;
    border-color: transparent;
}

.tv-share__btn[data-net="linkedin"]:hover { background: #0a66c2; }
.tv-share__btn[data-net="x"]:hover        { background: #000; }
.tv-share__btn[data-net="whatsapp"]:hover { background: #25d366; }
.tv-share__btn[data-net="facebook"]:hover { background: #1877f2; }
.tv-share__btn[data-net="email"]:hover    { background: var(--tv-indigo); }
.tv-share__btn[data-net="copy"]:hover     { background: var(--tv-ink); }
.tv-share__btn[data-net="native"]:hover   { background: var(--tv-blue); }

.tv-share--dark .tv-share__label { color: rgba(255, 255, 255, .6); }
.tv-share--dark .tv-share__btn {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .2);
    color: #fff !important;
}

/* Web Share is mobile-only; JS reveals it when supported. */
.tv-share__btn[data-net="native"] { display: none; }

.tv-copied {
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    color: #0e9f6e;
    opacity: 0;
    transition: opacity .2s ease;
}
.tv-copied.is-shown { opacity: 1; }

/* ===============================================================
   10. FAQ
   =============================================================== */

.tv-faq { display: grid; gap: 12px; }

.tv-faq__item {
    background: #fff;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    overflow: hidden;
}

.tv-faq__q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: none; border: 0;
    text-align: left;
    padding: 22px 26px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 17px;
    color: var(--tv-ink);
}

.tv-faq__q i { color: var(--tv-blue); font-size: 20px; transition: transform .22s ease; flex: 0 0 auto; }
.tv-faq__item.is-open .tv-faq__q i { transform: rotate(45deg); }
.tv-faq__q:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: -3px; }

.tv-faq__a { display: none; padding: 0 26px 24px; }
.tv-faq__item.is-open .tv-faq__a { display: block; }

.tv-faq__a p {
    font-family: 'Rubik', sans-serif;
    font-size: 15.5px; line-height: 1.75;
    color: var(--tv-body);
    margin: 0;
}

/* ===============================================================
   11. Closing CTA + next-event strip
   =============================================================== */

.tv-cta {
    position: relative;
    background: var(--tv-navy);
    color: #fff;
    padding: 74px 0;
    overflow: hidden;
}

.tv-cta__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .22;
}

.tv-cta::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 18, 38, .88), rgba(10, 18, 38, .95));
}

.tv-cta__inner { position: relative; z-index: 2; text-align: center; }

.tv-cta h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800; font-size: 36px; line-height: 1.18;
    color: #fff;
    margin: 0 0 14px;
}

.tv-cta p {
    font-family: 'Rubik', sans-serif;
    font-size: 17px; line-height: 1.72;
    color: rgba(255, 255, 255, .8);
    max-width: 620px;
    margin: 0 auto 28px;
}

/* Every past-event page ends with a route to the next one. */
.tv-nextup {
    display: grid;
    grid-template-columns: 300px 1fr auto;
    gap: 30px;
    align-items: center;
    background: var(--tv-navy);
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
}

.tv-nextup__media { height: 100%; min-height: 200px; }
.tv-nextup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-nextup__body { padding: 34px 0; }

.tv-nextup__eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--tv-teal);
    margin-bottom: 8px;
}

.tv-nextup__body h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 25px; line-height: 1.22;
    color: #fff;
    margin: 0 0 8px;
}

.tv-nextup__body p {
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

.tv-nextup__cta { padding-right: 36px; }

/* ===============================================================
   12. Video embed
   =============================================================== */

.tv-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--tv-radius);
    overflow: hidden;
    background: var(--tv-navy);
    box-shadow: var(--tv-shadow);
}

.tv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Click-to-load poster: keeps YouTube's scripts off the page until asked. */
.tv-video__poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; padding: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}

.tv-video__poster::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(10, 18, 38, .34);
    transition: background .2s ease;
}
.tv-video__poster:hover::after { background: rgba(10, 18, 38, .18); }

.tv-video__play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 82px; height: 82px;
    border-radius: 50%;
    background: var(--tv-blue);
    color: #fff;
    display: grid; place-items: center;
    font-size: 34px;
    box-shadow: 0 10px 34px rgba(0, 157, 255, .5);
}

/* ===============================================================
   13. Breadcrumb
   =============================================================== */

.tv-crumb {
    position: relative; z-index: 3;
    font-family: 'Rubik', sans-serif;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .58);
    margin-bottom: 20px;
}
.tv-crumb a { color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; }
.tv-crumb a:hover { color: #fff !important; }
.tv-crumb span { margin: 0 8px; opacity: .5; }

/* ===============================================================
   14. Responsive
   =============================================================== */

@media (max-width: 1199px) {
    .tv-hero h1 { font-size: 44px; }
    .tv-next-card__body { padding: 38px 34px; }
    .tv-next-card__body h3 { font-size: 28px; }
}

@media (max-width: 991px) {
    .tv-section { padding: 58px 0; }
    .tv-hero { padding: 124px 0 54px; }
    .tv-hero h1 { font-size: 38px; }
    .tv-hero__sub { font-size: 21px; }
    .tv-hero__intro { font-size: 16.5px; }
    .tv-h2 { font-size: 30px; }

    .tv-metabar__grid { grid-template-columns: repeat(2, 1fr); }
    .tv-next-card { grid-template-columns: 1fr; }
    /* Stacked, this is a full-width band and the wide banner is what gets
       served — so let the banner's own shape set the height rather than
       forcing it taller and cropping the sides off on a phone. */
    .tv-next-card__media { min-height: 0; }
    .tv-speakers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .tv-panel { grid-template-columns: 1fr; }
    .tv-stats { grid-template-columns: repeat(2, 1fr); }
    .tv-gallery { grid-template-columns: repeat(3, 1fr); }
    .tv-agenda__row { grid-template-columns: 1fr; gap: 12px; }
    .tv-nextup { grid-template-columns: 1fr; }
    .tv-nextup__media { min-height: 190px; }
    .tv-nextup__body { padding: 28px 28px 0; }
    .tv-nextup__cta { padding: 0 28px 30px; }
}

@media (max-width: 767px) {
    .tv-hero { padding: 108px 0 44px; }
    .tv-hero h1 { font-size: 31px; }
    .tv-hero__sub { font-size: 18px; }
    .tv-h2 { font-size: 26px; }
    .tv-cta h2 { font-size: 27px; }

    .tv-register { width: 100%; font-size: 16px; padding: 18px 24px; }
    .tv-hero__cta { gap: 10px; }

    .tv-metabar__grid { grid-template-columns: 1fr; }
    .tv-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tv-gallery__item--lead { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
    /* At two columns a wide tile is a full-width row on its own, so the
       letterbox ratio would be far too shallow. */
    .tv-gallery__item--wide { aspect-ratio: 16 / 9; }

    .tv-lb-prev  { left: 10px;  width: 46px; height: 46px; }
    .tv-lb-next  { right: 10px; width: 46px; height: 46px; }
    .tv-lb-close { right: 10px; top: 12px;   width: 46px; height: 46px; }
    .tv-lightbox__fig img { max-height: 68vh; }

    /* Sticky bar collapses to the button alone — the text would crowd it. */
    .tv-sticky__text { display: none; }
    .tv-sticky .tv-register { width: 100%; }

    .tv-stat__n { font-size: 34px; }
    .tv-next-card__body { padding: 30px 24px; }
    .tv-next-card__body h3 { font-size: 25px; }
    .tv-speaker__body, .tv-past-card__body { padding: 22px 22px 24px; }
}

@media (max-width: 479px) {
    .tv-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tv-countdown__unit { min-width: 0; flex: 1 1 0; padding: 10px 6px; }
    .tv-countdown { gap: 7px; flex-wrap: nowrap; }
    .tv-countdown__n { font-size: 21px; }
}

/* Respect the OS "reduce motion" setting — this is a senior audience
   on corporate machines, some with animation turned off by policy. */
@media (prefers-reduced-motion: reduce) {
    .tv-past-card, .tv-register, .tv-gallery__item img, .tv-sticky, .tv-textlink i {
        transition: none !important;
    }
    .tv-past-card:hover, .tv-register:hover { transform: none; }
    .tv-gallery__item:hover img { transform: none; }
}