/* ============================================================
   base.css — reset, tüpograafia, konteinerid, ruudustik
   Breakpointid (mobile-first, min-width): 768 / 1024 / 1440
   Baas ehitatakse ~360px vaatele.
   ============================================================ */

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

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

body {
  font-family: var(--font-tekst);
  font-size: var(--tekst-baas);
  line-height: 1.6;
  color: var(--varv-tekst);
  background-color: var(--varv-taust);
  min-height: 100vh;
}

/* Mobiilis jätab kleepuv alumine riba sisule ruumi.
   2026-08-17: lisatud ka KKK-vidina mulli jagu. Varem arvestas polster
   ainult riba (60px), mistõttu lehe viimane sisurida jäi vidina mulli
   (56px, riba kohal) alla — kontaktilehel kattis mull telefoninumbrit
   (Mariuse ekraanipilt). Nüüd on ruumi mõlemale.

   ⚠ SEE POLSTER EI TOHI OLLA `body`-l — vt components.css `.jalus`.
   Kui ta on `body`-l, joonistub 140px `body` TAUSTAVÄRVIGA (kreem) ja
   see tekib tumelilla jaluse ALLA nähtava heleda ribana (Marius
   2026-08-18: "jaluse juures on mingi väike valge joon"). Riba katab
   sellest ainult 60px, ülejäänud ~80px jääb paista. Polster elab nüüd
   jaluse sees, seega sama ruum täitub jaluse enda tumelillaga. */

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

ul[class],
ol[class] {
  list-style: none;
}

a {
  color: var(--varv-pohiline);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--varv-aktsent-tume);
}

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

/* ---- Fookus (accessibility) ---- */
:focus-visible {
  outline: 2px solid var(--varv-aktsent);
  outline-offset: 2px;
}

/* ---- Skip-link ---- */
.hyppa-sisule {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-riba) + 1);
  background: var(--varv-pohiline);
  color: var(--varv-tekst-pohjal);
  padding: var(--ruum-1) var(--ruum-2);
  border-radius: 0 0 var(--raadius) 0;
}

.hyppa-sisule:focus-visible {
  left: 0;
}

/* Ainult ekraanilugejale. !important on siin nõutav: ilma selleta võidab iga
   kõrgema spetsiifilisusega komponendireegel (nt .pais__hamburger span
   width:100%) ja absoluutselt positsioneeritud sr-span venib vaateakna
   laiuseks → horisontaalne kerimisriba (viga leitud 2026-07-21, CP-03 sessioon) */
.sr-ainult {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Tüpograafia ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-pealkiri);
  font-weight: 600;
  line-height: 1.2;
  color: var(--varv-pohiline);
}

h1 { font-size: var(--tekst-xxl); }
h2 { font-size: var(--tekst-xl); }
h3 { font-size: var(--tekst-l); }
h4 { font-size: var(--tekst-m); }

p + p {
  margin-top: var(--ruum-2);
}

.tekst-sekundaarne {
  color: var(--varv-tekst-sekundaarne);
  font-size: var(--tekst-s);
}

/* ---- Konteiner ---- */
.konteiner {
  width: 100%;
  max-width: var(--laius-max);
  margin-inline: auto;
  padding-inline: var(--ruum-2);
}

@media (min-width: 768px) {
  .konteiner {
    padding-inline: var(--ruum-3);
  }
}

@media (min-width: 1024px) {
  .konteiner {
    padding-inline: var(--ruum-4);
  }
}

/* ---- Ruudustik ---- */
/* Kaartide rida: mobiilis 1 veerg, tabletis 2, desktopil 4 */
.ruudustik {
  display: grid;
  gap: var(--ruum-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ruudustik {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ruudustik--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .ruudustik--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}