/* =====================================================================
   Sub-pages — page hero, breadcrumb, speaker detail, agenda
   Built on the same design system tokens.
   ===================================================================== */

/* ---------- Page hero (compact dark header) ---------- */
.subhero {
  position: relative;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
}
.subhero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 460px at 84% 10%, rgba(180,146,76,.16), transparent 60%);
}
.subhero .wrap { position: relative; z-index: 2; }
.subhero .eyebrow { color: var(--brass-soft); }
.subhero .eyebrow::before { background: var(--brass-soft); }
.subhero h1 { color: #fff; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); max-width: 20ch; }
.subhero__lead { color: var(--on-dark-72); font-size: var(--fs-lead); max-width: 60ch; margin-top: 18px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; font-family: var(--font-display); font-size: .82rem; color: var(--on-dark-60); }
.breadcrumb a { color: var(--on-dark-72); transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover { color: var(--brass-soft); }
.breadcrumb span { color: var(--on-dark-50); }

/* ---------- Speakers index grid ---------- */
.sp-index { background: var(--paper); }
.sp-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .sp-index__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-index__grid { grid-template-columns: 1fr; } }

/* ---------- Speaker detail ---------- */
.sp-detail { background: var(--paper); }
.sp-detail__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) { .sp-detail__grid { grid-template-columns: 1fr; } }

.sp-detail__aside { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 820px) { .sp-detail__aside { position: static; } }
.sp-detail__photo {
  position: relative;
  aspect-ratio: 1 / 1.12;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #163a5f 0%, var(--ink) 55%, var(--ink-deep) 100%);
  border: 1px solid var(--slate-100);
}
.sp-detail__photo[data-initials]::before {
  content: attr(data-initials);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; color: var(--brass-soft);
}
.sp-detail__photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); }
.sp-detail__photo img[hidden] { display: none; }

.sp-detail__id { margin-top: 26px; }
.sp-detail__id h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); color: var(--ink); }
.sp-detail__role { color: var(--slate-700); margin-top: 8px; font-size: 1.02rem; }
.sp-detail__co { margin-top: 10px; font-family: var(--font-display); font-weight: 600; color: var(--brass); }
.sp-detail__links { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

.sp-detail__body h2 { font-size: 1.5rem; margin: 0 0 18px; }
.sp-detail__body h2:not(:first-child) { margin-top: 48px; }
.sp-detail__body p { color: var(--slate-700); font-size: 1.05rem; max-width: 66ch; margin-bottom: 16px; }
.sp-detail__session {
  margin-top: 14px;
  border: 1px solid var(--slate-100);
  border-left: 3px solid var(--brass);
  border-radius: var(--r);
  padding: 28px 30px;
  background: #fff;
}
.sp-detail__session .chip { margin-bottom: 16px; }
.sp-detail__session h3 { font-size: 1.35rem; margin-bottom: 14px; }
.takeaways { margin-top: 22px; display: grid; gap: 12px; }
.takeaways li { position: relative; padding-left: 26px; color: var(--slate-700); }
.takeaways li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border: 1.5px solid var(--brass); border-radius: 50%;
}

/* ---------- Agenda ---------- */
.agenda { background: var(--paper); }
.agenda__tabs { display: inline-flex; gap: 6px; padding: 5px; background: var(--white); border: 1px solid var(--slate-100); border-radius: var(--r-pill); margin-bottom: 44px; }
.agenda__tab {
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  padding: 11px 24px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: transparent; color: var(--slate-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agenda__tab[aria-selected="true"] { background: var(--ink); color: #fff; }

.agenda__day { display: none; }
.agenda__day.is-active { display: block; animation: fadeUp .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .agenda__day.is-active { animation: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.session {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--slate-100);
}
.session:last-child { border-bottom: 1px solid var(--slate-100); }
@media (max-width: 620px) { .session { grid-template-columns: 1fr; gap: 8px; } }
.session__time { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem; }
.session__time span { display: block; color: var(--slate-500); font-weight: 500; font-size: .8rem; margin-top: 4px; }
.session__body h3 { font-size: 1.22rem; margin-bottom: 8px; }
.session__body p { color: var(--slate-700); font-size: .98rem; max-width: 70ch; }
.session__by { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--brass); }
.session--keynote .session__body h3 { color: var(--ink); }
.session--break { opacity: .78; }
.session--break .session__body h3 { font-size: 1.02rem; color: var(--slate-500); font-family: var(--font-display); font-weight: 600; }

.agenda__note {
  margin-top: 44px; padding: 26px 30px;
  background: var(--brass-08); border: 1px solid rgba(180,146,76,.24); border-radius: var(--r);
  color: var(--slate-700); font-size: .98rem;
}
.agenda__note b { color: var(--ink); }