/* Program section: stat strip, Day 1 track grid, Day 2 track stack.
   Palette matches the rest of the site (talks.css / schedule.css / the
   keynote card): slate neutrals, brand orange for Day 2's accent, brand
   blue for links/hover. */

/* The listing templates' output gets re-parsed as Markdown, so a bare
   <img> or the stretched-link <a> -- each alone on its own line, with
   nothing else in its "paragraph" -- gets auto-wrapped in a <p>. There's
   no real paragraph content anywhere in these components, so this reset
   just removes the default paragraph margin that <p> would otherwise add
   inside a photo or a card. */
.program .track-card p,
.program .day2-block p {
  margin: 0;
}

/* Quarto's own .quarto-listing gives every listing container a default
   padding-bottom: 1em -- unrelated to our card padding, and the actual
   source of the extra room under Time Series/Showcase/AI's cards and Day
   1's rows (Keynote and Conversation aren't listings, so they never had
   this). */
.program .track-card .quarto-listing,
.program .day2-block .quarto-listing {
  padding-bottom: 0;
}

/* ---------- Stat strip ---------- */
.program .stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.program .stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 0.5rem;
  text-align: center;
}

.program .stat b {
  display: block;
  font-family: "Cabin", sans-serif;
  font-size: 1.65rem;
  color: #d97e06;
}

.program .stat span {
  font-size: 0.9rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Day heading ---------- */
.program .day-heading {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2.4rem 0 1.1rem;
}

.program .day-heading:first-of-type {
  margin-top: 0;
}

.program .day-heading .day-num {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #0f172a;
}

.program .day-heading .day-date {
  font-size: 1.1rem;
  color: #64748b;
}

.program .day-heading .day-register {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: #d97e06;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid #fbac27;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.program .day-heading .day-register:hover {
  background: #fbac27;
  color: #3a2704;
}

/* ---------- Day 1: track grid ---------- */
.program .track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.program .track-card {
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}

.program .track-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.program .track-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbac27;
  color: #3a2704;
}

.program .track-icon svg {
  width: 19px;
  height: 19px;
}

.program .track-head h5 {
  font-size: 1rem;
  margin: 0;
}

/* Bootstrap's .stretched-link (on a plain <a> inside) makes the whole row
   clickable -- rather than wrapping every field in an <a>, which is what
   was tripping up Pandoc's raw-HTML-block parsing when the listing
   templates' rendered output got run back through it. */
.program .person-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  /* Horizontal padding + matching negative margin cancel out, so the
     photo/name/time keep the same x-position as before -- they just add
     room for the hover border/background to show without shifting any
     content or overflowing the track-card's own 1.4rem padding. */
  padding: 0.6rem 0.75rem;
  margin-inline: -0.75rem;
  border: 1px solid transparent;
  border-top-color: #e2e8f0;
  border-radius: 10px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.program .person-row:first-of-type {
  border-top-color: transparent;
}

/* Same lift/highlight treatment as Day 2's .person-card:hover below. */
.program .person-row:hover {
  background: #ffffff;
  border-color: #288dfa;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.2);
}

.program .person-row:hover .person-name {
  color: #0f345c;
}

/* ---------- Speaker photos ---------- */
.program .avatar {
  /* img is inline by default, which leaves a few px of baseline gap below
     it -- inside a fixed-height circle that reads as the photo not
     filling the circle, and as extra space under it in a flex row.
     display:block removes that gap at the source. */
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  object-fit: cover;
  background: #e2e8f0;
}

.program .avatar-group {
  display: flex;
  flex: 0 0 auto;
}

.program .avatar-overlap {
  margin-left: -12px;
}

/* Fixed-width column so a two-photo row (avatar-group, ~64px) and a
   one-photo row (avatar, 38px) both hand off to the name/title at the
   same x -- names/titles line up regardless of how many photos a slot
   has. */
