/*
 * MetalicArt — sistemul paginilor de categorie.
 *
 * Singura foaie a celor opt pagini. Totul este scris sub `.metalicart-category-page`, clasa
 * elementului `main`, deci nimic de aici nu ajunge pe arhiva catalogului, pe fișa unei lucrări sau
 * pe prima pagină, chiar dacă folosesc aceleași carduri și același lightbox.
 *
 * Nicio fotografie nu apare în CSS. Hero-ul, tripticul și inserția cinematică își iau imaginile din
 * biblioteca WordPress, randate de PHP cu `srcset` și `sizes`, ca să poată fi schimbate din admin.
 *
 * Desenul cardului — muchii de un pixel și patru colțuri concave — este o singură mască pusă pe un
 * pseudo-element, colorată cu tokenul de cupru al temei. Cele patru colțuri sunt fișierele SVG
 * livrate cu macheta, la mărime fixă: o ramă întreagă întinsă peste un card cu înălțime variabilă
 * ar fi deformat curbele, iar la lățimi diferite grosimea liniei n-ar mai fi fost aceeași.
 */

.metalicart-category-page {
  --ma-cat-copper: var(--wp--preset--color--copper, #b86f3d);
  --ma-cat-gold: var(--metalicart-text-accent, #e1b270);
  --ma-cat-cream: var(--wp--preset--color--cream, #f2eadc);
  --ma-cat-ink: #10120f;
  --ma-cat-panel: #131612;
  --ma-cat-paper: #efe6d6;
  --ma-cat-paper-ink: #23221e;
  /* Cuprul temei ajunge la 3,2:1 pe hârtie crem; tonul acesta este același cupru, coborât peste 4,5:1. */
  --ma-cat-copper-ink: #7a4526;
  --ma-cat-rule: 1px;
  /*
   * Raza crestăturii — singura măsură a colțului.
   *
   * Din ea ies toate trei: unde se taie caseta, unde se desenează arcul și de unde pornesc
   * muchiile drepte. Înainte erau trei numere care trebuiau să fie de acord — mărimea desenului
   * SVG, raza arcului din el și adâncimea tăieturii —, iar pe telefon n-au mai fost: desenul
   * cobora la 24 de pixeli, deci arcul ajungea la raza 9, în timp ce tăietura rămânea la 11,5 și
   * îl mânca întreg. Colțurile dispăreau, iar muchiile se opreau în gol.
   *
   * Se putea repara și formula. Dar cât timp rămân trei valori care trebuie să se potrivească, se
   * pot desincroniza din nou. Aici a rămas una singură: schimbă numărul de mai jos și se mută
   * toate deodată, la orice mărime, fără prag și fără fișier de desen.
   */
  --ma-cat-notch: 12px;

}

.metalicart-category-page *,
.metalicart-category-page *::before,
.metalicart-category-page *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------- 1. Hero */

/*
 * Al doilea buton nu mai dublează primul.
 *
 * Ascuns cât timp amândouă duceau la catalog, acum trimite la atelier: prima acțiune deschide
 * colecția, a doua deschide discuția. Regula veche de ascundere este ștearsă din `category-hero.css`.
 */
.metalicart-category-page .metalicart-category-hero .metalicart-hero-copy { max-width: 680px; }

/*
 * Banda dovezilor: trei iconițe, trei promisiuni, pe fotografia hero-ului.
 *
 * Era o fâșie de șase sute optzeci de pixeli sub butoane, cu trei semne de douăzeci și doi de
 * pixeli desenate din linii. Acum ține toată lățimea containerului, ca în macheta aprobată: două
 * fire subțiri, sus și jos, două despărțitoare verticale la fel de subțiri și trei coloane egale.
 *
 * Nicio plachetă, nicio casetă, niciun medalion: numai firele și o umbră care se stinge.
 *
 * Fotografia din spate este cea cinematică a hero-ului, cu tot ce are ea: volute, lemn, pete de
 * lumină. Peste ele, cuvintele albe se citeau greu acolo unde fotografia se deschidea. Banda
 * primește deci o umbră a ei, nu o casetă: întunecime la mijloc, stinsă cu totul la capete pe câte
 * o cincime din lățime, ca marginile să nu capete muchie. Culoarea este a fundalului sitului, nu un
 * gri nou, iar firele de aramă rămân deasupra, întregi.
 */
.metalicart-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
  padding: clamp(.8rem, 1.3vw, 1.1rem) 0;
  background-image: linear-gradient(
    90deg,
    rgb(9 10 9 / 0) 0%,
    rgb(9 10 9 / .55) 20%,
    rgb(9 10 9 / .55) 80%,
    rgb(9 10 9 / 0) 100%
  );
  border-top: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 42%, transparent);
  border-bottom: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 42%, transparent);
  padding-inline-start: 0;
  list-style: none;
}

