/* /tournament-info — the public "what is running today" page.

   MOBILE IS THE REAL TARGET. Nobody opens this at a desk. It is opened one-handed, in a sports
   hall, by somebody who wants to know when their child is on. So the base rules below ARE the
   phone layout — single column, full-width tap targets, no horizontal scroll — and the only
   media query widens things for a screen that turns out to be big, rather than the other way
   round. Everything is scoped under .tinfo because the public shell has no body class.
*/

.tinfo {
  max-width: 760px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ section 1: meta */

.tinfo-meta {
  margin-bottom: 22px;
}

.tinfo-name-cn {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--text-main);
}

.tinfo-name-en {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* Label beside value, at every width — a phone included.
   This started life stacked on narrow screens, on the assumption that a label column next to a
   venue name would leave the address two words per line. It does not: the labels are short and
   fixed ("日期/Date", "地点/Venue"), so the column they need is narrow and constant, and putting
   them beside the value makes the pair scannable as a row instead of as four loose lines.
   minmax(0, 1fr) on the value column is what actually lets a long venue name wrap rather than
   forcing the grid wider than the card — a grid item defaults to min-width:auto. */
.tinfo-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
  align-items: start;

  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  font-size: 0.85rem;
}

/* The icon and the stacked bilingual label sit on one line together, so the icon must not be
   allowed to shrink when the label wraps. */
.tinfo-facts dt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.tinfo-facts dt i {
  flex: 0 0 auto;
  width: 15px;
  text-align: center;
  color: var(--primary);
  line-height: 1.45;
}

.tinfo-facts dd {
  margin: 0;
  color: var(--text-main);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ section 2: events */

.tinfo-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 2px 12px;
}

.tinfo-sec-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-main);
}

.tinfo-sec-title i {
  color: var(--primary);
  margin-right: 6px;
}

.tinfo-unit {
  margin-bottom: 12px;
  padding: 14px;
}

/* The code chip and the team count hold their size; the name takes what is left and wraps.
   min-width:0 is what actually lets a long category name wrap instead of forcing the row
   wider than the phone — a flex item defaults to min-width:auto and refuses to shrink. */
.tinfo-unit-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.tinfo-code {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--bg-surface-3, #334155);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.16));
  color: var(--primary);
  white-space: nowrap;
}

.tinfo-unit-name {
  flex: 1 1 auto;
  min-width: 0;
}

.tinfo-cat-cn {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  overflow-wrap: break-word;
}

/* No .tinfo-cat-en — the English category name was dropped from the card. The code chip and
   the Chinese name identify the event, and a second full name under every one of 45 rows was
   most of the page's height for a line nobody was reading. */

.tinfo-teams {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 3px;
}

/* The two buttons share one row. The order button takes whatever is left because its label is
   the long one; 成绩 is short and holds its own width, so it never squeezes the label beside it
   onto a second line. */
.tinfo-actions {
  display: flex;
  gap: 8px;
}

.tinfo-order-btn,
.tinfo-result-btn {
  min-height: 42px;          /* a real finger target, not a text link */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  /* The theme's 18px each side left the label filling the button to the pixel on a 390px
     screen — it fit, but with no slack, so a slightly wider rendering of the same string
     would have started clipping. The wider padding comes back at 620px. */
  padding-left: 10px;
  padding-right: 10px;
}

.tinfo-order-btn { flex: 1 1 auto; min-width: 0; }
.tinfo-result-btn { flex: 0 0 auto; }

/* theme.css only dims a disabled button to 0.88, which at a glance still reads as pressable.
   This one does nothing at all yet, so it has to look like it. */
.tinfo-result-btn[disabled] {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------------ wider screens */

@media (min-width: 620px) {
  .tinfo-name-cn { font-size: 1.5rem; }
  .tinfo-name-en { font-size: 0.92rem; }

  /* The grid itself is now in the base rules; a wide screen only buys more breathing room. */
  .tinfo-facts { column-gap: 18px; row-gap: 10px; }

  /* The buttons rejoin the header row: on a wide card a full-width bar under one line of
     text is a lot of empty blue. */
  .tinfo-unit {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .tinfo-unit-head { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
  .tinfo-actions { flex: 0 0 auto; }
  .tinfo-order-btn,
  .tinfo-result-btn { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
}