/* ==========================================================================
   Layout — page structure: containers, grid scaffolding, header/footer shell.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-7);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin-bottom: var(--space-8);
}

.section-head--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-head--wide {
  max-width: 56rem;
}

/* ---- Site header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

/* Closed state below desktop shows only the logo + burger — the ticket
   CTA lives inside the opened mobile panel instead (see .mobile-nav__cta).
   Compounded with .btn so this reliably beats components.css's unconditional
   `.btn { display: inline-flex }`, which loads after this file and would
   otherwise win the display tie at equal specificity. */
.btn.header-actions__cta {
  display: none;
}

@media (min-width: 64em) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .site-nav {
    display: block;
  }

  .site-nav--left {
    justify-self: start;
  }

  .header-actions {
    justify-self: end;
    margin-left: 0;
  }

  .btn.header-actions__cta {
    display: inline-flex;
  }
}

/* Mobile nav panel — a flex column so the link list scrolls independently
   while the ticket CTA stays pinned to the bottom of the viewport. */
.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}

.mobile-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard), visibility 0s;
}

.mobile-nav__list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-7) var(--container-gutter);
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
  padding: 0 var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: var(--color-surface-tint);
  text-align: center;
}

.mobile-nav__cta {
  flex: 0 0 auto;
  padding: var(--space-5) var(--container-gutter);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
}

.mobile-nav__cta .btn {
  width: 100%;
  height: 66px;
  color: var(--color-blue-contrast);
}

@media (min-width: 64em) {
  .mobile-nav {
    display: none;
  }
}

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

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
  padding-bottom: 24px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  text-align: left;
  width: 100%;
}

.hero__meta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  width: 100%;
  max-width: 44rem;
}

/* The header's own ticket CTA is hidden below desktop (see
   .header-actions__cta), so the hero carries its own full-width button on
   mobile/tablet instead; desktop keeps the header's as the single CTA. */
.hero .btn.hero__cta {
  width: 100%;
  font-size: 1rem;
}

@media (min-width: 64em) {
  .hero {
    padding-bottom: var(--space-9);
  }

  .hero__inner {
    align-items: center;
    text-align: center;
    gap: var(--space-7);
  }

  .hero .btn.hero__cta {
    display: none;
  }

  .hero__meta-year {
    display: block;
  }
}

@media (min-width: 40em) {
  .hero__meta-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* ---- Objectives ---- */

.objectives__intro {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 26rem;
  margin-bottom: var(--space-8);
  padding: var(--container-gutter) var(--container-gutter) clamp(1.5rem, 6vw, 80px) 0;
  border-radius: var(--radius);
}

.objectives__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.objectives__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  background: var(--color-bg);
}

.objectives__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.6) 42%,
    rgba(0, 0, 0, 0.1) 68%,
    rgba(0, 0, 0, 0) 85%
  );
}

.objectives__text {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin-bottom: 0;
}

@media (min-width: 64em) {
  .objectives__intro {
    min-height: 42rem;
  }
}

/* ---- Intro banner (background image + two corner statements) ---- */
/* Used by the Agenda and Speakers section intros. */

/* Mobile-first: the background statement and the lead copy stack in normal
   flow, so the container's height always matches however tall the wrapped
   text actually is. Only from tablet width up (where the statement's ~30ch
   heading and the lead's paragraph both wrap short enough to fit) do the two
   switch to the layered, corner-pinned look over a fixed-height banner —
   below that, absolute-positioning both risked the lead's wrapped height
   overlapping the statement pinned above it. */
.intro-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(10rem, 32vh, 20rem);
  padding: var(--space-7) var(--container-gutter);
  margin-bottom: var(--space-8);
  border-radius: var(--radius);
}

.intro-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-banner__statement {
  position: relative;
  z-index: 1;
  max-width: none;
  text-align: right;
  margin: 0;
}

.intro-banner__lead {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .intro-banner {
    display: block;
    min-height: 30rem;
    padding: 0;
    gap: 0;
  }

  .intro-banner__statement {
    position: absolute;
    top: clamp(1.25rem, 5vw, 80px);
    right: 0;
    max-width: min(85%, 26rem);
    text-align: right;
  }

  .intro-banner__lead {
    position: absolute;
    bottom: clamp(1.25rem, 5vw, 80px);
    left: 0;
    max-width: min(85%, 32rem);
  }
}

@media (min-width: 64em) {
  .intro-banner {
    min-height: 42rem;
  }
}

/* ---- Grids ---- */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 30em) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48em) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid--stats {
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 40em) {
  .grid--stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--stats .stat-item:not(:first-child) {
    border-left: var(--border-width) solid var(--color-border);
  }
}