/*
 * Semnul stă lângă text, la orice lățime.
 *
 * Macheta aprobată îl așază deasupra titlului, cu rândul centrat, și banda a purtat o vreme
 * rânduirea aceea pe ecranele late. Cerută acum pe orizontală pe toate aparatele, rămâne una
 * singură: semnul la stânga, titlul și propoziția la dreapta.
 *
 * Alegerea ține și cadrul: așezată pe verticală, banda urcă de la o sută douăzeci și cinci de
 * pixeli la două sute treizeci și trei, iar hero-ul, care crește după conținut, cobora la un raport
 * de 1,34 la 1024 — un cadru aproape pătrat, adică tocmai schimbarea secțiunii pe care pachetul o
 * interzice. Pe orizontală, forma orizontală a hero-ului rămâne întreagă la toate lățimile.
 */
.metalicart-hero-trust__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(.7rem, 1vw, 1rem);
  padding-inline: clamp(.4rem, .9vw, 1rem);
  text-align: left;
}

/* Textul își ia lățimea rămasă și se rupe firesc, fără să împingă semnul de lângă el. */
.metalicart-hero-trust__copy {
  min-width: 0;
  display: grid;
  gap: clamp(.1rem, .2vw, .22rem);
}

/*
 * Despărțitoarele nu merg de sus până jos, ca în machetă.
 *
 * Un `border-left` ar fi tras firul pe toată înălțimea benzii, până în firele de sus și de jos, și
 * ar fi închis fiecare coloană într-o casetă. În machetă firul este scurt: începe puțin deasupra
 * iconiței și se oprește pe la titlu. Desenat ca pseudoelement, ține exact atât.
 */
.metalicart-hero-trust__item { position: relative; }

.metalicart-hero-trust__item + .metalicart-hero-trust__item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--ma-cat-rule);
  height: 62%;
  content: "";
  background: color-mix(in srgb, var(--ma-cat-copper) 40%, transparent);
  transform: translateY(-50%);
}

/*
 * Iconițele sunt livrate gata lucrate: nu se filtrează, nu se recolorează, nu se taie.
 *
 * Cutia lor este pătrată, cât pânza PNG-ului, iar imaginea se așază în ea cu `contain`. Așa rămâne
 * întreagă la orice lățime, fără să atingă marginea de siguranță din pachet.
 */
/*
 * Mărimea iconiței: pornită de la măsura din specificație, ridicată optic spre machetă.
 *
 * Specificația dă `clamp(76px, 6vw, 104px)` ca punct de pornire și cere ajustare optică. Așezat
 * lângă text, semnul împarte coloana cu el: la mărimea din machetă n-ar mai fi rămas loc pentru
 * propoziția de sub titlu. Valoarea de aici este cea la care amândouă încap, fără ca banda să
 * crească peste cadrul hero-ului.
 */
.metalicart-hero-trust__mark {
  width: clamp(58px, 4.4vw, 76px);
  height: auto;
  flex: none;
  aspect-ratio: 1;
  object-fit: contain;
}

