/* ======================================================================
   Karhulan Kanat — Peltopäivä: kevyt pohja (/ilmoittaudu/)
   Lähde: landing.html. Vain erot etusivun tyyleihin (perusta.css), ja
   jokainen valitsin alkaa .kk-pohja-kevyt, jottei mikään vuoda muille
   sivuille. Ladataan vain sivupohjalla page-templates/kevyt.php.
   ====================================================================== */

/* ---------- Typografia ja rytmi ---------- */

body.kk-pohja-kevyt{
  --t-h2:clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --t-h1:clamp(2.125rem, 1.3rem + 3.4vw, 4rem);
}
.kk-pohja-kevyt h1{ line-height:1.04; letter-spacing:-.026em; }
.kk-pohja-kevyt h2{ line-height:1.06; letter-spacing:-.02em; }

.kk-pohja-kevyt .osio{ padding-block:clamp(3.25rem, 7vw, 6rem); }
/* Kevyellä pohjalla ei ole kiinteää tiivistä palkkia. */
.kk-pohja-kevyt section[id],
.kk-pohja-kevyt .kk-ankkuri{ scroll-margin-top:calc(var(--palkki) + 1.5rem); }

/* ---------- Tunnus ---------- */

.kk-pohja-kevyt .logo__nimi{ font-size:clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
.kk-pohja-kevyt .logo--tiivis{ padding-block:0; }
.kk-pohja-kevyt .logo--tiivis .logo__nimi{ font-size:1.125rem; }

/* ---------- Kevyt ylätunniste (ei navigaatiota) ---------- */

.kk-pohja-kevyt .lp-yla{
  border-bottom:1px solid var(--muste);
  background:var(--tausta);
}
.kk-pohja-kevyt .lp-yla__sisus{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--v3) var(--v5);
  padding-block:var(--v5);
}
.kk-pohja-kevyt .lp-yla__osoite{ margin:.3rem 0 0; font-size:var(--t-pieni); color:var(--hillitty); }
.kk-pohja-kevyt .lp-yla__oikea{ text-align:right; }
@media (max-width:40rem){
  .kk-pohja-kevyt .lp-yla__oikea{ text-align:left; }
}

/* ---------- Kansi: lomake heti näkyvissä ---------- */

.kk-pohja-kevyt .lp-kansi{ padding-block:clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.kk-pohja-kevyt .lp-kansi__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(2.5rem, 5vw, 4.5rem);
  row-gap:0;
  align-items:start;
}
.kk-pohja-kevyt .lp-kansi__otsikko{ grid-column:1; grid-row:1; }
/* Vasen sarake on lomaketta korkeampi, joten lomake kulkee mukana vierittäessä
   eikä sen alle jää tyhjää aukkoa. */
.kk-pohja-kevyt .lp-kansi__lomake{
  grid-column:2; grid-row:1 / span 3;
  align-self:start;
  position:sticky;
  top:calc(var(--palkki) + var(--v5));
}
.kk-pohja-kevyt .lp-kansi__ingressi{
  grid-column:1; grid-row:2;
  margin:clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width:46ch;
}
/* REKO-rivi lomakkeen alla, vain tiloissa C ja D. Pikkutekstin koko, mutta
   musteen värinen, koska se on tilausikkunan ainoa maininta heron alueella.
   WP: kappale ja nuolilinkki ovat ryhmässä .lp-kansi__reko. */
