/* ============================================================
   PIÄTY — jaettu komponenttikerros
   ------------------------------------------------------------
   Sivujen yhteiset sisältökomponentit: sivupohja, intro,
   etkot/reissu-hero (.piaty-eh-*) ja otteluohjelma (.piaty-sched-*).
   Ladataan kaikilla sivuilla site.css:n jälkeen, ENNEN sivun omaa
   inline-<style>-lohkoa ja reissut.css:ää — sivukohtaiset tarkennukset
   voittavat lähdejärjestyksellä.

   site.css      = kromi (header, marquee, footer, siirtymät, modaalit)
   components.css = jaetut sisältökomponentit (tämä tiedosto)
   reissut.css   = reissu-spesifit lisät (Meiningit + Reissut)
   ============================================================ */

/* ---------- sivupohja (sama joka sivulla) ---------- */
html, body { margin: 0; background: var(--piaty-black); color: var(--piaty-bone); overflow-x: clip; }
a { color: inherit; }
::selection { background: var(--piaty-yellow); color: var(--piaty-black); }

/* Läpinäkyvä tausta: jaettu kiinteä stage (brändimusta + veilin keltahehku ja
   pisterasteri, site.css) näkyy sisällön läpi täsmälleen kuten laulut- ja
   veljmiehet-sivuilla — ei omaa peittävää mustaa pohjaa. */
.piaty-mein-page {
  background: transparent;
  color: var(--piaty-bone);
}

/* Ruudunlukijalle luettava, visuaalisesti piilotettu teksti. */
.piaty-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Scroll-reveal (motion.js): lohko häivytetään näkyviin kun se
   vierittyy ruutuun. --reveal-i porrastaa vierekkäiset (i × 60ms).
   Turvaverkot: .no-observer (ei IO-tukea) ja reduced-motion näyttävät
   sisällön heti; globaali liike-nollaus (site.css) tekee siirtymästä
   välittömän jo itsessään. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s var(--ease-snap) calc(var(--reveal-i, 0) * 60ms),
    transform .55s var(--ease-snap) calc(var(--reveal-i, 0) * 60ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-observer [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Progressiivinen parannus: kun selain tukee CSS scroll-driven -animaatioita,
   paljastus hoituu KOMPOSITORILLA ilman JS:ää — animaatio sidotaan elementin
   omaan näkyvyyteen (animation-timeline: view()). Kevyempää kuin
   IntersectionObserver + luokanvaihto, ja pysyy 60 fps:ssä (vain
   transform/opacity). Tukevissa selaimissa motion.js jättää IO:n väliin.
   Vain no-preference: reduced-motion-haara yllä pitää sisällön näkyvissä heti. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: piaty-reveal-in linear both;
      animation-timeline: view();
      /* Alkaa kun elementti tulee alareunasta sisään, valmis kun se on
         edennyt ~35 % matkasta → sama henki kuin IO:n rootMargin -8 %. */
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes piaty-reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Tyhjä-/odotustila — katkoviivakehys ja hiljainen vinoviivoitus.
   Sama kuvio kuin reissuposterin placeholderissa; typografia per käyttö. */
.piaty-empty {
  border: 1.5px dashed var(--piaty-line);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 11px,
    rgba(138, 138, 138, .05) 11px, rgba(138, 138, 138, .05) 22px
  );
  color: var(--piaty-smoke);
  text-align: center;
}

/* ============== NAPPI — riso-kieli ==============
   Yksi nappijärjestelmä koko sivustolle: keltainen pinta, 2px musta
   reuna, punainen riso-offset-varjo. Hover nostaa (+1 askel varjoa),
   painallus painaa alas (-1 askel). Sivukohtaiset luokat (esim.
   .piaty-reissu-cta) tuovat vain mitta-/leveyspoikkeamat. */
.piaty-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--piaty-black);
  background: var(--piaty-yellow);
  color: var(--piaty-black);
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  box-shadow: var(--shadow-riso-2);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
}
.piaty-btn:not(:disabled):hover  { transform: translate(-2px, -2px); box-shadow: var(--shadow-riso-3); }
.piaty-btn:not(:disabled):active { transform: translate(1px, 1px);   box-shadow: var(--shadow-riso-1); }
.piaty-btn:focus-visible { outline: 3px solid var(--piaty-yellow); outline-offset: 3px; }

