/* ============================================================
   Labona Base Styles
   ------------------------------------------------------------
   Reset, body, typografia ja aidosti jaetut utility-luokat.
   Ladataan jokaiselle sivulle tokens.css:n jälkeen.

   ÄLÄ lisää featurekohtaisia tyylejä tähän. Featuren tyylit
   menevät assets/css/components/<nimi>.css -tiedostoon.
   ============================================================ */

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

::selection {
  background: var(--pink);
  color: #fff;
}

/* Tasapainota otsikkorivit myös sivujen ja korttien vaihtelevilla leveyksillä. */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Pidä otsikon lyhyt ilmaus yhdessä, mutta salli rivitys kapealla näytöllä. */
.heading-phrase {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  text-wrap: balance;
}

/* Pitkiä sanaryhmiä sisältävä pääotsikko tarvitsee tilaa myös puhelimessa. */
.hero-page h1:has(.heading-phrase) {
  font-size: clamp(1.75rem, 5vw, 3.75rem);
}

/* Layout primitives */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.mono {
  font-family: var(--mono);
}

/* ============================================================
   KIPINÄ-CTA RIVISSÄ TOISEN NAPIN KANSSA
   ------------------------------------------------------------
   .ai-hi-widgetin syöttökenttä ja lähetysnappi avautuvat hoverilla
   ja fokuksella, jolloin rivi levenee noin 250 pikseliä. Jos rivi saa
   rivittyä, viereinen nappi tippuu omalle rivilleen juuri kun käyttäjä
   on tarttumassa widgettiin. Työpöytäleveydellä rivi pidetään siis
   yhtenäisenä ja syöttökenttä kutistuu, jos tila loppuu kesken.
   Kapeilla näytöillä sivukohtaiset säännöt pinoavat napit allekkain,
   joten sääntö alkaa vasta 861 pikselistä.

   :has(> .ai-hi.ai-hi) toistaa luokan tarkoituksella: toisto nostaa
   spesifisyyttä sen verran, että sääntö voittaa sivukohtaiset kahden
   luokan rivisäännöt (esim. .cta-final .buttons { flex-wrap: wrap }).
   ============================================================ */
@media (min-width: 861px) {
  div:has(> .ai-hi.ai-hi):has(> a, > button) {
    flex-wrap: nowrap;
  }
  div:has(> .ai-hi.ai-hi):has(> a, > button) > a,
  div:has(> .ai-hi.ai-hi):has(> a, > button) > button {
    flex-shrink: 0;
  }
  /* Tila otetaan ensin kentästä ja sitten nuolesta, nimiö pitää omansa.
     Täydellä rivillä kenttä ei enää mahdu auki, ja pillerin oma leikkaus
     pitää sisällön pillerin sisällä sen sijaan että se valuisi napin alle. */
  div:has(> .ai-hi.ai-hi):has(> a, > button) > .ai-hi {
    overflow: clip;
  }
  .ai-hi-label { flex-shrink: 0; }
  .ai-hi-input { min-width: 0; }
  .ai-hi-send { min-width: 0; }

  /* Napillisella rivillä kenttä avautuu kapeampana kuin yksin seisova
     widget: 150 pikseliä riittää tavallisille kehotteille, ja loppu
     tila jää napille. Sivukohtainen 200 pikselin sääntö jää voimaan
     riveillä, joilla widget on yksin. */
  div:has(> .ai-hi.ai-hi):has(> a, > button) .ai-hi:hover .ai-hi-input,
  div:has(> .ai-hi.ai-hi):has(> a, > button) .ai-hi:focus-within .ai-hi-input {
    width: 150px;
  }
}