/*
  #nopeus-osio kampanjasivulla (index.html).

  Oma tiedostonsa, koska css/style.css on jo yli 2 200 riviä eikä uutta
  osiokohtaista CSS:ää lisätä sinne. Linkitetään vain etusivulta.

  Renkaat eivät väritä huonoa tulosta erottuvasti: kaikki ovat samaa vihreää
  riippumatta pistemäärästä. Kolmivärinen Lighthouse-asteikko (vihreä/keltainen/
  punainen) sopii raporttiin, mutta täällä yksi keltainen rengas kolmen vihreän
  joukossa lukisi virheenä siinä missä se on vain matalampi luku samalla
  tasolla — myyntisivu ei ole auditointidokumentti.

  Osio on kaksi valkoista korttia sävytetyllä kaistalla: yhteenveto (teksti,
  keskiarvorengas ja kolme osa-aluekorttia) ja sivustokohtainen taulukko.
  Aiempi versio oli 3×3 ruudukko identtisiä kortteja, joissa sama kolmen
  selitteen sarja toistui seitsemästi — luvut hukkuivat toistoon.
*/

:root {
  --speed-ring: #3F6B0E;
  --speed-track: #E8E8E4;
  /* Renkaan ja osa-aluekorttien väli. Sama luku ohjaa myös pisteviivan
     pituutta (.speed-metric::before), joten viiva ylittää välin tasan. */
  --speed-hero-gap: 30px;
}

/* -------------------- #nopeus-osio -------------------- */

/* Sävytetty kaista erottaa osion naapureistaan; sen päällä olevat kaksi
   valkoista korttia erottavat yhteenvedon taulukosta. */
.speed {
  background: var(--panel-tint);
  border-block: 1px solid var(--border);
}

/* -------------------- Yhteenvetokortti -------------------- */

.speed-panel {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 4vw, 44px);
}

.speed-top {
  display: grid;
  gap: clamp(28px, 5vw, 44px);
  align-items: center;
}

/* Teksti ja kuvio rinnakkain vasta kun kumpikin mahtuu omalle puolelleen
   täysimittaisena. 900–1119 pikselin välissä teksti on koko leveydellä ja
   rengas kortteineen sen alla keskitettynä: kapeampi jako litistäisi joko
   otsikon tai osa-aluekortit. */
@media (min-width: 1120px) {
  .speed-top {
    grid-template-columns: minmax(0, 1fr) 502px;
    gap: 46px;
  }
}

/* Globaali .kicker on keskitetty flex ja section h2 keskitetty teksti;
   tässä osiossa molemmat tasataan vasempaan työpöydällä. */
.speed-lede .kicker {
  justify-content: center;
}

.speed-lede h2 {
  text-align: center;
  margin-bottom: 16px;
}

.speed-intro {
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
  color: var(--text-2);
}

@media (min-width: 900px) {
  .speed-lede .kicker { justify-content: flex-start; }
  .speed-lede h2 { text-align: left; }
  .speed-intro { margin-inline: 0; text-align: left; }
}

.speed-badges {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}

@media (min-width: 560px) {
  .speed-badges { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.speed-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.speed-badge-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--speed-ring);
}

.speed-badge-icon svg {
  width: 18px;
  height: 18px;
}

.speed-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.speed-badge-text strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.speed-badge-text span {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-2);
}

/* -------------------- Keskiarvorengas ja osa-aluekortit -------------------- */

.speed-hero {
  display: grid;
  gap: 20px;
  justify-items: center;
}

.speed-hero-figure {
  position: relative;
  width: 100%;
  max-width: 264px;
}

/* Hyvin vaalea vihreä sävy renkaan sisällä. Erottaa kehän sisuksen valkoisesta
   kortista sen verran, ettei luku kellu tyhjässä — ei niin paljon, että se
   lukisi omana pintanaan. Inset pitää sävyn kaaren sisäpuolella. */
