/* ======================================================================
   Karhulan Kanat — Peltopäivä: alasivujen osiot
   Lähde: tila.html, palvelut.html, yhteystiedot.html, tietosuoja.html ja
   kiitos.html, kunkin "TÄMÄN SIVUN OMAT TYYLIT" -osio. Mockupeissa
   identtiset lohkot (sivuotsikko, rajaus, kuvapaikat) ovat tässä kerran.
   WordPress-merkinnän vuoksi muutetut valitsimet on merkitty "WP:".
   ====================================================================== */

/* ---------- Alasivun otsikkolohko ---------- */

.sivuotsikko{
  padding-block:clamp(2.5rem, 6vw, 4.75rem) clamp(2rem, 4.5vw, 3.25rem);
}
.sivuotsikko .ingressi{ max-width:52ch; }

/* ---------- Osion rajaus ilman osastonimeä ---------- */

/* Sama 1 px viiva kuin .osasto-merkinnässä. Alasivuilla osion otsikko on jo
   osion nimi, joten nimeä ei toisteta viivan päällä. */
.rajaus{
  height:0;
  margin:0 0 clamp(1.75rem, 4vw, 3rem);
  border:0;
  border-top:1px solid var(--muste);
}

/* ---------- Kuvapaikat ---------- */

/* Slot-nimi, kuvasuhde ja yhden rivin ohje siitä, mitä kuvassa pitää olla.
   Kävijä ei näe kuvapaikkoja (kk-kuvapaikka), ylläpitäjä näkee. */
.kuva__ala{
  position:relative;
  display:grid; place-content:center; align-content:center; gap:.4rem;
  text-align:center; padding:var(--v5);
  background-color:var(--nosto);
  background-image:repeating-linear-gradient(-45deg, rgba(140,59,30,0) 0 11px, rgba(140,59,30,.05) 11px 12px);
  border:1px solid var(--reuna-vahva);
}
.kuva__ala::before{
  content:""; position:absolute; inset:.625rem;
  border:1px solid var(--reuna-vahva); pointer-events:none;
}
.kuva--4-3 .kuva__ala{ aspect-ratio:4/3; }
.kuva--3-2 .kuva__ala{ aspect-ratio:3/2; }
.kuva--4-5 .kuva__ala{ aspect-ratio:4/5; }
.kuva--16-9 .kuva__ala{ aspect-ratio:16/9; }
.kuva__merkki{
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.24em; text-transform:uppercase;
  color:var(--hillitty);
}
.kuva__slot{
  font-family:var(--otsikko); font-weight:500;
  font-size:clamp(.9375rem, 1.3vw, 1.125rem);
  font-variation-settings:"opsz" 24; color:var(--muste);
}

/* WP: kuvapaikan tilalle lisätty kuva saa saman kuvasuhteen luokasta. */
.kuva--4-3 img{ aspect-ratio:4/3; object-fit:cover; }
.kuva--3-2 img{ aspect-ratio:3/2; object-fit:cover; }
.kuva--4-5 img{ aspect-ratio:4/5; object-fit:cover; }
.kuva--16-9 img{ aspect-ratio:16/9; object-fit:cover; }

/* ---------- Pitkä leipätekstipalsta ---------- */

/* Osioiden leipäteksti on alasivuilla pidempää kuin etusivulla, joten
   riville annetaan luettava mitta. */
.teksti-palsta p{ max-width:62ch; }
.teksti-palsta > .kuva{ margin-top:clamp(1.75rem, 3.5vw, 2.5rem); }

/* ======================================================================
   Tila ja tuotanto
   ====================================================================== */

/* ---------- Lähikuva ja teksti rinnakkain ---------- */

.lahi__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--v6) clamp(2rem, 6vw, 5.5rem);
  align-items:center;
}
.lahi__kuva img{ aspect-ratio:3/4; }
@media (min-width:56.001rem){
  /* Pystykuva kasvaisi muuten korkeammaksi kuin viereinen teksti. */
  .lahi__kuva img{ max-height:36rem; }
}
@media (max-width:56rem){
  .lahi__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Teksti ja kuvapaikka rinnakkain ---------- */

.tuotanto__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--v6) clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
@media (max-width:56rem){
  .tuotanto__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Laidunbroilerit-osion jatkolinkit ---------- */

/* Nuolilinkit rivissä. Kapealla näytöllä ne rivittyvät allekkain.
   Tilaa-linkki näkyy vain, kun REKO-tilaus on auki (tilat C ja D).
   WP: mockupin <p class="linkkirivi"> on painikeryhmä. */
.linkkirivi{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--v3) var(--v5);
  margin-top:var(--v4);
}
/* Mockupissa rivi oli kappale, johon .teksti-palsta p -mitta osui. */
.teksti-palsta > .linkkirivi{ max-width:62ch; }

