/* AUD-002 / AUD-010: layout for the three navigation destinations, /series/,
   /watch/, and /speakers/ (task 13.1). Loaded by `partials/head.html` only while
   one of those Recommendations is accepted. Property values in rem are written
   for the theme's 10px root (see tokens.css); media queries use the browser's
   16px default, as media queries always do. Every other value names a token; the card,
   media, heading, and button look comes from the component sheets. */

.tkc-destination {
  box-sizing: border-box;
  max-width: 110rem;
  margin: 0 auto;
  padding: var(--tkc-space-6) var(--tkc-space-4) var(--tkc-space-8);
  color: var(--tkc-color-text);
}

.tkc-destination-title {
  margin: 0 0 var(--tkc-space-3);
}

.tkc-destination-intro {
  margin: 0 0 var(--tkc-space-5);
  color: var(--tkc-color-text-muted);
  font-size: var(--tkc-size-200);
}

/* Session archive: one card per session, image beside text from tablet up. */
.tkc-archive,
.tkc-speakers,
.tkc-series-schedule {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tkc-archive {
  display: grid;
  gap: var(--tkc-space-4);
}

.tkc-archive-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tkc-space-4);
  align-items: center;
}

.tkc-archive-media {
  --tkc-media-ratio: 16 / 9;
}

.tkc-archive-title {
  margin: 0 0 var(--tkc-space-1);
}

.tkc-archive-meta {
  margin: 0 0 var(--tkc-space-3);
  color: var(--tkc-color-text-muted);
  font-size: var(--tkc-size-100);
}

.tkc-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkc-space-2);
  margin: 0;
}

@media (min-width: 40rem) {
  .tkc-archive-entry {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Speaker directory: photo beside biography from tablet up. */
.tkc-speakers {
  display: grid;
  gap: var(--tkc-space-5);
}

.tkc-speaker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tkc-space-4);
  align-items: start;
}

.tkc-speaker-photo {
  display: block;
  width: 100%;
  max-width: 25.6rem;
  height: auto;
  border-radius: var(--tkc-radius-md);
}

.tkc-speaker-name {
  margin: 0 0 var(--tkc-space-2);
}

.tkc-speaker-bio {
  margin: 0;
  line-height: var(--tkc-leading-loose);
}

@media (min-width: 40rem) {
  .tkc-speaker {
    grid-template-columns: 25.6rem minmax(0, 1fr);
  }
}

/* Upcoming series. */
.tkc-series-title {
  margin: 0 0 var(--tkc-space-2);
}

.tkc-series-details {
  margin: 0 0 var(--tkc-space-4);
  line-height: var(--tkc-leading-normal);
}

/* Label above value on a phone, side by side from tablet up: at 320px a label
   column leaves the value too narrow for an address. */
.tkc-series-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tkc-space-1) var(--tkc-space-4);
  margin: 0 0 var(--tkc-space-5);
}

@media (min-width: 40rem) {
  .tkc-series-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

.tkc-series-facts dt {
  font-weight: var(--tkc-weight-bold);
}

.tkc-series-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.tkc-series-schedule-title {
  margin: 0 0 var(--tkc-space-3);
}

.tkc-series-schedule {
  display: grid;
  gap: var(--tkc-space-2);
}

.tkc-series-schedule li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkc-space-1) var(--tkc-space-3);
  padding: var(--tkc-space-2) var(--tkc-space-3);
  background-color: var(--tkc-color-surface);
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-sm);
}

.tkc-series-schedule time {
  min-width: 7em;
  color: var(--tkc-color-accent);
  font-weight: var(--tkc-weight-bold);
}