/*
 * Blocuri proprii pentru paginile construite cu Page Builder.
 *
 * De ce exista fisierul: owner, 2026-07-21 — „nu carduri diferite ... ui blocks
 * unice pentru fiecare familie de servicii" si „niciunul dintre cardurile
 * folosite de tine nu au legatura cu design-ul nostru". Blocurile generice din
 * biblioteca se randau cu utilitare Tailwind (`bg-surface-1 px-4 py-16`), fara
 * legatura cu limbajul site-ului.
 *
 * Regula: aici NU se inventeaza valori. Tot ce urmeaza foloseste tokenurile
 * masurate din `main.css`, deci blocurile noi sunt continuari ale sistemului:
 *
 *   cerneala        #242728   .custom-btn-primary, .section-label
 *   titluri         #0A0A0A   .md-hero-banner-1__title
 *   text secundar   #666      .md-hero-banner-1__description-secondary
 *   banda           linear-gradient(180deg,#F9F9F9,#FFF), alternand directia
 *   panou           #FFF · radius 15px · 0 3.225px 3.225px rgba(0,0,0,.05)
 *   pastila         #E5E7EB · radius 14px · 8/16px · gap 12px
 *   buton           #242728 · radius max(10px,.625em) · 16px/500
 *   ritm sectiune   padding-block 104px 73px
 *
 * `main.css` este captura temei si nu se editeaza. Blocurile noastre stau aici.
 */

:root {
    --mdr-ink: #242728;
    --mdr-title: #0a0a0a;
    --mdr-muted: #666;
    --mdr-hairline: #e5e5e5;
    --mdr-chip: #e5e7eb;
    --mdr-paper: #fff;
    --mdr-paper-soft: #f9f9f9;
    --mdr-radius: 15px;
    --mdr-shadow: 0 3.225px 3.225px 0 rgba(0, 0, 0, 0.05);
    --mdr-shell: min(1320px, 100% - 44px);
}

/* ============================================================================
   mdr-scope-picker — configuratorul de scop
   ----------------------------------------------------------------------------
   Inlocuieste coloana de pret. Decizie owner consemnata in
   `docs/agents/decisions.md`: pe /tarife nu se publica preturi fixe, fiindca pe
   nisa noastra nu exista. Ramane un gol exact acolo unde vizitatorul astepta o
   cifra — iar interactiunea il umple cu lucrul care determina pretul: scopul.
   ========================================================================== */

.mdr-scope {
    background: linear-gradient(180deg, var(--mdr-paper-soft), var(--mdr-paper));
    padding-block: 104px 73px;
}

.mdr-scope__inner {
    width: var(--mdr-shell);
    margin-inline: auto;
}

