/* =============================================================================
   Avaleht. Laetakse ainult avalehel.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/*
 * Hero on soe gradient, mitte valge pind — live lehe eeskujul. Taga on kaks
 * pehmet ringi ja punktimuster; need on puhas kaunistus, seega `::before` ja
 * `::after`, mitte märgend. `overflow: hidden` hoiab nad kastis.
 *
 * Tekst on nende peal ikka `--pd-tint` (#14181D), mis annab kõige tumedamal
 * gradiendi toonil (#FFD2AC) 11.4:1 — värv ei tule loetavuse arvelt.
 */
.pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pd-soe-1) 0%, var(--pd-soe-2) 52%, var(--pd-soe-3) 100%);
  padding-block: var(--pd-s-16) var(--pd-s-20);
}
.pd-hero::before,
.pd-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
/* Suur pehme ring parema veeru taga. */
.pd-hero::before {
  width: 34rem; height: 34rem;
  right: -6rem; top: -8rem;
  background: radial-gradient(circle at 40% 40%, rgba(255,112,0,.20), rgba(255,112,0,0) 70%);
}
/* Väike tirkiisiring vasakul all. */
.pd-hero::after {
  width: 18rem; height: 18rem;
  left: -5rem; bottom: -7rem;
  background: radial-gradient(circle at 60% 40%, rgba(16,161,157,.18), rgba(16,161,157,0) 70%);
}

/* Punktimuster hero alumises servas — live lehel on seal sama motiiv. */
.pd-hero__ruudustik::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -1.5rem;
  width: 9rem; height: 4.5rem;
  background-image: radial-gradient(rgba(20,24,29,.22) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
  pointer-events: none;
}
@media (max-width: 62rem) { .pd-hero__ruudustik::after { display: none; } }

.pd-hero__ruudustik {
  position: relative;
  display: grid;
  gap: var(--pd-s-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .pd-hero__ruudustik { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--pd-s-16); }
}

.pd-hero__tekst { display: flex; flex-direction: column; gap: var(--pd-s-5); }

/*
 * 14ch surus pealkirja viiele reale ja hero läks liiga kõrgeks. Laiem mõõt ja
 * väiksem kiri annavad kolm rida; `text-wrap: balance` (base.css) hoiab read
 * ühtlase pikkusega.
 */
.pd-hero__tekst h1 {
  max-width: 24ch;
  font-size: clamp(1.95rem, 1rem + 2.8vw, 2.75rem);
}
/* Soojal gradiendil kaob kahvatu lillakas pill ära — siin täisvärviline. */
.pd-hero__eyebrow { background: var(--pd-c3-tekst); color: #FFF; }

.pd-hero__tegevus { display: flex; flex-wrap: wrap; gap: var(--pd-s-3); }

.pd-hero__faktid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--pd-s-5);
  margin-top: var(--pd-s-3);
  padding-top: var(--pd-s-5);
  /* Hall piirjoon kadus soojale taustale ära. */
  border-top: 1px solid rgba(20, 24, 29, .16);
}
.pd-hero__faktid > div { display: flex; flex-direction: column; gap: var(--pd-s-1); }
.pd-hero__faktid dt {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  /* `--pd-tint-3` annab gradiendi tumedaimal toonil 3.86 — liiga vähe. */
  color: var(--pd-tint-2);
}
.pd-hero__faktid dd {
  margin: 0;
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-lg);
  font-weight: 750;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

/*
 * Hero pilt on live lehe pusa läbipaistva taustaga. Ta ei saa piiri ega
 * tausta — pusa ise on kuju. `max-width` hoiab ta kitsal ekraanil
 * mõistlikus mõõdus, muidu venib ta üle poole ekraanist.
 */
.pd-hero__pilt { display: flex; justify-content: center; }
.pd-hero__pilt img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
}


/* --- Kategooriad --------------------------------------------------------- */

.pd-kat-loend {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pd-s-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.pd-kat {
  display: flex; flex-direction: column;
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  box-shadow: var(--pd-vari-kaart);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--pd-kiire), box-shadow var(--pd-kiire);
}
.pd-kat:hover { transform: translateY(-3px); box-shadow: var(--pd-vari-2); }

/* Igal kategoorial oma värv — sama neljane ring, mis lubadustel. */
.pd-kat-loend li:nth-child(4n + 1) .pd-kat { border-top: 3px solid var(--pd-c1-ere); }
.pd-kat-loend li:nth-child(4n + 2) .pd-kat { border-top: 3px solid var(--pd-c2-ere); }
.pd-kat-loend li:nth-child(4n + 3) .pd-kat { border-top: 3px solid var(--pd-c3-ere); }
.pd-kat-loend li:nth-child(4n)     .pd-kat { border-top: 3px solid var(--pd-c4-ere); }