/* ============== PIÄTY-INTRO ============== */
.piaty-intro {
  position: relative;
  overflow: hidden;                 /* rajaa vesileiman intron sisään */
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(32px, 5vh, 60px) var(--space-inline) clamp(24px, 3.5vh, 32px);
}
/* Piäty-tunnus himmeänä harmaana VESILEIMANA leipätekstin oikealla, osittain
   tekstin TAKANA (z-index alle). SVG on keltainen → grayscale+brightness
   muuttaa sen vaaleaksi harmaaksi; matala opacity pitää sen hillittynä. */
.piaty-intro-mark {
  position: absolute;
  z-index: 0;
  right: clamp(-40px, -1vw, 8px);   /* vuotaa hieman oikean reunan yli → iso vesileima */
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: clamp(230px, 42vw, 440px);
  height: auto;
  opacity: .08;
  filter: grayscale(1) brightness(1.7);
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 620px) {
  /* Kapealla ruudulla vesileima menisi liikaa tekstin päälle → hillitympi
     ja työnnetään reilummin oikean reunan yli, jotta se jää taustakuvioksi. */
  .piaty-intro-mark { opacity: .05; right: -46px; width: 240px; }
}
.piaty-intro-lead {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--piaty-smoke);
  max-width: 60ch;
  text-wrap: pretty;
}
.piaty-intro-lead strong { color: var(--piaty-bone); font-weight: 600; }
.piaty-intro-lead em { color: var(--piaty-yellow); font-style: normal; font-weight: 600; }
/* "Mikä Piäty on?" — selkeä, nimetty infonappi leipätekstin alla. Yksi
   ⓘ-ikoni + teksti pillerinä: rauhallinen, ammattimainen affordanssi. */
.piaty-intro-info {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--s-4), 2.5vh, var(--s-5));
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, .02);
  color: var(--piaty-bone);
  border: 1.5px solid rgba(var(--piaty-bone-rgb), .22);
  border-radius: var(--r-sm);
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms var(--ease-snap), border-color 160ms var(--ease-snap),
              background 160ms var(--ease-snap), transform 140ms var(--ease-snap);
}
.piaty-intro-info svg { color: var(--piaty-red); flex-shrink: 0; }
/* Näkymätön osuma-aluelaajennus: nappi on visuaalisesti 32px korkea,
   kosketuskohde 44px. */
.piaty-intro-info::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}
.piaty-intro-info:hover {
  border-color: var(--piaty-red);
  background: rgba(var(--piaty-red-rgb), .1);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-riso-1);
}
.piaty-intro-info:active { transform: translate(1px, 1px); box-shadow: none; }
.piaty-intro-info:focus-visible { outline: 2px solid var(--piaty-yellow); outline-offset: 2px; }

/* ============== ETKOT/REISSU-HERO (.piaty-eh) ============== */
.piaty-eh {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--space-inline) clamp(36px, 6vh, 72px);
  display: flex;
  flex-direction: column;
}
/* Kevyt variantti: pienempi padding + ohut yläviiva erottimeksi,
   ei isoa display-otsikkoa, tiiviimmät rivit. */
.piaty-eh.piaty-eh--light {
  padding-top: clamp(var(--s-4_5), 3vh, var(--s-5_5));
  padding-bottom: clamp(var(--s-5), 3.5vh, var(--s-6));
  border-top: 1px solid var(--piaty-line);
}
.piaty-eh--light .piaty-eh-context { margin-bottom: var(--s-3); }
.piaty-eh--light .piaty-eh-row { padding: var(--s-2) 0; }
/* Kevyt yhden rivin huomautus kun tietoja ei ole vielä julkaistu. */
.piaty-eh-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
  color: var(--piaty-smoke);
  max-width: 52ch;
  text-wrap: pretty;
}
/* Kortin eyebrow-typografia: yksi totuus, jotta kortin sisäiset otsakkeet
   (konteksti + jatkot-osio) eivät voi erkaantua toisistaan skaalaa
   säädettäessä — ne näkyvät samassa kortissa muutaman rivin päässä. */
