/* ==========================================================================
   visarta-mob.css — responsive
   ==========================================================================

   Cum functioneaza fisierul acesta
   --------------------------------
   visarta.css este desktop. Nu are nicio regula de lastime in el: tot ce
   scrie acolo se aplica pe ecran mare. Fisierul de aici il corecteaza in jos,
   pe trepte de max-width, si se incarca DUPA visarta.css.

   Regula de organizare: o singura treapta de fiecare lastime, in ordine
   descrescatoare. Nu se repeta niciun prag. Daca vrei sa schimbi ceva la o
   anumita lastime, cauti treapta si scrii acolo — nu mai adaugi @media nou.

     max-width: 1600px   ecrane mari
     max-width: 1400px   laptop mare
     max-width: 1200px   laptop
     max-width: 1000px   tableta orizontala / laptop mic
     max-width:  768px   tableta verticala
     max-width:  576px   telefon

   De ce sunt trepte care se aplica una peste alta
   -----------------------------------------------
   La 500px se aplica TOATE treptele (500 e mai mic decat 576, 768, 1000...).
   Asa functioneaza max-width. Deci nu trebuie sa repeti la 576 ce ai scris
   deja la 768 — se moștenește. Scrie doar diferenta.

   Fonturile, culorile si spatiile sunt aceleasi variabile ca in visarta.css
   (--color-primary, --space-6 etc.), deci nu trebuie sa cauti valori aici.
   ========================================================================== */


/* ==========================================================================
   max-width: 1600px — ecrane mari
   ==========================================================================
   Containerul se opreste la 1280px, deci de la 1280 in sus latimea nu se mai
   schimba si nimic din design n-ar avea motiv sa se miste aici. Exceptia e
   bara de navigatie: cu cele sapte capitole actuale incape la limita, cu 21px
   de rezerva, si orice capitol adaugat o rupe in doua randuri.

   De la 1600px in jos capitolele se string, ca randul sa tina pana la 1200px,
   unde oricum trece pe sertar. Peste 1600px raman 15px din design si 20px
   intre capitole, scrise in visarta.css.
   ========================================================================== */
@media (max-width: 1600px) {

  /* 20px intre capitole devin 8px. Linkurile au deja 12px de padding fiecare,
     deci de la eticheta la eticheta raman 32px in loc de 44px — pastilele de
     hover nu se ating. */
  .nav .menu {
    gap: var(--space-3) var(--space-2);
  }

  .nav .menu > .menu-item > a {
    font-size: var(--fs-xs);
  }
}


/* ==========================================================================
   max-width: 1400px — laptop mare
   ========================================================================== */
@media (max-width: 1400px) {

  /* Banda de cautare: distantele se string primele, ca pastilele sa ramana
     cat textul lor cat mai mult timp. Randul trebuie sa tina pana sub 1200px. */
  .member-search {
    column-gap: var(--space-6);
  }

  .member-search__forms {
    gap: var(--space-3);
  }

  /*
   * Coloana de text a proiectelor se strange inaintea sliderului: titlul pe
   * doua randuri incape si in 340px, iar cardurile au nevoie de spatiu.
   */
  .member-projects {
    grid-template-columns: 21.25rem minmax(0, 1fr); /* 340px */
    column-gap: var(--space-10);
  }

  /*
   * .container-ul are 20px gutter cat timp lastimea paginii e sub 1320px
   * (1280 + 2 * 20px), dar sagetile portofoliului ies 28px in afara galeriei
   * (vezi visarta.css) — 8px mai mult decat gutter-ul. Rezultatul e scroll
   * orizontal pe pagina intreaga intre 768 si 1320px, nu doar o suprapunere
   * vizuala. 0 e valoarea implicita din .slider (aceeasi regula generica),
   * nu o alegere noua. Sub 768px, treapta urmatoare o stange si mai mult.
   */
  .member-portfolio .swiper-button-prev {
    inset-inline-start: 0;
  }

  .member-portfolio .swiper-button-next {
    inset-inline-end: 0;
  }
}