/* ======================================================================
   Muut palvelut
   ====================================================================== */

/* ---------- Täysleveä kuvakaista 16:9 ---------- */

/* Etusivun kuvakaista on rajattu kuvan omaan 2,36:1 suhteeseen. Ilmakuva on
   16:9, joten kapealla näytöllä se näkyy kokonaisena. Leveällä näytöllä 16:9
   kasvaisi kohtuuttoman korkeaksi kaistaksi, joten korkeus rajataan 34 rem:iin
   ja kuva rajautuu keskeltä. */
.kuvakaista--korkea img{ aspect-ratio:16/9; max-height:34rem; }

/* ---------- Palveluosio: kuva ja teksti vierekkäin ---------- */

.palvelu__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.palvelu__teksti h2{ margin-bottom:var(--v4); }
.palvelu__teksti p{ color:var(--hillitty); max-width:54ch; }
.palvelu__linkki{ margin:var(--v5) 0 0; }
/* WP: .palvelu__linkki .linkki → .palvelu__linkki a */
.palvelu__linkki a{
  display:inline-flex; align-items:center;
  min-height:2.75rem;
  font-weight:600; font-size:1.0625rem;
}
.palvelu__ulkoinen{ margin:0; }

/* Joka toinen osio peilataan, jottei sivu ole pelkkä pinon kuva-teksti-toisto.
   Vain työpöydällä: kapealla näytöllä lukujärjestys on aina kuva ennen tekstiä. */
@media (min-width:56.001rem){
  .palvelu--kaanteinen .palvelu__kuva{ grid-column:2; grid-row:1; }
  .palvelu--kaanteinen .palvelu__teksti{ grid-column:1; grid-row:1; }
}
@media (max-width:56rem){
  .palvelu__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Yhdistä käynnit ---------- */

.yhdista p{ color:var(--hillitty); max-width:58ch; }
/* Kaksi nuolilinkkiä allekkain: seuraava tilamyyntipäivä ja ajo-ohje.
   WP: painikeryhmä, jonka flex-suunta kumoaa ytimen oletuksen. */
.yhdista__linkit,
.wp-block-buttons.yhdista__linkit{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--v3);
  margin-top:var(--v4);
}

/* ======================================================================
   Yhteystiedot
   ====================================================================== */

.yhteys__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
@media (max-width:56rem){
  .yhteys__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

.yhteystiedot{ margin-top:clamp(1.5rem, 3vw, 2rem); }
.yhteystieto{
  border-top:1px solid var(--reuna-vahva);
  padding-block:var(--v3);
}
.yhteystieto:first-child{ border-top:0; padding-top:0; }
.yhteystieto:last-child{ border-bottom:1px solid var(--reuna-vahva); }
.yhteystieto__nimi{
  margin:0 0 var(--v1);
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--hillitty);
}
.yhteystieto__arvo{
  margin:0;
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  line-height:1.35; letter-spacing:-.015em;
  font-variation-settings:"opsz" 40;
  color:var(--muste);
  overflow-wrap:anywhere;
}
/* WP: a.yhteystieto__arvo → .yhteystieto__arvo a (linkki kappaleen sisällä). */
.yhteystieto__arvo a{
  display:inline-flex; align-items:center;
  min-height:2.75rem;
  color:var(--brandi); text-decoration:none;
  border-bottom:1px solid var(--reuna-vahva);
}
.yhteystieto__arvo a:hover{ color:var(--brandi-tumma); text-decoration:none; border-bottom-color:currentColor; }
.yhteystieto__arvo--luvut{ font-variant-numeric:tabular-nums; }

.ajo-ohje p{ color:var(--hillitty); max-width:52ch; }
.ajo-ohje .ingressi{ color:var(--muste); }

/* ---------- Kartta ---------- */