.piaty-eh-context,
.piaty-eh-jatkot-label {
  font-family: var(--font-tag);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: 10.5px;
  color: var(--piaty-smoke);
}
.piaty-eh-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: clamp(var(--s-4_5), 3vh, var(--s-6));
}
.piaty-eh-ctx-label,
.piaty-eh-jatkot-label {
  color: var(--piaty-yellow);
}
.piaty-eh-ctx-game {
  color: var(--piaty-bone);
  opacity: .85;
}
/* Piädyn Etkot -kortin konteksti pinotaan AINA: otsake ylös, ottelu ja
   ajankohta omalle rivilleen alle (sama asu kuin Seuraava reissu -kortin
   rivittyneessä kontekstissa — mutta leveydestä riippumatta). */
.piaty-eh-context--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1_5);
}
.piaty-eh-title {
  margin: 0 0 clamp(28px, 4.5vh, 44px);
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--piaty-yellow);
  letter-spacing: -.005em;
  white-space: nowrap;
}

.piaty-eh-tba {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--piaty-smoke);
  max-width: 44ch;
  text-wrap: pretty;
}

.piaty-eh-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--piaty-line);
}
.piaty-eh-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--piaty-line);
  align-items: baseline;
}
.piaty-eh-row dt {
  font-family: var(--font-tag);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--piaty-smoke);
  line-height: 1.4;
}
.piaty-eh-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.45;
  color: var(--piaty-bone);
  font-weight: 500;
}
.piaty-eh-dim { color: var(--piaty-smoke); font-weight: 400; }
/* "Julkaistaan pian" — kenttäkohtainen placeholder kun tietoa ei vielä ole. */
.piaty-eh-tba-inline {
  color: var(--piaty-smoke);
  font-style: italic;
  font-weight: 400;
}
/* Veljmiesten jatkot -osio Etkot-kortin sisällä (29.7.2026): etkotiedoista
   erottaa OHUT KELTAINEN viiva (border-top), otsake on keltainen samalla
   tag-typolla kuin kortin "Etkot"-konteksti, ja sisältönä on Hemingway’s
   Kuopion virallinen lockup harmaana yksivärisenä (harmaus on itse
   assetissa, assets/hemingways-logo.svg) — hillitty linkki heidän
   Instagramiinsa; hover/focus kirkastaa. Etkot-erittelyn viimeisen rivin
   oma harmaa alaviiva riisutaan (--etkot-modifier), ettei jakoviivasta
   tule tuplarajaa. */
.piaty-eh-list--etkot .piaty-eh-row:last-child { border-bottom: 0; }
.piaty-eh-jatkot-sect {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(var(--piaty-yellow-rgb), .5);
}
/* (Otsakkeen typografia tulee jaetusta .piaty-eh-context-säännöstä yllä.) */

/* Hemingway’s Kuopion virallinen lockup hillittynä linkkinä. JAETTU kahden
   pinnan kesken (Meiningit-kortti + etusivun Jatkot-modaali), jotta merkki
   ei renderöidy kahdessa eri koossa ja himmennyksessä samalla sivustolla —
   koti.html lataa components.css:n, joten sen ei tarvitse toistaa reseptiä. */
.piaty-hemi-mark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  text-decoration: none;
  opacity: .88;
  transition: opacity 140ms var(--ease-snap);
}
.piaty-hemi-mark:hover,
.piaty-hemi-mark:focus-visible { opacity: 1; }
.piaty-hemi-mark img {
  display: block;
  height: 15px;
  width: auto;
  max-width: 100%;
}
/* VAALEALLA pinnalla (notice-sheet = --piaty-bone) assetin oma harmaa
   #9A9A9A jää 1,85:1 kontrastiin — reilusti alle WCAG 1.4.11:n 3:1
   minimin, eli lockup on käytännössä näkymätön. Väri on leivottu SVG:hen
   eikä <img>-elementin väriä voi vaihtaa CSS:llä, joten brightness(0)
   pakottaa merkin mustaksi: se lukeutuu samana musteena kuin sheetin
   leipäteksti (~10:1) ja pysyy silti hillittynä opacityn kautta. */
.piaty-hemi-mark--on-light {
  filter: brightness(0);
  opacity: .8;
}

