/*
  Asiakastarinat omana osionaan (#referenssit).

  Osio käyttää Älysivut-sivun olemassa olevia väri-, typografia- ja
  kulmatokeneita. Jokainen referenssi muodostuu keskitetystä otsikosta sekä
  leveästä kuva- ja tekstipalstan kortista. Mockup on varsinainen todiste
  tehdystä työstä, joten sille annetaan kortissa suurin pinta-ala.
*/

.reference {
  background: var(--surface);
}

.reference .container {
  max-width: 1160px;
}

/*
  Osio oli 4 135 px korkea eli 18 % koko sivusta (mittaus 3.8.2026): neljä
  tarinaa peräkkäin, jokainen oma leveä kortti ja sen yläpuolella jopa
  4,2 rem:n keskitetty otsikko. Kun #hinta nostettiin sivun alkupuolelle,
  tämä osio siirtyi sen alle — ja sivun loppupuolella oleva 4 000 px:n
  todistelohko on se kohta jossa lukeminen loppuu.

  Tiivistys: otsikot normaaliin kokoon, tarinat kahteen sarakkeeseen
  leveillä ruuduilla ja kortin sisältö pinoon. Yhtään tarinaa, sitaattia,
  nimeä tai linkkiä ei poistettu — vain mittakaava muuttui.
*/
.ref-list {
  display: grid;
  gap: clamp(40px, 4.5vw, 56px);
}

/* Kahteen sarakkeeseen vasta 1000 px:stä: 1160 px:n containerissa kortti on
   silloin ~560 px, mikä riittää pinotulle kortille. Sitä kapeammalla kortit
   jäävät yhteen sarakkeeseen kuten ennenkin. */
@media (min-width: 1000px) {
  .ref-list {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}

/* Osiotason nimilappu gridin yläpuolella. Asui aiemmin ensimmäisen tarinan
   headerissa, mikä teki siitä yhdestä otsikosta 32 px muita korkeamman ja
   siirsi koko kortin alemmas. */
.ref-list-kicker {
  margin-bottom: clamp(20px, 3vw, 28px);
}

/*
  Tarina on gridin item ja venyy rivin korkeuteen. Flex-pino + kortin flex: 1
  saa kortin täyttämään sen, jolloin samalla rivillä olevat kortit päättyvät
  samaan kohtaan vaikka sitaatit ovat eri mittaisia. Ilman tätä korkeudet
  olivat 741 / 766 / 766 / 818 px eikä yksikään pari ollut tasan.
*/
.ref-story {
  display: flex;
  flex-direction: column;
}

.ref-story-header {
  max-width: 860px;
  margin: 0 auto clamp(16px, 2vw, 22px);
  text-align: center;
}

.ref-story-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* -------------------- Leveä asiakastarinakortti -------------------- */

.ref-story-card {
  display: grid;
  /*
    Kuvarivi sisällön kokoiseksi, sitaattirivi ottaa lopun. Ilman tätä
    molemmat rivit ovat auto ja venyvät jakaen kortin ylimääräisen tilan
    sisältönsä suhteessa: kaksirivisen sitaatin kortissa kuvalohko venyi
    418 px:iin ja kolmirivisen kortissa 405 px:iin, jolloin sitaatti alkoi
    13 px eri kohdasta vaikka kortit olivat samankorkuiset.

    Pätee vain pinotussa kortissa. 900–999,98 px:ssä kortti on
    kaksisarakkeinen, ja siellä tämä palautetaan yhteen riviin — muuten
    toinen rivi jäisi tyhjänä venymään kortin alalaitaan.
  */
  grid-template-rows: auto 1fr;
  /* Täyttää tarinan koko korkeuden, ks. .ref-story yllä. */
  flex: 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 58px -34px rgba(24, 24, 24, 0.2);
}

.ref-story-media {
  min-width: 0;
  padding: clamp(10px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fbfbfa;
}

/*
  Kuvalaatikon korkeus tulee kiinteästä kuvasuhteesta, ei kuvan omista
  mitoista. Kolme neljästä referenssilevystä on 1620×971, mutta playcut_ref.png
  on 1448×1086 — height: auto teki siitä 387 px korkean muiden ollessa 310 px,
  ja koko vihreä sitaattilohko alkoi 77 px muita alempaa samalla rivillä.

  contain eikä cover: cover leikkaisi noin viidenneksen poikkeavan levyn
  ylä- ja alareunasta, eli laitemockupista. Nyt se skaalautuu kokonaan ja
  jättää sivuille tyhjää, mikä näyttää tarkoitukselliselta koska laatikossa
  on jo oma #fbfbfa-pohja.

  Tämä on suoja, ei korvaava ratkaisu: oikea korjaus on tuottaa PlayCutin
  levy 1620×971:nä muiden tapaan. Suoja pitää rivin suorassa siihen asti ja
  jatkossa, jos joku lisää taas väärän kokoisen kuvan.
*/
.ref-story-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1620 / 971;
  object-fit: contain;
}

.ref-media-caption {
  align-self: stretch;
  margin: 14px clamp(4px, 1vw, 10px) 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-2);
}