.kk-pohja-kevyt .lp-kansi__reko{
  margin:var(--v4) 0 0;
  font-size:.875rem; line-height:1.6;
  color:var(--muste);
}
.kk-pohja-kevyt .lp-kansi__reko > p{ margin:0; }
/* Linkki aina omalle rivilleen, jottei 44 px:n kosketusalue venytä tekstiriviä. */
.kk-pohja-kevyt .lp-kansi__reko .nuoli:where(:not(.wp-block-button)){ display:flex; width:fit-content; font-size:.875rem; }
.kk-pohja-kevyt .lp-kansi__reko .wp-block-button.nuoli > .wp-block-button__link{ font-size:.875rem; }
.kk-pohja-kevyt .lp-kansi__kuva{ grid-column:1; grid-row:3; margin-top:clamp(2.5rem, 5vw, 4rem); }
.kk-pohja-kevyt .lp-kansi__kuva img{ aspect-ratio:3/4; }
@media (min-width:56.001rem){
  /* Pystykuva täyttäisi muuten yli 700 px korkeuden. */
  .kk-pohja-kevyt .lp-kansi__kuva img{ max-height:40rem; }
}

@media (max-width:56rem){
  .kk-pohja-kevyt .lp-kansi__ruudukko{ grid-template-columns:minmax(0,1fr); }
  .kk-pohja-kevyt .lp-kansi__otsikko,
  .kk-pohja-kevyt .lp-kansi__lomake,
  .kk-pohja-kevyt .lp-kansi__ingressi,
  .kk-pohja-kevyt .lp-kansi__kuva{ grid-column:1; grid-row:auto; }
  .kk-pohja-kevyt .lp-kansi__lomake{ position:static; }
  .kk-pohja-kevyt .lp-kansi__otsikko{ margin-bottom:clamp(1.5rem, 4vw, 2rem); }
  .kk-pohja-kevyt .lp-kansi__ingressi{ margin-top:clamp(2rem, 5vw, 2.5rem); max-width:52ch; }
  .kk-pohja-kevyt .lp-kansi__kuva{ margin-top:clamp(2rem, 5vw, 2.5rem); margin-inline:calc(-1 * var(--vuoto)); }
  .kk-pohja-kevyt .lp-kansi__kuva :is(.kuva__teksti, .wp-element-caption){ margin-inline-start:0; padding-inline:var(--vuoto); }
}

/* ---------- Lomake ---------- */

/* Kannen lomakkeen otsikko on h2 (sivun toinen otsikkotaso). */
/* Riviväli, kirjainväli ja opsz peritään h2:lta kuten landing.html:ssä
   (.lomakelaatikko h2 asettaa siellä vain koon ja rytmin). */
.kk-pohja-kevyt .lomakelaatikko h2{
  font-size:1.25rem; margin-bottom:var(--v5);
  padding-bottom:var(--v3); border-bottom:1px solid var(--reuna);
}

/* ---------- Oppaan sisällysluettelo ---------- */

.kk-pohja-kevyt .opas__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
  padding-block:0;
  margin-top:clamp(2rem, 4vw, 3rem);
}
/* WP: numerot 01–05 tulevat laskurista, eivät tekstistä. Listakohdan teksti
   on mockupin .sisallys__teksti, numero ::before on .sisallys__nro. */
.kk-pohja-kevyt .sisallys{ display:grid; counter-reset:sisallys; }
.kk-pohja-kevyt .sisallys > li{
  display:grid;
  grid-template-columns:clamp(2.25rem, 4vw, 3rem) minmax(0,1fr);
  gap:var(--v4);
  align-items:baseline;
  padding-block:clamp(1rem, 2.2vw, 1.375rem);
  border-top:1px solid var(--reuna-vahva);
  counter-increment:sisallys;
  font-family:var(--otsikko); font-weight:500;
  font-size:clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  line-height:1.4; color:var(--muste);
  font-variation-settings:"opsz" 36;
}
.kk-pohja-kevyt .sisallys > li:last-child{ border-bottom:1px solid var(--reuna-vahva); }
.kk-pohja-kevyt .sisallys > li::before{
  content:counter(sisallys, decimal-leading-zero);
  font-family:var(--otsikko); font-weight:700; font-size:1.0625rem;
  font-variant-numeric:tabular-nums; color:var(--brandi);
  font-variation-settings:"opsz" 24;
}
@media (max-width:56rem){
  .kk-pohja-kevyt .opas__ruudukko{ grid-template-columns:minmax(0,1fr); }
  .kk-pohja-kevyt .opas__kuva{ margin-inline:calc(-1 * var(--vuoto)); }
  .kk-pohja-kevyt .opas__kuva :is(.kuva__teksti, .wp-element-caption){ padding-inline:var(--vuoto); }
}
body.kk-pohja-kevyt:not(.logged-in) .opas__ruudukko:not(:has(> .kuva:not(.kk-kuvapaikka))),
.kk-pohja-kevyt .opas__ruudukko:not(:has(> .kuva)){ grid-template-columns:minmax(0,1fr); }