/* ============== OTTELUOHJELMA (.piaty-sched) ============== */
.piaty-sched {
  /* Läpinäkyvä: jaettu .piaty-stage-veil kulkee otteluohjelman läpi yhtenäisenä,
     jotta sivun alaosa (footeria myöten) himmenee samoin kuin muillakin sivuilla.
     Aiempi kiinteä musta tausta peitti veilin ja jätti footerin kohdalle kovan
     reunaisen "laatikon" (himmennys ei jatkunut alas). */
  background: transparent;
  /* Vaakapehmuste 0: otsikko ja lista keskitetään omalla --container-
     leveydellään ja saavat sivureunuksen --sched-instista → sisältö linjautuu
     introon/etkoihin (sama vasen reuna alas sivua). */
  padding: clamp(24px, 4vh, 44px) 0 clamp(60px, 9vh, 108px);
  border-top: 1px solid var(--piaty-line);
  /* Rivien ja otsikoiden yhteinen vaaka-inset = sivuston yhtenäinen sivureunus,
     jotta otteluohjelman teksti linjautuu muun sisällön kanssa. */
  --sched-inset: var(--space-inline);
}
.piaty-sched-head {
  /* Content-box kuten .piaty-intro/.piaty-eh: max-width rajaa SISÄLLÖN
     760:een ja inset jää sen ulkopuolelle → tekstin vasen reuna osuu
     täsmälleen samaan raiteeseen kuin intron/etkojen teksti joka
     leveydellä. (Aiempi border-box painoi tekstiä insetin verran
     sisemmäs: 380 vs. 340 työpöydällä.) */
  max-width: var(--container);
  margin: 0 auto clamp(var(--s-4_5), 3vh, var(--s-5_5));
  padding: 0 var(--sched-inset);
}
.piaty-sched-eyebrow {
  font-family: var(--font-tag);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--piaty-smoke);
  margin-bottom: var(--s-1_5);
}
.piaty-sched-title {
  margin: 0;
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--piaty-bone);
}

.piaty-sched-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  /* Rivit ovat border-box ja kantavat --sched-insetin itse (korostustausta
     saa vuotaa tekstiraiteen yli) → listan on oltava inset-parin verran
     containeria leveämpi, jotta rivien TEKSTI laskeutuu samalle raiteelle
     kuin muu sisältö. */
  max-width: calc(var(--container) + 2 * var(--sched-inset));
  display: flex;
  flex-direction: column;
}
.piaty-sched-row {
  display: grid;
  grid-template-columns: 36px 92px 1fr auto;
  align-items: baseline;
  gap: var(--s-3);
  /* Ohita näytön ULKOPUOLISTEN ottelurivien tyyli+layout ensimaalauksessa:
     koko kausi (~34 riviä) laski aiemmin layoutin synkronisesti flushSync-
     mountissa (mitattu: ~320 ms forced style+layout 4x CPU:lla). Selain
     ohittaa piilossa olevien rivien layoutin ja laskee sen vasta kun rivi
     lähestyy näkymää. `auto` muistaa todellisen korkeuden ensirenderin
     jälkeen → ei vieritys-CLS:ää. Yläreunan rivit (is-next ym.) ovat
     näkyvissä → renderöityvät heti. */
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
  /* border-box: rivi venyy listan leveyteen (flex stretch), joten inset-
     pehmuste pidetään SISÄLLÄ leveyttä — muuten korostettu tausta ylittäisi
     listan ja työntyisi näytön reunaan. */
  box-sizing: border-box;
  padding: var(--s-3) var(--sched-inset);
  border-top: 1px solid var(--piaty-line);
  color: var(--piaty-bone);
  transition: color 160ms var(--ease-snap);
}
.piaty-sched-row:last-child {
  border-bottom: 1px solid var(--piaty-line);
}
/* Hover on vain pöytäkoneen luku-/skannausapu (rivit eivät ole
   klikattavia) — @media (hover: hover) estää jumiin jäävän hoverin
   kosketuslaitteilla. */
@media (hover: hover) {
  .piaty-sched-row:hover {
    color: var(--piaty-yellow);
  }
  .piaty-sched-row:hover .piaty-sched-date,
  .piaty-sched-row:hover .piaty-sched-dash {
    color: var(--piaty-smoke);
  }
  .piaty-sched-row.is-past:hover {
    opacity: .9;
  }
}