/* ==========================================================================
   max-width: 1200px — laptop
   ==========================================================================
   Aici navigatia devine drawer. Bara orizontala are nevoie de 1158px ca sa
   incapa pe un rand (socoteala e in visarta.css, la .nav .menu), iar sub
   pragul acesta ar trece pe doua randuri. Pana la 1200px se tinea aici un
   meniu pe doua randuri, ceea ce arata rupt.

   Valoarea e scrisa si ca --bp-nav in visarta.css, de unde o citeste nav.js
   ca sa inchida sertarul cand se trece inapoi la bara. Daca schimbi pragul,
   schimba-le pe amandoua.
   ========================================================================== */
@media (max-width: 1200px) {

  .coloane-3 {grid-template-columns: repeat(2, 1fr);}
  /* Slide-ul de eveniment: coloana de text scade de la 519px la 416px, ca sa
     rămână loc de imagine. Sub 1000px se stivuieste de tot (vezi treapta). */
  .events-slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--space-10);
  }

  /* Portretul se micsoreaza inainte sa inceapa sa strivească textul. */
  .member-intro {
    grid-template-columns: minmax(0, 1fr) 12.5rem; /* 200px */
    column-gap: var(--space-10);
  }

  /* Zonele se apropie: 120px e prea mult cand pagina nu mai e lata. */
  .member {
    gap: var(--space-20); /* 80px */
  }

  /* De aici in jos banda se stivuieste: revine `wrap`, iar pastilele isi cer
     inapoi latimea data de `size`, deci trec pe rândul lor. */
  .member-search,
  .member-search__forms {
    flex-wrap: wrap;
  }

  .member-search__form {
    min-width: auto;
  }

  /* ---- Navigatie: din bara orizontala inapoi in drawer ----
     Butonul hamburger reapare, iar meniul devine un panou care intra din
     dreapta. nav.js pune .is-open pe .nav — de asta .nav e ascuns aici, dar
     .nav.is-open (scris in visarta.css) e mai specific si il arata. */

  /* In sertar navigatia e scoasa din flux, deci nu mai umple ea spatiul
     dintre sigla si actiuni. Fara marginea asta, sigla, lupa si butonul de
     meniu s-ar aduna toate in stanga. */
  .site-branding {
    margin-inline-end: auto;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px)) 0 0 auto;
    z-index: var(--z-overlay);
    width: min(20rem, 85vw);
    padding: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-lg);
    overflow-x: visible;
    overflow-y: auto;
    visibility: hidden;
    translate: 100% 0;
  }

  /* Meniul se aseaza pe verticala in drawer. `justify-content` revine la
     normal: pe bara centreaza capitolele pe orizontala, dar aici axa e
     verticala si ar aduna linkurile la mijlocul panoului. */
  .nav .menu {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
    gap: var(--space-1);
    align-items: normal;
  }

  /* Linkurile revin la marimea si culoarea de text normal — pe desktop sunt
     mai mici si gri-navy, ca sa intre in bara. */
  .nav .menu > .menu-item > a {
    color: var(--color-text);
    font-size: inherit;
    font-weight: var(--fw-medium);
    letter-spacing: normal;
  }

  /* Regula de mai sus e mai specifica decat cea care coloreaza pagina curenta
     (scrisa in visarta.css), deci ar sterge evidentierea. O rescriem aici, la
     aceeasi specificitate dar mai jos, ca sa ramana albastra. */
  .nav .menu > .current-menu-item > a,
  .nav .menu > .current-menu-ancestor > a,
  .nav .menu > .current_page_item > a {
    color: var(--color-accent-text);
  }

  /* Un item cu submeniu e un rand: link + buton, iar submeniul trece pe rândul
     lui (de asta flex-wrap: wrap). */
  .nav .menu > .menu-item-has-children {
    flex-wrap: wrap;
    gap: normal;
  }

  .nav .menu > .menu-item-has-children > a {
    flex: 1 1 auto;
  }

  /* Linkurile care in rest traiesc doar in subsol, la coada sertarului:
     despartite printr-o linie, ca sa se vada ca sunt alt registru. */
  .nav .nav__extra {
    display: block;
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  /* Butonul de submeniu redevine patratul de 36px, apasabil cu degetul. */
  .nav .submenu-toggle,
  .nav .menu > .menu-item-has-children > .submenu-toggle {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--color-text-muted);
  }

  /* Submeniul nu mai e flyout absolut, ci acordeon in flux. Ascuns pana cand
     nav.js pune .is-open pe <li> — regula aceea, din visarta.css, e mai
     specifica si il deschide. opacity/visibility revin la normal pentru ca pe
     desktop submeniul e ascuns prin ele, nu prin display. */
  .nav .sub-menu {
    position: static;
    inset: auto;
    z-index: auto;
    display: none;
    min-width: auto;
    padding: 0;
    padding-inline-start: var(--space-4);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    translate: none;
    transition: none;
  }
}


