/* --------------------------------------------------------------------------
 * Katkaisukohdat — teeman ainoa virallinen lista.
 *
 * SÄÄNTÖ: mobile first, VAIN `min-width`. `max-width`-mediakyselyt ovat
 * kiellettyjä tästä eteenpäin. Siksi mikään arvo ei tarvitse N−1-paria
 * (781px, 959px, 1023px …) — jos huomaat kirjoittavasi sellaista, kirjoita
 * sääntö toisin päin: perustyyli mobiilille, poikkeus `min-width`-lohkoon.
 *
 * Sarja on neljä arvoa. Uutta ei lisätä ilman että tämä tiedosto ja
 * CLAUDE.md päivitetään samalla:
 *
 *   600px   Kapea → keskikapea. WordPressin oma "small". Yhden palstan
 *           listaukset ja gridit siirtyvät kahteen palstaan.
 *
 *   782px   Keskikapea → keskileveä. WordPressin oma tabletti-/admin-bar
 *           -raja. Pinotut osiot (kuva + teksti, hero, sisältölistaus)
 *           asettuvat rinnakkain.
 *
 *   960px   Keskileveä → leveä. Kolmen palstan gridit ja karusellin
 *           kolmas näkyvä kortti.
 *
 *  1024px   TYÖPÖYTÄNAVIGAATIO. Ylätunnisteen valikko vaihtuu mobiili-
 *           tilasta (hampurilainen + paneeli) työpöytätilaan (vaakarivi +
 *           pudotusvalikot). Tämä on koko teeman herkin raja: sitä lukee
 *           myös JavaScript (ks. "JavaScript ja katkaisukohdat" alla).
 *
 * --------------------------------------------------------------------------
 * Miksi alla olevat custom propertyt eivät kelpaa `@media`-kyselyyn
 *
 * Selain evaluoi `@media`- ja `@container`-EHDON ennen kuin custom
 * propertyjen arvot on korvattu, joten
 *
 *     @media (min-width: var(--froggy-bp-1024)) { … }   ← EI TOIMI
 *
 * on kelpaamaton sääntö, jonka selain ohittaa hiljaa. Kyselyihin
 * kirjoitetaan siis aina pikselilukema:
 *
 *     @media (min-width: 1024px) { … }                  ← näin
 *
 * Tunnukset ovat silti hyödyllisiä kaikkialla, missä custom property
 * kelpaa: `calc()`-laskuissa (`calc(var(--froggy-bp-1024) - 2rem)`),
 * `max-width`/`width`-arvoina ja JavaScriptistä luettuna
 * (`getComputedStyle(document.documentElement)`).
 *
 * --------------------------------------------------------------------------
 * JavaScript ja katkaisukohdat
 *
 * Teemassa on kaksi JS-lukijaa, jotka latautuvat täysin eri tavalla:
 *
 *   blocks/carousel/view.js
 *       webpackin niputtama lohkoskripti (karuselli) — voisi `import`oida.
 *
 *   assets/js/alpine-components.js
 *       tavallinen wp_enqueue_script-skripti ilman niputusta — `import`
 *       olisi siinä syntaksivirhe, joka kaataisi koko tiedoston ja jättäisi
 *       Alpine-komponentit rekisteröimättä.
 *
 * Yhteistä JS-moduulia EI siis ole. Tämä tiedosto on ainoa totuus, ja
 * kumpikin lukija kirjoittaa oman lukemansa kovakoodattuna ja viittaa
 * kommentissa tähän tiedostoon. Jos muutat arvoa täällä, hae `1024`
 * (tai muutettu arvo) noista kahdesta tiedostosta.
 * ----------------------------------------------------------------------- */

:root {
	--froggy-bp-600: 600px;
	--froggy-bp-782: 782px;
	--froggy-bp-960: 960px;
	--froggy-bp-1024: 1024px;
}