.speed-hero-figure::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(168, 232, 75, 0.16), rgba(168, 232, 75, 0.03) 62%, rgba(255, 255, 255, 0) 78%);
}

.speed-hero-ring {
  display: block;
  width: 100%;
}

.speed-hero-ring circle {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.speed-hero-track { stroke: var(--speed-track); }

/* Liukuväri on HTML:ssä (defs#speedHeroArc): kaari kulkee tummasta vihreästä
   limeen, jolloin sen alku ja loppu erottuvat toisistaan ilman erillistä
   merkintää. Fallback ei tarvita — defs on samassa dokumentissa. */
.speed-hero-arc { stroke: url("#speedHeroArc"); }

/* Renkaan sisähalkaisija on 264 px:n koossa noin 206 px. 32 px:n vaakapehmuste
   kummallakin puolella jättää tekstille 200 px, eli selite katkeaa kahdelle
   riville eikä leikkaa kaarta. */
.speed-hero-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0 32px;
  text-align: center;
  pointer-events: none;
}

/* Mallissa luku on noin kolmasosa renkaan halkaisijasta ja sen ympärillä on
   reilusti tyhjää. 4rem osuu suhteeseen 0,34; 5rem oli 0,43 eli luku puski
   kaarta vasten. */
.speed-hero-num {
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
}

/* Leveys on rajattu, jotta selite katkeaa kahdelle riville: yhdellä rivillä
   se olisi 145 px leveä ja hipoisi kaarta renkaan sisäreunassa. */
.speed-hero-cap {
  max-width: 132px;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--text-2);
}

/* Merkki on suorakaide pyöristetyin päin, joten sen alakulmat ovat renkaan
   sisäpuolen kriittisin kohta: 0,75rem ja 14 px:n pehmuste työnsivät ne
   3 px kaaren yli. Nykyisillä arvoilla varaa on 5 px per puoli. */
.speed-hero-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.speed-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 340px;
  display: grid;
  gap: 14px;
}

/* Kortti on kolmirivinen ruudukko: ikoni vasemmassa sarakkeessa kahden
   ensimmäisen rivin yli, selite ja luku sen oikealla puolella, palkki
   koko leveydeltä alimmalla rivillä. */
.speed-metric {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  padding: 15px 17px 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 28px -20px rgba(24, 24, 24, 0.38);
}

.speed-metric-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-tint);
  color: var(--speed-ring);
}

.speed-metric-icon svg {
  width: 20px;
  height: 20px;
}

.speed-metric-label {
  grid-column: 2;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}