/*
  Sisältö ylös eikä pystykeskitettynä. Kortit ovat nyt samankorkuisia, mutta
  keskitys ratkeaa sisällön korkeutta vasten: kaksirivinen sitaatti asettui
  12 px eri kohtaan kuin kolmirivinen, eli tähdet eivät olleet samalla rivillä
  vierekkäisissä korteissa. Ylös sidottuna tähdet ja sitaatin alku osuvat
  kohdakkain, ja linkki painetaan alareunaan (.ref-link margin-top: auto),
  jolloin myös napit ovat samalla korkeudella.
*/
.ref-story-copy {
  padding: clamp(30px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(168, 232, 75, 0.17), transparent 44%),
    #f4f7ef;
}

.ref-stars {
  margin: clamp(20px, 2.2vw, 26px) 0 0;
  color: #f2b705;
  letter-spacing: 0.16em;
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(242, 183, 5, 0.22));
}

.ref-story-quote {
  margin: 12px 0 0;
}

.ref-story-quote p {
  margin: 0;
  max-width: 25ch;
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}

/* -------------------- Asiakas ja linkki -------------------- */

.ref-person {
  margin-top: clamp(22px, 2.4vw, 28px);
  /* Vähimmäisväli linkkiin. Se asui ennen .ref-linkin margin-topissa, mutta
     linkki tarvitsee margin-top: auton painuakseen kortin alareunaan. */
  margin-bottom: clamp(24px, 2.5vw, 30px);
  display: flex;
  align-items: center;
  gap: 16px;
}

.ref-person p {
  margin: 0;
  min-width: 0;
}

.ref-person-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.ref-person-avatar-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 10px;
  background: #181818;
  border-radius: 18px;
}

