/* =============================================================================
   I4PL Conference 2026 - Programme (time-slot grid)
   -----------------------------------------------------------------------------
   Four sessions run concurrently in most blocks. Grouping by start time shows
   that for what it is, a choice of four in four rooms, instead of a flat list
   that reads like sixteen sequential items.

   Portraits are large on purpose. At thumbnail scale the faces carried no
   weight, and the speakers are the reason people register: 144px in slot cards,
   176px on feature sessions, against 48px before.
   ============================================================================= */

.schedule { padding: 3rem 0 4rem; background: var(--paper-2); }

.schedule-bar {
  position: sticky; top: 4.5rem; z-index: 60;
  display: grid; gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 0;
  background: linear-gradient(180deg, var(--paper-2) 78%, rgba(233, 240, 246, 0));
}
.day-tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.day-tab {
  display: inline-flex; align-items: center; min-height: 3rem;
  padding: .7rem 1.4rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 800; color: var(--ink);
  text-decoration: none; box-shadow: var(--sh-1);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .2s var(--ease);
}
.day-tab:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); }

.stream-key { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.stream-key li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-small); font-weight: 700; color: var(--muted);
}
.key-dot { width: .8rem; height: .8rem; border-radius: 50%; flex-shrink: 0; }
.key-dot-navy   { background: var(--navy); }
.key-dot-blue   { background: var(--blue); }
.key-dot-maroon { background: var(--maroon); }
.key-dot-cyan   { background: var(--cyan); }

.day { margin-top: 3rem; scroll-margin-top: 9rem; }
.day-title {
  font-size: var(--t-h2); letter-spacing: -.03em; color: var(--navy);
  padding-bottom: .9rem; margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--line);
}

/* --- Slots --------------------------------------------------------------- */
.slot-stack { display: grid; gap: 2.25rem; }
.slot { display: grid; gap: .85rem; }
.slot-time {
  font-size: var(--t-small); font-weight: 800; letter-spacing: .04em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  padding-bottom: .5rem; border-bottom: 2px solid var(--ink);
}
.slot.is-quiet .slot-time {
  color: var(--muted); border-bottom-color: var(--line); font-weight: 700;
}
.slot-body { display: grid; gap: 1rem; }
.slot-choose {
  margin: .25rem 0 0; font-size: var(--t-small); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* --- Quiet rows: breaks, registration, logistics ------------------------- */
.quiet-list { display: grid; gap: .4rem; }
.quiet {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .7rem 1rem;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.quiet-title { font-size: var(--t-small); font-weight: 700; color: var(--muted); }

/* --- Feature sessions: keynote, plenary, VIP ----------------------------- */
.feature {
  display: grid; gap: 1.5rem;
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid var(--maroon);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
.feature-plenary { border-top-color: var(--navy); }
.feature-vip     { border-top-color: var(--cyan); }
.feature-top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1rem; margin-bottom: .85rem;
}
.feature-title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  letter-spacing: -.03em; line-height: 1.14; text-wrap: balance;
}

/* --- Concurrent session cards -------------------------------------------- */
/* Equal columns, and each card shares the row track set so the chip, title,
   speaker block and abstract all sit on the same baseline across the row.
   Without this every card sized itself independently and nothing lined up. */
.pick-grid { display: grid; gap: 1rem; }
.pickc {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.5rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--muted);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pickc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.pickc-navy   { border-top-color: var(--navy); }
.pickc-blue   { border-top-color: var(--blue); }
.pickc-maroon { border-top-color: var(--maroon); }
.pickc-cyan   { border-top-color: var(--cyan); }
.pickc-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; }
.pickc-title {
  font-size: var(--t-h3); letter-spacing: -.02em;
  line-height: 1.2; text-wrap: balance;
}

.ses-chip {
  display: inline-block;
  padding: .32rem .7rem; border-radius: .45rem;
  font-size: var(--t-small); font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1.3;
  background: var(--paper-2); color: var(--muted);
  text-wrap: balance;
}
/* The stream row is its own track so chips of different heights do not shove
   the titles beneath them out of alignment. */
