/* "Upcoming calls" on the landing page - templates/_upcoming.php.

   The section /web3 carries, wearing this property's clothes. Tokens come from
   app.css and nothing here invents a colour (notes/45b-design.md): the row is
   --surface at the same 10px radius as .calllist li directly below it, so the
   forward schedule and the archive read as one page rather than as a widget
   pasted above a list. The structure - three columns, the badges, the stacked
   collapse below 768px - is /web3's and is meant to stay recognisable. */

.upcoming { margin-block: 4px 34px; }
.upcoming .lede { margin-block: 0 14px; }

/* A long session title must scroll this box, never the page. */
.up-wrap { overflow-x: auto; }

/* border-spacing rather than border-collapse: it is what lets each row be a
   separated card with rounded ends, the same shape as the call rows below. */
.up-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: 0;
}

.up-table th {
  text-align: left;
  font-family: Chivo, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgb(var(--alt-text-rgb) / .45);
  white-space: nowrap;
  padding: 0 16px 2px;
}

.up-table td {
  background: var(--surface);
  vertical-align: middle;
  padding: 12px 16px;
}
.up-table td:first-child { border-radius: 10px 0 0 10px; }
.up-table td:last-child  { border-radius: 0 10px 10px 0; }
/* Not a link and not clickable as a whole - unlike .calllist li, every target
   in this row is one of the three buttons - so the row lifts on hover only
   enough to tie the three cells together as one thing. */
.up-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.up-title { font-weight: 600; }

/* Which language the session itself is held in - #4 (EN) and #5 (PT) run in
   parallel, so this is what tells them apart. Still the pill it always was,
   after the title; since 2026-09-22 it spells the language out and sits a
   little larger than the title, because the language is what decides whether
   the row is for a given reader at all. */
.up-lang {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .6em;
  border: 1px solid rgb(var(--alt-text-rgb) / .3);
  border-radius: var(--radius-btn);
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgb(var(--alt-text-rgb) / .7);
  vertical-align: .05em;
}

.up-day  { display: block; font-weight: 600; white-space: nowrap; }
.up-time {
  display: block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.up-zone { color: rgb(var(--alt-text-rgb) / .55); font-size: .9em; }

/* The one thing on the row that is allowed to shout, and it earns it: a call
   happening today is the only row a reader might need to act on in the next
   few hours. --alt-accent, the same green the admin pill and the hovered call
   title use for "this one is live/yours". */
.up-today {
  display: inline-block;
  margin-right: .5em;
  padding: .1em .7em;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--alt-accent) 22%, transparent);
  color: var(--alt-accent);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: .1em;
}
/* `hidden` loses to `display: inline-block` above without this. */
.up-today[hidden] { display: none; }

.up-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* Three buttons on every row, so they are outlined rather than filled: a
   filled treatment would shout louder than the session titles they belong to.
   .btn-secondary's shape at a smaller size - same pill, same hover. */
.up-btn {
  display: inline-block;
  padding: .3em 1em;
  border-radius: var(--radius-btn);
  border: 1px solid rgb(var(--alt-text-rgb) / .35);
  color: var(--alt-text);
  text-decoration: none;
  font-size: .8rem;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.up-btn:hover,
.up-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .up-btn, .up-table tbody tr:hover td { transition: none; }
}

/* On a phone the three columns cannot sit side by side, so each row becomes a
   stacked card and the header row is dropped - every cell carries its own
   label through data-label instead. Same treatment as /web3, and the reason
   the labels are in the markup at all. */
@media (max-width: 768px) {
  .up-table, .up-table tbody, .up-table tr, .up-table td { display: block; width: 100%; }
  .up-table thead { display: none; }
  .up-table { border-spacing: 0; }
  .up-table tr {
    background: var(--surface);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
  }
  .up-table td {
    background: none;
    border-radius: 0;
    padding: .35em 0;
  }
  .up-table td:first-child, .up-table td:last-child { border-radius: 0; }
  .up-table tbody tr:hover td { background: none; }
  .up-table td::before {
    content: attr(data-label);
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgb(var(--alt-text-rgb) / .45);
    margin-bottom: .15em;
  }
}