.wp-block-metalicart-hero.metalicart-category-hero p.metalicart-hero-trust__title {
  max-width: none;
  margin: 0;
  color: var(--ma-paper, #f4ede0);
  font-family: var(--wp--custom--ma-font-display, Georgia, serif);
  /* Două trepte mai jos decât în machetă, ca banda să rămână o fâșie, nu o secțiune. */
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.15;
  /* Rupt pe două rânduri, titlul se împarte la mijloc, nu lasă un cuvânt singur pe al doilea. */
  text-wrap: balance;
}

/* Lățimea o dă coloana, nu o măsură scrisă aici: altfel rândul se rupea unde nu trebuia. */
.wp-block-metalicart-hero.metalicart-category-hero p.metalicart-hero-trust__text {
  max-width: none;
  margin: 0;
  color: rgb(244 237 224 / .72);
  font-size: var(--ma-fs-md, .875rem);
  line-height: 1.45;
}

/* --------------------------------------------------------- 2. Introducerea editorială */

.ma-category-intro {
  padding: var(--wp--custom--ma-rhythm-y) clamp(1rem, 4vw, 3rem);
  color: var(--ma-cat-paper-ink);
  background: var(--ma-cat-paper);
}

/*
 * Cuvintele la stânga, compoziția la dreapta.
 *
 * Împărțirea este cea din machetă: puțin sub două cincimi pentru text, puțin peste jumătate pentru
 * fotografii. Coloanele se scriu ca fracțiuni, nu în procente, ca golul dintre ele să nu fie luat
 * din vreuna dintre ele.
 */
.ma-category-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 39fr) minmax(0, 57fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: stretch;
  /*
   * Aceeași lățime ca antetul catalogului și ca întrebările.
   *
   * La 1320 px introducerea începea cu patruzeci de pixeli mai la stânga decât cardurile de sub
   * ea, iar marginea paginii se vedea că șchioapătă la fiecare trecere dintre secțiuni.
   */
  max-width: 1240px;
  margin-inline: auto;
}

.ma-category-intro__eyebrow {
  margin: 0 0 clamp(.9rem, 1.6vw, 1.3rem);
  color: var(--ma-cat-copper-ink);
  font-size: var(--ma-fs-sm, .8rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ma-category-intro__title {
  max-width: 18ch;
  margin: 0;
  font: 400 var(--wp--custom--ma-title)/var(--wp--custom--ma-title-lh) var(--wp--preset--font-family--display, Georgia, serif);
  text-wrap: balance;
}

/*
 * Accentul stă pe rândul lui, dar în același titlu.
 *
 * În machetă fraza a doua începe de la capăt, cu literă cursivă de cupru. Este tot titlul, deci
 * rămâne înăuntrul lui `h2`: un `span` care se poartă ca un rând, nu un al doilea titlu în arbore.
 */
.ma-category-intro__accent {
  display: block;
  color: var(--ma-cat-copper-ink);
  font-style: italic;
}

.ma-category-intro__text {
  max-width: 46ch;
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0;
  color: rgb(35 34 30 / .82);
  font-size: var(--wp--custom--ma-copy);
  line-height: var(--wp--custom--ma-copy-lh);
}

/*
 * Cele trei micro-mesaje, pe un rând, despărțite numai de un fir.
 *
 * Firul este bordura dinspre stânga a fiecărei bucăți, în afară de prima: o singură linie între
 * două vecine, niciodată la capete. Rândul se rupe dacă nu încape — la 360 px două rânduri se
 * citesc, o literă strânsă la opt pixeli nu.
 */
.ma-category-intro__note {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.55rem, 1.4vw, 1.1rem) 0;
  margin: clamp(1.3rem, 2.4vw, 1.9rem) 0 0;
  padding: 0;
  list-style: none;
}

.ma-category-intro__note-item {
  padding-inline: clamp(.9rem, 1.8vw, 1.5rem);
  color: var(--ma-cat-copper-ink);
  font-size: var(--ma-fs-sm, .78rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
}

.ma-category-intro__note-item:first-child { padding-inline-start: 0; }

.ma-category-intro__note-item + .ma-category-intro__note-item {
  border-inline-start: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 45%, transparent);
}

/*
 * Compoziția: un singur cadru, cu colțurile concave ale sitului.
 *
 * Nu sunt trei cartonașe, ci o singură compoziție: un chenar în jurul tuturor, iar fotografiile
 * răsuflă înăuntrul lui. Distanța dintre ele și cea până la chenar sunt una și aceeași — golurile
 * grilei și marginea casetei, prin care se vede cremul paginii — ca în machetă. Nicio fereastră
 * n-are bordura ei, deci nu se dublează nimic acolo unde se ating.
 *
 * Rama din afară este conturul `.ma-concav`, tras de scriptul catalogului cu grosime nescalată.
 * Fără JavaScript rămâne masca: colțurile sunt tot concave, numai firul lipsește.
 */
.ma-category-intro__galerie {
  --ma-concav-fir: 1px;

  /*
   * Golul și crestătura colțului sunt una și aceeași măsură.
   *
   * Raza era scrisă de-a dreptul, optsprezece pixeli, iar pe telefon golul cobora la opt: mușcătura
   * trecea peste cremă și intra zece pixeli în fotografie, care are colțul drept. Se vedea limpede
   * — curba chenarului tăia peste un colț care n-o urma. Egale, mușcătura se oprește fix unde
   * începe fotografia: colțul ei drept pornește de acolo de unde se termină curba.
   *
   * Măsura merge pe trepte, nu pe `clamp()`. Firul chenarului nu este desenat de foaia de stil, ci
   * de scriptul catalogului, care citește raza cu `parseFloat`: dintr-un `clamp()` nu iese un
   * număr, iar firul cădea pe valoarea lui de rezervă și se desena cu altă rază decât tăia masca —
   * pe ecran lat, colțurile dispăreau cu totul. O valoare simplă o citesc amândouă la fel.
   */
  --ma-cat-gol: 12px;
  --ma-concav-raza: var(--ma-cat-gol);

  display: grid;
  /*
   * Rândurile se scriu, nu se lasă pe seama rânduirii.
   *
   * Fereastra mare ține toată înălțimea, adică `grid-row: 1 / -1`. Fără rânduri scrise, `-1` cade
   * pe prima linie a grilei explicite — care nu există —, deci fereastra nu se întindea peste
   * nimic: se așeza de la sine sus-stânga, iar colțul din dreapta jos rămânea gol.
   */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--ma-cat-gol);
  padding: var(--ma-cat-gol);
  min-width: 0;
  /* Cremul paginii trece prin goluri; caseta nu-și aduce fundalul ei. */
  background: transparent;
}

