/* ==========================================================================
   PETSON — lehepõhised paigutused
   ========================================================================== */

/* --- Avalehe hero --------------------------------------------------------- */

.hero {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Peen rohekas valgus paremal — annab tumedale sügavust ilma pildita. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 82% 30%, rgba(27, 47, 39, 0.85), transparent 70%),
    linear-gradient(180deg, rgba(13, 15, 16, 0) 60%, rgba(13, 15, 16, 0.6) 100%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-3xl); }
}

.hero__title { margin-bottom: var(--space-lg); }

.hero__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: var(--leading-loose);
  color: var(--text-on-dark-muted);
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Kolm lühikest usaldusfakti kohe hero all — loetav 5 sekundiga. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  list-style: none;
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--line-on-dark);
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-on-dark-muted);
}
.hero__facts li::before { content: "▪"; color: var(--brand-brass); }

/* Hero kõrval olev "objektikaart" — dokumendilik plokk. */
.hero__panel {
  background: var(--gradient-panel);
  border: 1px solid rgba(237, 233, 225, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  backdrop-filter: blur(2px);
}
.hero__panel-title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent-on-dark);
  margin-bottom: var(--space-lg);
}

/* --- Lehepäis (sisemised lehed) ------------------------------------------- */

.page-header {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}

.page-header__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}
@media (min-width: 900px) {
  .page-header__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/ "; color: var(--brand-stone); }
.breadcrumbs a { color: var(--text-on-dark-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-brass); }

/* --- Teenused ------------------------------------------------------------- */

/* Teenuseplokk. Pildikohta ei ole: vasak veerg on lühike register (number,
   pealkiri, üks lause) ja parem veerg kannab kogu sisu. Et tühjus näiks
   tahtlik, on vasak veerg kitsas ja püsib kerimisel paigal ning sisuveerg
   algab eraldusjoonest — nii loeb see registri, mitte puuduva elemendina. */
.service-block {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--line-hairline);
  align-items: start;
}

@media (min-width: 920px) {
  .service-block {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .service-block__body {
    border-left: 1px solid var(--line-hairline);
    padding-left: var(--space-2xl);
  }
}

.service-block:first-of-type { border-top: 0; padding-top: 0; }

.service-block__aside { position: sticky; top: calc(var(--header-height) + var(--space-xl)); }
@media (max-width: 919px) { .service-block__aside { position: static; } }

/* Sisuveeru esimene pealkiri algab veeru ülaservast, et kaks veergu
   stardiksid ühelt ja samalt kõrguselt. */
.service-block__body > h3:first-child { margin-top: 0; }

.service-scope {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  columns: 2;
  column-gap: var(--space-xl);
}
@media (max-width: 560px) { .service-scope { columns: 1; } }

.service-scope li {
  break-inside: avoid;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--size-small);
  display: flex;
  gap: var(--space-sm);
  margin: 0;
}
.service-scope li::before {
  content: "—";
  color: var(--brand-brass);
  font-family: var(--font-mono);
  flex: none;
}

/* --- Referentsid ---------------------------------------------------------- */

.case-list { display: grid; gap: var(--space-2xl); }

/* Case study kaart referentside loendis — sisaldab numbreid, mitte ainult pilti. */
.case-card {
  display: grid;
  gap: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 880px) {
  .case-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.case-card__media { position: relative; min-height: 260px; }

/* Kaardi sees annab kõrguse kõrvalveerg, mitte pildi kuvasuhe. Kui .media--4x3
   aspect-ratio jääks siin kehtima, arvutaks brauser laiuse kõrgusest ja pilt
   ulatuks pika tekstiga kaardil infoveeru peale. */
.case-card__media .media {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.case-card__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.case-card__title { margin-bottom: 0; }

/* Neli andmelahtrit (tüüp, pindala, kestus, seis) 2x2 ruudustikus — ühte ritta
   surutuna jääks iga veerg liiga kitsaks ja väärtused murduks. */
.case-card__data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--line-hairline);
}

