/*
  Kertahinta-repositioinnin (3.8.2026) uudet osiot ja hintakortin lisäykset:
  #kuvat (AI-kuvamaailma), #paivitys (päivitystyökalu), #palvelut
  (lisäominaisuudet + oheispalvelut) sekä hinta- ja hero-korttien
  alennusmerkinnät. Tokenit tulevat style.css:stä.
  Speksi: docs/superpowers/specs/2026-08-03-alysivut-kertahinta-repositiointi-design.md
*/

/* -------------------- Alennusmerkinnät hintakorteissa -------------------- */

/* Hinnan yksikkö on nyt sana ("kertamaksu"), ei "/kk". style.css:n 2px
   margin oli mitoitettu kauttaviivalle ja liimasi sanan kiinni numeroon. */
.price-amount span {
  margin-left: 8px;
}

/* Yliviivattu normaalihinta. <s> kantaa merkityksen myös ruudunlukijalle
   modernien selainten mapatessa sen "deletion"-rooliin.

   Hinta-osion oma alennusmerkintä (.hintakortti-ankkuri) siirtyi 5.8.2026
   tiedostoon css/hinta-osio.css, joten .plan-name-säännöt poistuivat täältä. */
.price-card-badge s {
  text-decoration-thickness: 2px;
  opacity: 0.75;
  /* .price-card-badge on inline-flex, joka pudottaa flex-itemien väliset
     välilyöntisolmut — ilman tätä badge renderöityy "normaalihinta996 €". */
  margin-left: 0.35em;
}

/* -------------------- #kuvat — AI-kuvamaailma -------------------- */

.ai-kuvat {
  background: var(--surface);
}

.ai-kuvat-sub {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 5vw, 44px);
  text-align: center;
}

.ai-kuvat-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 900px) {
  .ai-kuvat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ai-kuvat-pari {
  margin: 0;
  position: relative;
}

.ai-kuvat-pari img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* Nimilaput kuvan päälle: vasen puoli neutraali, oikea lime — sama
   vasen/oikea-järjestys kuin itse kuvassa (kännykkäkuva → tuotettu kuva). */
.ai-kuvat-labels {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.ai-kuvat-labels span {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(24, 24, 24, 0.72);
  color: #fff;
}

.ai-kuvat-labels span:last-child {
  background: var(--lime);
  color: var(--lime-ink);
}

.ai-kuvat-pari figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-2);
  text-align: center;
}

.ai-kuvat-footnote {
  margin: clamp(16px, 3vw, 24px) auto 0;
  max-width: 62ch;
  font-size: 0.8rem;
  color: var(--text-2);
  text-align: center;
}

/* -------------------- #paivitys — päivitystyökalu -------------------- */

.paivitys {
  background: var(--panel-tint);
}

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

@media (min-width: 900px) {
  .paivitys-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Osion otsikko elää tekstipalstassa, ei keskitettynä koko kaistalla. */
.paivitys-text h2 {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.paivitys-lead {
  max-width: 52ch;
}

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

.paivitys-lista li {
  position: relative;
  padding-left: 32px;
  color: var(--text-2);
}

.paivitys-lista li strong {
  color: var(--text);
}

.paivitys-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2318280A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / 12px no-repeat;
}

.paivitys-kuva {
  margin: 0;
}

.paivitys-kuva img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.paivitys-kuva figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-2);
  text-align: center;
}

/* -------------------- #palvelut — skaalautuvuus ja oheispalvelut ------- */

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

.palvelut-sub {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 5vw, 44px);
  text-align: center;
}

.palvelut-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
}

@media (min-width: 640px) {
  .palvelut-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .palvelut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.palvelu-kortti {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 16px 22px;
}

/* Kuva-ala on vakio korkeus ja contain, koska osa kuvista on läpinäkyviä
   mockupeja ja osa valokuvia — cover leikkaisi mockupit, eri korkeudet
   rikkoisivat rivin. Sävypohja tekee letterboxista tarkoituksellisen. */
.palvelu-kortti img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  border-radius: calc(var(--radius-card) - 8px);
  background: var(--panel-tint);
  padding: 12px;
  margin-bottom: 16px;
}

.palvelu-kortti h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.palvelu-kortti p {
  margin: 0;
  font-size: 0.92rem;
}

.palvelu-kortti-cta {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--panel-tint);
  border-style: dashed;
  gap: 4px;
}

.palvelu-kortti-cta .btn {
  margin-top: 14px;
}

/* -------------------- Asiakaslainaus (lainauskaista) -------------------- */

