/* ============================================================
   puddles polish.css — subduxion-tason viimeistelykerros
   Ladataan site.css:n (ja contact.css:n) jälkeen. Ei muokkaa
   pohjatiedostoja: pelkkiä overrideja, jotta rinnakkainen työ
   site.css:ssä ei konfliktoi.
   ============================================================ */

/* 1) Keskitetty sisältökaista (subduxion: contained 1240px).
      Koko sivusto käyttää var(--pad) vaakapaddingiin, joten
      yksi max() riittää: leveillä näytöillä padding kasvaa niin
      että kaista on 1240px keskellä. Hairlinet jäävät full-bleed
      (Aino-tyyli). */
:root {
  --pad: max(calc(var(--ch) * 2), calc((100vw - 1240px) / 2));
}
/* .hero käyttää --padia shorthandina — palauta pystypadding
   alkuperäiseen arvoonsa, vain vaaka kasvaa */
.hero { padding-block: calc(var(--ch) * 2); }

/* 2) Yhtenäinen display-h1 alasivuilla (work ~28px / services
      ~44px / pricing ~28px -> yksi skaala kaikille) */
.page-hero .hero-title {
  font-size: clamp(2.4rem, 4.7vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 21ch;
}

/* 3) Osioihin ilmavuutta leveillä näytöillä (subduxionin väljyys) */
@media (min-width: 1240px) {
  :root { --sec: calc(var(--line) * 5); }
}

/* 4) Tick piirtyy myös selaimissa ilman animation-timeline-tukea
      (Safari/Firefox). polish.js lisää html.polish-tick vain kun
      natiivi scroll-animaatio puuttuu eikä reduced-motion ole päällä. */
html.polish-tick .tick {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.4, 0, .2, 1) .2s;
}
html.polish-tick .tick.drawn { transform: scaleX(1); }

/* 5) Nav-linkkien underline-grow (subduxionin 1px-viiva) */
.nav a:not(.nav-logo) {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .35s var(--ease-settle), color .15s;
}
.nav a:not(.nav-logo):hover { background-size: 100% 1px; }
.nav a[aria-current="page"] { background: none; }

/* 6) Tekstilinkkien nuoli yhtenäiseksi nappien kanssa (→ -> ↗)
      + hento suuntahover */
.tlink::after {
  content: "↗";
  display: inline-block;
  margin-left: .4ch;
  transition: translate .3s var(--ease-settle);
}
.tlink:hover::after { translate: .12em -.12em; }

/* 7) Ink-moodin lämpimän paperin jäänteet -> kylmä pinta
      (site.css: rgba(237,235,230)) */
html[data-mood="ink"] .btn { background: rgba(243, 243, 242, .1); }
html[data-mood="ink"] .btn:hover { background: rgba(243, 243, 242, .18); }

/* 8) Hintarivi mobiilissa: meta ("1 day", "4 weeks") oikeaan reunaan,
      siisti label/value -pari sen sijaan että kelluu 50%:n kohdalla. */
@media (max-width: 899px) {
  .price-row .meta { justify-self: end; text-align: right; }
}