.ref-person-avatar-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.ref-name {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.ref-role {
  display: block;
  margin-top: 3px;
  color: var(--text-2);
}

.ref-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* auto painaa linkin kortin alareunaan, jolloin napit ovat samalla
     korkeudella vaikka sitaatit ovat eri mittaisia. Vähimmäisväli tulee
     .ref-personin margin-bottomista. */
  margin-top: auto;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.ref-link:hover,
.ref-link:focus-visible {
  color: var(--lime-ink);
  background: var(--lime);
}

.ref-link:active {
  transform: translateY(1px);
}

.ref-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* -------------------- Responsiivisuus -------------------- */

/* Vierekkäinen kuva + teksti vain siinä välissä jossa kortti on koko
   containerin levyinen. 1000 px:stä ylöspäin kortteja on kaksi rinnakkain,
   jolloin 340 px:n tekstipalsta ei enää mahdu kuvan viereen. */
@media (min-width: 900px) and (max-width: 999.98px) {
  .ref-story-card {
    grid-template-columns: minmax(0, 1.65fr) minmax(340px, 0.95fr);
    /* Kaksisarakkeisena kortti on yksirivinen. Ilman tätä perustyylin
       "auto 1fr" jättäisi tyhjän 1fr-rivin venymään kortin alle. */
    grid-template-rows: auto;
  }

  .ref-story-media img {
    width: 92%;
    max-width: none;
  }
}

/* Kaksi saraketta: kortti pinoon ja sisältö pienempään mittakaavaan, jotta
   kaksi tarinaa mahtuu rinnakkain ilman että sitaatti tai nimi jää tyngäksi. */
@media (min-width: 1000px) {
  .ref-story-quote p {
    font-size: 1.3rem;
    max-width: none;
  }

  .ref-story-copy {
    padding: 26px 28px 30px;
  }

  .ref-story-media {
    aspect-ratio: 16 / 10;
  }

  .ref-story-media:has(.ref-media-caption) {
    aspect-ratio: auto;
  }

  .ref-media-caption {
    font-size: 0.86rem;
    line-height: 1.5;
  }
}

@media (max-width: 899px) {
  .ref-story-header {
    margin-bottom: 24px;
  }

  .ref-story-media {
    aspect-ratio: 16 / 10;
  }

  .ref-story-media:has(.ref-media-caption) {
    aspect-ratio: auto;
  }

  .ref-story-copy {
    padding-top: 30px;
  }

  .ref-story-quote p {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .reference .container {
    padding-inline: 16px;
  }

  /* Mobiili on liikenteen pääosa, joten tiivistys koskee sitä ensisijaisesti:
     ilman näitä kahta riviä osio olisi puhelimessa yhä 64 px:n välein
     ladottuja tarinoita jopa 3 rem:n otsikoilla. */
  .ref-list {
    gap: 36px;
  }

  .ref-story-header h2 {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  }

  .ref-story-card {
    border-radius: 20px;
  }

  .ref-story-media {
    padding: 16px 10px;
  }

  .ref-story-copy {
    padding: 28px 24px 30px;
  }

  .ref-story-quote {
    margin-top: 12px;
  }

  .ref-person {
    margin-top: 24px;
  }

  .ref-person-avatar {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .ref-link {
    width: 100%;
    margin-top: 28px;
  }
}

/* -------------------- Todistenauha (heron jälkeen) -------------------- */

/*
  Asiakastodiste heron sisällä.

  Tämä korvaa 6.8.2026 aiemman section.proof-nauhan, joka oli heron ALLA.
  Nauhan tehtävä oli näyttää todiste ennen hintaa, mutta hinta muuttui
  samalla heron osaksi (tarjouskortti) — nauha oli siis myöhässä omasta
  tehtävästään ja jäi taitteen taakse juuri niiltä kävijöiltä jotka
  epäröivät hintaa.

  Laatikko on tarkoituksella hiljainen: logot harmaana, ei omaa nappia.
  Se ei saa kilpailla heron CTA:n kanssa, vaan poistaa epäilyn siitä onko
  takana oikeita asiakkaita.

  Logot ovat samat neljä asiakasta kuin #referenssit-osiossa. Jos lisäät
  tarinan sinne, lisää logo myös tänne — muuten laatikko lupaa vähemmän
  kuin sivulla on.
*/
/*
  Kasvorivi + asiakasmäärä, ei logoja.

  Kaksi aiempaa versiota latoi laatikkoon neljä harmaasävyistä
  asiakaslogoa. Pieninä (28 px) eri muotoiset logot lukivat harmaina
  täplinä eivätkä todisteena, ja harmaus söi niistä tunnistettavuuden —
  eli juuri sen minkä takia logo ylipäätään näytetään. Kasvot toimivat
  tässä koossa, koska ihmiskasvon tunnistaa 40 pikselistä mutta
  sanamerkkiä ei.

  Koko laatikko on yksi linkki asiakastarinoihin: pieni nuolilinkki oli
  ainoa klikattava kohta 460 px:n laatikossa.
*/
.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 28px;
  padding: 14px 22px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.hero-proof:hover {
  border-color: rgba(24, 24, 24, 0.18);
  box-shadow: var(--shadow-card);
}

/*
  Limittyvä logopallorivi. Valkoinen rengas erottaa pallot toisistaan, ja
  limitys luetaan "näitä on monta" -merkkinä ilman selitystä.

  ── MIKSI POHJA ON VALKOINEN ───────────────────────────────────────────────
  Logot vaihdettiin 6.8.2026 asiakkaiden omilta sivuilta ladattuihin
  versioihin, jotka on tarkoitettu vaalealle pohjalle: ASA on musta
  (mitattu keskiluminanssi 0), PlayCutin maskotti tumma (92) ja BBN tumma
  merkki läpinäkymättömällä valkoisella. Sivustolla aiemmin olleet ASA- ja
  PlayCut-tiedostot olivat valkoisia versioita (255), eli juuri siksi ne
  olivat valkoisella pohjalla näkymättömiä.

  Pallon täyttö on PUHDAS valkoinen eikä sävytetty, koska BBN:n logo tuo
  mukanaan oman läpinäkymättömän valkoisen neliönsä: sävytetyllä pohjalla
  neliön reuna näkyisi pallon sisällä. Pallot erotetaan toisistaan
  hiusviivarenkaalla, ei täyttövärillä.

  ── MIKSI LOGOT ON RAJATTU ─────────────────────────────────────────────────
  Shokissa ja ASA:ssa on tunnus vasemmassa reunassa ja sanamerkki sen
  oikealla puolella. Kokonainen logo 48 px:n pallossa jäisi 6-9 px
  korkeaksi eli lukukelvottomaksi, joten pallossa näkyy vain tunnus.
  BBN ja PlayCutin maskotti ovat jo valmiiksi yksittäisiä tunnuksia.

  Rajaus tehdään alkuperäisistä logotiedostoista eikä käsin leikatuista
  neliökopioista: kopiot jäisivät päivittymättä kun asiakas vaihtaa
  logonsa. Kuva skaalataan --kuva-leveyteen ja .hero-proof-rajaus
  leikkaa siitä tunnuksen kokoisen ikkunan (--lev x --kork), joka
  keskitetään palloon.

  Pelkkä kuvan siirtäminen EI riitä, ja se oli ensimmäisen version virhe:
  pallo on 48 px leveä mutta esimerkiksi Shokin salama vain 21 px, joten
  loput 27 px näyttivät sanamerkin alkua. Ikkunan pitää olla tunnuksen
  kokoinen, ei pallon.

  Arvot on laskettu logojen mustepikselien rajoista 6.8.2026:

    Shokki   tunnus = vasen 22,7 % leveydestä, täyskorkea
    ASA      tunnus = vasen 38,8 % leveydestä, täyskorkea
    BBN      koko tiedosto (pyöreä merkki)
    PlayCut  koko tiedosto (maskotti ilman sanamerkkiä)

  Jos logotiedosto vaihtuu, mittaa uudelleen: väärä arvo näkyy heti
  sanamerkin reunana pallossa.
*/
.hero-proof-logot {
  display: flex;
  flex-shrink: 0;
}

.hero-proof-pallo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  /* Valkoinen reunus erottaa limittyvät pallot toisistaan, hiusviivarengas
     erottaa pallon valkoisesta laatikosta. Pelkkä toinen ei riitä: ilman
     rengasta reuna katoaa taustaan, ilman valkoista reunusta pallot
     sulautuvat toisiinsa. */
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 24, 0.12), 0 1px 3px rgba(24, 24, 24, 0.08);
}

.hero-proof-pallo + .hero-proof-pallo {
  margin-left: -13px;
}

/* Tunnuksen kokoinen ikkuna, keskitettynä palloon. --k skaalaa ikkunan ja
   kuvan yhdessä, joten pienemmällä pallolla ei tarvitse mitata arvoja
   uudelleen — yksi kerroin riittää eikä rajaus pääse ajautumaan. */
.hero-proof-rajaus {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(var(--lev) * var(--k, 1));
  height: calc(var(--kork) * var(--k, 1));
}

.hero-proof-rajaus img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--kuva) * var(--k, 1));
  height: auto;
  max-width: none;
}

