/* ─── Komponentit ─────────────────────────────────────────────────────────
   Jokainen komponentti rakentuu tokeneista ja tyyppiluokista. Sisäiset osat
   (__media, __body) ovat vain rakennetta — koko ja väri tulevat aina
   tyyppiluokasta, ei komponentin omasta säännöstä. */

/* ---- Nappi -------------------------------------------------------------
   Yksi muoto kaikkialle: pilleri, jonka reunaviiva on aina näkyvissä ja jonka
   hover kääntää täytön ympäri sen sijaan että tummentaisi sitä. Pinta ratkaisee
   värit, joten sama markup toimii valkoisella ja mustalla.

   Vaalea pinta on oletus eikä vaadi .s-light-kääreä ympärilleen: mobiili-
   valikossa ja muissa irrallisissa paikoissa sellaista ei ole. Tumma pinta
   kumoaa nämä alla. */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--s-fs-ui);
  font-weight: var(--s-fw-medium);
  letter-spacing: var(--s-ls-ui);
  transition: background-color var(--s-dur) var(--s-ease),
              border-color var(--s-dur) var(--s-ease),
              color var(--s-dur) var(--s-ease);
}

.s-btn--primary {
  border-color: var(--s-ink);
  background: var(--s-ink);
  color: var(--s-paper);
}

.s-btn--primary:hover { background: var(--s-paper); color: var(--s-ink); }

.s-btn--secondary { border-color: var(--s-rule-strong); color: var(--s-ink); }
.s-btn--secondary:hover { border-color: var(--s-ink); }

.s-dark .s-btn--primary {
  border-color: var(--s-paper);
  background: var(--s-paper);
  color: var(--s-ink);
}

.s-dark .s-btn--primary:hover { background: transparent; color: var(--s-on-black); }
.s-dark .s-btn--secondary { border-color: var(--s-rule-dark); color: var(--s-on-black); }
.s-dark .s-btn--secondary:hover { border-color: var(--s-on-black); }

/* Nuoli kertoo että linkki vie eteenpäin, ja liikahtaa hoverissa sinne päin. */
.s-btn__arrow {
  font-size: 17px;
  transition: transform var(--s-dur) var(--s-ease);
}

.s-btn:hover .s-btn__arrow { transform: translate(2px, -2px); }

/* ---- Kortti ------------------------------------------------------------
   Korkeus tulee kuvasuhteesta ja rivit jakavat sen tasan, joten kuvapaikka on
   aina täsmälleen puolet kortista riippumatta tekstin pituudesta. */
.s-card {
  display: grid;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--s-rule);
  border-radius: var(--s-radius);
  color: var(--s-ink);
  transition: border-color var(--s-dur) var(--s-ease);
}

/* Hover vain viivan sävyssä: kortti ei liiku eikä kasva. */
.s-card:hover { border-color: var(--s-rule-strong); }

.s-card__media {
  display: grid;
  place-items: center;
  min-height: 0;
  border-bottom: 1px solid var(--s-rule);
  background: var(--s-media-fill, none);
  color: var(--s-ink-3);
  font-size: var(--s-fs-label);
  letter-spacing: 0;
}

.s-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 0;
  padding: clamp(20px, 2vw, 28px);
}

/* ---- Kuvapaikka --------------------------------------------------------
   Pitää tulevan kuvan paikan ja muodon, jotta asettelua arvioidaan oikean
   kokoisella aukolla. Kuva korvaa tämän sellaisenaan. */
.s-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--s-rule);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 11px);
  color: var(--s-ink-3);
}

.s-dark .s-media {
  border-color: var(--s-rule-dark);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 11px);
  color: var(--s-on-black-3);
}

.s-media--16-9 { aspect-ratio: 16 / 9; }
.s-media--3-2 { aspect-ratio: 3 / 2; }
.s-media--5-4 { aspect-ratio: 5 / 4; }
.s-media--1-1 { aspect-ratio: 1 / 1; }

/* ---- Ylätunniste -------------------------------------------------------
   Sama kaikilla kolmella sivulla. Logo vasemmalla, navi absoluuttisesti
   keskitettynä (jolloin se osuu sivun keskelle riippumatta logon ja oikean
   reunan työkalujen leveydestä), työkalut oikealla. */
.s-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--s-header-h);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.s-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 100%;
  padding-inline: var(--s-gutter);
}

.s-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: var(--s-fw-semibold);
  letter-spacing: 0.04em;
  color: var(--s-ink);
}

.s-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  white-space: nowrap;
  color: var(--s-ink-2);
}

.s-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  font-size: var(--s-fs-ui);
}

