/* =============================================================================
   agenda.css  —  Styles for the Agenda & Speakers page (agenda-speakers.html)
   -----------------------------------------------------------------------------
   Loaded only by agenda-speakers.html, on top of styles.css. Warm "story"
   palette. The schedule is laid out as a "ledger" (times down the left,
   sessions on the right) rather than a grid of cards, so the eye can scan the
   left edge. The track-filter buttons are wired up in assets/js/agenda.js.
   Sections: 1) Opening, 2) The two tracks, 3) Schedule, 5) Keynote,
   6) Speakers, 7) Close.
   ============================================================================= */

/* Page background (cream). */
main {
  background: var(--story-paper);
}

/* --------------------------------------------------------------------------
   1. Opening  (dark hero: headline + lede, plus a facts list)
   -------------------------------------------------------------------------- */

.agenda-open {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  color: var(--story-white);
  background: var(--story-ink);
}

/* Headline/lede on the left, facts on the right. */
.agenda-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.72fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

.agenda-open h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.agenda-open__lede {
  max-width: 48ch;
  margin: 1.75rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
}

/* The quick "facts" definition list (date / time / venue...). */
.agenda-facts {
  margin: 0;
  border-top: 1px solid rgba(255, 253, 248, 0.22);
}

/* Each fact row: label left, value right, divider below. */
.agenda-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255, 253, 248, 0.22);
}