/* ---------- Miksi listalle kannattaa liittyä ---------- */

/* Kolme yhtä leveää saraketta: väli tulee column-gapista, eroitin omana viivanaan. */
.kk-pohja-kevyt .syyt{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-rows:auto auto;
  column-gap:clamp(2rem, 4.8vw, 4rem);
  row-gap:0;
  margin-top:clamp(2rem, 4vw, 3rem);
}
.kk-pohja-kevyt .syy{ position:relative; min-width:0; }
@supports (grid-template-rows: subgrid){
  .kk-pohja-kevyt .syy{
    display:grid;
    grid-row:span 2;
    grid-template-rows:subgrid;
    grid-template-columns:minmax(0,1fr);
  }
}
.kk-pohja-kevyt .syy + .syy::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(-1 * clamp(1rem, 2.4vw, 2rem));
  border-inline-start:1px solid var(--reuna-vahva);
}
.kk-pohja-kevyt .syy h3{ margin-bottom:var(--v3); }
.kk-pohja-kevyt .syy p{ color:var(--hillitty); margin:0; }
@media (max-width:56rem){
  .kk-pohja-kevyt .syyt{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; column-gap:0; }
  .kk-pohja-kevyt .syy{ display:block; grid-row:auto; padding-block:var(--v5); }
  .kk-pohja-kevyt .syy:first-child{ padding-top:0; }
  .kk-pohja-kevyt .syy + .syy{ border-top:1px solid var(--reuna-vahva); }
  .kk-pohja-kevyt .syy + .syy::before{ content:none; }
}

/* ---------- Numerot ---------- */

/* WP: ul.numerot > li.numero → ryhmä .numerot > ryhmä .numero. */
.kk-pohja-kevyt .numerot{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-block:1px solid var(--reuna-vahva);
  margin-block:clamp(2rem, 4vw, 3rem);
}
.kk-pohja-kevyt .numero{ padding:clamp(1.25rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.5rem); }
.kk-pohja-kevyt .numero:first-child{ padding-inline-start:0; }
.kk-pohja-kevyt .numero:last-child{ padding-inline-end:0; }
.kk-pohja-kevyt .numero + .numero{ border-inline-start:1px solid var(--reuna-vahva); }
.kk-pohja-kevyt .numero__arvo{
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  line-height:1; letter-spacing:-.03em;
  font-variation-settings:"opsz" 144;
  font-variant-numeric:tabular-nums;
  color:var(--brandi); margin:0 0 var(--v3);
}
.kk-pohja-kevyt .numero__selite{
  margin:0; font-size:.9375rem; font-weight:600;
  letter-spacing:.01em;
  color:var(--hillitty); line-height:1.5;
  max-width:24ch;
}
@media (max-width:48rem){
  .kk-pohja-kevyt .numerot{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kk-pohja-kevyt .numero{ padding-inline:0; }
  .kk-pohja-kevyt .numero:nth-child(2n){ padding-inline-start:clamp(1rem, 4vw, 1.5rem); }
  .kk-pohja-kevyt .numero:nth-child(2n+1){ padding-inline-end:clamp(1rem, 4vw, 1.5rem); }
  .kk-pohja-kevyt .numero + .numero{ border-inline-start:0; }
  .kk-pohja-kevyt .numero:nth-child(2n){ border-inline-start:1px solid var(--reuna-vahva); }
  .kk-pohja-kevyt .numero:nth-child(n+3){ border-top:1px solid var(--reuna-vahva); }
}

/* ---------- Hinnasto (listamuoto) ---------- */

/* WP: [kk_hinnasto muoto="lista"] tulostaa ul.ruokalista.ruokalista--lista,
   jossa rivi on suoraan li.ruoka (ei .ruoka__riviä eikä kuvausta). */
.kk-pohja-kevyt .ruokalista--lista{ margin-top:clamp(2rem, 4vw, 3rem); }
.kk-pohja-kevyt .ruokalista--lista .ruoka{
  display:flex; align-items:baseline; gap:.5rem;
  padding-block:var(--v3);
}

/* ---------- Kasvattaja ---------- */

.kk-pohja-kevyt .kasvattaja__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}
@media (max-width:56rem){
  .kk-pohja-kevyt .kasvattaja__ruudukko{ grid-template-columns:minmax(0,1fr); }
  .kk-pohja-kevyt .kasvattaja__kuva{ margin-inline-start:0; }
  .kk-pohja-kevyt .kasvattaja__kuva :is(.kuva__teksti, .wp-element-caption){ margin-inline-start:0; }
}