/* BBN on pyöreä merkki läpinäkymättömällä valkoisella neliöllä. Neliö
   katoaa valkoiseen palloon, joten sitä ei tarvitse rajata eikä kääntää. */
.hero-proof-pallo-bbn .hero-proof-rajaus {
  --lev: 34px;
  --kork: 34px;
  --kuva: 34px;
}

/*
  Shokki on ainoa pallo tummalla pohjalla, ja se on tarkoituksellista.

  Shokin logo on limenvihreä #A0F000 eikä siitä ole vaalealle pohjalle
  tarkoitettua versiota. Valkoisella sen kontrasti on 1,4:1 eli salama
  jää haaleaksi läiskäksi. Kolmen kontrastin saavuttaminen vaatisi värin
  tummentamista 35 % (#689C00), mikä olisi eri väri kuin asiakkaan
  brändiväri — sitä ei muuteta. Tumma pallo on se pohja jolle logo on
  suunniteltu, ja siinä kontrasti on 11,9:1.

  Jos Shokilta saadaan tumma logoversio, vaihda tiedosto ja poista tämä
  taustasääntö — silloin kaikki neljä palloa ovat valkoisia.
*/
.hero-proof-pallo-shokki {
  background: var(--ink-deep);
}

.hero-proof-pallo-shokki .hero-proof-rajaus {
  --lev: 21px;
  --kork: 30px;
  --kuva: 92px;
}

