/* =========================================================
   CAMERE.MD — Responsive
   Mobile is a composition of its own, not a stacked desktop.
   Written mobile-first: the base rules above are the phone.
   ========================================================= */

/* ---------------------------------------------------------
   PHONE (default, up to 767px) — corrections
--------------------------------------------------------- */
/* ---------------------------------------------------------
   BELOW DESKTOP — the fixed mobile bar is the chrome
--------------------------------------------------------- */
.hero{padding-top:calc(var(--nav-h) + var(--sp-24))}

@media (max-width:767px){

  .hero{
    min-height:auto;
  }
  .hero-inner{
    gap:var(--sp-32);
    padding-block:var(--sp-24) var(--sp-8);
  }
  .hero-title{font-size:clamp(2.7rem,13vw,4rem)}

  /* Unul sub altul, pe toata latimea. Alaturi nu incap decat daca li se
     rupe eticheta pe doua randuri sau li se micsoreaza textul, si atunci
     tinta de atingere ajunge o dunga: doua butoane pline sunt mai bune
     decat doua butoane inghesuite. */
  .hero-cta{grid-template-columns:1fr;margin-top:var(--sp-24)}

  /* Trei coloane, nu un rand care se rupe 2+1. Cifra deasupra etichetei:
     pe orizontala, „camere instalate" langa „1750" nu mai incape in 98px
     fara sa scada sub pragul de citit. */
  .hero-facts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--sp-16);
    margin-top:var(--sp-24);
    padding-top:var(--sp-20);
  }
  .hero-fact{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  .hero-fact b{font-size:var(--fs-h4)}
  .hero-fact span{line-height:1.25}

  /* Banda cu fotografia sta intre butoane si cifre, adica fix acolo unde
     privirea coboara oricum. Putin mai inalta decat pe desktop in raport,
     ca sa incapa camera cu suport cu tot. */
  .hero-field{aspect-ratio:1.42;margin-top:var(--sp-28,28px)}

  .hero-rail{
    flex-wrap:wrap;
    gap:var(--sp-16);
    padding-block:var(--sp-16) var(--sp-24);
  }
  .hero-social{margin-left:auto}
  .scroll-cue{display:none}

  .brands{padding-block:var(--sp-16)}
  .brands-head{margin-bottom:var(--sp-12)}
  .brands-row{gap:var(--sp-20) var(--sp-24)}


  /* services + pricing + contact: single column */
  .svc-grid,
  .price-grid,
  .contact-grid,
  .form-row,
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .svc--lead,
  .svc--panel{grid-column:span 1}
  .svc--lead{flex-direction:column;align-items:stretch;min-height:280px}
  .svc--lead .svc-lead-body{padding:var(--sp-24);max-width:none}
  .svc--panel{flex-direction:column;align-items:flex-start;text-align:left}

  /* Ordinea pe telefon ramane cea a scarii: Start primul, deci prima cifra
     vazuta e 2.811, nu 9.917. Inainte, `order:-1` urca pachetul recomandat in
     capul listei — acum ar rupe si titlurile de familie de pachetele lor. */
  .price-grup{margin-top:var(--sp-24)}
  .price-grup:not(:first-child){margin-top:var(--sp-32)}

  /* Sase carduri unul sub altul faceau 3.400px de derulare — patru ecrane si
     jumatate pentru sase decizii. Randurile trec pe doua coloane si cardul se
     stramteaza; nu se ascunde nimic, doar se aseaza altfel.
     Antetul si pretul stau pe acelasi rand: numele si cifra sunt ce se
     compara intre pachete, deci merita sa se vada odata. */
  .price{padding:var(--sp-32) var(--sp-20) var(--sp-24)}
  .price-head{align-items:flex-start;padding-bottom:var(--sp-16)}
  .price-de{
    flex-direction:row;
    align-items:baseline;
    flex-wrap:wrap;
    gap:var(--sp-8);
    padding-top:var(--sp-16);
  }
  .price-de small{flex:1 0 100%}
  .price-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--sp-16);
    padding-block:var(--sp-16);
  }
  .price-list li{padding-block:6px;font-size:var(--fs-small)}
  .price-list .ic{margin-top:6px}
  .price-propriu-text{padding-block:var(--sp-16)}

  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-media{aspect-ratio:4/3}
  .stat-grid{grid-template-columns:repeat(2,1fr)}

  .head--split{grid-template-columns:minmax(0,1fr);gap:var(--sp-16);align-items:start}

  .cta-actions .btn,
  .cta-actions .cta-phone{width:100%}

  .contact-side{gap:var(--sp-8)}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--sp-12)}

  /* the dock must never sit on top of the thumb zone content */
  .dock{gap:var(--sp-8)}
  .dock-toggle{width:54px}
  .dock-chan .lbl{display:none}
}

