/* =============================================================================
   Sisulehtede sektsioonid (ACF Flexible Content).
   Laetakse ainult lehtedel, kus sektsioonid on kasutusel.
   ========================================================================== */

.pd-s { padding-block: var(--pd-s-12); }
.pd-s + .pd-s { padding-top: 0; }

/* Tume CTA vajab ise oma õhku, muidu kleepub eelmise sektsiooni külge. */
.pd-s.pd-cta { padding-block: var(--pd-s-12); margin-top: var(--pd-s-12); }
.pd-s + .pd-s.pd-cta { padding-top: var(--pd-s-12); }

.pd-s__pealkiri {
  font-size: var(--pd-t-2xl);
  margin-bottom: var(--pd-s-5);
  max-width: 24ch;
}
/*
 * Sissejuhatus ja märkus on ACF-i tekstiväljad seadega `new_lines: wpautop` —
 * ACF tagastab need juba `<p>` sees. Varem oli mallis veel oma `<p>` ümber ja
 * väärtus läks `esc_html()` alt läbi, mistõttu lugeja nägi lehel päris
 * märgendeid: „<p>Hinnaloogika on lihtne…</p>".
 *
 * Nüüd on väliseks konteineriks `div` ja lõigud tulevad ACF-ist. Klient saab
 * kirjutada mitu lõiku ja need ka renderduvad.
 */
.pd-s__sisse {
  max-width: 60ch;
  margin-top: calc(var(--pd-s-3) * -1);
  margin-bottom: var(--pd-s-6);
}
.pd-s__sisse p {
  font-size: var(--pd-t-lg);
  line-height: 1.55;
  color: var(--pd-tint-2);
}
.pd-s__sisse p + p { margin-top: var(--pd-s-4); }

.pd-s__markus {
  max-width: 62ch;
  margin-top: var(--pd-s-5);
  padding-top: var(--pd-s-4);
  border-top: var(--pd-piir);
}
.pd-s__markus p {
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-3);
}
.pd-s__markus p + p { margin-top: var(--pd-s-3); }

/* --- Numbrid -------------------------------------------------------------- */