/* Menneet renderöityvät vain Menneet-arkistoon, joten "is-past"
   näkyy aina dimmattuna ilman yliviivausta. */
.piaty-sched-row.is-past {
  opacity: .55;
}

/* ---- Menneet-arkisto ---- */
.piaty-sched-past {
  /* Sama leveys kuin .piaty-sched-list, jotta arkiston otsikko ja rivit
     osuvat samalle tekstiraiteelle kuin tuleva ohjelma. */
  max-width: calc(var(--container) + 2 * var(--sched-inset));
  margin: clamp(var(--s-5_5), 5vh, var(--s-7_5)) auto 0;
  box-sizing: border-box;
}
.piaty-sched-past-head {
  padding: 0 var(--sched-inset) var(--s-1_5);
}
.piaty-sched-past-title {
  margin: 0;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--piaty-smoke);
}

/* Vain seuraava (ensimmäinen tuleva) peli korostuu himmeällä keltaisella
   koko rivin matkalta + keltainen viikonpäivä. Muut rivit pidetään
   neutraaleina, jottei korostus laimene. */
.piaty-sched-list .piaty-sched-row.is-next {
  background: rgba(var(--piaty-yellow-rgb), .12);
  /* Keltainen "tussiveto" vasemmassa reunassa — sama tukiviivakieli kuin
     Veljmiehet-kortin punaisella reunalla (.piaty-kr-card::before).
     inset-varjona, joten ei layout-vaikutusta. */
  box-shadow: inset 3px 0 0 var(--piaty-yellow);
}
.piaty-sched-row.is-next .piaty-sched-day { color: var(--piaty-yellow); }

.piaty-sched-day {
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--piaty-smoke);
}

.piaty-sched-date {
  font-family: var(--font-tag);
  font-weight: 500;
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--piaty-smoke);
  font-variant-numeric: tabular-nums;
}

.piaty-sched-opp {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.2;
  color: var(--piaty-bone);
}
.piaty-sched-home { color: var(--piaty-bone); }
.piaty-sched-dash { color: var(--piaty-bone); font-weight: 400; opacity: .85; }
.piaty-sched-away { color: var(--piaty-bone); }

.piaty-sched-tags {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: flex-end;
  /* PIKSELINTARKKA ASEMOINTI — kaksi lukkoa:
     · Vaaka: badge-blokin OIKEA reuna on lukittu gridin auto-sarakkeeseen
       (.piaty-sched-row: 1fr työntää auto-sarakkeen rivin sisältölaatikon
       oikeaan reunaan). Reuna osuu joka rivillä samaan x:ään badgejen
       määrästä/leveydestä riippumatta — justify-content: flex-end pitää
       sisällön reunassa jos sarake sattuisi levenemään.
     · Pysty: varataan joka riville yhden badgen korkuinen kaista
       (min-height ≈ badge-laatikko 24.25px, pyöristetty ylös → 25px) ja
       keskitetään kaista rivin sisällä. Näin badgeton rivi on TÄSMÄLLEEN
       yhtä korkea kuin badgerivi eikä rivikorkeus elä badgen mukaan. */
  align-self: center;
  min-height: 25px;
}
.piaty-sched-badge {
  font-family: var(--font-tag);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 9.5px;
  padding: var(--s-1) var(--s-2);
  color: var(--piaty-smoke);
  background: transparent;
  border: 1px solid var(--piaty-line);
  white-space: nowrap;
}
.piaty-sched-badge.is-mittelo {
  color: var(--piaty-yellow);
  border-color: rgba(var(--piaty-yellow-rgb), .35);
}
.piaty-sched-badge.is-etkot {
  color: var(--piaty-red);
  border-color: rgba(var(--piaty-red-rgb), .4);
}
/* Vierasottelu (Veljmiesten vierasmatka), ilmoittautuminen EI käynnissä.
   Selkeästi eri kuin MITTELÖ (keltainen umpikehys) ja ETKOT (punainen):
   neutraali bone-sävy + KATKOVIIVAKEHYS = matkan/reitin ele, jotta vierasrivi
   erottuu yhdellä silmäyksellä vierasmatkaksi eikä kotiottelun merkinnäksi.
   Kun ilmoittautuminen on käynnissä, tilalla on .piaty-sched-cta (ILMOITTAUDU). */
