/* oferta-2026.css — pagina „Ofertă Casa Verde Baterii 2026" (/stocare.html).
   Cerere Domitian, WhatsApp 14.10.2026; ClickUp 869fgx5ct. Copiat in radacina de build-oferta-baterii-2026.py.
   Se incarca DOAR pe /stocare.html, dupa casa-verde-2026.css (foloseste tokenii de acolo).
   Selectorii incep cu `.cv-2026 .cv-of…` ca sa castige in fata regulilor de context
   (runbook §2.1: cascada a rupt de patru ori componente scrise corect). */

/* ── Titlul „mare cât casa" ─────────────────────────────────────────────── */
.cv-2026 .cv-of-hero { background: var(--cv-green-deep); color: #fff; padding: 44px 0 40px; text-align: center; }
.cv-2026 .cv-of-hero .cv-of-h1 {
  font-family: var(--cv-font-display); font-weight: 900; color: #fff;
  font-size: clamp(30px, 6.2vw, 66px); line-height: 1.06; letter-spacing: -0.01em;
  max-width: 22ch; margin: 0 auto; overflow-wrap: break-word;
}
.cv-2026 .cv-of-hero .cv-of-h1__sub {
  display: block; margin: 18px auto 0; max-width: 34ch;
  font-size: clamp(20px, 2.8vw, 32px); line-height: 1.2; font-weight: 700;
  color: var(--cv-green-050);   /* 9,6:1 pe green-deep; amber nu poarta text (brief §8) */
}
.cv-2026 .cv-of-hero .cv-of-intro {
  max-width: 62ch; margin: 24px auto 0; color: #fff;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; font-weight: 600;
}

/* ── Producator ─────────────────────────────────────────────────────────── */
.cv-2026 .cv-of-brand { padding: 40px 0 12px; }
.cv-2026 .cv-of-brand + .cv-of-brand { border-top: 8px solid var(--cv-green-050); }
.cv-2026 .cv-of-brand h2 {
  font-family: var(--cv-font-display); font-weight: 900; color: var(--cv-green-deep);
  font-size: clamp(26px, 4.2vw, 44px); line-height: 1.1; text-align: center; margin: 0 0 8px;
}

/* ── Un pachet: bannerul stanga, PDF-ul dreapta (12:31); pe telefon unul sub altul ── */
.cv-2026 .cv-of-pack { display: grid; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--cv-silver); }
.cv-2026 .cv-of-pack:last-child { border-bottom: 0; }
.cv-2026 .cv-of-pack__banner { margin: 0; width: 100%; max-width: 460px; justify-self: center; }
.cv-2026 .cv-of-pack__banner img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
.cv-2026 .cv-of-pack__zoom { display: block; border-radius: 6px; cursor: zoom-in; }   /* deschide bannerul la marime reala (kimi-k3, 14.10) */
@media (min-width: 768px) {
  .cv-2026 .cv-of-pack { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: start; }
  .cv-2026 .cv-of-pack__banner { max-width: none; }
}
/* Bannerul ramane langa tabel cat derulezi — doar daca incape pe ecran (cel mai inalt: ~575 px la 1280;
   meniul nu e sticky, deci top: 12px nu intra sub nimic). Pe ecrane joase ramane pe loc (grok-4.7, 14.10). */
