/*
 * "List" layout — [jp_games_cards layout="list"]. Same visual language as
 * the spotlight cards (jpms-cards-spotlight.css) — same tokens, badges,
 * pills, logo treatment, score styling — just laid out as full-width rows
 * in a vertical, scannable schedule table instead of a horizontal carousel.
 */

.jpms-list-wrap {
  width: 100%;
  background: var(--jpms-spot-bg, #101c3a);
  border: 1px solid var(--jpms-spot-border, rgba(0,0,0,0.08));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--jpms-spot-shadow, 0 10px 30px rgba(16,24,48,0.08));
}

/* Header row — desktop only, gives the list a "table" identity */
.jpms-list-head {
  display: none;
  padding: 10px 16px;
  gap: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jpms-spot-text-dim, #5c6a8a);
  background: var(--jpms-spot-head-bg, rgba(16,24,48,0.02));
  border-bottom: 1px solid var(--jpms-spot-line, rgba(0,0,0,0.08));
}
@media (min-width: 640px) {
  .jpms-list-head {
    display: grid;
    grid-template-columns: 64px 1fr 160px 22px;
    align-items: center;
  }
  .jpms-list-head__venue { text-align: right; }
}
@media (min-width: 1100px) {
  .jpms-list-head {
    grid-template-columns: 76px 1fr 240px 26px;
    padding: 12px 22px;
  }
}

.jpms-list {
  display: flex;
  flex-direction: column;
}

/* -------- section header: the competition name ("Wettbewerb"), printed
   once above the run of games it applies to instead of on every single
   row — see the $lastComp tracking in render-list.php. -------- */
.jpms-list-section {
  padding: 8px 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--jpms-spot-accent, #2f83f7);
  background: var(--jpms-spot-head-bg, rgba(16,24,48,0.02));
  border-bottom: 1px solid var(--jpms-spot-line, rgba(0,0,0,0.08));
}
@media (min-width: 640px) {
  .jpms-list-section { padding: 8px 16px; }
}
@media (min-width: 1100px) {
  .jpms-list-section { padding: 9px 22px; }
}

/* -------- row -------- */
.jpms-row {
  display: grid;
  grid-template-columns: 50px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--jpms-spot-line, rgba(0,0,0,0.08));
  cursor: pointer;
  user-select: none;
  border-left: 3px solid var(--jpms-stripe, transparent);
  transition: background .15s ease;
}
@media (min-width: 640px) {
  .jpms-row {
    grid-template-columns: 64px 1fr 160px 22px;
    gap: 14px;
    padding: 12px 16px;
  }
}
@media (min-width: 1100px) {
  .jpms-row {
    grid-template-columns: 76px 1fr 240px 26px;
    gap: 18px;
    padding: 14px 22px;
  }
}