.piaty-sched-badge.is-vieras {
  color: var(--piaty-bone);
  border: 1px dashed rgba(var(--piaty-bone-rgb), .5);
  background: transparent;
  letter-spacing: .22em;
}
.piaty-sched-badge.is-harkka {
  color: var(--piaty-bone);
  border-color: rgba(var(--piaty-bone-rgb), .28);
  opacity: .85;
}

/* ----- MOBILE ----- */
@media (max-width: 720px) {
  .piaty-intro {
    padding: var(--s-5) var(--space-inline) var(--s-4);
  }
  .piaty-eh {
    padding: var(--s-5_5) var(--space-inline) var(--s-6);
  }
  .piaty-eh.piaty-eh--light {
    padding-top: var(--s-4);
    padding-bottom: var(--s-4_5);
  }
  /* Kevyet rivit pysyvät mobiilissakin yksirivisinä (label vasemmalla,
     arvo oikealla) tiiviillä paddingilla — ei koko ruudun vievää pinoa. */
  .piaty-eh--light .piaty-eh-row {
    grid-template-columns: minmax(116px, 42%) 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    align-items: baseline;
  }
  .piaty-eh--light .piaty-eh-row dd { font-size: 14px; }
  .piaty-eh-title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .piaty-eh-row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
    padding: var(--s-3) 0;
  }
  .piaty-eh-row dd { font-size: 15px; }

  .piaty-sched {
    padding: var(--s-5) 0 var(--s-8);
  }
  .piaty-sched-row {
    /* Kiinteä päiväsarake: auto-leveys eli sisällön mitta (TI 11.5px …
       SU 16.6px) repi ottelunimien vasemman reunan eri kohtaan joka
       rivillä. 20px kattaa leveimmänkin viikonpäivän ja lukitsee
       otsikkosarakkeen yhteen pystylinjaan. */
    grid-template-columns: var(--s-4_5) 1fr auto;
    grid-template-areas:
      "day  opp   tags"
      "day  date  tags";
    column-gap: var(--s-3);
    row-gap: var(--s-0_5);
    /* Sivutäyte = sivuston yhtenäinen sivureunus (--sched-inset =
       --space-inline), jotta viikonpäiväsarake alkaa samasta raiteesta
       kuin OTTELUOHJELMA-otsikko ja intron teksti — aiempi 12px jätti
       rivit 8px muuta sisältöä ulommas. Korostettu (is-next) tausta
       kulkee yhä reunasta reunaan rivin oman taustan mukana. */
    padding: var(--s-2) var(--sched-inset);
  }
  .piaty-sched-day { grid-area: day; font-size: 10px; align-self: center; }
  .piaty-sched-date { grid-area: date; font-size: 11px; }
  .piaty-sched-opp  { grid-area: opp;  font-size: 14px; }
  /* Kaksirivinen mobiiligrid: tag-kaista ulottuu sekä joukkuenimi- että
     päivämäärärivin yli. align-self: start pitää badgen ylälaidassa
     (joukkuenimirivin tasalla, kuten ennenkin) — varattu kaista estää silti
     rivikorkeuden elämisen. */
  .piaty-sched-tags { grid-area: tags; align-self: start; }
  .piaty-sched-badge { font-size: 9px; padding: var(--s-1) var(--s-1_5); letter-spacing: var(--track-tag); }
}
/* Erityisen kapeilla näytöillä (≤360 px) badget PYSYVÄT yhdellä rivillä
   vierekkäin — mitattu: kaksi badgea + väli mahtuu 320 px:iin ilman
   viewport-ylitystä (opp-sarake, 1fr, kutistuu ja badge-blokki pysyy
   ankkuroituna oikeaan reunaan, ~12 px pelivara). Aiempi pystypino teki
   kaksibadge-riveistä ~16 px muita korkeampia (rivikorkeus hyppäsi) ja
   sekoitti badgejen pystykeskityksen — siksi pino poistettiin. Rivilayout,
   oikea reuna ja pystykaista periytyvät yllä olevista säännöistä. */