/* ==========================================================================
   Digijurist 2026 redesign — HINNAKIRI (pricing.html)
   ==========================================================================
   Pricing-spetsiifiline CSS: plaaniveerud elavad ÜHES .dj-card pinnas
   vertikaal-hairline'idega (mitte eraldi kaartides, vt spec "PRICING"), et
   hinnad oleksid ühe pilguga võrreldavad. Kasutab AINULT tokens.css/site.css
   custom property'sid ja komponente (.dj-card, .dj-toggle, .dj-btn-*,
   .dj-display, .dj-mono, .dj-lead) — ei defineeri uusi värve.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Päis
   -------------------------------------------------------------------------- */
.dj-pricing-head { padding-bottom: 0; }
.dj-pricing-h1 {
  font-size: clamp(42px, 6vw, 72px);
}
.dj-pricing-head .dj-lead {
  margin-top: 20px;
}
/* Sektsiooni-h2'd ("Mida üks tegevus maksab" jne) kannavad sama Newsreader-
   suurust mis landingu numereeritud sektsioonid — üks trepiaste allpool h1-st. */
.dj-pricing-h2 {
  font-size: clamp(28px, 3.6vw, 40px);
}

/* --------------------------------------------------------------------------
   Segmenditabid (Eraisik | Advokaat)
   -------------------------------------------------------------------------- */
.dj-segment-toggle {
  margin-bottom: 44px;
}

/* --------------------------------------------------------------------------
   Plaanigrupi päis (nt "Krediidipakid eraisikule")
   -------------------------------------------------------------------------- */
.dj-plan-group h2 {
  font-family: var(--dj-font-ui);
  font-weight: 650;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--dj-ink);
}
.dj-plan-group__sub {
  margin: 8px 0 0;
  max-width: 46em;
  color: var(--dj-ink-2);
  font-size: 14.5px;
}
.dj-plan-group--spaced {
  margin-top: 56px;
}

/* Kuu/aasta tsükli-lüliti istub plaanigrupi päise sees, mitte plaanide all
   nagu vanal lehel — nii on selge, et see kehtib JÄRGNEVA kaardi, mitte
   eelmise sektsiooni kohta. */
.dj-cycle-toggle {
  margin-top: 18px;
}
.dj-cycle-note {
  margin: 8px 0 0;
  color: var(--dj-ink-3);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Plaanide pind: ÜKS .dj-card, veerud vertikaal-hairline'idega eraldatud
   -------------------------------------------------------------------------- */
.dj-card--plans {
  margin-top: 24px;
  /* overflow:hidden, et populaarse veeru accent-wash taust ja ülajoon ei
     poeks kaardi ümardatud nurkadest välja. */
  overflow: hidden;
}
.dj-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dj-plan-col {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-left: 1px solid var(--dj-hairline);
}
.dj-plan-col:first-child { border-left: 0; }

/* Populaarne veerg: õrn accent-wash taust + ülaserva 2px accent-joon + mono
   silt — MITTE karjuv kast, taust jääb veeru enda piiridesse (spec nõue). */
.dj-plan-col.is-popular {
  background: var(--dj-accent-wash);
  border-top: 2px solid var(--dj-accent);
  padding-top: 30px; /* 32px - 2px border, et sisu ei nihkuks teistest veergudest allapoole */
}
.dj-plan-badge {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--dj-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dj-accent-deep);
}

.dj-plan-col h3 {
  font-family: var(--dj-font-ui);
  font-weight: 650;
  font-size: 17px;
  color: var(--dj-ink);
}
.dj-plan-target {
  margin: 6px 0 0;
  min-height: 34px;
  color: var(--dj-ink-3);
  font-size: 13px;
}

/* Hinnanumber: Newsreader, min-height reserveerib ruumi ENNE kui JS
   (renderPrices) täidab sisu — ilma selleta kasvaks kaart täitmise hetkel
   ja kogu allpool olev sisu nihkuks (CLS). Krediidipakkide hind on
   serverist otse renderdatud, seega tal pole data-monthly'd, aga sama
   min-height kehtib talle ka — geomeetria peab olema ühtlane kõigis
   veergudes, olenemata sellest, kas number tuleb JS-ist või Jinjast. */