/* ==========================================================================
   max-width: 1000px — tableta orizontala / laptop mic
   ==========================================================================
   Aici se rup toate layout-urile pe doua coloane. Navigatia a trecut deja pe
   drawer la treapta de 1200px, de mai sus.
   ========================================================================== */
@media (max-width: 1000px) {

  /* ---- Grile ---- */

  .grid--3 {
    --grid-cols: 2;
  }

  .grid--4 {
    --grid-cols: 2;
  }

  /* ---- Footer ---- */

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---- Articol: textul si sidebar-ul se stivuiesc ---- */

  .article {
    grid-template-columns: none;
    gap: var(--space-12);
  }

  /* Stivuit, sidebar-ul nu mai are de ce sa fie sticky. */
  .article__sidebar {
    position: static;
    top: auto;
  }

  /* ---- Contact ---- */

  .contact-info {
    grid-template-columns: none;
  }

  .contact-map__body {
    grid-template-columns: none;
  }

  /* Harta revine la raportul din design; min-height-ul de desktop dispare. */
  .contact-map__embed {
    aspect-ratio: 845/466;
    min-height: auto;
  }

  /* ---- Evenimente ---- */

  .events-slide {
    grid-template-columns: none;
    gap: var(--space-8);
  }

  .events-slide__image {
    aspect-ratio: 1.5;
  }

  /* ---- Despre noi ---- */

  /* Doua repere pe rand in loc de trei. */
  .about-history__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sageata e desenata presupunand trei repere pe rand; la doua ar arata spre
     cardul greșit, deci dispare. */
  .badge-card__arrow {
    display: none;
  }

  .about-values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Banda cu fotografie se strange, si cardurile intra mai putin peste ea. */
  .section--about-values {
    --about-values-band: 30rem;
    --about-values-overlap: 8rem;
  }

  /* Introducerea si cardurile nu mai stau una langa alta. */
  .about-achievements {
    grid-template-columns: none;
    gap: var(--space-12);
  }

  /* ---- Pagina 404 ---- */

  /* Patru carduri pe un rand devin doua; coloanele de link-uri, tot doua. */
  .error-404-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .error-404-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .error-404-links .section__header {
    margin-block-end: var(--space-8);
  }

  /* ---- Membru: Prezentare ---- */

  /*
   * Prezentarea trece pe o coloana, cu portretul deasupra textului: sub
   * lățimea asta o poza de 200px langa text lasa textul prea ingust.
   */
  .member-intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }

  .member-portrait {
    order: -1;
    width: 15.375rem; /* 246px, marimea din design */
    max-width: 100%;
  }

  /* ---- Membru: Cele mai recente proiecte ---- */

  /* Proiectele: textul deasupra, sliderul dedesubt. */
  .member-projects {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
  }

  .member-projects__nav {
    margin-block-start: var(--space-6);
  }

  /* ---- Rubrica „VISARTA vă poate reprezenta” ---- */

  .reprezentare {
    --grid-gap: var(--space-10);
  }
}


/* ==========================================================================
   max-width: 768px — tableta verticala
   ========================================================================== */