.speed-metric-num {
  grid-column: 2;
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Palkki kertoo asteikon: pelkkä 91 ei kerro lukijalle onko luku lähellä
   sataa vai kaukana siitä. Leveys tulee HTML:n --speed-metric-fill-arvosta,
   joka on sama luku kuin kortissa näkyvä. */
.speed-metric-bar {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 14px;
  border-radius: var(--radius-pill);
  background: var(--speed-track);
  overflow: hidden;
}

/* Palkki on brändivihreä eikä renkaiden tumma sävy: mallissa se on kortin
   kevyin elementti, ja tummana se painoi enemmän kuin kortin oma luku. */
.speed-metric-bar > span {
  display: block;
  height: 100%;
  width: var(--speed-metric-fill, 100%);
  border-radius: inherit;
  background: var(--brand);
}

/* Rengas ja kortit rinnakkain heti kun leveyttä on: pystyyn pinottuna
   kolme korttia renkaan alla venyttää osion turhan pitkäksi. Raja on 680 px,
   koska rengas + väli + kortti vaatii 562 px ja paneelin sisus yltää siihen
   vasta siellä. Kiinteä sarake ei kutistu, eli sitä kapeammalla ruudulla
   kortit valuisivat paneelin pehmusteen päälle. */
@media (min-width: 680px) {
  /* align-items: center on pakollinen: venyvä sarake kasvattaisi renkaan
     laatikon korttipinon korkuiseksi, jolloin sen sisällä absoluuttisesti
     keskitetty luku valuisi kaaren keskeltä alaspäin. */
  .speed-hero {
    grid-template-columns: 264px minmax(0, 268px);
    justify-items: stretch;
    justify-content: center;
    align-items: center;
    gap: var(--speed-hero-gap);
  }

  .speed-metrics { max-width: none; }

  /* Pisteviiva sitoo kortin renkaaseen. Se piirretään kortin omaan
     ::before-elementtiin eikä SVG:hen, jolloin viiva osuu aina kortin
     pystykeskelle riippumatta siitä kuinka korkeaksi kortti kasvaa.

     Pituus on väli + 13 px: kaaren ulkoreuna on 119 px keskeltä mutta
     renkaan laatikko 132 px, joten pelkän välin mittainen viiva jäisi
     13 px irti kaaresta. Kaikki kolme ovat samanmittaisia, jolloin niiden
     päät osuvat samalle pystylinjalle ja keskimmäinen koskettaa kaarta. */
  .speed-metric::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(var(--speed-hero-gap) + 13px);
    border-top: 1.5px dotted #C9C9C2;
  }

  /* Piste viivan päässä, kuten mallissa: se päättää viivan siistiin
     pisteeseen sen sijaan että se haipuisi kesken. */
  .speed-metric::after {
    content: "";
    position: absolute;
    right: calc(100% + var(--speed-hero-gap) + 13px - 2.5px);
    top: calc(50% - 2.5px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C9C9C2;
  }
}

/* Rengas on leveämpi kuin kortti, kuten mallissa: kortti kaventuu 208
   pikseliin, mikä riittää yhä pisimmälle selitteelle ("Parhaat käytännöt")
   yhdellä rivillä. Yhteensä 264 + 30 + 208 = 502 px eli .speed-topin
   oikea sarake. */
@media (min-width: 1120px) {
  .speed-hero {
    grid-template-columns: 264px minmax(0, 208px);
  }
}

/* -------------------- Taulukkokortti -------------------- */

/* Työpöydän yhteinen valkoinen kortti tulee vasta 900px:stä ylöspäin.
   Mobiilissa jokainen .speed-site on oma korttinsa (alempana), joten
   sama kehys tässä loisi kortin sisään toisen kortin. */
.speed-table {
  margin-top: clamp(20px, 3vw, 28px);
}

@media (min-width: 900px) {
  .speed-table {
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 8px clamp(16px, 3vw, 28px);
  }
}

/* Sarakeotsikot näkyvät vain kun rivi on vaakasuora. Kapealla näytöllä
   selitteet ovat renkaiden alla (.speed-ring-label). */
.speed-table-head {
  display: none;
}

@media (min-width: 900px) {
  /* Kolmas sarake on rivin nuolelle (.speed-site::after). Otsikkorivillä se
     jää tyhjäksi, jotta sarakeotsikot pysyvät renkaiden kohdalla. */
  .speed-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 342px 22px;
    gap: 24px;
    align-items: end;
    padding: 18px 12px 12px;
  }

  .speed-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-2);
  }
}

/* Nuolet vain mobiilissa: työpöydällä koko taulukko näkyy kerralla eikä
   mitään ole vieritettävää. Sama piiloutumislogiikka kuin toiminto-
   karusellissa (js/mittaus.js): HTML:ssä hidden, JS paljastaa jos rataa
   oikeasti voi vierittää. */
.speed-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 900px) {
  .speed-nav {
    display: none;
  }
}

.speed-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.speed-nav-btn svg {
  width: 18px;
  height: 18px;
}

.speed-nav-btn:hover:not(:disabled) {
  border-color: var(--text);
}

.speed-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Mobiilissa seitsemän riviä allekkain oli pitkä lista jota piti vierittää
   koko sivun mukana. Vaakasuora slideshow näyttää yhden sivuston kerrallaan
   omana korttinaan, ja seuraava kortti kurkistaa reunasta samaan tapaan
   kuin toiminto-osion karusellissa (kertoo vieritettävyyden ilman erillistä
   ohjetekstiä). Työpöydällä koko taulukko mahtuu kerralla näkyviin, joten
   rata palautuu tavalliseksi pystylistaksi. */