.s-tools { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }

.s-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--s-radius-sm);
  color: var(--s-ink);
  transition: background-color var(--s-dur-fast) var(--s-ease);
}

.s-iconbtn:hover { background: var(--s-wash); }
.s-iconbtn svg { width: 23px; height: 23px; }

/* ---- Pudotusvalikko ----------------------------------------------------
   Avautuu hoveriin ja fokukseen; näkyvyyden hoitaa CSS, joten se toimii myös
   ilman JS:ää. Kosketuslaitteella napautus antaa napille fokuksen, jolloin
   :focus-within avaa saman valikon. */
.s-menu { position: relative; display: inline-flex; }

.s-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 6px;
  font-size: var(--s-fs-ui);
  letter-spacing: var(--s-ls-ui);
  color: inherit;
}

.s-menu__caret { width: 10px; height: 6px; transition: transform var(--s-dur) var(--s-ease); }
.s-menu:hover .s-menu__caret,
.s-menu:focus-within .s-menu__caret { transform: rotate(180deg); }

/* Ylin padding on silta napin ja paneelin välissä: ilman sitä hiiri putoaisi
   rakoon matkalla ja valikko sulkeutuisi kesken liikkeen. */
.s-menu__panel-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 25;
  padding-top: 10px;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--s-dur) var(--s-ease), visibility var(--s-dur) var(--s-ease);
}

.s-menu:hover .s-menu__panel-wrap,
.s-menu:focus-within .s-menu__panel-wrap { opacity: 1; visibility: visible; pointer-events: auto; }

.s-menu__panel {
  display: flex;
  flex-direction: column;
  width: 232px;
  padding: var(--s-2);
  background: var(--s-paper);
  border: 1px solid var(--s-rule);
  border-radius: var(--s-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-6px);
  transition: transform var(--s-dur) var(--s-ease);
}

.s-menu:hover .s-menu__panel,
.s-menu:focus-within .s-menu__panel { transform: none; }

.s-menu__panel a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--s-3);
  border-radius: var(--s-radius-sm);
  color: var(--s-ink);
  font-size: var(--s-fs-ui);
  transition: background-color var(--s-dur-fast) var(--s-ease);
}

.s-menu__panel a:hover { background: var(--s-wash); }

/* ---- Mobiilivalikko ----------------------------------------------------
   Koko ruudun kokoinen: puhelimessa pieni pudotuslaatikko jättää sivun
   näkyviin taakseen ja linkeistä tulee liian pieniä osumapintoja. Ylätunniste
   jää valikon päälle, joten sama nappi sulkee sen. */
.s-drawer {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--s-header-h) + var(--s-4)) var(--s-gutter)
           calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--s-paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.s-drawer[hidden] { display: none; }

.s-drawer__nav { display: flex; flex-direction: column; }

.s-drawer__nav a {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid var(--s-rule);
  color: var(--s-ink);
  font-size: 22px;
  font-weight: var(--s-fw-medium);
  letter-spacing: -0.02em;
}

.s-drawer .s-btn { margin-top: auto; }

/* Sivun vieritys lukitaan valikon ajaksi, jottei tausta liiku sen alla. */
.s-page.is-locked { overflow: hidden; }

.s-burger { display: none; }
.s-burger .s-icon-close { display: none; }
.s-burger[aria-expanded="true"] .s-icon-burger { display: none; }
.s-burger[aria-expanded="true"] .s-icon-close { display: block; }

@media (max-width: 700px) {
  .s-nav { display: none; }
  .s-burger { display: inline-flex; }
}

@media (max-width: 380px) {
  .s-header__inner { gap: var(--s-3); }
  .s-logo { font-size: 15px; }
  .s-drawer__nav a { font-size: 20px; }
}

/* ---- Alatunniste -------------------------------------------------------*/
.s-footer { padding: clamp(72px, 8vw, 120px) 0 var(--s-6); }
.s-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-7); }
.s-footer__brand { font-size: var(--s-fs-subtitle); font-weight: var(--s-fw-semibold); letter-spacing: 0.04em; }
.s-footer__col ul { display: grid; gap: var(--s-3); margin-top: var(--s-5); font-size: var(--s-fs-ui); color: var(--s-on-black-2); }

.s-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--s-rule-dark);
}

.s-footer__bottom nav { display: flex; gap: var(--s-5); font-size: var(--s-fs-label); }

@media (max-width: 900px) {
  .s-footer__top { grid-template-columns: 1fr 1fr; }
  .s-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .s-footer__top { grid-template-columns: 1fr; }
  .s-footer__brand { grid-column: auto; }
  .s-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .s-page *, .s-page *::before, .s-page *::after { transition-duration: 0.01ms !important; }
  .s-menu__panel { transform: none; }
}