.pickc-top { align-items: start; min-height: 3.1rem; }
.ses-chip-navy   { background: rgba(39, 58, 148, .13); color: #1d2c73; }
.ses-chip-blue   { background: rgba(0, 119, 193, .13); color: #005688; }
.ses-chip-maroon { background: rgba(138, 35, 79, .13); color: #6f1c40; }
.ses-chip-cyan   { background: rgba(3, 186, 178, .18); color: #015b57; }
.ses-chip-keynote, .ses-chip-plenary, .ses-chip-vip { background: var(--ink); color: var(--cyan); }

.ses-room { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.ses-blurb { font-size: var(--t-small); color: var(--body); max-width: 66ch; }

/* --- Speakers ------------------------------------------------------------ */
.spk-list { display: grid; gap: .85rem; }
/* Each speaker gets their own card. Presented as a plain inline row they read
   as metadata; as a card they read as a person worth turning up for. */
.spk {
  display: flex; align-items: center; gap: 1.15rem;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.spk:hover { border-color: rgba(3,186,178,.55); box-shadow: var(--sh-1); }
.spk-shot { flex-shrink: 0; display: block; }
.spk-badge {
  display: inline-block; width: fit-content; margin-bottom: .35rem;
  padding: .18rem .55rem; border-radius: .35rem;
  background: var(--white); border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.spk-face {
  display: block; width: 9rem; height: 9rem;      /* 144px, 3x the previous 48px */
  border-radius: 50%; object-fit: cover;
  background: var(--paper-2);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--cyan), var(--sh-1);
}
.spk-xl .spk-face { width: 11rem; height: 11rem; }  /* 176px on feature sessions */
/* No portrait supplied: a branded monogram. Never a stock face, never a
   generated one. */
.spk-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--white);
  font-size: 2.5rem; font-weight: 900; letter-spacing: .02em;
}
.spk-xl .spk-initials { font-size: 3rem; }
.spk-txt { display: grid; gap: .15rem; min-width: 0; }
.spk-name { font-size: var(--t-body); font-weight: 900; color: var(--ink); line-height: 1.2; }
.spk-role { font-size: var(--t-small); font-weight: 700; color: var(--body); line-height: 1.35; }
.spk-org  { font-size: var(--t-small); font-weight: 600; color: var(--muted); line-height: 1.35; }

/* =============================================================================
   BREAKPOINTS
   ============================================================================= */

@media (min-width: 40rem) {
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .slot { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; align-items: start; }
  .slot-time {
    border-bottom: 0; padding-top: .2rem; padding-right: 1rem;
    border-right: 2px solid var(--ink); text-align: right;
  }
  .slot.is-quiet .slot-time { border-right-color: var(--line); }
  .feature { grid-template-columns: auto 1fr; align-items: center; padding: 2rem; }
  .pickc { padding: 1.75rem 1.6rem; }
}

@media (min-width: 62rem) {
  .schedule { padding: 4.5rem 0 5.5rem; }
  .schedule-bar {
    grid-template-columns: auto 1fr; align-items: center;
    justify-content: space-between; gap: 2rem; top: 5.25rem;
  }
  .stream-key { justify-content: flex-end; }
  .slot { grid-template-columns: 11rem 1fr; gap: 2rem; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .day { margin-top: 4rem; }
}

@media (min-width: 82rem) {
  /* Four across so the concurrent choice is visible at a glance.
     minmax(0,1fr) forces genuinely equal columns; long titles were otherwise
     stretching their own column and squashing the others. */
  .pick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
  }
  /* Subgrid makes every card use the row track set above, so the four chips
     align, the four titles align, and the four speaker cards start on the same
     line regardless of how long each title runs. */
  .pickc {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: .85rem;
    padding: 1.6rem 1.35rem;
  }
  .pickc-title { font-size: 1.2rem; line-height: 1.25; }
  .spk-md .spk { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .spk-md .spk-face { width: 7.5rem; height: 7.5rem; }
  .spk-md .spk-name { font-size: var(--t-small); }
}

/* Browsers without subgrid keep equal columns and a reserved title area, so
   the speaker cards still line up on the common case of 2-4 line titles. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 82rem) {
    .pickc { display: flex; }
    .pickc-title { min-height: 6.5rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-tab:hover, .pickc:hover { transform: none; }
}