.speed-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.speed-grid::-webkit-scrollbar {
  display: none;
}

/* Näppäimistövieritys tarvitsee tabindexin, ja tabindex tarvitsee
   näkyvän fokuksen. */
.speed-grid:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .speed-grid {
    display: block;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* position: relative on rivin linkin peittoa varten (.speed-site-link::after
   venyy koko rivin yli), joten koko rivi avaa demon myös mobiilikortissa. */
.speed-site {
  position: relative;
  flex: 0 0 80%;
  scroll-snap-align: start;
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .speed-site {
    flex: initial;
    scroll-snap-align: none;
    grid-template-columns: minmax(0, 1fr) 342px 22px;
    gap: 24px;
    align-items: center;
    padding: 16px 12px;
    background: none;
    border-radius: 14px;
    box-shadow: none;
    border-top: 1px solid var(--border);
    transition: background-color 0.18s ease;
  }

  .speed-grid > .speed-site:first-child {
    border-top: 0;
  }

  .speed-site:hover {
    background: var(--panel-tint);
  }

  /* Rivin nuoli. CSS-koriste eikä ikoni HTML:ssä: se toistuisi muuten
     seitsemästi ilman että ruudunlukija saa siitä mitään. */
  .speed-site::after {
    content: "";
    width: 9px;
    height: 9px;
    justify-self: center;
    border-top: 2px solid #B4B4AE;
    border-right: 2px solid #B4B4AE;
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .speed-site:hover::after {
    border-color: var(--speed-ring);
    transform: translateX(3px) rotate(45deg);
  }
}

.speed-site-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Pikkukuva sitoo luvut oikeaan sivustoon: pelkkä nimi ei kerro lukijalle,
   minkä esimerkkisivuston tulos on kyseessä. */
.speed-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-tint);
}

.speed-site-text {
  display: flex;
  min-width: 0;
}

.speed-site-name {
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  transition: color 0.18s ease;
}

/* Linkki kattaa nimen ja toimialarivin mutta ei renkaita: saavutettava nimi
   on "Annapurna Ravintola · Helsinki", ei koko rivin kolmea pistelukua.
   ::after peittää silti koko rivin, joten rivi on kokonaan klikattava. */
.speed-site-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* z-index nostaa peiton rivin muun sisällön yli. Ilman sitä renkaiden luvut
   (position: absolute) ja rivin nuoli (transform) piirtyvät peiton päälle, ja
   klikki juuri niiden kohdalla ei avaisi demoa. */
.speed-site-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.speed-site-link:hover .speed-site-name {
  color: var(--brand);
}

.speed-site-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Toimiala ja paikkakunta samalla sanamuodolla kuin Esimerkit-osion
   korteissa. Nuoli-ikoni kertoo että linkki avautuu uuteen välilehteen. */
.speed-site-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-2);
}

.speed-site-kind svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--brand);
}

.speed-rings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.speed-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Wrapper on suhteellinen, jotta luku voidaan asemoida absoluuttisesti
   renkaan keskelle ilman että se vaikuttaa asetteluun. */
.speed-ring-shape {
  position: relative;
  width: 52px;
  height: 52px;
}

.speed-ring-shape svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* Ohut kehä: rivillä on seitsemän kertaa kolme rengasta, ja paksumpana ne
   veivät katseen sivuston nimeltä. */
.speed-ring circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.speed-ring-track { stroke: var(--speed-track); }

.speed-ring circle:last-child { stroke: var(--speed-ring); }

.speed-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--speed-ring);
}

.speed-ring-label {
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: var(--text-2);
}

@media (min-width: 900px) {
  .speed-ring-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .speed-grid {
    scroll-behavior: auto;
  }
}