/*
  Täysleveä tumma kaista kahden vaalean osion välissä. Se on sivun ainoa iso
  lainaus, ja se on tarkoituksella juuri ennen hintaosiota: kävijä lukee
  toisen yrittäjän kokemuksen ennen kuin näkee luvun.

  Teksti on containerissa eikä kellu kuvan päällä. Edellinen kuvakaista asetti
  tekstin 100vw-kaistan sisään omalla max-widthillään, jolloin se ei ollut
  linjassa sivun muun sisällön kanssa vaan näytti kelluvan irrallaan
  vasemmalla. Container hoitaa nyt saman marginaalin kuin muillakin osioilla.
*/
.lainauskaista {
  position: relative;
  /* Irti containerin leveydestä koko ruudun levyiseksi. Body on
     overflow-x: hidden, joten 100vw ei tuo vaakavieritystä vaikka
     vierityspalkki veisi muutaman pikselin. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: clamp(56px, 8vw, 104px) 0;
  overflow: hidden;
  background: var(--ink-deep);
  color: #FFFFFF;
}

/*
  KOLME KERROSTA, KAIKILLA NIMENOMAINEN z-index:
    0 = taustakuva, 1 = liuku, 2 = teksti.

  Numerot ovat tarkoituksella eksplisiittisiä eivätkä auto. Kun kaikki
  kerrokset ovat positioituja ja z-index on auto, maalausjärjestys ratkeaa
  DOM-järjestyksestä, ja pseudoelementti on aina viimeisenä lapsena. Juuri
  se teki edellisen kuvakaistan otsikosta lukukelvottoman: tumma liuku
  maalautui tekstin päälle vaikka kommentti väitti muuta. Älä palauta autoa.
*/

/*
  Kampaamokuva on tekstuuria, ei muotokuvaa. Kuvan henkilö ei ole Nessu,
  joten tunnistettavaksi jätetty kasvo lukisi väärin lainauksen
  attribuutiona nyt kun toimialakin täsmää. Harmaasävy irrottaa kuvan
  henkilökuvasta ja tekee siitä tilan, ja liuku alla pitää vasemman puolen
  tummana. Oikealla kuva saa näkyä: se kertoo että puhuja on kauneusalan
  yrittäjä, mikä on koko kaistan pointti.
*/
.lainauskaista-tausta {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pystysuunnassa 42 %: pitää sakset ja kädet näkyvissä kun leveä kaista
     rajaa kuvasta vain vaakasiivun. Kasvojen rajaus on jo tehty itse
     tiedostoon, joten tämä on sommittelua eikä suojaa. */
  object-position: 50% 42%;
  opacity: 0.3;
  filter: grayscale(1);
}

/*
  Liuku tekstin ja kuvan väliin. Vasen laita lähes umpeen, oikea laita auki,
  jotta sama kaista voi olla yhtä aikaa luettava ja kuvallinen. Kulma 100deg
  seuraa tekstipalstan suuntaa.
*/
.lainauskaista::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(24, 24, 24, 0.94) 0%,
    rgba(24, 24, 24, 0.88) 40%,
    rgba(24, 24, 24, 0.55) 72%,
    rgba(24, 24, 24, 0.28) 100%
  );
}

.lainauskaista .container {
  position: relative;
  z-index: 2;
}

.lainauskaista-sisalto {
  margin: 0;
  max-width: 780px;
}

.lainauskaista-tahdet {
  margin: 0 0 20px;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--lime);
}

.lainauskaista-teksti {
  margin: 0 0 28px;
}

.lainauskaista-teksti p {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
  /* Väri on pakko sanoa tässä, ei riitä että .lainauskaista on
     color: #FFFFFF. style.css:ssä on globaali p { color: var(--text-2) },
     ja elementtivalitsin asettaa värin suoraan tähän elementtiin — perintä
     pätee vain jos mikään sääntö ei aseta ominaisuutta itse. Ilman tätä
     lainaus piirtyi #5C5C5A:na #181818-taustalle, kontrasti 1,4:1. */
  color: #FFFFFF;
}

.lainauskaista-henkilo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lainauskaista-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.lainauskaista-nimi,
.lainauskaista-rooli {
  display: block;
}

.lainauskaista-nimi {
  font-weight: 600;
}

.lainauskaista-rooli {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}

/*
  Kapealla ruudulla teksti täyttää koko leveyden, joten vaakaliuku jättäisi
  rivien oikeat päät kuvan päälle. Suunta käännetään pystyyn ja vaimennus
  pidetään tasaisena: kuva saa näkyä vain alalaidassa tekstin alapuolella.
*/
@media (max-width: 700px) {
  .lainauskaista::after {
    background: linear-gradient(
      180deg,
      rgba(24, 24, 24, 0.9) 0%,
      rgba(24, 24, 24, 0.88) 70%,
      rgba(24, 24, 24, 0.66) 100%
    );
  }
}