/* Verstaan valokuvat (kopio Metsän moduulista 2.10.2026): kuvaparit, kuvavalinnat, suurennos ja tekijärivi.
 *
 * ── MIKSI OMA TIEDOSTO EIKÄ verstas.css ──────────────────────────────────
 * verstas.css voi olla paluukävijällä tunteja vanha (ks. _headers), ja uusi
 * merkkaus vanhalla tyylillä näyttäisi kuvat täysikokoisina allekkain.
 * Uusi tiedosto haetaan aina tuoreena. Jos tätä myöhemmin muutetaan,
 * vanha versio on silti käyttökelpoinen: muutokset ovat hienosäätöä,
 * eikä yksikään sivu riipu tämän tiedoston uusista luokista toimiakseen.
 *
 * Värit tulevat verstas.css:n paletista — tässä ei ole yhtään heksaväriä.
 * Siirretty puulaji.css:stä 1.10.2026, kun kuvat levisivät kaikkiin
 * lukuihin. */

/* ---------- kuvapari tai kuvarivi ----------
 * Kaksi neliötä vierekkäin. Teksti on kuvan päällä alareunassa, koska
 * kuvan alla se veisi puhelimessa rivin jokaiselta kuvalta. `.kolme` on
 * kolmen kuvan rivi, `.yksi` yksittäinen kuva joka ei veny koko leveäksi. */
.lajikuvat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 12px;
  max-width: 520px;
}
.lajikuvat.kolme { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
.lajikuvat.yksi { grid-template-columns: 1fr; max-width: 260px; }
.lajikuvat .kuva {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ground-2);
  color: white;
  text-decoration: none;
}
.lajikuvat img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .25s ease;
}
.lajikuvat .kuva:hover img { transform: scale(1.03); }
.lajikuvat .kuva span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 8px 6px;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.lajikuvat .kuva:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- kuvavalinnat ----------
 * Puulajin avaimen vaihtoehdot ja laskurien kuvavalitsimet
 * (`select[data-kuvat]`, ks. kuvat.js) ovat sama kortti. */
.vaihtoehdot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.vaihtoehdot:empty { display: none; }
.kuvavalitsin { margin: 2px 0 12px; }
.kuvavalitsin-otsikko {
  display: block;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 6px;
}

/* Yleinen `button` on talon mono-versaali nappi; vaihtoehto on kortti,
 * joten kirjasin, kirjainkoko ja asettelu palautetaan tässä. */
button.vaihtoehto {
  font-family: var(--body);
  font-size: calc(13.5px * var(--tekstikoko));
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ground-2);
  color: var(--ink);
  border: 1px solid var(--hair);
  animation: nouse .2s ease-out both;
}
button.vaihtoehto:hover { border-color: var(--accent); }
button.vaihtoehto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.vaihtoehto[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--pehmea);
}
button.vaihtoehto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.vt-teksti {
  padding: 9px 10px 10px;
  font-weight: 600;
  line-height: 1.35;
}
.vt-talvi {
  margin-top: -4px;
  padding: 0 10px 10px;
  font-size: calc(12px * var(--tekstikoko));
  line-height: 1.4;
  color: var(--ink-2);
}
button.vaihtoehto.ilman-kuvaa {
  justify-content: center;
  min-height: 110px;
  background: var(--pehmea);
  border-style: dashed;
  border-color: var(--hair-strong);
}
button.vaihtoehto.ilman-kuvaa[aria-pressed="true"] { border-style: solid; }

@keyframes nouse { from { opacity: 0; transform: translateY(6px); } }

/* ---------- liukusäädin ja sen lukema ---------- */
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.lukema {
  font-family: var(--display);
  font-weight: 600;
  color: var(--accent);
}

/* ---------- aikajana (valo) ----------
 * Iso kuva vasemmalla, säädin ja vaihenapit oikealla; puhelimessa
 * allekkain. Vaihenapit ovat pieniä kuvia, joista valittu on korostettu. */
.aikajana {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--ground-2);
}
@media (max-width: 560px) { .aikajana { grid-template-columns: 1fr; } }
.aikajana .aikakuva {
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  color: white; text-decoration: none;
}
.aikajana .aikakuva img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.aikajana .aikakuva span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 8px 6px;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.aikaohjain label { display: block; font-size: calc(13px * var(--tekstikoko)); }
.teksti .aikateksti { font-weight: 600; margin: 4px 0 10px; min-height: 2.6em; }
.vaihenapit { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
button.vaihenappi {
  position: relative;
  padding: 0; min-height: 0;
  border-radius: 3px; overflow: hidden;
  border: 2px solid transparent;
  background: none;
  opacity: .55;
}
button.vaihenappi img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
button.vaihenappi span {
  position: absolute; left: 3px; top: 2px;
  font-family: var(--display); font-weight: 600;
  color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
button.vaihenappi[aria-pressed="true"] { opacity: 1; border-color: var(--accent); }
button.vaihenappi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- etusivun lukukortti kuvalla ---------- */
a.luku-linkki.kuvallinen {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
a.luku-linkki .luku-kuva {
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--ground-2);
}
@media (min-width: 600px) {
  a.luku-linkki.kuvallinen { grid-template-columns: 104px minmax(0, 1fr); }
  a.luku-linkki .luku-kuva { width: 104px; height: 104px; }
}

/* ---------- kuvien tekijät ----------
 * Suljettu rivi sivun lopussa, ei kortti: lisenssi vaatii että tekijä
 * löytyy, ei että se on näkyvillä. Suurennos näyttää tekijän myös. */
.kuvaoikeudet {
  margin: 4px 2px 14px;
  font-size: calc(12.5px * var(--tekstikoko));
  line-height: 1.5;
  color: var(--ink-2);
}
.kuvaoikeudet summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 0;
}
.kuvaoikeudet p { margin: 6px 0; max-width: 62ch; }
.kuvaoikeudet ul { margin: 0; padding-left: 1.1em; }
.kuvaoikeudet li { margin: 0 0 .3em; }
.kuvaoikeudet a { color: var(--ink-2); text-underline-offset: 2px; }

/* ---------- suurennos ---------- */
.suurennos {
  padding: 0;
  border: 0;
  border-radius: 4px;
  width: min(92vw, 820px);
  max-height: 92vh;
  background: var(--kohotus);
  color: var(--ink);
  overflow: auto;
}
.suurennos::backdrop { background: rgba(0, 0, 0, .75); }
.suurennos img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  background: var(--ground-2);
}
.suurennos p { margin: 0; padding: 10px 14px 0; }
.suurennos button { margin: 10px 14px 14px; }

@media (prefers-reduced-motion: reduce) {
  button.vaihtoehto { animation: none; }
  .lajikuvat img { transition: none; }
}

/* ── Leveä valokuva (Verstas 2.10.2026) ──────────────────────────────────
 * Metsän kuvat ovat neliöpareja (.lajikuvat). Verstaan kuva on usein yksi
 * leveä näkymä — laudan pinta, työkalu, liitos — joten sille on oma
 * muoto, joka säilyttää kuvan oman kuvasuhteen. Linkki on sama a.kuva,
 * joten suurennos ja tekijä toimivat ilman lisäkoodia. */
.valokuva { margin: 14px 0 18px; }
.valokuva .kuva { display: block; cursor: zoom-in; }
.valokuva img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; background: var(--ground-2);
}
.valokuva .kuva:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.valokuva figcaption {
  margin-top: 6px;
  font-size: calc(14px * var(--tekstikoko));
  color: var(--ink-2);
}