/* ---------------------------------------------------------
   TABLET (768px+)
--------------------------------------------------------- */
@media (min-width:768px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc--lead{grid-column:span 2}
  .svc--panel{grid-column:span 2}

  .price-grid{grid-template-columns:minmax(0,1fr)}
  .price{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 var(--sp-32)}
  .price-head{flex:1 1 220px;border-bottom:0;border-right:1px solid var(--border);padding:0 var(--sp-32) 0 0}
  /* Pe rand, pretul isi ia coloana lui intre antet si lista: altfel ar sta
     lipit sub nume si s-ar citi ca parte din el. */
  .price-de{flex:0 1 180px;padding-top:0}
  .price-list{flex:1 1 300px;padding:0}
  .price-propriu-text{flex:1 1 300px;padding:0}
  .price .btn{flex:1 1 200px}
  .price--featured{padding-top:var(--sp-44)}

  .stat-grid{grid-template-columns:repeat(4,1fr)}

  .footer-grid{grid-template-columns:minmax(0,1fr) 1fr}
}

/* ---------------------------------------------------------
   HERO — fotografia trece din banda in fundal

   Conditia are doua parti, nu una. Latimea spune ca langa camera incape o
   coloana de text; proportia spune ca ecranul e culcat. Pe o tableta de
   1024px tinuta in picioare prima e adevarata si a doua nu — iar acolo un
   fundal care acopera ar taia din fotografie tot ce nu e perete. Pe ecranul
   acela fotografia ramane banda de sub text.
--------------------------------------------------------- */
@media (min-width:1024px) and (min-aspect-ratio:1/1){
  .hero-field{
    position:absolute;
    top:50%;
    right:0;
    translate:0 -50%;
    /* 86%, nu 100%. Camera incepe la 47% din latimea fotografiei, deci la
       86% din ecran muchia ei cade la ~55% — adica lasa textului jumatatea
       din stanga si inca putin, exact ce cere compozitia. La 100% ar cadea
       la 47% si ar intra peste ultimul rand de titlu pe ecranele mici de
       desktop. Plafonul e latimea nativa a fisierului: peste ea imaginea
       nu ar castiga detaliu, doar l-ar pierde. */
    width:min(86%,1672px);
    margin:0;
  }
  /* La cele doua stingeri de sus si de jos se adauga una pe stanga, sub
     text. Se opreste la 42% din fotografie — inaintea camerei in amandoua
     temele (ziua incepe la 47%, noaptea la 54%). Dedesubt e perete gol, in
     aceeasi culoare cu pagina, deci stingerea nu se vede: se vede doar ca
     textul sta la fel de curat ca pe pagina goala. */
  .hero-field::after{
    background:
      linear-gradient(90deg,var(--surface) 0%,var(--hero-fade) 16%,transparent 42%),
      linear-gradient(180deg,var(--surface) 0%,var(--hero-fade) 6%,transparent 18%),
      linear-gradient(0deg,var(--surface) 0%,var(--hero-fade) 5%,transparent 16%);
  }
}