/* ---- Hinnoittelutaso ---------------------------------------------------*/
.s-tier {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--s-rule-dark);
  border-radius: var(--s-radius-lg);
}

.s-tier--featured { background: #111; }
.s-tier__price { margin-top: var(--s-5); font-size: clamp(2rem, 2.6vw, 2.5rem); line-height: 1; }
.s-tier__list { display: grid; gap: var(--s-3); margin-block: var(--s-7); color: var(--s-on-black-2); font-size: var(--s-fs-ui); }
.s-tier__list li::before { content: "—"; margin-right: var(--s-3); color: var(--s-on-black-3); }
.s-tier .s-btn { align-self: stretch; margin-top: auto; }

@media (max-width: 900px) {
  .s-tier { min-height: 0; }
}

/* ---- Kortin merkki -----------------------------------------------------
   Liukuvärien pysäkit saavat värinsä luokista, koska SVG:n gradient-stop ei
   peri väriä eikä lue muuttujaa fill-attribuutin kautta. Ilman näitä pysäkit
   jäävät oletusarvoonsa eli mustaan. */
.s-cardicon { width: 46px; height: 46px; }

.pk-1-from { stop-color: var(--s-pink-100); }
.pk-1-to, .pk-2-from { stop-color: var(--s-pink-200); }
.pk-2-to, .pk-3-from { stop-color: var(--s-pink-300); }
.pk-3-to { stop-color: var(--s-pink-400); }
.pk-soft-to { stop-color: var(--s-pink-250); }

/* ---- Sivun alatunniste -------------------------------------------------*/
.s-pagefoot {
  display: flex;
  justify-content: center;
  padding-block: var(--s-5);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--s-rule);
}

.s-pagefoot a { color: var(--s-ink-3); font-size: var(--s-fs-label); }
.s-pagefoot a:hover { color: var(--s-ink); }

/* ---- Lomake ------------------------------------------------------------
   Yhteiset kentät kaikille julkisille lomakkeille. Kentän korkeus on sama 48px
   kuin napilla, jotta rivit asettuvat samaan rytmiin. */
.s-form { display: flex; flex-direction: column; gap: var(--s-4); }

.s-field { display: flex; flex-direction: column; gap: var(--s-2); }

.s-field__label {
  font-size: var(--s-fs-label);
  font-weight: var(--s-fw-medium);
  letter-spacing: 0;
  color: var(--s-ink-2);
}

.s-input,
.s-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--s-rule);
  border-radius: var(--s-radius);
  background: var(--s-paper);
  color: var(--s-ink);
  font-size: var(--s-fs-ui);
  transition: border-color var(--s-dur) var(--s-ease);
}

.s-input:hover,
.s-textarea:hover { border-color: var(--s-rule-strong); }

.s-input:focus-visible,
.s-textarea:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 0; border-color: transparent; }

.s-textarea { min-height: 140px; resize: vertical; line-height: var(--s-lh-text); }

/* Hunajapurkki: ihminen ei näe tätä, robotti täyttää sen ja viesti hylätään.
   display:none ei kelpaa, koska osa roboteista ohittaa piilotetut kentät. */
.s-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.s-note { font-size: var(--s-fs-label); color: var(--s-ink-3); }

.s-alert {
  padding: var(--s-4);
  border: 1px solid var(--s-rule);
  border-radius: var(--s-radius);
  font-size: var(--s-fs-ui);
}

.s-alert--error { border-color: #d4176a; color: #991b1b; }
.s-alert--ok { border-color: var(--s-rule-strong); color: var(--s-ink); }
.s-alert[hidden] { display: none; }

/* ---- Kysymys ja vastaus ------------------------------------------------
   <details> hoitaa avaamisen ilman JS:ää ja on valmiiksi näppäimistöystävällinen. */
.s-qa { border-top: 1px solid var(--s-rule); }
.s-qa:last-of-type { border-bottom: 1px solid var(--s-rule); }

.s-qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--s-fs-lead);
  font-weight: var(--s-fw-medium);
  letter-spacing: var(--s-ls-lead);
  color: var(--s-ink);
}

.s-qa__q::-webkit-details-marker { display: none; }

.s-qa__q::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--s-ink-3);
  border-bottom: 1.5px solid var(--s-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--s-dur) var(--s-ease);
}

.s-qa[open] .s-qa__q::after { transform: rotate(225deg) translate(-2px, -2px); }

.s-qa__a { padding-bottom: var(--s-5); }