.kartta__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.75rem, 4vw, 3rem);
  align-items:start;
  margin-top:clamp(2rem, 4vw, 3rem);
}
.kartta__ohje p{ color:var(--hillitty); max-width:44ch; }
.kartta__ohje .nuoli{ margin-top:var(--v3); }
@media (max-width:56rem){
  .kartta__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Yhteydenottolomake ---------- */

/* Viestikenttä noudattaa samaa typografiaa kuin lyhyet kentät. Kehys on
   suljettu, koska monirivisen kentän korkeutta ei muuten näe. (Myyntisivun
   tilauslomakkeen tekstialue on myynti.css:ssä #tilaus-lomake-valitsimella.) */
.kentta textarea{
  width:100%;
  min-height:10rem;
  padding:.65rem .75rem;
  font-family:var(--otsikko); font-weight:500;
  font-size:1.0625rem; line-height:1.55;
  font-variation-settings:"opsz" 24;
  color:var(--muste);
  background:transparent;
  border:1.5px solid var(--muste);
  border-radius:0;
  resize:vertical;
  transition:border-color 180ms var(--helppo);
}
.kentta textarea::placeholder{ color:var(--hillitty); }
.kentta textarea:hover{ border-color:var(--brandi); }
.kentta textarea[aria-invalid="true"]{ border-color:var(--brandi-tumma); }

/* Lomakkeen yllä: REKO-tilaukset ohjataan tilauslomakkeelle. */
.viesti__ohje{ color:var(--hillitty); max-width:52ch; margin-bottom:var(--v5); }

.lomake__jalki{
  margin:var(--v4) 0 0;
  font-size:.9375rem; line-height:1.65; color:var(--hillitty);
  max-width:48ch;
}

/* ---------- Naapuriyritykset ---------- */

.naapurinosto p{ color:var(--hillitty); max-width:58ch; }
.naapurinosto .nuoli{ margin-top:var(--v4); }

/* ======================================================================
   Tietosuojaseloste
   ====================================================================== */

/* Rivin mitta pidetään noin 68 merkissä, jotta pitkää selostetta jaksaa lukea. */
.tekstisivu{ padding-top:0; }
.seloste{ max-width:68ch; }
.seloste > h2{
  font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom:var(--v4);
  padding-top:var(--v4);
  border-top:1px solid var(--muste);
}
.seloste h3{
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom:var(--v3);
  font-size:1.1875rem;
}
.seloste__yhteys{
  font-size:1.0625rem; line-height:1.85;
}
.seloste__yhteys strong{
  font-family:var(--otsikko); font-weight:700;
  font-size:1.1875rem;
  font-variation-settings:"opsz" 24;
}

/* Kosketuskohteet 44 px:iin myös leipätekstin sisällä. Pystypehmuste
   kasvattaa napautusalan ja negatiivinen marginaali kumoaa sen vaikutuksen
   rivinväliin, joten teksti ladotaan samalla rytmillä kuin ilman linkkejä.
   WP: .seloste .linkki → .seloste :is(p, li) a */
.seloste :is(p, li) a{
  display:inline-block;
  padding-block:.6rem;
  margin-block:-.6rem;
}
/* Rekisterinpitäjän tiedoissa jokainen linkki on omalla rivillään, joten
   siellä kosketuskohde saa viedä oman korkeutensa.
   WP: .seloste__yhteys .linkki → .seloste__yhteys a */
.seloste .seloste__yhteys a{
  display:inline-flex; align-items:center;
  min-height:2.75rem;
  padding-block:0; margin-block:0;
}

/* Luettelot: viiva merkkinä, sama väri kuin muillakin korostuksilla. */
.luettelo{ margin:0 0 var(--v4); padding:0; list-style:none; }
.luettelo li{
  position:relative;
  padding-inline-start:1.5rem;
  margin-bottom:var(--v3);
  line-height:1.65;
}
.luettelo li::before{
  content:"\2014";
  position:absolute; inset-inline-start:0; top:0;
  color:var(--brandi);
}

/* Tieto-, peruste- ja säilytysrivit kunkin keräyskohteen alla.
   WP: dl/dt/dd → ryhmä, jossa vuorottelevat kappaleet .maarat__nimi ja .maarat__arvo. */
.maarat{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:var(--v3) var(--v5);
  margin:0 0 var(--v5);
}
.maarat > .maarat__nimi{
  margin:0;
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--hillitty);
  padding-top:.3rem;
}
.maarat > .maarat__arvo{ margin:0; color:var(--muste); line-height:1.65; }
@media (max-width:34rem){
  .maarat{ grid-template-columns:minmax(0,1fr); gap:var(--v1); }
  .maarat > .maarat__arvo{ margin-bottom:var(--v4); }
  .maarat > .maarat__arvo:last-child{ margin-bottom:0; }
}

/* ---------- Taulukko ---------- */

/* Kapealla näytöllä taulukkoa vieritetään omassa kehyksessään. Sivu itse ei
   vierity sivusuunnassa millään leveydellä.
   WP: .taulukko → .taulukko__kaari > table (taulukkolohkon figure on kehys). */