@media (min-width: 768px) and (min-height: 700px) {
  .cv-2026 .cv-of-pack__banner { position: sticky; top: 12px; }
}
.cv-2026 .cv-of-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cv-2026 .cv-of-pack__body { min-width: 0; container-type: inline-size; }
.cv-2026 .cv-of-pack__body h3 { font-size: 22px; line-height: 1.25; color: var(--cv-green-deep); margin: 0 0 12px; }
.cv-2026 .cv-of-pack__body h4 { font-size: 18px; line-height: 1.3; color: var(--cv-ink); margin: 22px 0 10px; }
.cv-2026 .cv-of-pack__body p,
.cv-2026 .cv-of-pack__body ul { max-width: none; font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.cv-2026 .cv-of-pack__body ul { padding-left: 1.2em; }
.cv-2026 .cv-of-pack__body p.cv-of-note { font-size: 14px; color: var(--cv-grey); margin-top: 8px; }

/* ── Tabelele ───────────────────────────────────────────────────────────── */
.cv-2026 .cv-of-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; margin: 0 0 6px; }
.cv-2026 .cv-of-table thead th {
  background: var(--cv-green-deep); color: #fff; text-align: left; vertical-align: bottom;
  font-size: 14px; font-weight: 700; padding: 9px 10px;
}
.cv-2026 .cv-of-table tbody th,
.cv-2026 .cv-of-table tbody td { padding: 7px 10px; text-align: left; vertical-align: top; border: 0; }
.cv-2026 .cv-of-cmp tbody { border-bottom: 1px solid var(--cv-silver); }
.cv-2026 .cv-of-cmp tr.cv-of-pct { background: var(--cv-green-050); }
.cv-2026 .cv-of-cmp tr.cv-of-pct th { font-weight: 700; color: var(--cv-ink); }
.cv-2026 .cv-of-cmp tr.cv-of-val th { font-weight: 400; color: var(--cv-grey); }
.cv-2026 .cv-of-cmp td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-2026 .cv-of-cmp td:nth-child(3) { font-weight: 700; color: var(--cv-green-deep); }   /* contribuția proprie */
.cv-2026 .cv-of-cmp tr.cv-of-pct td:last-child { font-weight: 700; }                      /* punctajul */
.cv-2026 .cv-of-dif tbody tr { border-bottom: 1px solid var(--cv-silver); }
.cv-2026 .cv-of-dif tbody th { width: 34%; font-weight: 700; }

/* Coloana de text e ingusta (telefon, sau tableta cu bannerul alaturi): tabelul de 5 coloane devine
   un card pe varianta — procentele sub etichete, iar randul „↳ Valori" dedesubt, pe aceleasi coloane. */
@container (max-width: 579px) {
  .cv-2026 .cv-of-cmp, .cv-2026 .cv-of-cmp tbody { display: block; }
  .cv-2026 .cv-of-cmp thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .cv-2026 .cv-of-cmp tbody { border: 1px solid var(--cv-silver); border-radius: 6px; margin: 0 0 10px; overflow: hidden; }
  .cv-2026 .cv-of-cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; padding: 8px 12px; }
  .cv-2026 .cv-of-cmp tr th { grid-column: 1 / -1; padding: 0 0 6px; }
  .cv-2026 .cv-of-cmp tr.cv-of-pct th { grid-column: 1 / 3; }
  .cv-2026 .cv-of-cmp tr.cv-of-pct td:last-child { grid-column: 3; grid-row: 1; text-align: right; }
  .cv-2026 .cv-of-cmp td { display: block; padding: 0; white-space: normal; }
  .cv-2026 .cv-of-cmp tr.cv-of-pct td::before {
    content: attr(data-label); display: block; font-size: 12px; line-height: 1.25;
    font-weight: 400; color: var(--cv-grey); margin-bottom: 2px;
  }
  .cv-2026 .cv-of-cmp tr.cv-of-pct td:last-child::before { display: inline; margin-right: 4px; }
  .cv-2026 .cv-of-cmp tr.cv-of-val { padding-top: 6px; }
  .cv-2026 .cv-of-cmp tr.cv-of-val th { font-size: 13px; padding-bottom: 2px; }
  .cv-2026 .cv-of-cmp tr.cv-of-val td:last-child { display: none; }   /* celula goala a punctajului */
  .cv-2026 .cv-of-dif tbody th { width: 38%; }
}

/* Browser fara container queries (Safari < 16, Chrome < 105): tabelul ramane pe 5 coloane; il lasam sa
   deruleze in cadrul lui, nu pagina intreaga (kimi-k3, 14.10). Pe browserele moderne nu se aplica. */
@supports not (container-type: inline-size) {
  .cv-2026 .cv-of-tablewrap { overflow-x: auto; }
}