@media (max-width: 768px) {
  .coloane-2 {grid-template-columns: repeat(1, 1fr);}
  .coloane-3 {grid-template-columns: repeat(1, 1fr);}

  /* ---- Balonul unei optiuni din lista (RAF*) ----
     In dreapta nu mai are loc: coboara sub optiune, cat latimea ei, cu sageata
     in sus. */
  .fancy-select__hint {
    inset-block-start: calc(100% + var(--space-2));
    inset-inline: 0;
    width: auto;
    translate: 0 -0.25rem;
  }

  .fancy-select__hint::before {
    inset-block-start: auto;
    inset-block-end: 100%;
    inset-inline: var(--space-5) auto;
    border-inline-end-color: transparent;
    border-block-end-color: var(--color-secondary);
    translate: none;
  }

  .fancy-select__option.has-hint:hover .fancy-select__hint {
    translate: 0 0;
  }

  /* ---- Caseta de cautare ----
     Domeniul se numeste acum "Autori romani reprezentati Visarta", adica 323px:
     langa el nu mai ramane nimic dintr-o pastila de 335px, iar pagina incepea sa
     se derluleze lateral. Pe telefon trece pe randul lui, deasupra campului,
     fiecare pe toata latimea. */
  .member-search__form {
    flex-wrap: wrap;
    /* Treapta de 1200px repune `min-width: auto`, ca pastilele sa-si ceara
       latimea din `size`. Aici e invers: caseta e singura si trebuie sa se
       stranga sub latimea continutului ei, altfel numele lung al domeniului o
       impinge afara din ecran. */
    min-width: 0;
    /* Raza intreaga e pentru o pastila de un rand. Stivuita, pastila are 134px
       inaltime, iar `--radius-full` o face o elipsa: eticheta ajungea pe linia
       de sus, iar lupa iesea peste coltul de jos. */
    row-gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  /* Eticheta pe randul ei, aliniata cu chipul de sub ea, nu cu marginea rotunda. */
  .member-search__scope-label {
    flex: 1 0 100%;
    padding-inline-start: var(--space-2);
  }

  /* Campul si lupa impart ultimul rand — campul respira de la marginea casetei. */
  .member-search__input {
    padding-inline-start: var(--space-2);
  }

  /* Panoul se face cat cea mai lunga optiune a lui, iar optiunile sunt propozitii:
     la 320px iesea din ecran. Se opreste la latimea chipului, iar textul se rupe
     pe doua randuri in loc sa impinga. */
  .fancy-select__list {
    max-width: 100%;
  }

  .fancy-select__option {
    white-space: normal;
  }

  /* .fancy-select cand a pornit JS-ul, selectul gol cand nu.
     `1 1 100%`, nu `1 0 100%`: numele domeniului are 323px, iar pe un ecran de
     320px trebuie sa poata ceda si sa se taie cu trei puncte, nu sa impinga
     caseta afara din pagina. */
  .member-search__form .fancy-select,
  .member-search__scope {
    flex: 1 1 100%;
  }

  /* Titlul benzii nu cedeaza pe desktop, ca sa nu se rupa inaintea casetelor.
     Aici e singur pe randul lui, iar subtitlul are 338px: fara asta, el era cel
     care facea pagina sa se deruleze lateral sub 340px. */
  .member-search__intro {
    flex-shrink: 1;
  }

  /* Chipul e pe toata latimea, deci n-are nevoie de 20px de aer lateral, iar
     eticheta lui e o propozitie: cu paddingul si litera de pe desktop lipseau
     24px si se taia cu trei puncte chiar si pe un telefon obisnuit. */
  .member-search__form .fancy-select__button {
    width: 100%;
    justify-content: space-between;
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
  }

  /* Campul ia tot ce ramane pe al doilea rand, langa lupa: latimea data de
     `size` e mai mare decat locul, iar fara asta campul se strangea la cativa
     pixeli. */
  .member-search__input {
    flex: 1 1 0;
  }

  /* ---- Grile: totul pe o coloana ---- */

  .grid--2 {
    --grid-cols: 1;
  }

  .grid--3 {
    --grid-cols: 1;
  }

  /* Primul articol de pe Noutăți: pe o singură coloană, ca toate. */
  .post-card.prim-articol {
    grid-column: auto;
  }

  .prim-articol .post-card__title {
    font-size: var(--fs-2xl);
  }

  .prim-articol .post-card__excerpt {
    font-size: var(--fs-lg);
  }

  /* ---- Footer ---- */

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- Navigarea intre articole ---- */

  .post-navigation .nav-links {
    grid-template-columns: none;
  }

  .post-navigation .nav-next {
    text-align: start;
  }

  /* ---- Hero ---- */

  .hero,
  .hero--no-image {
    grid-template-columns: none;
  }

  /* ---- Text + imagine: ordinea inversata de pe desktop nu mai are sens
     cand sunt una sub alta ---- */

  .text-image--image-left .text-image__content,
  .text-image--image-left .text-image__media {
    order: 0;
  }

  /* ---- Continut: imaginile nu mai plutesc ----
     O imagine de 20rem langa text ar lasa o coloana prea ingusta de citit,
     deci trece pe toata lastimea si textul curge sub ea. */

  :is(.entry-content, .entry__content) > .alignleft,
  :is(.entry-content, .entry__content) > .alignright {
    float: none;
    width: auto;
    margin-inline: 0;
  }

  /* Fara float, lista de dupa imagine nu mai are nevoie de context propriu. */
  :is(.entry-content, .entry__content) > :is(.alignleft, .alignright) + :is(ul, ol) {
    display: block;
  }

  /* ---- Despre noi: totul pe o coloana ---- */

  .about-history__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }

  /* Panoul albastru isi strange marginile pe ecran mic. */
  .about-history {
    padding: var(--space-10) var(--space-5) var(--space-12);
  }

  .about-values__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-achievements__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Manifestul de pe Home: titlul si textul cu un pas mai mici. */
  .home-manifesto {
    gap: var(--space-8);
  }

  .home-manifesto__title {
    font-size: var(--fs-3xl);
  }

  .home-manifesto__lead {
    font-size: var(--fs-lg);
  }

  .home-manifesto__motto {
    font-size: var(--fs-xl);
  }

  /* ---- Pagina 404 ---- */

  .error-404-links {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- Membru: Informatii / Drepturi gestionate ---- */

  /* O casetă pe rand: „Editare (cu excepția presei), licențiere" nu incape in jumatate de ecran. */
  .member-boxes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .member-box {
    min-height: 0;
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-xl);
  }

  .member {
    gap: var(--space-16); /* 64px */
  }

  /* ---- Membru: Portofoliu lucrari ---- */

  /*
   * Sagetile portofoliului intra in interiorul galeriei: in afara ei ar cadea
   * peste marginea ecranului.
   */
  .member-portfolio .swiper-button-prev {
    inset-inline-start: var(--space-3);
  }

  .member-portfolio .swiper-button-next {
    inset-inline-end: var(--space-3);
  }

  /* ---- Registru membri: tabelul devine lista de carduri ---- */

  .section--registru {
    padding-block: var(--space-12) var(--space-10);
  }

  /* Documentele de descarcat: unul sub altul, cu mai putin aer. */
  .registru-docs {
    margin-block-start: var(--space-12);
  }

  .registru-docs__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .registru-docs__item {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .registru-docs__title {
    font-size: var(--fs-base);
  }

  .registru__card-head,
  .registru__cell,
  .registru__foot {
    padding-inline: var(--space-4);
  }

  /* Antetul nu mai are ce eticheta: fiecare celula isi poarta numele in data-label. */
  .registru__table thead {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }

  .registru__scroll {
    overflow-x: visible;
  }

  .registru__table,
  .registru__table tbody,
  .registru__row,
  .registru__cell {
    display: block;
    width: 100%;
  }

  .registru__row {
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--color-border);
  }

  .registru__row:last-child {
    border-block-end: 0;
  }

  .registru__cell {
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    border-block-end: 0;
    padding-block: var(--space-2);
  }

  .registru__cell--name {
    display: block;
    padding-block-start: var(--space-3);
  }

  .registru__cell:not(.registru__cell--name)::before {
    content: attr(data-label);
    color: var(--color-text-subtle);
    font-size: var(--fs-xs);
  }

  .registru__row:hover .registru__cell {
    background-color: transparent;
  }

  /* O celula fara valoare nu are ce eticheta pe ecran mic. */
  .registru__cell--blank {
    display: none;
  }

  .registru__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3);
  }

  .registru__pagination,
  .registru__perpage {
    grid-column: 1;
  }

  .registru__perpage {
    justify-content: center;
  }

  /* ---- Comutatorul autori / membri ----
     Pastila are nevoie de 455px ca sa incapa cu textul ei intreg, deci pe
     telefon iesea din ecran si pagina se derula lateral. Aici ia toata latimea
     si cele doua optiuni o impart in doua, cu literă mai mica: asa nu mai poate
     depasi, oricat de lungi ar fi etichetele. */
  .registru__filter,
  .registru__switch {
    width: 100%;
  }

  .registru__switch-option {
    flex: 1 1 0;
  }

  .registru__switch-text {
    padding-inline: var(--space-2);
    font-size: var(--fs-xs);
    text-align: center;
  }

  /* ---- Rubrica „VISARTA vă poate reprezenta” ---- */

  .section--reprezentare {
    padding-block: var(--space-4) var(--space-12);
  }

  /* Latimile din design nu mai incap una langa alta; ilustratia ramane
     prima, ca in ordinea de citire a paginii. */
  .reprezentare {
    --grid-gap: var(--space-8);

    grid-template-columns: minmax(0, 1fr);
  }

  .reprezentare__title {
    font-size: var(--fs-3xl);
  }
}