.jpms-row:last-child { border-bottom: none; }
.jpms-row:focus-visible { outline: 2px solid var(--jpms-spot-accent, #2f83f7); outline-offset: -2px; }

/* Home vs. away: a flat full-row tint, not just a fading left edge — home
   is lit up (this is the club's own side, the row people scanning the
   list care about most), away stays close to neutral so the contrast
   between the two is immediate, not just "two similarly-faint colours". */
.jpms-row.is-home {
  --jpms-stripe: var(--jpms-stripe-home, #2f83f7);
  background: rgba(47, 131, 247, .16);
  border-left-width: 5px;
}
.jpms-row.is-away {
  --jpms-stripe: var(--jpms-stripe-away, #94a3b8);
  background: rgba(148, 163, 184, .04);
  border-left-width: 5px;
}
.jpms-row.is-neutral { --jpms-stripe: transparent; }

.jpms-row.is-home:hover { background: rgba(47, 131, 247, .24); }
.jpms-row.is-away:hover { background: rgba(148, 163, 184, .09); }
.jpms-row.is-neutral:hover { background: var(--jpms-spot-head-bg, rgba(16,24,48,0.02)); }

/* -------- date column -------- */
.jpms-row-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.jpms-row-weekday {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jpms-spot-text-dim, #5c6a8a);
}

.jpms-row-day {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--jpms-spot-text, #101830);
  font-variant-numeric: tabular-nums;
}

/* -------- body: head row + teams row -------- */
.jpms-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Desktop has the room to put badges and the matchup on one line instead
   of two — a shorter row means more of the season fits on screen at once,
   which is the point of the extra horizontal space this width tier
   already buys (see .card:has(.gc-wrap) in the Gamecenter plugin). */
@media (min-width: 1100px) {
  .jpms-row-body {
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }
  .jpms-row-head { flex: 0 0 auto; }
  .jpms-row-teams { flex: 0 0 auto; }
}

.jpms-row-head {
  display: flex;
  align-items: center;
  gap: 7px;
  /* nowrap, not wrap: every row needs to stay exactly one line tall here
     regardless of how long its competition name is, or rows with a
     shorter one sit noticeably shorter than rows with a longer one that
     wrapped — same fix as .hockey-standings' table-layout:fixed, different
     layout mechanism (badges/comp share one flex line; comp itself shrinks
     and ellipsis-truncates instead of pushing to a second line). */
  flex-wrap: nowrap;
}

.jpms-badge,
.jpms-pill {
  flex: 0 0 auto;
}

.jpms-row-teams {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 640px) {
  .jpms-row-teams { gap: 10px; }
}
@media (min-width: 1100px) {
  .jpms-row-teams { gap: 14px; }
}

.jpms-row-team {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
}
@media (min-width: 640px) {
  .jpms-row-team { gap: 6px; }
}
.jpms-row-team--away { flex-direction: row-reverse; }

.jpms-row-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (min-width: 640px) {
  .jpms-row-logo { width: 24px; height: 24px; }
}
@media (min-width: 1100px) {
  .jpms-row-logo { width: 30px; height: 30px; }
}

.jpms-row-short {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--jpms-spot-text, #101830);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (min-width: 640px) {
  .jpms-row-short { font-size: 0.85rem; }
}
@media (min-width: 1100px) {
  .jpms-row-short { font-size: 0.95rem; }
}

.jpms-row-mid {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--jpms-spot-text, #101830);
}
@media (min-width: 640px) {
  .jpms-row-mid { min-width: 52px; }
}
@media (min-width: 1100px) {
  .jpms-row-mid { min-width: 64px; }
}
.jpms-row-mid--score { font-size: 1.05rem; }
.jpms-row-mid--time { font-size: 0.95rem; color: var(--jpms-spot-accent, #2f83f7); }
.jpms-row-mid--vs { font-size: 0.9rem; color: var(--jpms-spot-text-dim, #5c6a8a); }
@media (min-width: 1100px) {
  .jpms-row-mid--score { font-size: 1.2rem; }
  .jpms-row-mid--time { font-size: 1.05rem; }
}

.jpms-row-teams--tournament {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.jpms-row-tournament-title { font-weight: 700; font-size: 0.85rem; color: var(--jpms-spot-text, #101830); }
.jpms-row-tournament-result { font-size: 0.75rem; color: var(--jpms-spot-text-dim, #5c6a8a); }

/* -------- venue column (desktop only) -------- */
.jpms-row-venue {
  display: none;
  font-size: 0.72rem;
  color: var(--jpms-spot-text-dim, #5c6a8a);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .jpms-row-venue { display: block; }
}
@media (min-width: 1100px) {
  .jpms-row-venue { font-size: 0.8rem; }
}

/* -------- arrow -------- */
.jpms-row-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--jpms-spot-text-dim, #5c6a8a);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: transform .15s ease, stroke .15s ease;
}
.jpms-row:hover .jpms-row-arrow {
  stroke: var(--jpms-spot-accent, #2f83f7);
  transform: translateX(2px);
}