/* ---------- Toinen lomake ---------- */

.kk-pohja-kevyt .liity{
  background:var(--nosto);
  border-block:1px solid var(--reuna-vahva);
}
.kk-pohja-kevyt .liity__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(2.5rem, 5vw, 5rem);
  /* Vasen palsta on vain otsikko ja yksi virke, lomake paljon korkeampi.
     Aloitukseen tasaus jättäisi tekstin alle tyhjää. */
  align-items:center;
  padding-block:clamp(3rem, 6.5vw, 5.5rem);
}
.kk-pohja-kevyt .liity h2{ margin-bottom:var(--v5); }
.kk-pohja-kevyt .liity__teksti > p{ font-size:var(--t-ingressi); line-height:1.75; color:var(--muste); }
@media (max-width:56rem){
  .kk-pohja-kevyt .liity__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Kiinteä alapalkki mobiilissa ---------- */

@media (max-width:59.999rem){
  /* Postilistalomake ruudulla (runko.js asettaa luokan): palkki ei peitä
     lomakkeen lähetyspainiketta. */
  html.lomake-nakyvissa .kk-pohja-kevyt .pohjapalkki{ display:none; }
}

/* ---------- Minimialatunniste ---------- */

.kk-pohja-kevyt .jalki{ padding-block:clamp(2rem, 4.5vw, 3rem); }
.kk-pohja-kevyt .jalki__rivi{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.35rem clamp(.75rem, 2vw, 1.25rem);
  font-size:.9375rem; color:var(--footer-hillitty);
}
.kk-pohja-kevyt .jalki__rivi li{ display:flex; align-items:center; gap:clamp(.75rem, 2vw, 1.25rem); }
.kk-pohja-kevyt .jalki__rivi li + li::before{ content:"·"; color:#8A7C6C; font-size:1.25rem; line-height:1; }
@media (max-width:48rem){
  /* Tunnus omalle rivilleen, jottei erotinpiste jää rivin alkuun. */
  .kk-pohja-kevyt .jalki__rivi{ align-items:flex-start; }
  .kk-pohja-kevyt .jalki__rivi li:first-child{ flex-basis:100%; margin-bottom:var(--v2); }
  .kk-pohja-kevyt .jalki__rivi li:nth-child(2)::before{ content:none; }
}
.kk-pohja-kevyt .jalki .logo{ margin-bottom:0; }
.kk-pohja-kevyt .jalki .logo__nimi{ font-size:1.125rem; font-variation-settings:"opsz" 60; }
.kk-pohja-kevyt .jalki a{
  display:inline-flex; align-items:center; min-height:2.75rem;
}