.mdr-scope__step {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 14px;
    background: var(--mdr-chip);
    color: var(--mdr-ink);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mdr-scope__title {
    margin: 14px 0 0;
    color: var(--mdr-title);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.16;
    text-wrap: balance;
}

.mdr-scope__lede {
    margin: 10px 0 0;
    max-width: 62ch;
    color: var(--mdr-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* --- pasul 01: directii --- */
.mdr-scope__families {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
    gap: 13px;
    margin-top: 30px;
}

.mdr-scope__family {
    position: relative;
    padding: 19px;
    border: 1px solid var(--mdr-hairline);
    border-radius: var(--mdr-radius);
    background: var(--mdr-paper);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.mdr-scope__family:hover {
    border-color: var(--mdr-ink);
    transform: translateY(-2px);
    box-shadow: var(--mdr-shadow);
}

.mdr-scope__family:focus-visible {
    outline: 2px solid var(--mdr-ink);
    outline-offset: 2px;
}

.mdr-scope__family[aria-pressed='true'] {
    background: var(--mdr-ink);
    border-color: var(--mdr-ink);
    color: #fff;
}

.mdr-scope__family-index {
    color: var(--mdr-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mdr-scope__family-name {
    display: block;
    margin-top: 5px;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.25;
}

.mdr-scope__family-hint {
    display: block;
    margin-top: 7px;
    color: var(--mdr-muted);
    font-size: 12.5px;
}

.mdr-scope__family[aria-pressed='true'] .mdr-scope__family-index,
.mdr-scope__family[aria-pressed='true'] .mdr-scope__family-hint {
    color: rgba(255, 255, 255, 0.66);
}

.mdr-scope__tick {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--mdr-hairline);
    border-radius: 999px;
}

.mdr-scope__tick svg {
    width: 10px;
    height: 10px;
    opacity: 0;
    color: var(--mdr-ink);
}

.mdr-scope__family[aria-pressed='true'] .mdr-scope__tick {
    border-color: #fff;
    background: #fff;
}

.mdr-scope__family[aria-pressed='true'] .mdr-scope__tick svg {
    opacity: 1;
}

/* --- pasul 02: servicii + panou --- */
.mdr-scope__work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    align-items: start;
    gap: 38px;
    margin-top: 30px;
}

@media (max-width: 980px) {
    .mdr-scope__work {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mdr-scope__group + .mdr-scope__group {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--mdr-hairline);
}

.mdr-scope__group-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.mdr-scope__group-index {
    color: var(--mdr-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mdr-scope__group-name {
    font-size: 19px;
    font-weight: 600;
}

.mdr-scope__group-model {
    margin-left: auto;
    color: var(--mdr-muted);
    font-size: 13px;
}

.mdr-scope__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.mdr-scope__chip {
    /* Owner, 2026-07-22: „chipsurile folosesc o rotunjire prea mare ... identifica
       rotunjirile acceptate". Numarate in `main.css`: 8px apare de 19 ori, 10px de
       11, 20px de 13; `999px` doar de 6 ori si exclusiv pe iconite si avatare.
       Pastila nu este limbajul nostru pentru un control cu text — 8px este. */
    padding: 8px 15px;
    border: 1px solid var(--mdr-hairline);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mdr-scope__chip:hover {
    border-color: var(--mdr-ink);
}

.mdr-scope__chip:focus-visible {
    outline: 2px solid var(--mdr-ink);
    outline-offset: 2px;
}

.mdr-scope__chip[aria-pressed='true'] {
    background: var(--mdr-ink);
    border-color: var(--mdr-ink);
    color: #fff;
}

.mdr-scope__empty {
    margin: 0;
    color: var(--mdr-muted);
}

/* --- panoul de brief --- */
.mdr-scope__brief {
    position: sticky;
    top: 44px;
    border: 1px solid var(--mdr-hairline);
    border-radius: var(--mdr-radius);
    background: var(--mdr-paper);
    box-shadow: var(--mdr-shadow);
    overflow: hidden;
}

.mdr-scope__brief-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mdr-hairline);
}

.mdr-scope__brief-head h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
}

.mdr-scope__brief-count {
    color: var(--mdr-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mdr-scope__brief-body {
    padding: 18px 20px;
    max-height: min(46vh, 400px);
    overflow: auto;
}

.mdr-scope__brief-group-title {
    margin-top: 14px;
    color: var(--mdr-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mdr-scope__brief-group:first-child .mdr-scope__brief-group-title {
    margin-top: 0;
}

.mdr-scope__brief-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--mdr-hairline);
    font-size: 14.5px;
}

.mdr-scope__brief-item:last-child {
    border-bottom: 0;
}

.mdr-scope__brief-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--mdr-hairline);
    background: var(--mdr-paper-soft);
}

.mdr-scope__cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid rgba(217, 217, 217, 0.2);
    border-radius: max(10px, 0.625em);
    background: var(--mdr-ink);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* CTA-ul este un <a>, deci nu poate purta `disabled`; starea se exprima prin
   `aria-disabled`, care e si ce citeste un screen reader. Regula veche, scrisa pe
   `[disabled]`, nu se aplica niciodata — gasita cand am curatat blocarile. */
.mdr-scope__cta[aria-disabled='true'] {
    opacity: 0.42;
    cursor: not-allowed;
}

.mdr-scope__brief-note {
    margin: 10px 0 0;
    color: var(--mdr-muted);
    font-size: 13.5px;
}

/* Pe mobil panoul nu are unde sa stea lateral: devine bara fixa jos, ca
   numarul de servicii si actiunea sa ramana vizibile in timp ce se bifeaza. */
@media (max-width: 980px) {
    .mdr-scope__brief {
        position: fixed;
        z-index: 40;
        right: 12px;
        bottom: 12px;
        left: 12px;
        top: auto;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
    }

    .mdr-scope__brief-body {
        max-height: 34vh;
    }

    .mdr-scope__brief[data-empty='true'] .mdr-scope__brief-body {
        display: none;
    }
}

/* --- pasul 03: intrebari de context --- */
.mdr-scope__questions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 26px;
}

.mdr-scope__question-title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.mdr-scope__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mdr-scope__section {
    margin-top: 52px;
}

@media (prefers-reduced-motion: reduce) {
    .mdr-scope__family,
    .mdr-scope__chip {
        transition: none;
    }
}

/* Contextul fiecarei linii din brief: familia serviciului, sub numele lui.
   Owner, 2026-07-22: titlul singur „nu este destul de explicit". */
.mdr-scope__brief-meta {
    display: block;
    margin-top: 2px;
    color: var(--mdr-muted);
    font-size: 12.5px;
}

/* Owner, 2026-07-22: textul de gol din panou avea corpul textului curent (16px) si
   se rupea urat pe doua randuri la mijlocul propozitiei a doua. Coborat la scara
   panoului si spart explicit dupa prima propozitie. */
.mdr-scope__empty--brief {
    font-size: 14.5px;
    line-height: 1.5;
}

/* Owner, 2026-07-22: „sectiunea 03 nu trebuie sa intre sub cardul cu brief".
   Panoul de brief este sticky si depaseste in inaltime blocul de servicii, asa ca
   o grila de trei coloane trimitea a treia intrebare exact sub el. Primele doua
   intrebari raman pe un rand, a treia trece dedesubt, pe toata latimea, cu
   optiunile pe un singur rand. */
.mdr-scope__questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mdr-scope__questions > :nth-child(3) {
    grid-column: 1 / -1;
}

.mdr-scope__questions > :nth-child(3) .mdr-scope__options {
    flex-wrap: nowrap;
}

@media (max-width: 720px) {
    .mdr-scope__questions {
        grid-template-columns: minmax(0, 1fr);
    }

    .mdr-scope__questions > :nth-child(3) .mdr-scope__options {
        flex-wrap: wrap;
    }
}

/* ============================================================================
   Owner, 2026-07-22: „distanta dintre sectiunile 02 si 03 este prea mare ...
   a doua intrebare intra inca sub brief. Brief-ul ar trebui sa aiba spatiu sa se
   prelungeasca ... pana la baza sectiunii 03."
   ----------------------------------------------------------------------------
   Cauza nu era spatierea, ci structura: pasul 03 era o sectiune separata SUB grila
   pasului 02. Coloana din dreapta se termina odata cu 02, deci ramanea gol sub
   card, iar intrebarile — fiind pe toata latimea — treceau pe sub el pe masura ce
   brief-ul crestea.
   Acum ambii pasi impart aceeasi grila: stanga = servicii + intrebari, dreapta =
   brief, care are astfel toata inaltimea la dispozitie. Intrebarile nu mai pot
   ajunge sub card, fiindca nu mai intra niciodata in coloana lui.
   ========================================================================== */
.mdr-scope__main {
    min-width: 0;
}

.mdr-scope__main > .mdr-scope__section {
    margin-top: 46px;
}

/* In coloana ingusta, doua intrebari pe rand stau aproape; a treia ramane dedesubt. */
.mdr-scope__main .mdr-scope__questions {
    gap: 20px 28px;
}

/* Cardul urmareste derularea pe toata inaltimea celor doi pasi. */
.mdr-scope__brief {
    align-self: start;
    max-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
}

.mdr-scope__brief-body {
    flex: 1 1 auto;
    max-height: none;
}

/* ============================================================================
   Ordinea de completare, stricta: 01 → 02 → 03
   ----------------------------------------------------------------------------
   Owner, 2026-07-22: „ordinea de selectare trebuie sa fie stricta ... 03 nu
   accepta click inainte de acces la 02."
   Pasul se vede, ca vizitatorul sa stie ce urmeaza, dar nu raspunde. Blocarea
   reala este `disabled` pe butoane (deci si pentru tastatura); ce urmeaza este
   doar semnalul vizual care o explica.
   ========================================================================== */
.mdr-scope__lock {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--mdr-muted);
    font-size: 14px;
}


/* ============================================================================
   Pasul 03 — seturi de intrebari per serviciu
   ----------------------------------------------------------------------------
   Owner, 2026-07-22: cand sunt bifate mai multe servicii, intrebarile se grupeaza
   pe fiecare, iar vizitatorul alege cu care set incepe. Setul „Despre proiect"
   aduna intrebarile cerute de mai multe servicii, ca sa nu i se ceara de patru ori
   acelasi lucru. Contorul de pe fiecare fila arata cat a completat.
   ========================================================================== */
/* Fara plafon de latime: pusesem `max-width: 68ch` ca regula de lizibilitate, dar
   masurat inseamna 632px intr-o sectiune de 934px, deci fraza se rupea cu 300px
   inainte de marginea reala si parea ca ignora latimea. Regula de ~65 de caractere
   e pentru proza citita in paragrafe, nu pentru o instructiune de o propozitie. */
.mdr-scope__sets-intro {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--mdr-muted);
    font-size: 14.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.mdr-scope__sets {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.mdr-scope__set {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--mdr-hairline);
    border-radius: 8px;
    background: var(--mdr-paper);
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mdr-scope__set:hover {
    border-color: var(--mdr-ink);
}

.mdr-scope__set:focus-visible {
    outline: 2px solid var(--mdr-ink);
    outline-offset: 2px;
}

.mdr-scope__set[aria-selected='true'] {
    background: var(--mdr-ink);
    border-color: var(--mdr-ink);
    color: #fff;
}

.mdr-scope__set-count {
    color: var(--mdr-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.mdr-scope__set[aria-selected='true'] .mdr-scope__set-count {
    color: rgba(255, 255, 255, 0.66);
}

/* Setul complet primeste un semn discret, nu o culoare noua: sistemul are o
   singura cerneala, iar „gata" nu e o categorie de brand. */
.mdr-scope__set[data-complete='true'] .mdr-scope__set-count::after {
    content: ' ✓';
}

.mdr-scope__set-note {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--mdr-muted);
    font-size: 13.5px;
}

/* Doua coloane cel mult, si doar cand fiecare primeste ~430px.
   Masurat: la 453px niciun raspuns nu se rupe pe doua randuri; la 373px se rup zece,
   la 263px se rup toate 22. Pragul NU poate sta pe latimea ecranului: la 985px grila
   e mai ingusta (555px) decat la 819px (775px), fiindca de acolo intra cardul de brief
   langa intrebari. Deci masuram containerul, nu fereastra.
   `max(430px, (100% - gap)/2)` face ambele lucruri dintr-o data: minimul de 430px taie
   coloana a doua cand nu incape, iar jumatatea de container impiedica a treia coloana
   oricat de lat ar fi ecranul. `min(100%, ...)` peste tot tine minimul sub latimea
   disponibila: fara el, pe telefon pista calculata iesea 430px intr-un container de
   346px si coloana depasea sectiunea. */
.mdr-scope__set-questions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(430px, (100% - 28px) / 2)), 1fr));
    gap: 22px 28px;
}

/* Raspunsul e subordonat intrebarii lui, deci nu poate avea aceeasi marime.
   Masurat inainte: raspuns 14px / intrebare 14px-600 — aceeasi voce, ierarhie plata.
   13px il aseaza intre titlul intrebarii (14px) si metadatele sistemului (12.5px),
   fara sa coboare sub pragul de citit confortabil. Chipurile de serviciu de la pasul
   02 raman la 14px: acolo se alege ce cumperi, aici doar se nuanteaza. */
.mdr-scope__options .mdr-scope__chip {
    font-size: 13px;
}

/* ============================================================================
   Banda de proces (`mdr-stats-row`) — apariția pașilor, în ordine
   ----------------------------------------------------------------------------
   Owner, 2026-07-22: banda „mai interactivă, mai dinamică, mai vie". Aspectul
   rămâne exact cum e — îi place așa — deci aici nu se schimbă nicio culoare,
   niciun spațiu, nicio dimensiune de font: doar starea de intrare și hover-ul.

   Ordinea contează: conținutul e o secvență („Patru pași, în această ordine"),
   deci pașii intră 01→02→03→04. Decalajul e mic (90 ms), cât să se citească
   drept ordine, nu cât să se aștepte după el.

   Ascunderea inițială se aplică DOAR după ce JS-ul marchează banda cu
   `data-mdr-steps-armed`. Fără JS, sau cu `prefers-reduced-motion`, atributul nu
   apare niciodată și conținutul e vizibil din prima — nimeni nu rămâne cu o
   secțiune goală dacă scriptul nu rulează.
   ========================================================================== */
[data-mdr-steps][data-mdr-steps-armed] [data-mdr-step] {
    opacity: 0;
    transform: translateY(14px);
}

[data-mdr-steps][data-mdr-steps-shown] [data-mdr-step] {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-mdr-steps][data-mdr-steps-shown] [data-mdr-step='1'] { transition-delay: 0.09s; }
[data-mdr-steps][data-mdr-steps-shown] [data-mdr-step='2'] { transition-delay: 0.18s; }
[data-mdr-steps][data-mdr-steps-shown] [data-mdr-step='3'] { transition-delay: 0.27s; }

/* Linia de sus se aprinde la trecerea cursorului: pasul privit se desprinde
   discret de ceilalți, fără să miște layout-ul. */
[data-mdr-steps] [data-mdr-step] {
    border-top-color: rgba(255, 255, 255, 0.15);
    transition: border-top-color 0.25s ease;
}

[data-mdr-steps] [data-mdr-step]:hover {
    border-top-color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    [data-mdr-steps] [data-mdr-step],
    [data-mdr-steps][data-mdr-steps-shown] [data-mdr-step] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}