/*
 * Kategooria pilt on selle kategooria värskeima toote pilt. Kuvasuhe on
 * madalam kui tootekaardil (4/5), sest kategooriaid on neli kõrvuti ja
 * täispikk rõivas teeks reast ekraanitäie.
 *
 * `object-fit: cover` lõikas rõiva servad maha — klient nägi poolikuid
 * särke ja pükse. `contain` näitab toote tervikuna; kadreering ei ole siin
 * oluline, sest tegemist on kategooria näidisega, mitte tootefotoga.
 * Sisemine õhk hoiab rõiva ära kaardi servast.
 *
 * Taust on valge, mitte kategooria toonis: tootepiltidel on endal valge
 * taust, nii et värviline pind jättis pildi keskele nähtava valge
 * ristküliku. Kategooria värv on ülemises 3px joones, sellest piisab.
 */
.pd-kat__pilt {
  display: block;
  aspect-ratio: 4 / 3;
  padding: var(--pd-s-4);
  background: #fff;
  overflow: hidden;
}
.pd-kat__pilt img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--pd-keskm);
}
.pd-kat:hover .pd-kat__pilt img { transform: scale(1.03); }

.pd-kat__tekst {
  display: flex; flex-direction: column; gap: var(--pd-s-1);
  padding: var(--pd-s-5);
}

.pd-kat__nimi {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pd-tint);
}
.pd-kat__arv {
  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-variant-numeric: tabular-nums;
}

/* --- Arvustused ---------------------------------------------------------- */

.pd-arvustused {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pd-s-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.pd-arvustus {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  padding: var(--pd-s-6);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  box-shadow: var(--pd-vari-kaart);
}
/* Iga arvustus saab oma värvi — sama neljane ring, mis mujal lehel. */
.pd-arvustus:nth-child(4n + 1) { border-top: 3px solid var(--pd-c1-ere); }
.pd-arvustus:nth-child(4n + 2) { border-top: 3px solid var(--pd-c2-ere); }
.pd-arvustus:nth-child(4n + 3) { border-top: 3px solid var(--pd-c3-ere); }
.pd-arvustus:nth-child(4n)     { border-top: 3px solid var(--pd-c4-ere); }
.pd-arvustus__tarnid { color: #C98A00; letter-spacing: .1em; font-size: var(--pd-t-sm); }
.pd-arvustus blockquote {
  margin: 0;
  font-size: var(--pd-t-sm);
  line-height: 1.6;
  color: var(--pd-tint);
}
.pd-arvustus cite {
  font-style: normal;
  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);
  margin-top: auto;
}

/* --- Tutvustus ja eelised ------------------------------------------------- */

/*
 * Live lehe „Usaldusväärne riiete trükk…" plokk: kolmest pildist kollaaž
 * vasakul, tekst ja neli eelist paremal. Kitsal ekraanil tekst enne pilte —
 * DOM-i järjekord on tekst, pildid, ja laia ekraani ruudustik tõstab pildid
 * esimesse veergu.
 */
.pd-tutvustus {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--pd-s-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .pd-tutvustus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pd-s-12); }
  .pd-tutvustus__pildid { grid-column: 1; grid-row: 1; }
  .pd-tutvustus__tekst  { grid-column: 2; grid-row: 1; }
}

/*
 * Üks pikk pilt vasakul üle kahe rea, kaks väiksemat paremal üksteise all.
 *
 * Kogu kollaaži kõrguse annab konteineri `aspect-ratio`, MITTE piltide oma
 * kõrgus. Ilma selleta venitasid parema veeru kaks portreepilti ruudustiku
 * kõrgemaks kui vasak pilt ja veerud jäid eri pikkusega — `1fr` rida
 * mõõdetakse automaatkõrgusega ruudustikus ikkagi sisu järgi. Definiitne
 * kõrgus + `minmax(0, 1fr)` sunnib kõik kolm pilti oma lahtrisse ja lõikamise
 * teeb `object-fit: cover`.
 *
 * Suhe 13/10 on valitud nii, et vasak veerg tuleks umbes 3:4 — sama kuju, mis
 * pildil endal, nii et sealt ei lõigata midagi olulist maha.
 */
