/* ============================================================
   main.css — foaia de stiluri a sitului mirceailie.com
   Ultima revizie: 2026-08-04 18:34 (EEST)

   COMPATIBIL CU CSP STRICT: niciun stil în pagină, niciun atribut
   style="". Directiva minimă: style-src 'self'
   (fără 'unsafe-inline').

   Structură:
     §1 Baza — comună tuturor paginilor (derivată din pagina principală)
     §2 Pagina „Metoda" — reguli proprii, prefixate .p-metoda
     §3 Clase utilitare (înlocuiesc fostele atribute style="")

   Paleta: verdele naturii (--moss) pentru programe, albastrul de
   brand al sitului actual (--brand: #478ac9) pentru zona corporate.
   ============================================================ */

/* ===================== §1. BAZA ===================== */
:root{
    --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
    --paper:#f5f7f2;
    --card:#fffdf9;
    --ink:#1f2620;
    --muted:#5f665c;
    --line:#d8ddd3;
    --moss:#1a5a30;
    --moss-soft:#e0f0e8;
    --clay:#a8561f;
    --clay-soft:#fdeee0;
    --lake:#1a4a8a;
    --lake-soft:#e0eaf8;
    --gold:#8a6d1a;
    /* [CULOARE DIN SITUL ACTUAL] #478ac9 — singura culoare pe care am putut-o
       verifica automat (meta theme-color din mirceailie.com). Pentru potrivirea
       completă a paletei, lipește-mi conținutul fișierului CSS actual.
       Folosită mai jos pentru zona „organizații" și accente secundare. */
    --brand:#478ac9;
    --brand-soft:#e6eff8;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.25;}
  a{color:var(--moss);}

  /* comutatorul de limbă: ascunde blocurile limbii inactive */
  [data-lang="ro"] .en{display:none!important;}
  [data-lang="en"] .ro{display:none!important;}

  /* ---------- antet ---------- */
  header.site{position:sticky;top:0;background:rgba(245,247,242,.95);border-bottom:1px solid var(--line);z-index:20;backdrop-filter:blur(4px);}
  .nav{display:flex;align-items:center;gap:18px;padding:12px 0;flex-wrap:wrap;}
  .logo{font-family:var(--serif);font-size:19px;font-weight:700;text-decoration:none;color:var(--ink);margin-right:auto;}
  .logo small{display:block;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;}
  .nav a.nl{text-decoration:none;color:var(--ink);font-size:14px;}
  .nav a.nl:hover{color:var(--brand);}
  .langsw{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
  .langsw button{border:none;background:transparent;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--muted);}
  .langsw button.on{background:var(--ink);color:var(--paper);font-weight:600;}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:72px 0 64px;overflow:hidden;}
  .hero svg.topo{position:absolute;right:-60px;top:-30px;width:640px;height:340px;opacity:.13;pointer-events:none;}
  .hero .kicker{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-bottom:14px;}
  .hero h1{font-size:clamp(28px,4.6vw,44px);max-width:720px;margin:0 0 16px;}
  .hero p.lead{font-size:18px;max-width:640px;color:var(--muted);margin:0 0 28px;}
  .cta{display:inline-block;background:var(--moss);color:#fff;text-decoration:none;padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;}
  .cta:hover{background:#134523;}
  .cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-left:10px;}
  .cta.ghost:hover{background:var(--ink);color:var(--paper);}

  section{padding:56px 0;}
  section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  h2.sec{font-size:clamp(22px,3vw,30px);margin:0 0 8px;}
  p.secsub{color:var(--muted);margin:0 0 30px;max-width:640px;}

  /* ---------- cele două căi ---------- */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media(max-width:760px){.paths{grid-template-columns:1fr;}}
  .path{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--moss);border-radius:14px;padding:26px 28px;}
  .path.org{border-top-color:var(--brand);}
  .path h3{font-size:21px;margin:0 0 10px;}
  .path ul{padding-left:18px;margin:12px 0;}
  .path li{margin:6px 0;}
  .path .to{font-weight:600;text-decoration:none;}

  /* ---------- oferte ---------- */
  .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
  .offer{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;display:flex;flex-direction:column;}
  .offer .tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:12px;}
  .offer.carare .tag{background:var(--moss-soft);color:var(--moss);}
  .offer.tabara .tag{background:var(--brand-soft);color:#2d5f93;}
  .offer.cabana .tag{background:var(--clay-soft);color:var(--clay);}
  .offer h3{margin:0 0 8px;font-size:20px;}
  .offer .price{font-family:var(--serif);font-size:24px;margin:10px 0 4px;}
  .offer .price small{font-family:var(--sans);font-size:13px;color:var(--muted);}
  .offer ul{padding-left:18px;margin:10px 0;color:var(--ink);font-size:14.5px;}
  .offer li{margin:5px 0;}
    .plist{margin:12px 0 4px;border-top:1px solid var(--line);}
  .plist div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px;}
  .plist .lbl{color:var(--ink);}
  .plist .amt{font-family:var(--serif);font-size:15px;font-weight:600;white-space:nowrap;}
  .plist .note{display:block;font-size:12px;color:var(--muted);font-family:var(--sans);font-weight:400;}
      .solidar{background:#fff6da;border:1px solid #e6d28a;border-radius:10px;padding:12px 16px;font-size:13.5px;margin-top:18px;}

  /* ---------- despre ---------- */
  .about{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:start;}
  @media(max-width:700px){.about{grid-template-columns:1fr;}}
  .portrait{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:14px;background:var(--moss-soft);}
  .creds{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .cred{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:12.5px;color:var(--muted);}

  /* ---------- testimoniale ---------- */
  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
  .quote{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:14.5px;}
  .quote .who{margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:600;}
  .quote.placeholder{border-style:dashed;color:var(--muted);font-style:italic;}

  /* ---------- contact ---------- */
  .contactbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 32px;display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  @media(max-width:700px){.contactbox{grid-template-columns:1fr;}}
  .contactbox h3{margin:0 0 8px;}
  .contactbox .big{font-family:var(--serif);font-size:19px;}

  /* ---------- formular contact (anti-spam local: honeypot + timp) ---------- */
  form.cf{display:grid;gap:12px;margin-top:14px;}
  form.cf label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  form.cf input,form.cf textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14.5px;font-family:var(--sans);background:var(--paper);color:var(--ink);}
  form.cf textarea{min-height:110px;resize:vertical;}
  form.cf button{justify-self:start;background:var(--moss);color:#fff;border:none;border-radius:999px;padding:12px 24px;font-size:14.5px;font-weight:600;cursor:pointer;}
  /* honeypot: cîmp invizibil pentru oameni; roboții îl completează.
     NU folosim display:none (unii roboți îl detectează) ci scoatere din pagină. */
  .hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;height:1px;width:1px;overflow:hidden;}

  footer.site{border-top:2px solid var(--ink);padding:26px 0 40px;font-size:13px;color:var(--muted);}
  footer .privacy{margin-top:8px;}
  :focus-visible{outline:2px solid var(--lake);outline-offset:2px;}

/* ============ §2. PAGINA „METODA" (body class="p-metoda") ============ */
/* NOTĂ: regulile .hero și header.site erau aici NEPREFIXATE și suprascriau
   §1 pe toate paginile (inclusiv pe cea principală). Corectat 4 aug. */
.p-metoda .hero{position:relative;padding:64px 0 46px;overflow:hidden;}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-bottom:14px;}
.tensec{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--moss);border-radius:12px;padding:20px 24px;font-family:var(--serif);font-size:19px;line-height:1.55;max-width:680px;}
.tensec .src{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:10px;}
.principle{display:grid;grid-template-columns:52px 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px;}
.pnum{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--moss);line-height:1;}
.principle b{font-size:16.5px;}
.principle p{margin:6px 0 0;font-size:14.5px;color:var(--ink);}
.bridge{background:var(--moss-soft);border-radius:14px;padding:24px 26px;margin-top:8px;}
.bridge h3{margin:0 0 8px;font-size:19px;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px;}
.step{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13.5px;}
.step b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:4px;}
.privacy{margin-top:8px;}