/* Pe ecran lat compoziția are loc de un gol mai larg, deci și de o crestătură pe măsură. */
@media (min-width: 780px) {
  .ma-category-intro__galerie { --ma-cat-gol: 18px; }
}

.ma-category-intro__galerie .ma-concav__traseu { stroke: var(--ma-cat-copper-ink); }

/* Trei ferestre: una mare pe toată înălțimea, două mici una peste alta, ca în machetă. */
.ma-category-intro__cadru {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ma-cat-paper);
}

.ma-category-intro__cadru--1 { grid-row: 1 / -1; }

/*
 * Două fotografii, pe ecran lat: alături, cea dintâi mai largă.
 *
 * Stivuite, cum stau pe o coloană, ar fi ieșit două fâșii: compoziția ține cât textul de alături,
 * iar o categorie cu text scurt lăsa sub el o sută treizeci de pixeli pentru fiecare rând, adică
 * fotografii de cinci la unu. Alături, fiecare rămâne o fotografie.
 */
.ma-category-intro__galerie[style*="--ma-cat-imagini:2"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ma-category-intro__galerie[style*="--ma-cat-imagini:2"] .ma-category-intro__cadru--1 { grid-row: auto; }

/* O singură fotografie: o fereastră panoramică, nimic altceva. */
.ma-category-intro__galerie[style*="--ma-cat-imagini:1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ma-category-intro__galerie[style*="--ma-cat-imagini:1"] .ma-category-intro__cadru--1 { grid-row: auto; }

.ma-category-intro__link {
  display: block;
  height: 100%;
  overflow: hidden;
}

/*
 * Fotografia umple fereastra ei, fără să fie deformată.
 *
 * Înălțimea vine din raportul compoziției, nu din fiecare fotografie: altfel o poză verticală ar fi
 * înălțat coloana din dreapta cât două orizontale. Punctul focal, scris pe imagine din date, spune
 * ce se păstrează la tăiere.
 */
.ma-category-intro__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

/*
 * Compoziția ține exact cât coloana din stânga, titlu cu tot.
 *
 * Un raport scris — patru pe trei — îi dădea înălțimea din lățimea ei, iar la 1440 ieșea cu o sută
 * de pixeli peste text: două coloane care nu se termină în același loc. Acum înălțimea o dă rândul
 * grilei, adică textul, iar `height: 0` o ține pe ea în afara socotelii rândului, ca să nu se
 * ceară singură mai înaltă. Podeaua de 240 px este pentru categoriile cu text scurt, unde altfel
 * ar rămâne o fâșie.
 */
.ma-category-intro__galerie {
  height: 0;
  min-height: max(100%, 240px);
}

.ma-category-intro__link:hover .ma-category-intro__image { transform: scale(1.03); }

/*
 * Numerele sunt desen, nu text de citit: stau ascunse cititoarelor de ecran și se scriu de aici,
 * nu în pagină — scris ca text, „01” ar fi intrat în auditul mărimilor de literă.
 *
 * Cifra nu stă peste fotografie, ci într-o casetă scoasă din colțul ei: cremul paginii, două fire
 * de aramă pe sus și pe dreapta, cifra cu litera de titlu. Așa se citește pe orice fotografie, fără
 * umbră după ea, iar caseta continuă golul din jurul compoziției în loc să-l taie.
 */
.ma-category-intro__cadru--1 .ma-category-intro__numar::after { content: "01"; }
.ma-category-intro__cadru--2 .ma-category-intro__numar::after { content: "02"; }
.ma-category-intro__cadru--3 .ma-category-intro__numar::after { content: "03"; }

.ma-category-intro__numar {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  --ma-numar-raza: clamp(9px, 1.1vw, 13px);

  min-width: clamp(2.4rem, 3.2vw, 3.2rem);
  padding: clamp(.35rem, .8vw, .55rem) clamp(.4rem, .9vw, .6rem);
  /*
   * Colțul dinspre fotografie se rotunjește în afară.
   *
   * Cadrul din jur are colțurile mușcate, placheta le are pline: sunt două lucruri diferite, iar
   * macheta le desenează așa. Firul urmează singur rotunjirea, fiindcă este bordura ei.
   */
  border-top: var(--ma-cat-rule) solid var(--ma-cat-copper-ink);
  border-right: var(--ma-cat-rule) solid var(--ma-cat-copper-ink);
  border-top-right-radius: var(--ma-numar-raza);
  background: var(--ma-cat-paper);
  color: var(--ma-cat-copper-ink);
  font-family: var(--wp--custom--ma-font-display, Georgia, serif);
  font-size: var(--ma-fs-base, 1rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ma-category-intro__link:focus-visible {
  outline: 2px solid var(--ma-cat-copper-ink);
  outline-offset: -4px;
}

/*
 * Separatorul: două linii cu câte un punct și o stea în patru colțuri la mijloc.
 *
 * Este o mască peste o bandă colorată, nu o fotografie: culoarea rămâne tokenul de cupru, deci se
 * schimbă odată cu paleta, iar desenul nu are nevoie de o a doua variantă pentru fundal închis.
 *
 * Steaua este desenată cu vârfuri ascuțite, nu rotunjite: cele două curbe care se întâlnesc într-un
 * vârf pleacă în direcții opuse, deci acolo se face un colț adevărat. Desenat cu o singură curbă
 * care trece prin vârf, acesta ar fi ieșit rotund, iar steaua ar fi semănat cu un romb umflat.
 *
 * Cadrul are exact mărimea desenului — 240 pe 20 —, deci linia de un pixel cade pe un rând întreg
 * și rămâne clară, fără să fie întinsă. Stă sub toată secțiunea, la mijloc, ca în machetă.
 */
.ma-category-intro__divider {
  display: block;
  width: min(240px, 100%);
  height: 20px;
  margin: clamp(1.8rem, 3.4vw, 2.75rem) auto 0;
  /*
   * Cuprul plin, nu unul estompat.
   *
   * La 62% desenul ieșea o pată cenușie: liniile de un pixel și vârfurile subțiri ale stelei nu au
   * destulă suprafață cât să țină o culoare diluată. Ornamentul nu este text — este `aria-hidden` —
   * deci nu are nevoie de tonul coborât pentru contrast, care este al literelor mici pe hârtie.
   */
  background: var(--ma-cat-copper);
  -webkit-mask: url("../svg/category/divider-star.svg") center / 240px 20px no-repeat;
  mask: url("../svg/category/divider-star.svg") center / 240px 20px no-repeat;
}

/* Fără fotografii, cuvintele stau la mijloc: nu rămâne o jumătate de rând goală. */
.ma-category-intro.is-fara-imagini .ma-category-intro__inner { grid-template-columns: minmax(0, 1fr); }
.ma-category-intro.is-fara-imagini .ma-category-intro__copy { max-width: 62ch; margin-inline: auto; text-align: center; }
.ma-category-intro.is-fara-imagini .ma-category-intro__title { max-width: none; }
.ma-category-intro.is-fara-imagini .ma-category-intro__text { max-width: none; }
.ma-category-intro.is-fara-imagini .ma-category-intro__note { justify-content: center; }

/* -------------------------------------------------------------------------- 3. Catalog */

.metalicart-category-page .metalicart-category-catalog { background: var(--ma-cat-ink); }

/*
 * Numărul de lucrări și alegerea ordinii stau în `catalog-grid.css`, împreună cu cardul: sunt ale
 * grilei, nu ale paginii de categorie, și apar la fel pe arhivă.
 */

/* --------------------------------------------------------------- 5. Inserția cinematică */

.ma-category-editorial {
  position: relative;
  z-index: 2;
  display: grid;
  overflow: clip;
  align-items: center;
  justify-items: end;
  grid-column: 1 / -1;
  min-height: clamp(240px, 17vw, 300px);
  margin-block: clamp(.4rem, 1vw, .9rem);
  isolation: isolate;
}

.ma-category-editorial__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ma-category-editorial::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(7 9 7 / .14) 0%, rgb(7 9 7 / .34) 46%, rgb(7 9 7 / .78) 100%);
}

.ma-category-editorial__copy {
  position: relative;
  width: min(29rem, calc(100% - 2rem));
  margin: clamp(.75rem, 1.6vw, 1.25rem);
  padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.5rem, 3vw, 2.5rem);
  background: rgb(8 10 8 / .92);
  text-align: center;
}

.ma-category-editorial__quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.ma-category-editorial__quote p {
  margin: 0;
  color: #f6efe3;
  font: 400 clamp(1.15rem, 1.9vw, 1.62rem)/1.22 var(--wp--preset--font-family--display, Georgia, serif);
  text-wrap: balance;
}

.ma-category-editorial__note {
  margin: .75rem 0 0;
  color: rgb(244 237 224 / .74);
  font-size: var(--ma-fs-md, clamp(.78rem, 1vw, .85rem));
  line-height: 1.5;
}

/*
 * Întrebările au acum foaia lor, `faq-premium.css`, și componenta lor.
 *
 * Aici erau mărimea țintei și semnul plus al acordeonului vechi, construit din blocuri `details`
 * scrise în conținutul fiecărei pagini. Componenta nouă își aduce tot desenul.
 */

/* --------------------------------------------------------------------- 7. Tabletă lată */

@media (max-width: 1099px) {
  /*
   * Sub 1100 px cuvintele trec deasupra compoziției.
   *
   * La două coloane, textul rămânea cu douăzeci și ceva de semne pe rând, iar fotografia mare se
   * strângea sub trei sute de pixeli. Una peste alta, amândouă își iau lățimea întreagă.
   */
  .ma-category-intro__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); }
  .ma-category-intro__title { max-width: 22ch; }
  .ma-category-intro__text { max-width: 62ch; }

  /*
   * Pe o coloană compoziția nu mai are lângă ce să se măsoare.
   *
   * Înălțimea ei venea din rândul pe care-l împărțea cu textul; strânse una sub alta, rândul este
   * al ei singure, deci își cere înălțimea înapoi: raportul din machetă sus, ferestrele cu
   * raportul lor pe telefon.
   */
  .ma-category-intro__galerie {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .ma-category-intro__galerie[style*="--ma-cat-imagini:1"] { aspect-ratio: 16 / 9; }

  /* Pe o coloană compoziția crește în jos, deci perechea se stivuiește, ca în machetă. */
  .ma-category-intro__galerie[style*="--ma-cat-imagini:2"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .ma-category-editorial { min-height: clamp(230px, 26vw, 280px); }
}

/* --------------------------------------------------------------------------- 8. Mobil */

@media (max-width: 779px) {
  /*
   * A doua încadrare a fotografiei hero.
   *
   * Pe telefon cadrul se înalță, deci tăietura cade pe orizontală, exact acolo unde încadrarea de
   * desktop ținea subiectul. Valoarea vine din blocul hero, deci se poate muta din editor fără să
   * se atingă nimeni de CSS și fără o a doua fotografie.
   *
   * Rescrierea se face pe fotografie, nu pe secțiune. Secțiunea își primește variabilele din
   * atributul `style`, iar un stil scris în element bate orice regulă din foaie — inclusiv pentru
   * proprietăți personalizate. Pusă acolo, regula asta n-ar fi avut niciun efect: încadrarea de
   * telefon ar fi rămas scrisă în pagină și niciodată folosită. Fotografia, în schimb, nu are
   * variabila în stilul ei, deci aici regula câștigă.
   */
  .metalicart-category-hero .wp-block-cover__image-background {
    /* Valoarea vine din blocul hero; rezerva ține fotografia centrată dacă blocul n-o trimite. */
    --ma-hero-focus: var(--ma-hero-focus-mobile, 50% 50%);
  }

  /*
   * Cele trei dovezi stau una lângă alta și pe telefon.
   *
   * Erau trei rânduri suprapuse, cu semnul la stânga textului. Atelierul le cere pe orizontală și
   * aici, deci coloanele rămân trei la orice lățime; se schimbă doar rânduirea dinăuntrul fiecăreia.
   * La o sută de pixeli de coloană semnul nu mai încape lângă cuvinte — „Identificat prin cod” ar fi
   * căzut pe patru rânduri înghesuite lângă el —, așa că urcă deasupra lor, cu textul centrat sub el,
   * ca în macheta de desktop.
   *
   * Despărțitoarele rămân verticale, ca pe ecran lat: un fir orizontal ar fi tăiat coloanele
   * de-a curmezișul. Banda scade de la trei sute optsprezece pixeli la vreo sută șaptezeci.
   */
  .metalicart-hero-trust {
    padding: clamp(.85rem, 3.5vw, 1.15rem) 0;
  }

  .metalicart-hero-trust__item {
    flex-direction: column;
    gap: clamp(.5rem, 2.2vw, .7rem);
    padding-inline: clamp(.3rem, 1.6vw, .6rem);
    text-align: center;
  }

  .metalicart-hero-trust__copy { justify-items: center; }

  .metalicart-hero-trust__mark { width: clamp(44px, 13vw, 60px); }

  /*
   * Titlul coboară cu două trepte, pe cea de paisprezece pixeli.
   *
   * Într-o coloană de o sută de pixeli, mărimea de pe ecran lat rupea fiecare titlu în două rânduri
   * late cât coloana. Mai mic, „Făurit manual” încape pe un rând, iar celelalte două se rup scurt și
   * citibil. Paisprezece este treapta scării tipografice, nu o măsură aleasă la ochi: sub șaisprezece
   * pixeli, contractul de tipografie primește numai douăsprezece, treisprezece și paisprezece.
   */
  .wp-block-metalicart-hero.metalicart-category-hero p.metalicart-hero-trust__title {
    font-size: var(--ma-fs-md, .875rem);
    line-height: 1.25;
  }

  /*
   * Propoziția de sprijin rămâne pentru ecranele late.
   *
   * Într-o coloană de o sută de pixeli, „Dimensiuni și proporții stabilite cu atelierul” cădea pe
   * patru rânduri de doisprezece pixeli, sub un titlu care avea și el două: trei coloane de text
   * mărunt, unele mai lungi decât altele. Pe telefon rămân titlurile, care spun ce trebuie; restul
   * se citește acolo unde încape. Scoasă din desen, propoziția iese și din arbore, ca să nu fie
   * citită de cititoarele de ecran fără să se vadă.
   */
  .metalicart-hero-trust__text { display: none; }

  .ma-category-intro { padding-inline: clamp(22px, 6vw, 24px); }
  .ma-category-intro__inner { gap: 1.5rem; }
  .ma-category-intro__title { max-width: none; }

  /*
   * Pe telefon compoziția se rânduiește altfel: cea mare sus, celelalte două dedesubt.
   *
   * Pe ecran lat fotografia mare ține două treimi din lățime și toată înălțimea. La trei sute
   * șaizeci de pixeli, o treime din lățime ar fi însemnat o fereastră de o sută douăzeci: se vedea
   * din lucrare cât încape într-un timbru.
   */
  .ma-category-intro__galerie {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .ma-category-intro__cadru--1 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .ma-category-intro__cadru--2,
  .ma-category-intro__cadru--3 { aspect-ratio: 1 / 1; }

  .ma-category-intro__galerie[style*="--ma-cat-imagini:2"] .ma-category-intro__cadru--2,
  .ma-category-intro__galerie[style*="--ma-cat-imagini:1"] .ma-category-intro__cadru--1 {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  /*
   * Pe o coloană, semnul stă la mijloc.
   *
   * Pe lat, textul și fotografiile sunt alături, iar semnul încheie coloana de text: ancorat la
   * stânga, cade sub primul cuvânt, unde îi este locul. Strânse pe o coloană, el nu mai încheie
   * nimic — desparte textul de cele trei fotografii —, iar cei 240 px ai lui lăsau la 360 px o
   * margine de 66 px numai în dreapta.
   */
  .ma-category-intro__divider { margin-top: clamp(1.4rem, 5vw, 1.9rem); }


  /* Pe telefon citatul stă jos, unde fotografia s-a văzut deja. */
  .ma-category-editorial {
    min-height: 330px;
    align-items: end;
    justify-items: stretch;
  }

  .ma-category-editorial::after {
    background: linear-gradient(180deg, rgb(7 9 7 / .1) 0%, rgb(7 9 7 / .36) 44%, rgb(7 9 7 / .86) 100%);
  }

  .ma-category-editorial__copy { width: auto; margin: .75rem; }
}

/*
 * Sub 380 px cele trei micro-mesaje nu mai încap pe un rând.
 *
 * Lăsate să curgă singure, al treilea trece dedesubt și își duce cu el firul despărțitor, care
 * rămâne atârnat în stânga, fără nimic de despărțit. Așezate în două coloane, ruperea este
 * hotărâtă de noi — două sus, unul jos — iar firul stă numai la mijlocul rândului de sus. Litera
 * rămâne pe treapta ei; nu se micșorează ca să încapă.
 */
@media (max-width: 379px) {
  .ma-category-intro__note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  .ma-category-intro__note-item,
  .ma-category-intro__note-item + .ma-category-intro__note-item {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .ma-category-intro__note-item:nth-child(2n) {
    padding-inline-start: clamp(.9rem, 4vw, 1.5rem);
    border-inline-start: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 45%, transparent);
  }
}


@media (max-width: 419px) {
  /*
   * Crestătura nu se mai micșorează pe ecran îngust.
   *
   * Se micșora fiindcă desenul de colț ocupa un pătrat de 32 de pixeli, iar dintr-un card de 160
   * două astfel de pătrate mâncau aproape toată muchia. Crestătura însăși are doar 12: la orice
   * lățime rămâne muchie dreaptă destulă, deci nu mai este nimic de potrivit pe praguri.
   */
}

/* --------------------------------------------------------------- 9. Mișcare redusă */

@media (prefers-reduced-motion: reduce) {
  .ma-category-intro__image,
  .metalicart-category-page .metalicart-work-card { transition: none; }
}