.hero-proof-pallo-asa .hero-proof-rajaus {
  --lev: 30px;
  --kork: 26px;
  --kuva: 77px;
}

/* Maskotti on jo yksittäinen tunnus ilman sanamerkkiä: ei rajausta,
   pelkkä sovitus 30 px:n korkeuteen. */
.hero-proof-pallo-playcut .hero-proof-rajaus {
  --lev: 23px;
  --kork: 30px;
  --kuva: 23px;
}

.hero-proof-teksti {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hero-proof-arvio {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-wrap: pretty;
}

.hero-proof-rivi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.85rem;
  color: var(--text-2);
}

.hero-proof-rivi b {
  font-weight: 600;
  color: var(--text);
}

.hero-proof-tahdet {
  color: #E8A33D;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.hero-proof-linkki {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

.hero-proof:hover .hero-proof-linkki {
  text-decoration: underline;
}

.hero-proof-linkki svg {
  width: 14px;
  height: 14px;
}

/* Mobiilissa .hero-text on display: contents, joten laatikko on suora
   grid-item ja tarvitsee oman järjestyslukunsa. Ilman sitä se saisi
   oletuksen 0 ja hyppäisi badgen yläpuolelle pinon huipulle. */
@media (max-width: 859.98px) {
  .hero-proof {
    order: 9;
    justify-self: center;
    margin-top: 24px;
  }
}

@media (max-width: 400px) {
  .hero-proof {
    gap: 12px;
    padding: 12px 16px 12px 12px;
  }

  .hero-proof-pallo {
    width: 42px;
    height: 42px;
    /* Sama optinen marginaali pallon reunaan kuin 48 px:n koossa. */
    --k: 0.86;
  }

  .hero-proof-pallo + .hero-proof-pallo {
    margin-left: -12px;
  }
}