.taulukko__kaari{
  overflow-x:auto;
  margin:0 0 var(--v4);
}
.taulukko__kaari:focus-visible{ outline-offset:-2px; }
.taulukko__kaari > table{
  width:100%;
  min-width:33rem;
  border-collapse:collapse;
  font-size:.9375rem;
  line-height:1.6;
}
.taulukko__kaari > table th,
.taulukko__kaari > table td{
  text-align:start; vertical-align:top;
  padding:var(--v3) var(--v4) var(--v3) 0;
  border:0;
  border-bottom:1px solid var(--reuna);
}
.taulukko__kaari > table > thead{ border:0; }
.taulukko__kaari > table thead th{
  border-bottom:1px solid var(--muste);
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--hillitty);
}
.taulukko__kaari > table tbody th{
  font-family:var(--otsikko); font-weight:700;
  font-size:1.0625rem; font-variation-settings:"opsz" 24;
  color:var(--muste);
}
.taulukko__kaari > table td{ color:var(--hillitty); }
/* WP: kuvateksti on taulukon saavutettava nimi (render_block kopioi sen
   aria-labeliksi). Mockupissa nimeä ei näy, joten se piilotetaan näkyvistä. */
.taulukko__kaari > figcaption{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}
/* Vihje näkyy vain niillä leveyksillä, joilla taulukko oikeasti vierii:
   palstalle jää silloin alle 33rem eli taulukon vähimmäisleveyden verran tilaa. */
.taulukko__vihje{ display:none; margin:0 0 var(--v5); }
@media (max-width:36rem){
  .taulukko__vihje{ display:block; }
}

/* ---------- Luonnoshuomautus ---------- */

.luonnos{
  max-width:68ch;
  margin:0 0 clamp(2rem, 4vw, 3rem);
  padding:clamp(1.25rem, 3vw, 1.75rem);
  background:var(--nosto);
  border:1px solid var(--reuna-vahva);
  border-inline-start:4px solid var(--brandi);
}
.luonnos__otsikko{
  margin:0 0 var(--v3);
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-pieni); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brandi);
}
.luonnos p{ color:var(--muste); }

/* ======================================================================
   Kiitos
   ====================================================================== */

/* Kiitossivu saa enemmän ilmaa ympärilleen kuin etusivun kansi. */
.kansi--kiitos{ padding-block:clamp(3rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem); }
.kansi--kiitos .ingressi{ max-width:44ch; }

/* Jatkolinkki jää tunnusviivan alle omaksi rivikseen. Ylävälin hoitaa
   .kansi .napit -säännön alamarginaali, joten tähän ei tule omaa. */
.kiitos__jatko{
  display:grid;
  justify-items:start;
}
.kiitos__jatko p{ margin-bottom:var(--v2); }
/* Avoimet-listan kappaleet pitävät jaetun .avoin p -säännön (mockupissa
   jaettu.css ladataan sivun omien tyylien jälkeen). */
.kiitos__jatko .avoin p{ margin:0; }

/* Tilan mukainen jatko (kk-myyntitila.js): C/D avoimet jakelut,
   B seuraava tilamyyntipäivä. Lohko venyy palstan levyiseksi, jotta
   avoimet-lista ei kutistu sisältönsä levyiseksi. */
.kiitos__tila{
  justify-self:stretch;
  margin-bottom:var(--v5);
}
.kiitos__jatko .avoimet{ width:100%; max-width:36rem; }
/* .kansi__osoite on hillitty harmaa. Jakelun nimi on rivin otsikko, joten
   se saa leipätekstin värin. */
.kiitos__jatko .avoin__nimi{ color:var(--muste); }

/* ======================================================================
   WP: ruudukot ilman kuvaa
   Kävijä ei näe kuvapaikkoja (kk-kuvapaikka poistetaan palvelimella). Kaksi-
   palstainen ruudukko, jonka kuvapalsta puuttuu, muuttuu yksipalstaiseksi.
   ====================================================================== */

:is(.tuotanto__ruudukko, .palvelu__ruudukko, .kartta__ruudukko, .kasvattaja__ruudukko):not(:has(> .kuva)),
body:not(.logged-in):not(.editor-styles-wrapper) :is(.tuotanto__ruudukko, .palvelu__ruudukko, .kartta__ruudukko, .kasvattaja__ruudukko):not(:has(> .kuva:not(.kk-kuvapaikka))){
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:56.001rem){
  body:not(.logged-in):not(.editor-styles-wrapper) .palvelu--kaanteinen:not(:has(> .kuva:not(.kk-kuvapaikka))) .palvelu__teksti,
  .palvelu--kaanteinen:not(:has(> .kuva)) .palvelu__teksti{ grid-column:1; }
}