/* =============================================================================
   furnisystems.ro — flagship v5 — pages.css
   Interior-page scaffolding ONLY. Every token, color, font, radius, spacing
   value and component (.display, .eyebrow, .pill, .card, .plate, .step,
   .lede, .link, .foot, .hdr…) is defined once in site.css and reused here
   verbatim — this file adds no new tokens, only the layout grammar the
   interior pages need: page hero, editorial/media section pairs, a
   hairline-card grid, a numbered-steps wrapper alias and the closing CTA
   band. Loaded after site.css.
   ========================================================================== */

/* ---- page hero: eyebrow + H1 + lead, media plate below, on --bg -------- */
.phero{ padding-top:calc(var(--hdr-h) + clamp(48px, 9vh, 108px)); padding-bottom:0; background:var(--bg); }
.phero__head{ max-width:1180px; }
.phero__head .display--h1{ margin-top:20px; }
.phero__head .lede{ margin-top:24px; max-width:58ch; font-size:var(--t-body); }
.phero__media{ margin-top:clamp(48px, 7vw, 104px); }
.phero__media .photo,
.phero__media .frame,
.phero__media .plate{ width:100%; aspect-ratio:16 / 9; }
.phero__media figcaption,
.phero__media .figcap{ margin-top:14px; font-size:13px; color:var(--metal); letter-spacing:.02em; }

/* ---- editorial section: H2 left / paragraph(s) right, 2col ≥900px ------ */
.editorial{ padding-block:var(--sp-section); }
.editorial__grid{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:clamp(32px, 5vw, 96px); align-items:start; }
.editorial__grid .display--h2{ max-width:18ch; }
.editorial__head{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.editorial__body{ display:grid; gap:20px; color:var(--metal-2); font-size:17px; line-height:1.6; max-width:62ch; }
.editorial__body p strong{ color:var(--ink); font-weight:500; }
.editorial--tight{ padding-block:calc(var(--sp-section) * .6); }
@media (max-width:900px){
  .editorial__grid{ grid-template-columns:1fr; gap:22px; }
  .editorial__head{ position:static; }
}

/* ---- media section: rounded plate + text, alternates side -------------- */
.mediasec{ padding-block:var(--sp-section); }
.mediasec__grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 96px); align-items:center; }
.mediasec--right .mediasec__media{ order:2; }
.mediasec--right .mediasec__copy{ order:1; }
.mediasec__media .photo,
.mediasec__media .frame,
.mediasec__media .plate{ width:100%; aspect-ratio:4 / 5; }
.mediasec__media.is-wide .photo,
.mediasec__media.is-wide .frame,
.mediasec__media.is-wide .plate{ aspect-ratio:16 / 9; }
.mediasec__media figcaption,
.mediasec__media .figcap{ margin-top:14px; font-size:13px; color:var(--metal); letter-spacing:.02em; }
.mediasec__copy{ display:grid; gap:16px; }
.mediasec__copy .display--h2{ max-width:22ch; }
.mediasec__copy p{ color:var(--metal-2); font-size:17px; line-height:1.6; max-width:52ch; }
.mediasec__copy p strong{ color:var(--ink); font-weight:500; }
@media (max-width:900px){
  .mediasec__grid{ grid-template-columns:1fr; gap:26px; }
  .mediasec--right .mediasec__media,
  .mediasec--right .mediasec__copy{ order:0; }
}

/* ---- hairline card grid: 2×2, reuses .card verbatim --------------------- */
.cardgrid{ padding-block:var(--sp-section); }
.cardgrid__head{ max-width:920px; margin-bottom:clamp(36px, 4vw, 56px); }
.cardgrid__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 1.6vw, 24px); }
.cardgrid__grid .card__t{ margin-top:16px; }
.cardgrid__grid .card p{ margin-top:12px; color:var(--metal-2); font-size:16px; line-height:1.55; }
.cardgrid__grid.is-three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .cardgrid__grid.is-three{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .cardgrid__grid{ grid-template-columns:1fr; } .cardgrid__grid.is-three{ grid-template-columns:1fr; } }

