/* The conferences index — laid out to Apple's Human Interface Guidelines.
   https://developer.apple.com/design/human-interface-guidelines/

   Loaded ON TOP of mocs.css and reusing its --m-* tokens, so the page inherits
   the summit's navy/steel palette and its dark mode rather than introducing a
   second one. What it takes from HIG is structure, not colour:

     Clarity   — one type scale, sized in rem so it tracks the reader's own
                 text-size setting; nothing smaller than a 13px footnote.
     Deference — no ornament competing with the content. The rows are the page.
     Depth     — one level of elevation: grouped cards lifted off a sunken
                 background, which is what separates a group from the page
                 without drawing a box around everything.

   The grouped inset list is the iOS Settings pattern, chosen because this page
   is scanned for one row rather than read top to bottom. Separators are inset
   to align with row content, tap targets clear 44px, and status is carried by
   a badge with a text label — never by colour alone. */

.c-page {
  max-width: 46rem;             /* HIG readable measure — not the 72rem the
                                   poster-style index pages use. */
  margin: 0 auto;
  padding: 3rem 1.25rem 4.5rem;
}

/* ------------------------------------------------------------ large title */

.c-hero { margin-bottom: 2.5rem; }

.c-eyebrow {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;         /* Footnote */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-mute);
}

.c-largetitle {
  margin: 0 0 0.75rem;
  font-size: 2.125rem;          /* Large Title, 34pt */
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.021em;     /* HIG tightens tracking as size grows */
  color: var(--m-ink);
}

.c-lede {
  margin: 0;
  font-size: 1.0625rem;         /* Body */
  line-height: 1.5;
  color: var(--m-mute);
  max-width: 34rem;
}

/* ---------------------------------------------------------------- groups */

.c-group { margin-top: 2.75rem; }

/* Grouped-list header: short, uppercase, quiet, sitting just above its card. */
.c-grouphead {
  margin: 0 0 0.625rem 1rem;
  font-size: 0.8125rem;         /* Footnote */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-mute);
}

/* Footnote under a group — HIG uses these to explain a group's behaviour
   rather than crowding each row with the same caveat. */
.c-groupnote {
  margin: 0.625rem 1rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--m-mute);
}

.c-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: 0.75rem;
  overflow: hidden;             /* keeps row hover inside the rounded corners */
}

/* Separators inset to the start of the row's text, not the card edge. */
.c-item + .c-item > .c-row { border-top: 1px solid var(--m-line); }

/* ------------------------------------------------------------------ rows */

.c-row {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto auto;
  align-items: center;
  gap: 0 0.875rem;
  min-height: 3.25rem;          /* > 44px tap target */
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: inherit;
}

a.c-row:hover { background: var(--m-sunken); }

a.c-row:focus-visible {
  outline: 3px solid var(--m-accent);
  outline-offset: -3px;
}

.c-row--static { cursor: default; }

.c-year {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* years line up column-wise */
  color: var(--m-navy);
}

.c-year--muted { color: var(--m-mute); font-weight: 600; }

.c-rowbody { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.c-title {
  font-size: 1.0625rem;         /* Headline */
  font-weight: 600;
  color: var(--m-ink);
}

.c-sub {
  font-size: 0.9375rem;         /* Subheadline */
  line-height: 1.4;
  color: var(--m-mute);
}

.c-meta {
  font-size: 0.8125rem;         /* Footnote */
  color: var(--m-mute);
}

.c-sub code,
.c-feature-host code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* --------------------------------------------------------------- badges */

.c-badge {
  justify-self: end;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;           /* Caption */
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.c-badge--past {
  background: var(--m-sunken);
  color: var(--m-mute);
  border: 1px solid var(--m-line);
}

.c-badge--reserved {
  background: transparent;
  color: var(--m-mute);
  border: 1px dashed var(--m-line);
}

/* Disclosure chevron, drawn rather than shipped as an asset. Decorative, and
   marked aria-hidden in the template — the row's own text is the label. */
.c-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--m-mute);
  border-bottom: 2px solid var(--m-mute);
  transform: rotate(-45deg);
  opacity: 0.75;
}

.c-row--static .c-chevron { display: none; }

/* ------------------------------------------------- the current edition */

.c-feature {
  background: var(--m-paper);
  border: 1px solid var(--m-line);
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem 1.25rem;
}

.c-feature-year {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--m-accent);
}

.c-feature-title {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;          /* Title 2 */
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--m-ink);
}

.c-feature-date {
  margin: 0 0 0.125rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--m-ink);
}

.c-feature-venue {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  color: var(--m-mute);
}

.c-feature-summary {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--m-ink);
  max-width: 34rem;
}

.c-feature-host {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--m-mute);
}

/* --------------------------------------------------------------- actions */

.c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

/* HIG capsule buttons. 44px min height, and a visible focus ring — the
   microsite is keyboard-navigable because it has no JS to fake anything. */
.c-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 1.375rem;
  border: 1px solid var(--m-line);
  background: var(--m-paper);
  color: var(--m-accent);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.c-btn:hover { background: var(--m-sunken); }

.c-btn:focus-visible {
  outline: 3px solid var(--m-accent);
  outline-offset: 2px;
}

.c-btn--primary {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: #fff;
}

.c-btn--primary:hover { background: var(--m-accent-d); border-color: var(--m-accent-d); }

@media (prefers-color-scheme: dark) {
  /* The accent is a light steel in dark mode, so white-on-accent would fail
     contrast. Flip the fill's text back to the dark ink. */
  .c-btn--primary { color: var(--m-paper); }
}

.c-back {
  margin: 2.75rem 0 0;
  font-size: 0.9375rem;
}

.c-back a { color: var(--m-accent); }

/* ----------------------------------------------------------- small screens */

@media (max-width: 32rem) {
  .c-page { padding: 2rem 1rem 3rem; }
  .c-largetitle { font-size: 1.75rem; }

  /* The badge drops below the text rather than squeezing the title into two
     characters per line. */
  .c-row {
    grid-template-columns: 2.75rem 1fr auto;
    row-gap: 0.375rem;
  }

  .c-badge { grid-column: 2 / -1; justify-self: start; }
  .c-chevron { grid-row: 1; }
}

/* HIG: motion is a preference, not a default. Nothing here animates, but the
   hover transitions inherited from mocs.css should not either. */
@media (prefers-reduced-motion: reduce) {
  .c-row, .c-btn { transition: none; }
}