.program .avatar-slot {
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program .person-main {
  min-width: 0;
}

.program .person-name {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.3;
  color: #0f172a;
  transition: color 0.15s ease;
}

.program .person-title {
  font-size: 0.83rem;
  color: #64748b;
  line-height: 1.35;
}

.program .person-row .person-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program .person-time {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 0.15rem;
}

/* ---------- Day 2: single-column stack ---------- */
.program .day2-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.program .day2-block {
  display: flex;
  gap: 1.1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
}

/* Icon-to-name label, narrow enough that it runs beside the people
   instead of sitting alone in its own full-width row above them. */
.program .day2-label {
  flex: 0 0 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding-right: 1rem;
  border-right: 1px solid #e2e8f0;
}

.program .day2-label .track-icon {
  width: 38px;
  height: 38px;
}

.program .day2-label .track-icon svg {
  width: 20px;
  height: 20px;
}

.program .day2-label h5 {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

/* Cards don't stretch to match a taller neighbour -- title truncation
   keeps them a uniform height already -- and centering means if this
   row's box does end up shorter than the label beside it, the cards sit
   in the middle of it rather than at the top with empty room below. */
.program .people-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  align-content: center;
}

.program .people-row.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* Bootstrap's .stretched-link (on a plain <a> inside) makes the whole card
   clickable -- see the note on .person-row above. */
.program .person-card {
  /* Every templated card is a <div> (see the note on .person-row above),
     but the hand-written Keynote card is a real <a> -- reset link styling
     here so it doesn't pick up a browser-default underline. */
  text-decoration: none;
  color: inherit;
  position: relative;
  flex: 1 1 210px;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  display: flex;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.program .person-card:hover {
  border-color: #288dfa;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.2);
}

/* Same arrangement as Day 1's rows: the photo is a full-height column
   beside name+title stacked together, not a small photo next to just the
   name with the title wrapping below spanning the whole card. Time tucks
   into the corner rather than sitting inline -- these cards are much
   narrower than Day 1's. */
.program .pc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-right: 2.3rem;
  width: 100%;
}

.program .pc-row.no-time {
  padding-right: 0;
}

.program .pc-row .avatar {
  width: 38px;
  height: 38px;
}

/* Give the text side an actual width to truncate against, instead of the
   card growing to fit whatever the title happens to be. */
.program .pc-row .person-main {
  flex: 1 1 auto;
  min-width: 0;
}

.program .person-card > .person-time {
  position: absolute;
  top: 0.8rem;
  right: 0.85rem;
  margin-left: 0;
  padding-top: 0;
}

.program .person-card .person-name {
  font-size: 0.9rem;
}

.program .person-card .person-title {
  font-size: 0.8rem;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Conversation: a two-sided panel instead of interchangeable
   cards, so host vs. guests reads at a glance. Same padding/radius as a
   person-card -- it's playing the same role every other track's
   people-row plays. ---------- */
.program .conv-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.program .conv-panel:hover {
  border-color: #288dfa;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.2);
}

.program .conv-panel > .person-time {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  margin-left: 0;
  padding-top: 0;
}

.program .conv-people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
}

.program .conv-side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.program .conv-side .person-name {
  font-size: 0.88rem;
  line-height: 1.2;
}

.program .conv-avatar {
  width: 36px;
  height: 36px;
}

.program .conv-guests .avatar-overlap {
  margin-left: -12px;
}

.program .conv-role {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.program .conv-role.host-role {
  color: #d97e06;
}

.program .conv-role.guest-role {
  color: #0f345c;
}

/* Time lives in the same top-right corner badge as every other card, so
   the connector just carries "with". */
.program .conv-link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #64748b;
  padding: 0 0.3rem;
}

.program .conv-link svg {
  width: 15px;
  height: 15px;
}

.program .conv-link span {
  font-size: 0.7rem;
  font-style: italic;
}

/* ---------- CTA ---------- */
.program .program-cta {
  margin-top: 2rem;
  text-align: center;
}

.program .program-cta .btn-program {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fbac27;
  color: #3a2704;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.program .program-cta .btn-program:hover {
  background: #d97e06;
  color: #ffffff;
}

@media (max-width: 780px) {
  .program .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .program .track-grid {
    grid-template-columns: 1fr;
  }
  .program .day-heading {
    flex-wrap: wrap;
  }
  .program .day-heading .day-register {
    margin-left: 0;
  }
  .program .day2-block {
    flex-direction: column;
    gap: 0.85rem;
  }
  .program .day2-label {
    flex: 0 0 auto;
    flex-direction: row;
    text-align: left;
    padding-right: 0;
    padding-bottom: 0.7rem;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .program .people-row.grid-2 {
    grid-template-columns: 1fr;
  }
  .program .conv-people {
    flex-direction: column;
    gap: 0.85rem;
  }
}