/* ==========================================================================
   max-width: 576px — telefon
   ========================================================================== */
@media (max-width: 576px) {

  /* ---- Home: Acces rapid ----
     Pe telefon, cate o pastila pe rand, centrate. Fiecare ramane cat textul
     ei: align-items: center le opreste sa se intinda pe toata latimea. */
  .home-hero__links {
    flex-direction: column;
    align-items: center;
  }

  /* ---- Registru: numaratoarea de deasupra listei ----
     Cele doua numere raman pe un rand, cu linia intre ele; altfel trec unul sub
     altul si linia nu mai desparte nimic. */
  .registru-stats__item {
    gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  .registru-stats__number {
    font-size: var(--fs-3xl);
  }

  .registru-stats__label {
    font-size: var(--fs-base);
  }

  /* ---- Grile ---- */

  .grid--4 {
    --grid-cols: 1;
  }

  /* ---- Contact: cardurile si randurile de formular pe o coloana ---- */

  .contact-info__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-info__card,
  .contact-info__card--half {
    grid-column: auto;
  }

  /* Padding-ul de 3rem al cardului de formular il strange sub lastimea lui
     minima pe un ecran de 320px si arunca pagina in scroll orizontal. */
  .contact-info__form {
    padding-inline: var(--space-6);
  }

  .contact-info .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ---- Harta ----
     Raportul singur ar lasa harta sub 18rem inaltime, deci trece pe inaltime
     fixa. Trebuie sa fie inaltime si nu min-height: min-height langa
     aspect-ratio se transforma inapoi in lastime minima (18rem x 845/466 =
     522px) si sparge pagina pe telefon. */
  .contact-map__embed {
    height: 18rem;
    aspect-ratio: auto;
  }

  /* ---- Despre noi ---- */

  /* Numarul palid ar depasi cardul la lastimea asta. */
  .badge-card__index {
    font-size: 5rem;
    inset-block-start: -0.6em;
  }


  .about-values__title,
  .about-history__title,
  .about-achievements__title,
  .about-intro__title {
    font-size: var(--fs-4xl);
  }

  /* ---- Pagina 404 ---- */

  .error-404-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .error-404-help__title {
    font-size: var(--fs-2xl);
  }

  .error-404-intro__text,
  .error-404-help__text,
  .error-404-steps__text,
  .error-404-steps__item::before {
    font-size: var(--fs-xl);
  }

  /* ---- Membru: Informatii / Drepturi gestionate ---- */

  .member-box {
    font-size: var(--fs-lg);
  }

  /* ---- Membru: Cele mai recente proiecte ---- */

  /* Cardul de proiect ocupa aproape tot ecranul, cu un colt din urmatorul vizibil. */
  .member-projects .swiper-slide {
    width: 85vw;
  }

  .project-card__body {
    gap: var(--space-4);
  }

  /* ---- Registru membri ---- */

  .registru__alphabet {
    gap: var(--space-1) var(--space-2);
  }

  .registru__letter {
    min-width: 2rem;
    height: 2rem;
    font-size: var(--fs-base);
  }

  .registru__title {
    font-size: var(--fs-2xl);
  }

  /* ---- Rubrica „VISARTA vă poate reprezenta” ---- */

  .reprezentare__title {
    font-size: var(--fs-2xl);
  }

  .reprezentare__text,
  .reprezentare__item-text {
    font-size: var(--fs-base);
  }

  /* ---- Bara de sus, pe telefon ----
     Distanțele de 32px dintre siglă, butonul de meniu și acțiuni mâncau
     jumătate din lățimea ecranului, iar flexul strângea ce rămânea: sigla
     ajungea la 45px, iar butonul de meniu se turtea la 34x44. Cu distanțele
     strânse, sigla respiră, iar butonul își ține pătratul. */
  .site-header__inner {
    gap: var(--space-3);
  }

  .site-branding {
    min-width: 3.5rem;
  }

  .nav-toggle {
    flex: none;
  }
}