/* --- suprascrieri specifice paginii Metoda --- */
.p-metoda .wrap{max-width:860px;margin:0 auto;padding:0 20px;}
.p-metoda .hero svg.topo{position:absolute;right:-70px;top:-40px;width:520px;height:280px;opacity:.13;pointer-events:none;}
.p-metoda .hero h1{font-size:clamp(28px,4.4vw,42px);margin:0 0 18px;max-width:640px;}
.p-metoda section{padding:40px 0;}
.p-metoda h2.sec{font-size:clamp(22px,3vw,28px);margin:0 0 6px;}
.p-metoda p.secsub{color:var(--muted);margin:0 0 26px;max-width:640px;}
.p-metoda .cta{display:inline-block;background:var(--moss);color:#fff;text-decoration:none;padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;margin-top:20px;}
.p-metoda footer.site{border-top:2px solid var(--ink);padding:24px 0 40px;font-size:13px;color:var(--muted);margin-top:30px;}
.p-metoda :focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ============ §3. CLASE UTILITARE ============
   Înlocuiesc atributele style="" eliminate pentru conformitate CSP. */
.txt-s{font-size:14.5px;}
.txt-xs-muted{font-size:13px;color:var(--muted);}
.subnote{display:block;font-size:12.5px;color:var(--muted);}
.formwrap{max-width:560px;margin-top:34px;}
.mt-12{margin-top:12px;}
.ml-0{margin-left:0;}
.bridge-lead{margin:0;font-size:14.5px;}
.mb-26{margin-bottom:26px;}

/* ============ §4. PROGRAME - aliniere, casete, butoane ============
   Plasate la finalul fișierului: regulile de aici trebuie să aibă
   ultimul cuvînt asupra celor din §1. */

/* --- alinierea pe rînduri a celor trei carduri ---
   Fiecare card ocupă aceleași 8 rînduri ale grilei-părinte, deci
   titlul, definiția, formatul, PREȚURILE, caseta, detaliile și butonul
   încep la aceeași înălțime în toate cardurile.
   row-gap:0 e obligatoriu: altfel spațiul dintre rînduri s-ar aduna
   de 8 ori în interiorul fiecărui card. */
@supports (grid-template-rows: subgrid){
  @media (min-width:900px){
    .offers{grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:0;}
    .offer{display:grid;grid-template-rows:subgrid;grid-row:span 8;}
  }
}
.offer .def{margin:0 0 10px;}
.offer .fmt{margin:0 0 4px;}

/* --- casetele de sub prețuri --- */
.datebox{border-radius:10px;padding:12px 16px;font-size:14px;margin:10px 0;
  background:var(--moss-soft);border:1px solid #bcd9c8;}
.datebox b{font-family:var(--serif);}
.datebox.guarantee{background:#fff6da;border:1px solid #e6d28a;}
.datelist{list-style:disc;padding-left:20px;margin:6px 0 0;}
.datelist li{margin:3px 0;}
.datebox .subnote{margin-top:8px;}

/* --- butonul fiecărui card, centrat --- */
.offer .foot{margin-top:auto;padding-top:14px;text-align:center;}
.offer .foot .cta{margin-left:0;}

/* --- nota comună despre metodă (deasupra cardurilor) --- */
.methodnote{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--moss);
  border-radius:12px;padding:16px 20px;margin:0 0 26px;font-size:14.5px;line-height:1.6;}
/* spațierea zonei de deasupra casetelor: subtitlul secțiunii se apropie
   de titlu, iar nota despre metodă respiră egal față de ambele. */
#oameni p.secsub{margin:0 0 18px;}
#oameni h2.sec{margin-bottom:6px;}

/* --- caseta de reduceri --- */
.discounts{background:#fff6da;border:1px solid #e6d28a;border-radius:12px;padding:20px 24px;margin-top:22px;}
.discounts h3{font-family:var(--serif);font-size:20px;margin:0 0 12px;}
.discounts p{margin:0 0 12px;font-size:14px;}
.discounts p:last-child{margin-bottom:0;}
.discounts .dlabel{font-weight:700;}

/* ============ §5. ANTETUL - aranjare pe ecrane mici ============
   Pe desktop: logo la stînga, linkuri la mijloc, comutatorul de limbă la dreapta.
   Sub 760px: logo + comutator pe primul rînd, linkurile pe rîndul al doilea,
   centrate - în loc să se reverse dezordonat, cum se întîmpla înainte. */
.navlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.navlinks a.nl{white-space:nowrap;}

@media (max-width:760px){
  .nav{gap:8px 12px;padding:10px 0;}
  .logo{font-size:17px;margin-right:auto;}
  .logo small{font-size:10.5px;}
  .langsw{order:2;}
  .navlinks{order:3;flex-basis:100%;justify-content:flex-start;gap:8px 16px;
    padding-top:8px;border-top:1px solid var(--line);}
  .navlinks a.nl{font-size:13.5px;padding:2px 0;}
}
@media (max-width:420px){
  .logo{font-size:16px;}
  .navlinks{gap:6px 14px;}
  .navlinks a.nl{font-size:13px;}
}

/* ============ §6. ANTET UNIFORM PE TOATE PAGINILE ============
   .p-metoda îngustează conținutul la 860px, dar antetul trebuie să
   arate identic peste tot: aceeași lățime, aceeași înălțime, același meniu. */
.p-metoda header.site .wrap{max-width:1080px;}

/* fotografia din „Cine sînt": proporțiile reale ale fișierului (220 x 324) */
.portrait{aspect-ratio:220/324;}

/* ============ §7. LĂȚIMEA TEXTELOR ȘI ÎNĂLȚIMEA ANTETULUI ============
   (a) Titlurile și paragrafele explicative se întind acum pînă la 860px
   (înainte: 720px titlul din hero, 640px paragrafele). E un compromis
   între simetria cu restul paginii și lungimea rîndului: peste ~80 de
   caractere pe rînd, textul devine obositor de urmărit. */
.hero h1,.p-metoda .hero h1{max-width:860px;}
.hero p.lead,p.secsub,.p-metoda p.secsub{max-width:860px;}
.tensec,.p-metoda .tensec{max-width:860px;}

/* (b) Antetul are aceeași înălțime pe toate paginile, indiferent de
   cîte rînduri ocupă meniul. Fixarea e explicită ca să nu mai depindă
   de felul în care se așază linkurile. */
.nav{min-height:66px;}
@media (max-width:760px){ .nav{min-height:0;} }

/* ============ §8. CONFIRMĂRILE FORMULARULUI DE CONTACT ============ */
.cfmsg{border-radius:10px;padding:12px 16px;margin:0 0 14px;font-size:14.5px;}
.cfmsg[hidden]{display:none;}
.cfmsg-ok{background:var(--moss-soft);border:1px solid #bcd9c8;color:var(--ink);}
.cfmsg-fail{background:#fff6da;border:1px solid #e6d28a;color:var(--ink);}