.case-card__datum-key {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2xs);
}
.case-card__datum-value {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* --- Case study alamleht -------------------------------------------------- */

.case-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 980px) {
  .case-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-3xl); }
}

.case-facts {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
}
@media (max-width: 979px) { .case-facts { position: static; } }

.case-section { padding-block: var(--space-2xl); border-top: 1px solid var(--line-hairline); }
.case-section:first-child { border-top: 0; padding-top: 0; }

.case-section__title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-lg);
}

/* Ühe ruumi seisude plokk case study lehel. */
.case-room + .case-room { margin-top: var(--space-2xl); }

.case-room__title {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

/* Väljakutse → lahendus → tulemus, kolm lühikest lõiku kõrvuti. */
.narrative {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.narrative h4 { margin-bottom: var(--space-xs); }
.narrative p { font-size: var(--size-small); color: var(--text-secondary); }

/* --- Praegu töös ---------------------------------------------------------- */

.wip-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.wip-card {
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  background: rgba(237, 233, 225, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Kaartide sisemised read ühisele ruudustikule: pealkiri, kirjeldus,
   andmetabel ja edenemisriba algavad mõlemas kaardis samalt kõrguselt, ka
   siis, kui üks kirjeldus on kaks rida ja teine üks. Neli rida = kaardi neli
   otsest last. Kehtib ainult kõrvuti paigutuses; virnastatult ei ole midagi
   joondada. Eeldab kuni kahte kaarti — rohkem läheks teisele ruudustikureale. */
@media (min-width: 700px) {
  @supports (grid-template-rows: subgrid) {
    .wip-grid {
      grid-template-rows: auto auto 1fr auto;
      row-gap: var(--space-md);
    }

    .wip-card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
  }
}

.wip-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wip-card__title { font-size: var(--size-h3); margin: 0; }

/* Edenemisriba — visuaalne, mitte täpne lubadus. */
.progress {
  height: 3px;
  background: rgba(237, 233, 225, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
/* display:block on kohustuslik — <span> on reasisene element ega arvesta
   laiust ega kõrgust, mistõttu täidis jäi nähtamatuks. */
.progress__bar { display: block; height: 100%; background: var(--brand-brass); width: 45%; }

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-top: var(--space-xs);
}

/* --- Meist / meeskond ----------------------------------------------------- */

.about-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

.team-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.person__photo { margin-bottom: var(--space-md); }
.person__name { font-size: var(--size-h3); margin-bottom: var(--space-2xs); }
.person__role {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-md);
}
.person__bio { font-size: var(--size-small); color: var(--text-secondary); }

.person__credentials {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--line-hairline);
}
.person__credentials li {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* Ausad põhimõtted — mida lubame ja mida mitte. */
.principles { display: grid; gap: 0; }
.principle {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line-hairline);
}
@media (min-width: 760px) {
  .principle { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-2xl); }
}
.principle h4 { margin: 0; }
.principle p { margin: 0; color: var(--text-secondary); font-size: var(--size-small); }
.on-dark .principle { border-color: var(--line-on-dark); }

/* --- Kontakt -------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 980px) {
  .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

.contact-aside { display: grid; gap: var(--space-xl); }

.contact-block {
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-md);
}
.contact-block__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
/* Kõik nelja lahtri väärtused ühes mõõdus. .mono kahandaks teksti
   caption-suuruseni, seega taastame siin lahtri enda suuruse. */
.contact-block__value,
.contact-block__value .mono {
  font-size: var(--size-body-lg);
  margin: 0;
}
.contact-block__value a { text-decoration: none; }

/* --- KKK ------------------------------------------------------------------ */

.faq-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 980px) {
  .faq-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-3xl); }
}

.faq-aside { position: sticky; top: calc(var(--header-height) + var(--space-xl)); }
@media (max-width: 979px) { .faq-aside { position: static; } }