/* ---- Stats section ---- */

.stats__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.stats__flags {
  height: 2.75rem;
  width: auto;
  margin-bottom: var(--space-2);
}

/* Spans the full width of the section's own .container (matching the site's
   standard content width) rather than shrinking to the iframe's intrinsic
   size, since the section's inner wrapper is a flex column with
   align-items: center.

   The player itself is YouTube's, driven entirely through its IFrame API
   (postMessage) — a cross-origin iframe's own chrome can't be restyled with
   CSS. `controls: 0` keeps YouTube's native UI hidden at all times; every
   control below is ours, laid over the iframe. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-4);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.video-embed__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video-embed__poster-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__poster-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: background var(--duration-fast) var(--ease-standard);
}

.video-embed__poster:hover .video-embed__poster-scrim {
  background: rgba(0, 0, 0, 0.5);
}

.video-embed__poster-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-blue-contrast);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.video-embed__poster-play svg {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.2rem;
}

.video-embed__poster:hover .video-embed__poster-play {
  transform: scale(1.08);
}

.video-embed__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.video-embed__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.video-embed__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.video-embed__icon--pause,
.video-embed__icon--vol-off {
  display: none;
}

.video-embed__play.is-playing .video-embed__icon--play {
  display: none;
}

.video-embed__play.is-playing .video-embed__icon--pause {
  display: block;
}

.video-embed__mute.is-muted .video-embed__icon--vol-on {
  display: none;
}

.video-embed__mute.is-muted .video-embed__icon--vol-off {
  display: block;
}

.video-embed__time {
  flex-shrink: 0;
  min-width: 2.5em;
  font-family: var(--font-subheading);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.video-embed__time--current {
  text-align: right;
}

.video-embed__progress {
  position: relative;
  flex: 1 1 auto;
  height: 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.video-embed__progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.video-embed__progress-buffered,
.video-embed__progress-played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
}

.video-embed__progress-buffered {
  background: rgba(255, 255, 255, 0.35);
}

.video-embed__progress-played {
  background: var(--color-blue);
}

.video-embed__progress-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-blue-contrast);
  transform: translate(-50%, -50%);
}

.video-embed__progress:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.stats__grid {
  margin-top: var(--space-8);
  width: 100%;
}

/* ---- Sponsors section ---- */

.sponsor-marquees {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#sponsors .intro-banner {
  margin-bottom: var(--space-3);
}

/* ---- Transitional statement blocks ---- */

.statement {
  padding-block: var(--space-9);
}

.statement__text {
  font-family: var(--font-display);
  font-size: var(--fs-transition);
  line-height: 1.05;
  max-width: 24ch;
  text-transform: uppercase;
}

/* ---- Footer ---- */

.site-footer {
  padding-block: var(--space-9) var(--space-6);
}

.footer-fade-bar {
  display: flex;
  width: 100%;
  height: clamp(70px, 9vw, 130px);
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: var(--space-7);
}

.footer-fade-bar__segment {
  flex: 1;
  background: var(--color-blue);
}

.footer-fade-bar__segment:nth-child(1) {
  opacity: 1;
}
.footer-fade-bar__segment:nth-child(2) {
  opacity: 0.9;
}
.footer-fade-bar__segment:nth-child(3) {
  opacity: 0.8;
}
.footer-fade-bar__segment:nth-child(4) {
  opacity: 0.7;
}
.footer-fade-bar__segment:nth-child(5) {
  opacity: 0.6;
}
.footer-fade-bar__segment:nth-child(6) {
  opacity: 0.5;
}
.footer-fade-bar__segment:nth-child(7) {
  opacity: 0.4;
}
.footer-fade-bar__segment:nth-child(8) {
  opacity: 0.3;
}
.footer-fade-bar__segment:nth-child(9) {
  opacity: 0.2;
}
.footer-fade-bar__segment:nth-child(10) {
  opacity: 0.1;
}

.footer-brand-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1rem + 3.6vw, 3.75rem);
  line-height: 1.05;
  margin-bottom: var(--space-7);
  text-wrap: balance;
}

@media (min-width: 64em) {
  .footer-brand-heading {
    text-wrap: nowrap;
  }
}

.footer-divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: 0 0 var(--space-5);
}

.footer-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #121212;
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-3);
}

.footer-row:last-child {
  margin-bottom: 0;
}

@media (min-width: 40em) {
  .footer-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-row__label {
  font-weight: 500;
  flex-shrink: 0;
}

.footer-row__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
}