.pd-tutvustus__pildid {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pd-s-3);
  aspect-ratio: 13 / 10;
}
/*
 * Live lehel on kollaaži taga oranž veerandring ja triibutatud ketas. Sama
 * motiiv siin: `::before` on pehme ring vasakul üleval, `::after` punktiketas
 * paremal all. Puhas kaunistus — kummalgi ei ole märgendit ega sisu.
 */
.pd-tutvustus__pildid::before,
.pd-tutvustus__pildid::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.pd-tutvustus__pildid::before {
  width: 11rem; height: 11rem;
  left: -3rem; top: -2.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, rgba(255,112,0,.28), rgba(255,112,0,0) 72%);
}
.pd-tutvustus__pildid::after {
  width: 6.5rem; height: 6.5rem;
  right: -2rem; bottom: -2rem;
  background-image: radial-gradient(rgba(16,161,157,.5) 1.5px, transparent 1.6px);
  background-size: 11px 11px;
}
@media (max-width: 56rem) {
  .pd-tutvustus__pildid::before,
  .pd-tutvustus__pildid::after { display: none; }
}
.pd-tutvustus__pilt {
  margin: 0;
  min-width: 0; min-height: 0;
  overflow: hidden;
  border-radius: var(--pd-raadius);
  background: var(--pd-pind-2);
}
.pd-tutvustus__pilt img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pd-tutvustus__pilt--suur { grid-column: 1; grid-row: 1 / span 2; }

.pd-tutvustus__tekst { display: flex; flex-direction: column; gap: var(--pd-s-4); max-width: 60ch; }
.pd-tutvustus__tekst .pd-eelised { margin-top: var(--pd-s-2); }
.pd-tutvustus__tekst h2 { font-size: var(--pd-t-2xl); }
.pd-tutvustus__tekst p { color: var(--pd-tint-2); }

/*
 * Eelised ja lubadused olid hallid linnukesega read. Live lehel on nad
 * värviliste ringidega — iga rida oma tooniga. Neli värvi käivad ringi
 * `:nth-child` järgi.
 */
.pd-eelised,
.pd-lubadused {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--pd-s-3);
}
.pd-eelised li,
.pd-lubadused li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--pd-s-3);
  align-items: start;
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-2);
}
.pd-eelised li::before,
.pd-lubadused li::before {
  content: "✓";
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  font-size: var(--pd-t-xs);
  font-weight: 800;
  line-height: 1;
}
:is(.pd-eelised, .pd-lubadused) li:nth-child(4n + 1)::before { background: var(--pd-c1-tint); color: var(--pd-c1-tekst); }
:is(.pd-eelised, .pd-lubadused) li:nth-child(4n + 2)::before { background: var(--pd-c2-tint); color: var(--pd-c2-tekst); }
:is(.pd-eelised, .pd-lubadused) li:nth-child(4n + 3)::before { background: var(--pd-c3-tint); color: var(--pd-c3-tekst); }
:is(.pd-eelised, .pd-lubadused) li:nth-child(4n)::before     { background: var(--pd-c4-tint); color: var(--pd-c4-tekst); }

/*
 * Lubadused kategooriate all on kaardid, mitte read — nii nagu live lehel.
 * Kaardi taust on sama toon, mis ringil, ainult veel vaiksem.
 */
.pd-lubadused { margin-top: var(--pd-s-10); gap: var(--pd-s-4); }
.pd-lubadused li {
  align-items: center;
  padding: var(--pd-s-4) var(--pd-s-5);
  border-radius: var(--pd-raadius);
  background: var(--pd-pind);
  box-shadow: var(--pd-vari-kaart);
}
.pd-lubadused li:nth-child(4n + 1) { background: var(--pd-c1-tint); }
.pd-lubadused li:nth-child(4n + 2) { background: var(--pd-c2-tint); }
.pd-lubadused li:nth-child(4n + 3) { background: var(--pd-c3-tint); }
.pd-lubadused li:nth-child(4n)     { background: var(--pd-c4-tint); }
/* Kaardil on taust juba värviline — ring läheb täisvärviliseks. */
.pd-lubadused li:nth-child(4n + 1)::before { background: var(--pd-c1-tekst); color: #FFF; }
.pd-lubadused li:nth-child(4n + 2)::before { background: var(--pd-c2-tekst); color: #FFF; }
.pd-lubadused li:nth-child(4n + 3)::before { background: var(--pd-c3-tekst); color: #FFF; }
.pd-lubadused li:nth-child(4n)::before     { background: var(--pd-c4-tekst); color: #FFF; }

@media (min-width: 48rem) {
  .pd-lubadused { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .pd-lubadused { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
}