.dj-plan-price {
  margin: 16px 0 4px;
  min-height: 48px;
  font-size: 40px;
  color: var(--dj-ink);
}
.dj-plan-price span {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--dj-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--dj-ink-3);
}
.dj-plan-vat {
  margin: 0;
  color: var(--dj-ink-3);
  font-size: 12px;
}
.dj-plan-credits {
  display: block;
  margin: 10px 0 0;
  color: var(--dj-accent-deep);
}

.dj-plan-bullets {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  color: var(--dj-ink-2);
  font-size: 14px;
  flex: 1 0 auto;
}
.dj-plan-bullets li {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  line-height: 1.5;
}
.dj-plan-bullets li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--dj-accent);
  font-weight: 700;
}

.dj-plan-col .dj-btn-secondary,
.dj-plan-col .dj-btn-primary {
  width: 100%;
  margin-top: auto;
}
.dj-plan-compare {
  justify-content: center;
  margin-top: 14px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Tasuta proovi riba
   -------------------------------------------------------------------------- */
.dj-trial-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding: 28px 32px;
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  background: var(--dj-bg-raised);
}
.dj-trial-banner h3 {
  font-family: var(--dj-font-ui);
  font-weight: 650;
  font-size: 16.5px;
  color: var(--dj-ink);
}
.dj-trial-banner p {
  margin: 6px 0 0;
  max-width: 48em;
  color: var(--dj-ink-2);
  font-size: 13.5px;
}
.dj-trial-banner__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
/* "0 €" on ise fikseeritud tekst (samasugune erand nagu praegusel /pricing
   lehel) — min-height siin ei ole CLS jaoks vajalik, sest väärtus ei
   muutu kunagi renderduse järel, aga hoiab kõrguse ühtlasena krediidihinna
   numbriga. */
.dj-trial-banner__price {
  font-size: 26px;
  color: var(--dj-ink);
}

/* --------------------------------------------------------------------------
   Mida üks tegevus maksab — read, MITTE kaardid
   -------------------------------------------------------------------------- */
.dj-action-rows {
  margin-top: 32px;
  border-top: 1px solid var(--dj-hairline);
}
.dj-action-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--dj-hairline);
}
.dj-action-row__label {
  color: var(--dj-ink);
  font-size: 15px;
}
.dj-action-row__credits {
  flex: 0 0 auto;
  color: var(--dj-accent-deep);
  font-size: 13px;
}
/* Mitmelauseline lõik, mitte lühike metarida — ink-3 (4.5:1 lubatud, mitte
   varu) on siin liiga õhuke, ink-2 on loetavam pikema teksti jaoks. */
.dj-note {
  margin: 20px 0 0;
  max-width: var(--dj-wrap-text);
  color: var(--dj-ink-2);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Mis krediitidega kaasas on — 3 veergu
   -------------------------------------------------------------------------- */
.dj-included-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-top: 32px;
}
.dj-included-col h3 {
  font-family: var(--dj-font-ui);
  font-weight: 650;
  font-size: 16px;
  color: var(--dj-ink);
}
.dj-included-col p {
  margin: 8px 0 0;
  color: var(--dj-ink-2);
  font-size: 14px;
}
/* Kolmas veerg kannab pikka mitme fraasi loetelu, mitte lühikest metarida —
   ink-2 hoiab selle loetavana valgel-taustast erineva raised-pinna vastas. */
.dj-included-col p.dj-mono {
  margin-top: 6px;
  color: var(--dj-ink-2);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Fairuse-lõik
   -------------------------------------------------------------------------- */
/* Mitmelauseline lõik — ink-2, mitte ink-3 (viimane on mõeldud lühikestele
   metaridadele, vt tokens.css). */
.dj-fairuse {
  margin: 0 auto;
  text-align: center;
  color: var(--dj-ink-2);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Responsive: <860px veerud vertikaalselt hairline-eraldusega
   (spec nõue "mitte eraldi kaardid" — hoiame ühe pinna ka mobiilis)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dj-plans {
    grid-template-columns: 1fr;
  }
  .dj-plan-col {
    border-left: 0;
    border-top: 1px solid var(--dj-hairline);
  }
  .dj-plan-col:first-child { border-top: 0; }
  .dj-plan-col.is-popular {
    border-top: 2px solid var(--dj-accent);
  }
  .dj-trial-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .dj-trial-banner__cta {
    align-items: flex-start;
  }
  .dj-action-row {
    flex-direction: column;
    gap: 4px;
  }
}