.footer-row__links a {
  color: inherit;
}

.footer-row__links a:hover,
.footer-row__links a:focus-visible {
  color: var(--color-text);
}

/* Conference / Explore / Contacts footer groups — reuse the shared accordion
   component (background box, +/- icon, height animation) so mobile gets a
   proper collapsible list. At >=40em this same markup is reset back to the
   original plain "label: links" row via the override further below, so
   desktop/tablet are pixel-for-pixel unchanged. */
.footer-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.footer-accordion .accordion-trigger {
  font-family: var(--font-subheading);
  font-weight: 500;
}

/* The shared accordion-panel__content styles links as blue + underlined
   (added for the FAQ's inline hyperlink) — footer nav links should keep
   their original plain muted-to-white treatment instead. */
.footer-accordion .accordion-panel__content a {
  color: inherit;
  text-decoration: none;
}

.footer-accordion .accordion-panel__content a:hover,
.footer-accordion .accordion-panel__content a:focus-visible {
  color: var(--color-text);
}

.footer-accordion .accordion-icon {
  width: 1.375rem;
  height: 1.375rem;
  border: none;
  border-radius: 0;
}

.footer-accordion .footer-row__links {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-accordion .footer-row__links span[aria-hidden="true"] {
  display: none;
}

@media (min-width: 40em) {
  .footer-accordion {
    gap: var(--space-3);
  }

  .footer-accordion .accordion-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  .footer-accordion .accordion-item h3 {
    flex-shrink: 0;
  }

  .footer-accordion .accordion-trigger {
    padding: 0;
    background: none;
    pointer-events: none;
  }

  .footer-accordion .accordion-icon {
    display: none;
  }

  .footer-accordion .accordion-panel {
    height: auto !important;
    overflow: visible;
  }

  .footer-accordion .accordion-panel__content {
    padding: 0;
  }

  .footer-accordion .footer-row__links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .footer-accordion .footer-row__links span[aria-hidden="true"] {
    display: inline;
  }
}

.footer-row--organizer {
  align-items: flex-start;
}

@media (min-width: 40em) {
  .footer-row--organizer {
    align-items: center;
  }
}

.footer-organizer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer-organizer__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-raised);
}

.footer-organizer__name {
  font-weight: 500;
}

.footer-organizer__title {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.footer-row--copyright {
  background: var(--color-blue);
  color: var(--color-blue-contrast);
  gap: var(--space-2);
}

@media (min-width: 40em) {
  .footer-row--copyright {
    text-align: right;
  }
}

.footer-row--copyright p:first-child {
  text-align: left;
}

/* ---- Agenda layout ---- */

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.speaker-card__image {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background-image: url("../assets/images/speaker-background.svg");
  background-size: cover;
  background-position: center;
}

.speaker-card__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.speaker-card__flag {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  width: 2rem;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* ---- Speaker detail page ---- */

.speaker-detail-section {
  padding-top: var(--space-8);
}

.speaker-detail-section .container {
  max-width: 850px;
}

/* ---- Breadcrumbs ---- */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-7);
}

.breadcrumbs a {
  position: relative;
  color: var(--color-text);
}

.breadcrumbs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--duration-fast) var(--ease-standard);
}

.breadcrumbs a:hover::after,
.breadcrumbs a:focus-visible::after {
  right: 0;
}

.breadcrumbs span:last-child {
  color: var(--color-text-muted);
}

.speaker-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-9);
}

.speaker-detail__image {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 255px;
  overflow: hidden;
  border-radius: var(--radius);
  background-image: url("../assets/images/speaker-background.svg");
  background-size: cover;
  background-position: center;
}

.speaker-detail__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.speaker-detail__flag {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  width: 2.5rem;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.speaker-detail__name {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.speaker-detail__title {
  font-family: var(--font-subheading);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
}

.speaker-detail__divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-5) 0;
}

.speaker-detail__summary {
  font-family: var(--font-display);
  font-size: 21px;
  color: #ababab;
}

.speaker-detail__agenda {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.speaker-detail__agenda-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--border-width) solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-text);
}

.speaker-detail__agenda-icon svg {
  width: 16px;
  height: 16px;
}

.speaker-detail__link {
  display: inline-flex;
  margin-top: var(--space-6);
}

.speaker-detail__summary-block {
  margin-bottom: var(--space-9);
}

/* ---- Speaker's bio (full rich text) ---- */

.speaker-bio h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-5);
}

.speaker-bio__content {
  color: var(--color-text-muted);
  max-width: 46rem;
}

.speaker-bio__content p + p {
  margin-top: var(--space-4);
}