.pd-faktid {
  display: grid;
  gap: var(--pd-s-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 0;
}
.pd-fakt {
  display: flex; flex-direction: column; gap: var(--pd-s-1);
  padding: var(--pd-s-5);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-left: 3px solid var(--pd-mark);
  border-radius: var(--pd-raadius);
}
.pd-fakt__vaartus {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pd-fakt__silt {
  margin: 0;
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-2);
}

/* --- Infokaardid ---------------------------------------------------------- */

.pd-infokaardid {
  display: grid;
  gap: var(--pd-s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .pd-infokaardid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-infokaardid[data-arv="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .pd-infokaardid[data-arv="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pd-infokaart {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  padding: var(--pd-s-6);
  background: var(--pd-pind);
  border: var(--pd-piir);
  /* Tirkiis ülaserv annab valgetele kaartidele värvi ja seob nad sammude
     ribaga; punane jääb tegevuste jaoks. */
  border-top: 3px solid var(--pd-teine);
  border-radius: var(--pd-raadius);
}
.pd-infokaart__pealkiri { font-size: var(--pd-t-lg); }
.pd-infokaart__sisu { max-width: none; gap: var(--pd-s-3); }
.pd-infokaart__sisu p { font-size: var(--pd-t-sm); color: var(--pd-tint-2); }

/* --- Sammud sisulehel ----------------------------------------------------- */

/* Avalehel on sammud kõrvuti; sisulehel on nad sagedamini pikema tekstiga,
   nii et vertikaalne rivi loeb paremini. */
.pd-s--sammud .pd-sammud--rida {
  grid-template-columns: 1fr;
  gap: var(--pd-s-5);
  counter-reset: none;
  max-width: 46rem;
}
.pd-s--sammud .pd-samm {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  grid-template-areas: "nr nimi" ". tekst";
  gap: var(--pd-s-1) var(--pd-s-4);
  align-items: baseline;
  padding-bottom: var(--pd-s-5);
  border-bottom: var(--pd-piir);
}
.pd-s--sammud .pd-samm:last-child { border-bottom: 0; padding-bottom: 0; }
/* Sisulehel on ring väiksem, aga värvid tulevad komponendist. */
.pd-s--sammud .pd-samm__nr {
  grid-area: nr;
  width: 2.25rem; height: 2.25rem;
  font-size: var(--pd-t-xs);
}
.pd-s--sammud .pd-samm__nimi { grid-area: nimi; margin-top: 0; font-size: var(--pd-t-md); }
.pd-s--sammud .pd-samm p { grid-area: tekst; }

/* --- Juhiste loend -------------------------------------------------------- */

.pd-juhised {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pd-s-2);
  grid-template-columns: 1fr;
  max-width: 46rem;
}
@media (min-width: 52rem) {
  .pd-juhised { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

/*
 * „Tee" ja „ära tee" kõrvuti veergudena. Vasak veerg on see, mida teha,
 * parem see, mida vältida — nii ei pea lugeja iga rea märki eraldi lugema.
 */
.pd-juhised-paar {
  display: grid;
  gap: var(--pd-s-2);
  grid-template-columns: 1fr;
}
.pd-juhised--veerg {
  grid-template-columns: 1fr;
  max-width: none;
  align-content: start;
}
@media (min-width: 52rem) {
  .pd-juhised-paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pd-s-2) var(--pd-s-5);
    align-items: start;
  }
}

.pd-juhis {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--pd-s-3);
  align-items: start;
  padding: var(--pd-s-3) var(--pd-s-4);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  font-size: var(--pd-t-sm);
}
.pd-juhis__mark {
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}
.pd-juhis--jah  { border-left: 2px solid var(--pd-ok); }
.pd-juhis--jah  .pd-juhis__mark { color: var(--pd-ok); }
.pd-juhis--ei   { border-left: 2px solid var(--pd-viga); }
.pd-juhis--ei   .pd-juhis__mark { color: var(--pd-viga); }
.pd-juhis--info { border-left: 2px solid var(--pd-teine); }
.pd-juhis--info .pd-juhis__mark { color: var(--pd-teine-tekst); }

/* --- Paigutuste tabel ----------------------------------------------------- */

.pd-s--paigutused .pd-paigutus { margin-bottom: var(--pd-s-10); }

.pd-paigutuse-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pd-t-sm);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  overflow: hidden;
}
.pd-paigutuse-tabel :is(th, td) {
  text-align: left;
  padding: var(--pd-s-3) var(--pd-s-4);
  border-bottom: var(--pd-piir);
  vertical-align: top;
}
.pd-paigutuse-tabel thead th {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  font-weight: 500;
  background: var(--pd-pind-2);
  white-space: nowrap;
}
.pd-paigutuse-tabel tbody tr:last-child :is(th, td) { border-bottom: 0; }
.pd-paigutuse-tabel tbody th { width: 4.5rem; }
.pd-paigutuse-tabel td:last-child { color: var(--pd-tint-2); }

@media (max-width: 44rem) {
  .pd-s--paigutused .pd-wrap { overflow-x: auto; }
  .pd-paigutuse-tabel { min-width: 34rem; }
}

/*
 * Iga rõivatüüp on oma plokk: pealkiri, ruudustik, kohe selle all tabel.
 * Varem olid kõik ruudustikud koos ja tabelid nende järel — siis pidi lugeja
 * kolm ekraanitäit kerima, et ühe koodi kirjeldust leida.
 */
.pd-roivas + .pd-roivas { margin-top: var(--pd-s-16); }

.pd-roivas__nimi {
  font-size: var(--pd-t-xl);
  margin-bottom: var(--pd-s-4);
  padding-bottom: var(--pd-s-2);
  border-bottom: var(--pd-piir-tugev);
}

.pd-roivas .pd-paigutus { margin-bottom: var(--pd-s-5); }

/*
 * Ruudustiku lahter lingib sama koodi tabelireale. `:target` tõstab rea
 * esile, et lugeja näeks kohe, kuhu ta jõudis. `scroll-margin-top` hoiab
 * rea kleepuva päise alt välja.
 */
.pd-paigutuse-tabel tbody tr { scroll-margin-top: 6rem; }
.pd-paigutuse-tabel tbody tr:target { background: var(--pd-mark-hell); }
.pd-paigutuse-tabel tbody tr:target :is(th, td) { border-color: rgba(232, 64, 42, .3); }