/* ---- numbered-steps section wrapper (training-ai recap, homepage reuse) */
.psteps{ padding-block:var(--sp-section); }
.psteps__grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 112px); align-items:start; }
.psteps__media{ position:sticky; top:calc(var(--hdr-h) + 24px); }
.psteps__media .photo,
.psteps__media .frame,
.psteps__media .plate{ aspect-ratio:4 / 5; width:100%; }
.psteps__media figcaption,
.psteps__media .figcap{ margin-top:14px; font-size:13px; color:var(--metal); letter-spacing:.02em; }
.psteps__copy .display--h2{ max-width:20ch; }
.psteps__copy .training__steps{ margin-top:clamp(36px, 4vw, 56px); }
@media (max-width:900px){
  .psteps__grid{ grid-template-columns:1fr; gap:32px; }
  .psteps__media{ position:static; }
}

/* ---- price block (training / automatizare / website closing figure) ---- */
.priceblock{ margin-top:clamp(24px, 3vw, 36px); display:grid; gap:10px; max-width:60ch; }
.priceblock b{ font:400 clamp(24px, 1.1rem + 1vw, 32px)/1.1 var(--f-display); color:var(--ink); }
.priceblock p{ color:var(--metal-2); font-size:16px; line-height:1.55; }

/* ---- closing CTA band, every page ---------------------------------------*/
.ctaband{ padding-block:calc(var(--sp-section) * .7); border-top:1px solid var(--hair); }
.ctaband__in{ max-width:680px; margin-inline:auto; text-align:center; display:grid; gap:24px; justify-items:center; }
.ctaband .display{ font-size:clamp(30px, 1.2rem + 2vw, 52px); max-width:min(90vw, 620px); }
.ctaband p:not(.display){ color:var(--metal-2); font-size:17px; max-width:44ch; }

/* ---- diagnostic form: select styling (only field type site.css lacks) --*/
.field select{
  width:100%; min-height:48px; padding:12px 40px 12px 14px; border-radius:var(--r-card);
  background:var(--bg); border:1px solid var(--hair-strong); color:var(--ink);
  font:400 16px/1.4 var(--f-text); outline:none; transition:border-color .18s var(--ease);
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--metal) 50%), linear-gradient(135deg, var(--metal) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
  background-size:6px 6px; background-repeat:no-repeat;
}
.field select:focus{ border-color:var(--gold); }
.field__hint{ font-size:13px; color:var(--metal); }
.field--check{ display:flex; align-items:center; gap:10px; }
.field--check input{ width:18px; height:18px; min-height:0; accent-color:var(--gold); }
.field--check label{ text-transform:none; letter-spacing:0; font-size:15px; color:var(--metal-2); font-weight:400; }

/* ---- small foreground plate pair (website-uri layering accents) --------*/
.fgpair{ display:flex; align-items:flex-end; gap:16px; margin-top:8px; }
.fgpair__img{ border-radius:12px; border:1px solid var(--hair); object-fit:cover; }
.fgpair__img--a{ width:104px; height:104px; }
.fgpair__img--b{ width:132px; height:88px; }
.fgpair figcaption{ margin-top:10px; font-size:12px; color:var(--metal); }

/* ---- back link ------------------------------------------------------- */
.backlink{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:8px; color:var(--metal); font-size:14px; font-weight:500; }
.backlink:hover{ color:var(--ink); }
.backlink .arr{ display:inline-block; transform:scaleX(-1); }

/* ---- direct contact (no-form) block on /contact ------------------------*/
.directbox{ margin-top:28px; padding-top:22px; border-top:1px solid var(--hair); display:grid; gap:8px; font-size:15px; color:var(--metal); }
.directbox b{ color:var(--metal-2); font-weight:500; }
.directbox p{ margin-top:8px; color:var(--metal); font-size:14px; max-width:44ch; }

/* ---- reveals: every heading / paragraph / card / step carries [data-reveal]
   (blur → sharp, site.css); /assets/reveal.js adds .is-in on entry. The old
   section-level .reveal toggles are gone (round 3). */