/* Fact label. */
.agenda-facts dt {
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Fact value. */
.agenda-facts dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   2. The two depths / tracks
   -------------------------------------------------------------------------- */

.tracks-note {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  background: var(--story-white);
}

.tracks-note__head {
  max-width: 58rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.tracks-note h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.tracks-note__head p {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--story-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* The two tracks side by side, each led by a photo. */
.depths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* The photo above each track. */
.depth .frame {
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}

.depth h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.depth p {
  max-width: 56ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   3. The schedule  (the ledger of time slots + sessions)
   -------------------------------------------------------------------------- */

.schedule-section {
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(5rem, 11vw, 8.5rem);
  background: var(--story-paper);
}

/* Heading on the left, the track filter on the right. */
.schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.schedule__head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.schedule__lede {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--story-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* The track-filter control (hidden until agenda.js reveals it). */
.schedule__filter {
  display: grid;
  gap: 0.6rem;
}

/* The "Filter by track" label. */
.schedule__filter p {
  margin: 0;
  color: var(--story-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* The row of filter buttons. */
.schedule__filter div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Each filter button. */
.schedule__filter button {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  color: var(--story-ink);
  background: transparent;
  border: 1px solid var(--story-line);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: color 260ms var(--ease-out), background 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

/* Filter button hover. */
.schedule__filter button:hover {
  border-color: var(--story-gold);
}

/* The active filter (aria-pressed set by agenda.js): filled dark. */
.schedule__filter button[aria-pressed="true"] {
  color: var(--story-white);
  background: var(--story-ink);
  border-color: var(--story-ink);
}

/* The schedule list. */
.schedule {
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--story-line);
}

/* One time slot: the time on the left, the session(s) on the right. */
.slot {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1.68fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-bottom: 1px solid var(--story-line);
}

/* The slot time (tabular-nums keeps the digits aligned in a column). */
.slot__time {
  margin: 0;
  color: var(--story-ink);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* Muted part of the time (e.g. am/pm). */
.slot__time span {
  color: var(--story-muted);
  font-weight: 400;
}

/* When a slot runs two parallel sessions, show them in two columns. */
.slot__body--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* The little track label above each session. */
.session__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.55rem;
  color: var(--story-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Track-colour variants. */
.session__track--intro {
  color: var(--story-gold-deep);
}

.session__track--advanced {
  color: var(--story-ink);
}

/* The small "format" pill (e.g. Panel / Workshop). */
.session__format {
  padding: 0.2rem 0.45rem;
  color: var(--story-ink);
  background: rgba(207, 184, 124, 0.32);
  letter-spacing: 0.08em;
}

/* The session title. */
.session h3 {
  max-width: 34ch;
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 1.85vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
}

/* The session description (any paragraph that isn't the track/meta line). */
.session p:not(.session__track):not(.session__meta) {
  max-width: 54ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* The session meta line (e.g. speaker/location note). */
.session__meta {
  max-width: 54ch;
  margin: 0.75rem 0 0;
  color: var(--story-gold-deep);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Feature slots (keynote, happy hour) get a gold left rule to lift them
   without turning the ledger into cards. */
.slot--feature .slot__body {
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 3px solid var(--story-gold);
}

/* Filtered-out sessions are dimmed (not removed) — agenda.js adds .is-dim. */
.session.is-dim {
  opacity: 0.3;
}

/* Smooth the dim/undim. */
.session {
  transition: opacity 260ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   5. Keynote  (copy | round portrait)
   -------------------------------------------------------------------------- */

.keynote {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-white);
}

.keynote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.keynote h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

/* The keynote speaker's role/title line. */
.keynote__role {
  margin: 0.6rem 0 1.75rem;
  color: var(--story-gold-deep);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Keynote body paragraphs (not the role or status lines). */
.keynote__copy p:not(.status):not(.keynote__role) {
  max-width: 58ch;
  margin: 0 0 1.25rem;
  color: var(--story-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}

/* The portrait is masked to a circle (matching the smaller speaker headshots). */
.keynote__portrait {
  margin: 0;
  justify-self: center;
  width: min(100%, 22rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--story-paper);
  border-radius: 50%;
}

/* The portrait is a link (to the speaker's profile). */
.keynote__portrait a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.keynote__portrait a:focus-visible {
  outline: 3px solid var(--story-gold);
  outline-offset: 3px;
}

.keynote__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 500ms var(--ease-out), filter 320ms var(--ease-out);
}

/* Portrait hover: gentle zoom + saturation. */
.keynote__portrait a:hover img,
.keynote__portrait a:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* --------------------------------------------------------------------------
   6. Speakers  (dark grid of speaker tiles)
   -------------------------------------------------------------------------- */

.speakers {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  color: var(--story-white);
  background: var(--story-ink);
}

.speakers__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.speakers__head h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

/* Two-column tile grid. The 1px gap + background creates hairline dividers. */
.speakers__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  background: rgba(255, 253, 248, 0.18);
  border: 1px solid rgba(255, 253, 248, 0.18);
}

/* The whole tile is the link, so the entire card is clickable. */
.speaker > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--story-white);
  background: var(--story-ink);
  text-decoration: none;
  transition: background 260ms var(--ease-out);
}

/* Tile hover: slightly lighter background. */
.speaker > a:hover,
.speaker > a:focus-visible {
  background: #1b1b18;
}

/* The round speaker headshot. */
.speaker__portrait {
  width: clamp(5.5rem, 9vw, 7.5rem);
  aspect-ratio: 1 / 1;
  margin-bottom: 1.25rem;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.08);
  border-radius: 50%;
}

.speaker__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

/* Headshot zoom on tile hover. */
.speaker > a:hover .speaker__portrait img,
.speaker > a:focus-visible .speaker__portrait img {
  transform: scale(1.05);
}

/* Speaker name. */
.speaker__name {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Speaker role. */
.speaker__role {
  margin-top: 0.35rem;
  color: var(--story-gold);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Optional note under a speaker. */
.speaker__note {
  margin-top: 0.85rem;
  color: rgba(255, 253, 248, 0.66);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* The "view profile" link, pinned to the bottom of the tile. */
.speaker__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1.5rem;
  color: rgba(255, 253, 248, 0.8);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Turn the link gold on tile hover. */
.speaker > a:hover .speaker__link,
.speaker > a:focus-visible .speaker__link {
  color: var(--story-gold);
}

/* The note under the speaker grid. */
.speakers__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.speakers__foot p {
  margin: 0;
  color: rgba(255, 253, 248, 0.68);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   7. Close  (closing call-to-action)
   -------------------------------------------------------------------------- */

.agenda-close {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--story-paper);
}

.agenda-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.agenda-close h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.agenda-close p {
  margin: 1rem 0 0;
  color: var(--story-muted);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Narrow: stack the two-column layouts; split-slots become one column. */
@media (max-width: 900px) {
  .agenda-open__inner,
  .depths,
  .keynote__grid {
    grid-template-columns: 1fr;
  }

  /* Stays circular once stacked — only the size comes down. */
  .keynote__portrait {
    width: min(100%, 17rem);
  }

  .slot__body--split {
    grid-template-columns: 1fr;
  }

  /* Once the two tracks stack, the second needs its own separation from the
     first or the pair reads as one long session. */
  .slot__body--split > .session + .session {
    padding-top: clamp(1.25rem, 3vw, 2.5rem);
    border-top: 1px solid var(--story-line);
  }
}

/* Phone: slots stack (time above session); speakers single-column. */
@media (max-width: 700px) {
  .slot {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Move the gold rule from the body to the time line when stacked. */
  .slot--feature .slot__body {
    padding-left: 0;
    border-left: 0;
  }

  .slot--feature .slot__time {
    padding-left: 0.75rem;
    border-left: 3px solid var(--story-gold);
  }

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

  .agenda-close__inner {
    align-items: flex-start;
  }

  /* The button's wrapper is a flex item, so it has to be told to fill the
     row before width:100% on the button itself means anything. */
  .agenda-close__inner > * {
    flex: 1 1 100%;
  }

  .agenda-close .cta {
    width: 100%;
    justify-content: center;
  }
}

/* Reduced motion: no dim/undim transition. */
@media (prefers-reduced-motion: reduce) {
  .session {
    transition: none;
  }
}