/* ---------------------------------------------------------
   SMALL DESKTOP (1024px+) — the floating pill appears
--------------------------------------------------------- */
@media (min-width:1024px){
  .hero-inner{padding-block:clamp(16px,3vw,44px)}

  /* Jumatate din continut, minus jumatate din spatiul care despartea inainte
     cele doua coloane. Practic aceeasi latime pe care o avea coloana de text
     in grila de dinainte (1.02fr din 2.02fr), si tot la 60-100px de muchia
     camerei din fotografie, la orice latime de la 1024 in sus.

     12px, nu 20: la 1200px cele doua butoane de sus insumeaza 527px intr-o
     coloana care ar fi avut 525. Doi pixeli, si randul se rupea in trei, iar
     hero-ul trecea de inaltimea ecranului. Aceeasi lectie ca la `.hero-cta`
     mai jos — o decizie de asezare nu trebuie sa atarne de doi pixeli. */
  .hero-lead{max-width:calc(50% - var(--sp-12))}


  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc--lead{grid-column:span 2;flex-direction:row}
  .svc--panel{grid-column:span 2;flex-direction:row;align-items:center}

  .price-grid{grid-template-columns:repeat(3,1fr)}
  .price{flex-direction:column;gap:0}
  .price-head{
    flex:none;
    border-right:0;
    border-bottom:1px solid var(--border);
    padding:0 0 var(--sp-20) 0;
  }
  .price-de{flex:none;padding-top:var(--sp-20)}
  /* Pe coloane, badge-ul sta iar in banda de 40px rezervata de .price, deci
     cardul recomandat nu mai are nevoie de cei 4px in plus luati de la
     varianta de tableta. Cu ei, antetul lui statea cu 4px mai jos decat al
     vecinilor si toata coloana ii era decalata. */
  .price--featured{padding-top:var(--sp-40)}
  .price-list{flex:1;padding-block:var(--sp-24)}
  .price-propriu-text{flex:1;padding-block:var(--sp-24)}
  /* butonul se intoarce la dimensiunea lui proprie. Fara linia asta ramane
     cu flex:1 1 200px de la varianta de tableta (linia 148) si devine o
     cutie de 200px inaltime, cu textul pierdut in mijloc. */
  .price .btn{flex:none}

  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}

  /* process becomes horizontal storytelling */
  .proc-rail{display:block}
  .proc-rail-v{display:none}
  .proc-steps{
    grid-template-columns:repeat(5,1fr);
    gap:0 var(--sp-20);
  }
  .proc-step{
    padding-left:0;
    padding-top:var(--sp-76);
    padding-right:var(--sp-16);
  }
  .proc-node{
    left:0;
    top:0;
  }
  .proc-step p{max-width:26ch}
  /* a two-line step title must not push its copy out of alignment
     with the other four */
  .proc-step h3{min-height:2.4em}
}

/* Navigation switches only when the complete row fits comfortably. */
/* Category panels and their actions span the outer packages layout. */
.price-grid > .pkg-tabs,
.price-grid > .pkg-panel,
.price-grid > .pkg-foot{grid-column:1 / -1;min-width:0}
.pkg-foot__actions{display:flex;flex-wrap:wrap;gap:var(--sp-12)}
.pkg-foot__actions .btn{max-width:100%;white-space:normal;text-align:center}

/* Pe telefon cele trei butoane stateau unul sub altul, la fel de late si la
   fel de inalte: o lista, nu o alegere. Constructorul ia randul lui — el
   raspunde la intrebarea de deasupra —, iar celelalte doua impart randul al
   doilea. Regula sta aici, nu in sections.css, fiindca fisierul asta se
   incarca dupa el si ar fi intors `display` inapoi la `flex`. */
@media (max-width:720px){
  .pkg-foot__actions{flex-wrap:wrap;justify-content:center;gap:var(--sp-8)}
  .pkg-foot__actions > :first-child{flex:1 0 100%;width:100%}
  /* Ca butoane, cele doua secundare intrau in 147px si se rupeau in patru
     randuri fiecare — 113px inaltime pentru doua cuvinte. Fara chenar si fara
     umplutura laterala, textul lor incape pe un rand si tinta de atingere
     ramane intreaga, 44px. */
  .pkg-foot__actions .btn--secondary,
  .pkg-foot__actions .btn--ghost{
    width:auto;
    min-height:44px;
    padding:var(--sp-8) var(--sp-4);
    border-color:transparent;
    background:none;
    text-decoration:underline;
    text-underline-offset:3px;
  }
}

@media (min-width:1200px){
  .mbar,.drawer{display:none}
  .nav{display:grid}
  .hero{padding-top:calc(var(--nav-h) + var(--sp-48))}
}

/* ---------------------------------------------------------
   LARGE DESKTOP (1440px+)
--------------------------------------------------------- */
/* ---------------------------------------------------------
   TOUCH — hover effects that would stick are neutralised
--------------------------------------------------------- */
@media (hover:none){
  .svc-motif{display:none}
  .dock-chan .lbl{display:none}

  /* Tinte de atingere de cel putin 44px.
     Linkurile din liste (subsol, navigatie, servicii) au 28px inaltime de
     text; degetul are nevoie de mai mult. Se creste zona de nimerire cu un
     `::before` intins, nu cu padding: padding-ul ar imprastia asezarea si ar
     rupe ritmul vertical al subsolului, iar zona intinsa nu se vede si nu
     misca nimic. Elementul devine `position:relative` doar aici, pe atingere. */
  .footer-list a,
  .footer-bottom-links a,
  .nav-drop a,
  .mbar a,
  .tlink{
    position:relative;
  }
  .footer-list a::before,
  .footer-bottom-links a::before,
  .nav-drop a::before,
  .mbar a::before,
  .tlink::before{
    content:"";
    position:absolute;
    left:0;right:0;
    top:50%;
    height:44px;
    transform:translateY(-50%);
    /* nu prinde apasarea in locul linkului, doar o intinde */
  }
  /* Randurile din subsol stau la 8px unul de altul; zonele de 44px s-ar
     suprapune si ar fura apasarea vecinului: 16px intre randuri inseamna exact
     cei 8px de sus si 8px de jos cu care creste fiecare zona. */
  .footer-list li + li{margin-top:var(--sp-16)}
  .footer-bottom-links{gap:var(--sp-20)}
}

/* ---------------------------------------------------------
   SHORT VIEWPORTS — hero must not force scrolling to read
--------------------------------------------------------- */
@media (min-width:1024px) and (max-height:900px){
  .site-header{padding-block:var(--sp-16) var(--sp-4)}
  .hero-inner{padding-block:var(--sp-8)}
  .hero-title{margin-top:var(--sp-16)}
  .hero-cta{margin-top:var(--sp-20)}
  .hero-facts{margin-top:var(--sp-20);padding-top:var(--sp-16)}
  .hero-rail{padding-block:var(--sp-16) var(--sp-16)}
}

/* ---------------------------------------------------------
   PRINT — the page must still be readable on paper
--------------------------------------------------------- */
@media print{
  .nav,.mbar,.drawer,.dock,.pfv{display:none !important}
  .hero,.section--dark,.cta,.site-footer{background:#fff !important;color:#000 !important}
  .hero-title,.section--dark h2,.cta h2{color:#000 !important}
  [data-reveal],.boot{opacity:1 !important;transform:none !important}
}

/* ---------------------------------------------------------
   TINTE DE ATINGERE
   44px minim pentru tot ce se apasa cu degetul. Lista e explicita, nu un
   selector generic: un link din mijlocul unui paragraf nu trebuie sa creasca,
   doar controalele. Masurat inainte: 49 de elemente sub prag la 375px.
--------------------------------------------------------- */
@media (hover:none),(max-width:767px){
  .skip-link,
  .brand,
  .footer-list a,
  .footer-bottom a,
  .filter,
  .tlink,
  .dock-chan,
  .nav-link,
  .drawer-nav a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .icon-btn{
    min-width:44px;
    min-height:44px;
  }
  /* Caseta de acord: patratul ramane mic, dar eticheta care il inconjoara
     duce toata suprafata de atingere. */
  .form-consent input[type=checkbox]{width:22px;height:22px}
  .form-consent label{min-height:44px;display:inline-flex;align-items:center}
}