/*
 * MetalicArt — grila de lucrări: cardul și bara de deasupra lui.
 *
 * Un singur desen pentru fiecare loc în care apare grila de lucrări: arhiva `/catalog-lucrari/` și
 * cele opt pagini de categorie. Erau două, care semănau fără să fie la fel — arhiva avea cadru
 * vertical, nituri, eticheta categoriei și codul sub fotografie, categoriile aveau cadru orizontal,
 * fără nituri, cu codul peste fotografie. Ce se schimbă acum se schimbă o dată.
 *
 * Selectorul pornește de la grilă, nu de la pagină, tocmai ca să fie valabil oriunde ajunge blocul
 * și ca să întreacă în putere regulile de bază din foaia pluginului, indiferent în ce ordine se
 * încarcă cele două fișiere.
 *
 * Tokenurile de culoare vin din temă. Aici se declară numai măsurile cardului.
 */

/*
 * Bara de deasupra grilei este soră cu grila, nu copil al ei.
 *
 * Pe paginile de categorie tokenurile veneau de mai sus, din foaia sistemului de categorii, deci
 * sortarea avea chenar și săgeată. Pe arhiva catalogului nu venea nimic: `var(--ma-cat-copper)`
 * rămânea nedefinit, iar `border: 1px solid color-mix(…)` cu o variabilă nedefinită nu este o
 * regulă care cade pe o culoare de rezervă — este o regulă invalidă, deci bordura devenea
 * `none`. Aceeași poveste pentru săgeata din `::after`. De aici lista de mai jos: tokenurile se
 * declară pe fiecare rădăcină care le folosește.
 */
.metalicart-catalog,
.ma-catalog-bar,
.ma-placa,
.ma-category-editorial {
  --ma-cat-copper: var(--wp--preset--color--copper, #b86f3d);
  --ma-cat-gold: var(--metalicart-text-accent, #e1b270);
  --ma-cat-panel: #131612;
  --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. Cât timp rămân mai multe numere care trebuie să se potrivească, se pot
   * desincroniza — și s-au desincronizat o dată, pe telefon, unde arcul ajungea la raza 9 iar
   * tăietura rămânea la 11,5 și îl mânca întreg.
   */
  --ma-cat-notch: 12px;
}

.metalicart-catalog .metalicart-work-card {
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: var(--ma-cat-rule);
  border: 0;
  background: var(--ma-cat-panel);
  box-shadow: none;
  transition: background-color 220ms ease;
}

.metalicart-catalog .metalicart-work-card:hover { background: #171a15; }

/*
 * Caseta este tăiată pe conturul concav, nu doar desenată cu el.
 *
 * Rama arăta crestătura, dar fotografia curgea mai departe pe sub ea și umplea colțul drept din
 * spate: linia de cupru părea lipită peste un dreptunghi, nu marginea lui.
 */
.metalicart-catalog .metalicart-work-card,
.ma-placa,
.ma-category-editorial__copy {
  /*
   * Desenele se scriu aici, pe casetă, nu mai sus, pe pagină.
   *
   * Într-o proprietate personalizată, `var()` se înlocuiește acolo unde proprietatea este
   * declarată, nu acolo unde este folosită: scrisă pe pagină, raza s-ar fi fixat o dată, la
   * valoarea de acolo, și ar fi coborât aceeași la toate casetele — chiar dacă vreuna și-ar cere
   * alta. Exact așa a dispărut crestătura pe telefon. Declarate pe casetă, amândouă își iau raza
   * de pe caseta lor.
   */
  /*
   * Pozițiile laturilor se scriu pe patru valori, nu pe trei.
   *
   * Forma cu trei — `left VAR top` — o primește Chrome, dar Firefox o refuză. Iar într-o
   * prescurtare `mask` refuzul nu strică doar stratul acela: cade toată declarația, masca se
   * întoarce la `none`, iar elementul care ar fi trebuit să deseneze un fir de un pixel pictează
   * dreptunghiul întreg. Pe Firefox, cardurile catalogului ieșeau pline de cupru, cu fotografia
   * dedesubt, iar crestăturile din colț se vedeau tocmai fiindcă masca plachetei — scrisă pe două
   * valori — funcționa.
   *
   * Cu `left VAR top 0` nu mai rămâne nimic de ghicit pentru niciun browser.
   */
  --ma-cat-frame: radial-gradient(circle at top left, #0000 var(--ma-cat-notch), #000 var(--ma-cat-notch) calc(var(--ma-cat-notch) + var(--ma-cat-rule)), #0000 calc(var(--ma-cat-notch) + var(--ma-cat-rule))) top left / calc(var(--ma-cat-notch) + var(--ma-cat-rule)) calc(var(--ma-cat-notch) + var(--ma-cat-rule)) no-repeat, radial-gradient(circle at top right, #0000 var(--ma-cat-notch), #000 var(--ma-cat-notch) calc(var(--ma-cat-notch) + var(--ma-cat-rule)), #0000 calc(var(--ma-cat-notch) + var(--ma-cat-rule))) top right / calc(var(--ma-cat-notch) + var(--ma-cat-rule)) calc(var(--ma-cat-notch) + var(--ma-cat-rule)) no-repeat, radial-gradient(circle at bottom left, #0000 var(--ma-cat-notch), #000 var(--ma-cat-notch) calc(var(--ma-cat-notch) + var(--ma-cat-rule)), #0000 calc(var(--ma-cat-notch) + var(--ma-cat-rule))) bottom left / calc(var(--ma-cat-notch) + var(--ma-cat-rule)) calc(var(--ma-cat-notch) + var(--ma-cat-rule)) no-repeat, radial-gradient(circle at bottom right, #0000 var(--ma-cat-notch), #000 var(--ma-cat-notch) calc(var(--ma-cat-notch) + var(--ma-cat-rule)), #0000 calc(var(--ma-cat-notch) + var(--ma-cat-rule))) bottom right / calc(var(--ma-cat-notch) + var(--ma-cat-rule)) calc(var(--ma-cat-notch) + var(--ma-cat-rule)) no-repeat, linear-gradient(#000, #000) left var(--ma-cat-notch) top 0 / calc(100% - var(--ma-cat-notch) * 2) var(--ma-cat-rule) no-repeat, linear-gradient(#000, #000) left var(--ma-cat-notch) bottom 0 / calc(100% - var(--ma-cat-notch) * 2) var(--ma-cat-rule) no-repeat, linear-gradient(#000, #000) left 0 top var(--ma-cat-notch) / var(--ma-cat-rule) calc(100% - var(--ma-cat-notch) * 2) no-repeat, linear-gradient(#000, #000) right 0 top var(--ma-cat-notch) / var(--ma-cat-rule) calc(100% - var(--ma-cat-notch) * 2) no-repeat;

  --ma-cat-shape: radial-gradient(circle at top left, #0000 calc(var(--ma-cat-notch) - .5px), #000 var(--ma-cat-notch)) top left / 51% 51% no-repeat, radial-gradient(circle at top right, #0000 calc(var(--ma-cat-notch) - .5px), #000 var(--ma-cat-notch)) top right / 51% 51% no-repeat, radial-gradient(circle at bottom left, #0000 calc(var(--ma-cat-notch) - .5px), #000 var(--ma-cat-notch)) bottom left / 51% 51% no-repeat, radial-gradient(circle at bottom right, #0000 calc(var(--ma-cat-notch) - .5px), #000 var(--ma-cat-notch)) bottom right / 51% 51% no-repeat;

  -webkit-mask: var(--ma-cat-shape);
  mask: var(--ma-cat-shape);
}

/*
 * Rama: patru arce de colț și patru muchii, toate din aceeași rază.
 *
 * Arcul este un sfert de inel gros de un pixel, așezat exact pe raza crestăturii și mărginit la
 * pătratul colțului lui, ca să nu deseneze un cerc în mijlocul casetei. Muchiile drepte pornesc
 * de unde se termină arcul, fiindcă pornesc din același număr. Nu mai există un desen de mărime
 * fixă care să spună altceva decât spune tăietura.
 */
.metalicart-catalog .metalicart-work-card::before,
.ma-category-editorial__copy::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  background: var(--ma-cat-copper);
  -webkit-mask: var(--ma-cat-frame);
  mask: var(--ma-cat-frame);
}

/*
 * Cadrul fotografiei, 5:4.
 *
 * Douăzeci și unu la sută din catalog sunt fotografii verticale, dar șaizeci și nouă sunt
 * orizontale, la 4:3. Într-un cadru vertical acestea din urmă pierdeau patru zecimi din lățime;
 * în cadrul acesta pierd sub o zecime, iar cele verticale rămân recognoscibile.
 *
 * Caseta fotografiei este acum un strat al ei, nu legătura însăși: peste ea stau insigna galeriei
 * și creionul atelierului, iar ele nu au ce căuta înăuntrul legăturii care deschide lightboxul.
 */
.metalicart-catalog .metalicart-work-card__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.metalicart-catalog .metalicart-work-image {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  background: #181a16;
}

/*
 * Umbra de jos ține doar cât ține eticheta codului.
 *
 * Înainte pornea de la 52% și stingea jumătate de fotografie ca să facă loc titlului scris peste
 * ea. Titlul a coborât în corpul cardului; aici rămâne doar atât cât trebuie ca o etichetă de cupru
 * să se citească peste orice fotografie, oricât de deschisă.
 */
.metalicart-catalog .metalicart-work-image::after {
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgb(11 13 12 / 0), rgb(11 13 12 / .78));
}

/* Apropierea de o virgulă la trecerea cursorului: lucrarea răspunde, cardul nu se mișcă. */
.metalicart-catalog .metalicart-work-image img {
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}

.metalicart-catalog .metalicart-work-card:hover .metalicart-work-image img {
  transform: scale(1.035);
}

/*
 * Îndemnul de deschidere stă în mijlocul fotografiei, nu pe marginea ei de jos.
 *
 * Pe marginea de jos se aduna cu eticheta codului și cu umbra, și tocmai suprapunerea aceea se
 * vedea la mouse hover pe lucrările cu galerie. În mijloc nu are cu ce să se ciocnească: insigna
 * este sus-dreapta, creionul sus-stânga, codul jos-stânga.
 */
.metalicart-catalog .metalicart-work-image__hint {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  padding: .5rem .8rem;
  border: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 72%, transparent);
  background: rgb(9 10 9 / .74);
  font-size: var(--ma-fs-xs, .58rem);
  letter-spacing: .16em;
  transform: translate(-50%, -42%);
}

.metalicart-catalog .metalicart-work-card:hover .metalicart-work-image__hint,
.metalicart-catalog .metalicart-work-image:focus-visible .metalicart-work-image__hint {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/*
 * Corpul cardului: trei rânduri și atât.
 *
 * Eticheta codului călare pe cusătură, titlul la cel mult două rânduri, bara de acțiune lipită de
 * marginea de jos. Ultima are `margin-top: auto`, deci toate cardurile unui rând se termină la
 * aceeași înălțime, oricât de scurt ar fi titlul de deasupra.
 */
.metalicart-catalog .metalicart-work-card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  margin-top: 0;
  flex-direction: column;
  align-items: stretch;
  padding: .85rem .75rem 0;
}

/*
 * Codul stă pe marginea de jos a fotografiei, nu călare pe ea.
 *
 * Călare — jumătate peste fotografie, jumătate peste corp — jumătatea de jos mânca tot spațiul de
 * deasupra titlului: rămânea un pixel între eticheta codului și numele lucrării, iar cele două se
 * citeau ca un singur bloc lipit. Ridicată întreagă pe fotografie, eticheta își ia locul de acolo,
 * unde oricum este umbră, iar căptușeala corpului rămâne întreagă pentru aerul dintre ea și titlu.
 * Cardul nu crește cu niciun pixel.
 *
 * Categoria rămâne în arbore, citită de cititoarele de ecran, fiindcă pe o pagină de categorie ea
 * nu se vede nicăieri altundeva.
 */
.metalicart-catalog .metalicart-work-card .metalicart-code {
  position: absolute;
  z-index: 4;
  top: 0;
  left: .75rem;
  margin: 0;
  padding: .3rem .5rem;
  border: var(--ma-cat-rule) solid var(--ma-cat-copper);
  color: var(--ma-cat-gold);
  background: #0c0e0b;
  font-size: var(--ma-fs-xs, .62rem);
  letter-spacing: .12em;
  transform: translateY(-100%);
}

.metalicart-catalog .metalicart-category {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Titlul se scrie întreg, oricât ar fi de lung.
 *
 * O tăietură la două rânduri ar fi strâns cardul cu încă zece pixeli, dar ar fi picat la WCAG
 * 1.4.12: cine își lărgește rândurile din browser pierde tocmai numele lucrării. Mărimea a coborât
 * în schimb o treaptă, iar rândul cardurilor se așază după cel mai lung titlu al lui — toate
 * cardurile unui rând rămân egale, fiindcă bara de acțiune se lipește de marginea de jos.
 */
.metalicart-catalog .metalicart-work-card h3 {
  margin: 0 0 .4rem;
  font: 400 clamp(.88rem, 2.1vw, 1.1rem)/1.28 var(--wp--preset--font-family--display, Georgia, serif);
}

.metalicart-catalog .metalicart-work-card h3 a { color: #f3ecdf; text-decoration: none; }
.metalicart-catalog .metalicart-work-card h3 a:hover { color: var(--ma-cat-gold); }

.metalicart-catalog .metalicart-work-card__body > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 .5rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: rgb(242 234 220 / .62);
  font-size: var(--ma-fs-md, .84rem);
  line-height: 1.4;
}

/*
 * Bara de acțiune: de la o margine la alta, cu cel puțin 48 px pe înălțime.
 *
 * Este a doua destinație a cardului, nu un cuvânt subliniat lângă titlu: fotografia și titlul duc
 * la lightbox, bara aceasta duce la WhatsApp, cu codul lucrării în mesaj. Iese din marginile
 * corpului prin marginea negativă, ca linia de sus să treacă dintr-un capăt în celălalt al
 * cardului și degetul să aibă toată lățimea lui.
 */
.metalicart-catalog .metalicart-whatsapp {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: auto -.75rem 0;
  padding: 0 .75rem;
  border-top: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 34%, transparent);
  color: var(--ma-cat-gold);
  /* Treapta de 13 px, nu cea de 12: sub ea, contractul tipografic oprește orice acțiune. */
  font-size: var(--ma-fs-sm, .78rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}

.metalicart-catalog .metalicart-whatsapp:hover {
  color: #f3ecdf;
  background: color-mix(in srgb, var(--ma-cat-copper) 14%, transparent);
}

/*
 * Eticheta nu mai este subliniată.
 *
 * Linia de dedesubt spunea „aici se dă clic” pe vremea când îndemnul era un cuvânt între alte
 * cuvinte. Acum este o bară cu margine proprie, de la un capăt la altul: sublinierea ar fi a doua
 * linie, la trei pixeli de prima.
 */
.metalicart-catalog .metalicart-whatsapp__eticheta {
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
}

/* Semnul de marcă își ia mărimea din atribute; aici rămâne numai mișcarea de la trecerea mausului. */
.metalicart-catalog .metalicart-whatsapp__semn {
  flex: none;
  transition: transform 200ms ease;
}

.metalicart-catalog .metalicart-whatsapp:hover .metalicart-whatsapp__semn { transform: scale(1.08); }

.metalicart-catalog .metalicart-work-card :focus-visible {
  outline: 2px solid var(--ma-cat-gold);
  outline-offset: 2px;
}

/*
 * Inelul fotografiei se desenează pe dinăuntru.
 *
 * Fotografia ocupă cardul până la un pixel de margine, iar cardul este tăiat cu mască: un inel
 * desenat pe dinafară ar fi ieșit din formă și ar fi fost retezat tocmai la colțuri. Pe dinăuntru
 * se vede întreg.
 */
.metalicart-catalog .metalicart-work-image:focus-visible {
  outline: 2px solid var(--ma-cat-gold);
  outline-offset: -4px;
}

/* Bara de acțiune este lipită de marginea cardului: inelul ei se trage tot pe dinăuntru. */
.metalicart-catalog .metalicart-whatsapp:focus-visible { outline-offset: -3px; }


/* --------------------------------------------------------------------------- Mobil */

@media (max-width: 779px) {
  .metalicart-catalog .metalicart-work-card__body { padding: .8rem .6rem 0; }
  .metalicart-catalog .metalicart-work-card .metalicart-code { left: .6rem; }
  .metalicart-catalog .metalicart-whatsapp {
    margin-right: -.6rem;
    margin-left: -.6rem;
    padding: 0 .6rem;
    font-size: var(--ma-fs-sm, .74rem);
    letter-spacing: .05em;
  }
}

@media (max-width: 419px) {
  .metalicart-catalog .metalicart-work-card .metalicart-code {
    padding: .26rem .42rem;
    font-size: var(--ma-fs-xs, .56rem);
  }
  .metalicart-catalog .metalicart-whatsapp { letter-spacing: .02em; }
  /* Sub 420 px, butonul are o sută treizeci de pixeli de text: semnul coboară cât să încapă. */
  .metalicart-catalog .metalicart-whatsapp__semn { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .metalicart-catalog .metalicart-work-card,
  .metalicart-catalog .metalicart-work-image img,
  .metalicart-catalog .metalicart-work-image__hint,
  .metalicart-catalog .metalicart-whatsapp,
  .metalicart-catalog .metalicart-whatsapp__semn { transition: none; }
  .metalicart-catalog .metalicart-work-card:hover .metalicart-work-image img { transform: none; }
}

/*
 * Coloanele cerute de machetă, la pragurile ei.
 *
 * Pragurile sunt cele din machetă: patru coloane peste 1100, trei între 780 și 1099, două de la
 * 360 și una sub. Sunt aceleași pe arhivă și pe paginile de categorie — până acum arhiva ținea
 * trei coloane la 1100 și tot trei la 779, unde categoriile treceau deja la două, iar aceeași
 * lucrare arăta altfel în două locuri.
 *
 * Spațiul dintre carduri este de paisprezece pixeli, nu de doisprezece: cardurile s-au strâns, iar
 * la doisprezece crestăturile a două carduri vecine se atingeau și păreau o singură pată.
 */
.metalicart-catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 780px) {
  .metalicart-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.2vw, 16px);
  }
}

@media (min-width: 1100px) {
  .metalicart-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sub 360 px, sau la zoom care lasă tot atât, două coloane n-ar mai lăsa loc nici codului. */
@media (max-width: 359px) {
  .metalicart-catalog { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- Placheta de atelier */

/*
 * Căutarea, seria, ordinea și numărul, într-o singură casetă.
 *
 * Erau trei lucruri despărțite, unul sub altul: panoul de căutare cu titlul lui („Ai văzut un
 * model? Găsește-l după cod.”), rândul cu numărul lucrărilor și formularul de sortare, fiecare cu
 * marginile lui, pe vreo trei sute de pixeli de pagină. Placheta le strânge pe toate într-o casetă
 * cu antet, lipită de grila de sub ea, în același container și cu aceleași margini laterale ca
 * introducerea de deasupra și ca grila.
 *
 * Casetă, crestături și fir de cupru sunt cele ale cardului: aceeași rază, aceeași mască, același
 * pixel de bordură. Nu se desenează nimic nou.
 */
.ma-placa {
  position: relative;
  margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(22px, 2.8vw, 40px);
  padding: clamp(.95rem, 1.6vw, 1.35rem) clamp(1rem, 1.7vw, 1.5rem) clamp(1.05rem, 1.8vw, 1.5rem);
  background: var(--ma-cat-panel);
  -webkit-mask: var(--ma-cat-shape);
  mask: var(--ma-cat-shape);
}

.ma-placa::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: var(--ma-cat-copper);
  -webkit-mask: var(--ma-cat-frame);
  mask: var(--ma-cat-frame);
}

/*
 * Introducerea nu mai lasă un gol cât o plachetă sub ea.
 *
 * Titlul secțiunii își păstrează marginea peste tot altundeva; aici, unde sub el vine imediat
 * caseta, se strânge la cât trebuie ca ele să se citească drept un singur bloc.
 */
.metalicart-category-catalog .metalicart-section-heading { margin-bottom: 0; }

/* ----------------------------------------------------------- antetul */

/*
 * „Caută în colecție”, numărul și resetarea, pe un rând.
 *
 * Numărul stă lângă titlu, despărțit de o linie subțire, fiindcă spune despre ce colecție e vorba;
 * resetarea se duce la capătul celălalt, unde nu se apasă din greșeală. La ecran îngust rândul se
 * rupe, iar resetarea rămâne lipită de marginea din dreapta.
 */
.ma-placa__antet {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem clamp(.7rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(.8rem, 1.4vw, 1.1rem);
}

.ma-placa__titlu {
  margin: 0;
  color: var(--ma-cat-copper);
  font: 700 var(--ma-fs-sm, .8rem)/1.2 var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Linia dintre titlu și număr este o bordură, nu un caracter: nu se citește cu voce tare. */
.ma-placa__numar {
  margin: 0;
  padding-left: clamp(.7rem, 1.4vw, 1.1rem);
  border-left: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 45%, transparent);
  color: rgb(242 234 220 / .62);
  font-size: var(--ma-fs-sm, .8rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.ma-placa__numar b { color: #f3ecdf; font-weight: 700; }

.ma-placa__reset { margin: 0 0 0 auto; }

.ma-placa__reset button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  padding: .35rem .2rem;
  border: 0;
  border-radius: 0;
  color: rgb(242 234 220 / .72);
  background: none;
  font: 700 var(--ma-fs-sm, .78rem)/1.2 var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}

.ma-placa__reset button:hover { color: var(--ma-cat-gold); }

/* ------------------------------------------------------- controalele */

/*
 * Un rând, patru locuri: codul cel mai lat, apoi seria, butonul și ordinea.
 *
 * Lățimile sunt cele din machetă — o treime pentru cod, un sfert pentru fiecare listă, restul
 * pentru buton —, scrise ca fracțiuni, ca să se întindă la fel pe orice ecran destul de lat.
 *
 * Etichetele stau toate pe primul rând al grilei, controalele pe al doilea. De aceea fiecare câmp
 * își desface cutia cu `display: contents`: altfel eticheta și controlul lui ar fi rămas într-o
 * cutie a lor, iar „Cod model” și „Categorie” s-ar fi așezat fiecare la altă înălțime, după cât de
 * lungă era eticheta vecină. Aşa, toate liniile de bază se potrivesc și toate câmpurile pornesc de
 * pe același rând.
 */
.ma-placa__form {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) auto minmax(0, 1.05fr);
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: clamp(.6rem, 1vw, .85rem);
  row-gap: .4rem;
  margin: 0;
}

.ma-placa__camp {
  display: contents;
  margin: 0;
}

.ma-placa__camp label,
.ma-placa__ajutor {
  min-width: 0;
  color: rgb(242 234 220 / .6);
  font-size: var(--ma-fs-sm, .78rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

/*
 * Locurile se dau pe rând și coloană, fiindcă în arbore butonul stă al doilea.
 *
 * Ordinea scrisă în pagină este cea a tastaturii — codul, butonul, apoi listele —, iar desenul cere
 * butonul între cele două liste. Fiecare bucată își spune locul, deci desenul nu mai depinde de
 * ordinea în care sunt scrise.
 */
.ma-placa__camp--cod > label { grid-area: 1 / 1; justify-self: start; }
.ma-placa__camp--cod > input { grid-area: 2 / 1; }
.ma-placa__camp--serie > label { grid-area: 1 / 2; }
.ma-placa__camp--serie > .ma-placa__alegere { grid-area: 2 / 2; }
.ma-placa__cauta { grid-area: 2 / 3; }
.ma-placa__camp--ordine > label { grid-area: 1 / 4; }
.ma-placa__camp--ordine > .ma-placa__alegere { grid-area: 2 / 4; }

/*
 * Îndemnul discret stă în capătul rândului de etichete, aliniat la dreapta.
 *
 * Împarte celula cu eticheta „Cod model”: una la stânga, celălalt la dreapta. Cutia lui este cât
 * celula, nu cât textul — strâns la cât are de spus, ieșea în stânga, peste etichetă, în loc să se
 * taie cuminte.
 */
.ma-placa__ajutor {
  grid-area: 1 / 1;
  justify-self: stretch;
  overflow: hidden;
  color: rgb(242 234 220 / .42);
  font-weight: 400;
  letter-spacing: .01em;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

/*
 * Câmpurile au toate aceeași înălțime și același desen.
 *
 * Textul lor este de șaisprezece pixeli dinadins: sub atât, iOS mărește singur pagina la atingerea
 * câmpului, iar vizitatorul rămâne cu grila strâmbă după ce termină de scris.
 */
.ma-placa__form input,
.ma-placa__form select {
  min-height: 56px;
  box-sizing: border-box;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: .7rem .9rem;
  border: var(--ma-cat-rule) solid color-mix(in srgb, var(--ma-cat-copper) 38%, transparent);
  border-radius: 0;
  color: #f3ecdf;
  background: #0b0d0c;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
}

.ma-placa__form select { padding-right: 2.6rem; cursor: pointer; }
.ma-placa__form input::placeholder { color: rgb(242 234 220 / .38); }
.ma-placa__form input:hover,
.ma-placa__form select:hover { border-color: var(--ma-cat-copper); }

/* Câmpul de căutare nu poartă crucea desenată de browser: ar fi al cincilea desen pe rând. */
.ma-placa__form input[type="search"]::-webkit-search-decoration,
.ma-placa__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Săgeata listelor este desenată de noi, ca la sortarea arhivei, nu de sistem. */
.ma-placa__alegere {
  position: relative;
  display: block;
  min-width: 0;
}

.ma-placa__alegere::after {
  position: absolute;
  top: 50%;
  right: 1.05rem;
  width: 8px;
  height: 8px;
  border-right: var(--ma-cat-rule) solid var(--ma-cat-gold);
  border-bottom: var(--ma-cat-rule) solid var(--ma-cat-gold);
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.ma-placa__cauta {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .7rem clamp(1rem, 1.8vw, 1.6rem);
  border: var(--ma-cat-rule) solid var(--ma-cat-copper);
  border-radius: 0;
  color: #16110a;
  background: var(--ma-cat-copper);
  font: 800 var(--ma-fs-sm, .78rem)/1.2 var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.ma-placa__cauta:hover { background: color-mix(in srgb, var(--ma-cat-copper) 82%, #f3ecdf); }
.ma-placa__sageata { flex: none; }
.ma-placa__cauta-scurt { display: none; }

/*
 * Focusul se vede în auriu, ca peste tot pe pagină, și niciodată în albastrul sistemului.
 *
 * Inelul se trage un pixel înăuntru la câmpuri, ca să nu iasă o a doua ramă concentrică peste
 * bordura lor, și în afară la butoane, unde nu are ce să atingă.
 */
.ma-placa :focus-visible { outline: 2px solid var(--ma-cat-gold); outline-offset: 2px; }
.ma-placa__form input:focus-visible,
.ma-placa__form select:focus-visible { outline-offset: -1px; border-color: var(--ma-cat-gold); }

.ma-placa input,
.ma-placa select,
.ma-placa button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ma-placa__reset button,
  .ma-placa__cauta { transition: none; }
}

/* ------------------------------------------------------ ecrane înguste */

/*
 * Sub 900 px rândul se rupe în două, nu în patru.
 *
 * Pragul nu este cel al coloanelor, ci al cuvintelor: „Mobilier și decorațiuni (MD)” și „Ordinea
 * catalogului” se strâng până nu se mai citesc cu mult înainte ca grila să treacă la trei coloane.
 * Sub el, structura este cea din macheta de telefon: codul cu butonul pe primul rând, cele două
 * liste pe al doilea, în două coloane egale. Nu există o treaptă între ele — patru controale
 * strânse pe un rând înghesuit n-ar fi nici desenul de sus, nici cel de jos.
 */
@media (max-width: 899px) {
  .ma-placa__form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem .6rem;
  }

  .ma-placa__camp--cod > label { grid-area: 1 / 1 / 2 / 3; }
  .ma-placa__ajutor { grid-area: 1 / 3 / 2 / 7; }
  .ma-placa__camp--cod > input { grid-area: 2 / 1 / 3 / 5; }
  .ma-placa__cauta { grid-area: 2 / 5 / 3 / 7; padding-inline: .6rem; }
  .ma-placa__camp--serie > label { grid-area: 3 / 1 / 4 / 4; }
  .ma-placa__camp--serie > .ma-placa__alegere { grid-area: 4 / 1 / 5 / 4; }
  .ma-placa__camp--ordine > label { grid-area: 3 / 4 / 4 / 7; }
  .ma-placa__camp--ordine > .ma-placa__alegere { grid-area: 4 / 4 / 5 / 7; }

  /* Al doilea rând de etichete are nevoie de puțin aer peste rândul de deasupra lui. */
  .ma-placa__camp--serie > label,
  .ma-placa__camp--ordine > label { margin-top: .35rem; }

  .ma-placa__form input,
  .ma-placa__cauta { min-height: 54px; }
  .ma-placa__form select { min-height: 52px; }

}

@media (max-width: 779px) {
  .ma-placa { padding: 1rem clamp(16px, 4vw, 20px) 1.1rem; }
  .ma-placa__titlu,
  .ma-placa__numar,
  .ma-placa__reset button { font-size: var(--ma-fs-sm, .74rem); }
  .ma-placa__camp label,
  .ma-placa__ajutor { font-size: var(--ma-fs-xs, .7rem); letter-spacing: .1em; }
}

/*
 * Cuvintele scurte sunt ale telefonului, nu ale tabletei.
 *
 * Rândul se rupe în două de la nouă sute de pixeli în jos, dar până la șase sute mai este loc
 * pentru „Caută modelul” și pentru „77 de lucrări”: pe o tabletă, forma scurtă ar fi arătat a
 * economie făcută degeaba. Pragul acesta este și cel al scriptului care schimbă numele alegerilor.
 */
@media (max-width: 599px) {
  .ma-placa__de { display: none; }
  .ma-placa__cauta-lung { display: none; }
  .ma-placa__cauta-scurt { display: inline; }
}

/* Sub 360 px, unde grila însăși trece la o coloană, îndemnul discret nu mai are loc lângă etichetă. */
@media (max-width: 359px) {
  .ma-placa__ajutor { display: none; }
  .ma-placa__camp--cod > label { grid-area: 1 / 1 / 2 / 7; }
}


/* ------------------------------------------------------ Bara de deasupra grilei */

/*
 * Numărul la stânga, ordinea la dreapta, pe același rând cu grila de sub ele.
 *
 * Pe arhivă numărul lipsește — îl spune sigiliul de mai sus —, iar rândul rămâne cu ordinea
 * împinsă la dreapta, unde ochiul o caută oricum după ce a citit filtrele.
 */
.ma-catalog-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(.75rem, 1.5vw, 1.1rem);
}

.ma-catalog-bar__count {
  margin: 0;
  color: rgb(242 234 220 / .62);
  font-size: var(--ma-fs-sm, .8rem);
  letter-spacing: .02em;
}

/* Fără număr la stânga, formularul rămâne singur și se duce la capătul rândului. */
.ma-catalog-bar > .ma-catalog-sort:only-child { margin-left: auto; }

.ma-catalog-sort {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
}

.ma-catalog-sort__label {
  color: rgb(242 234 220 / .55);
  font-size: var(--ma-fs-xs, .66rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * Săgeata este desenată de noi, nu de sistem.
 *
 * Săgeata implicită a unui `select` diferă de la un sistem la altul — pe unele este albastră, pe
 * altele un triunghi plin pe fundal deschis —, iar pe antracit ieșea din paletă. Se stinge cu
 * `appearance` și se pune în loc un unghi din două linii, în cuprul temei.
 */
.ma-catalog-sort__field {
  position: relative;
  display: inline-flex;
}

.ma-catalog-sort__field::after {
  position: absolute;
  top: 50%;
  right: .85rem;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--ma-cat-gold);
  border-bottom: 1px solid var(--ma-cat-gold);
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.ma-catalog-sort__select {
  min-height: 44px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  padding: .5rem 2.4rem .5rem .9rem;
  border: 1px solid color-mix(in srgb, var(--ma-cat-copper) 52%, transparent);
  border-radius: 0;
  color: #f3ecdf;
  background: #0e100d;
  font: inherit;
  font-size: var(--ma-fs-base, .82rem);
  cursor: pointer;
}

.ma-catalog-sort__select:hover { border-color: var(--ma-cat-copper); }

/*
 * Focusul aprinde chenarul, nu adaugă o a doua ramă.
 *
 * Arhiva desenează pentru toate câmpurile ei un contur de trei pixeli, la trei pixeli distanță;
 * peste bordura câmpului de sortare ieșeau două rame concentrice, groase. Aici conturul este tras
 * un pixel înăuntru, deci se suprapune peste bordură: rămâne aceeași margine, doar aurie și mai
 * apăsată. A doua linie de selector întrece regula arhivei, care are un nume de element în plus.
 */
.ma-catalog-sort__select:focus-visible,
.ma-catalog .ma-catalog-sort__select:focus-visible {
  outline: 2px solid var(--ma-cat-gold);
  outline-offset: -1px;
  border-color: var(--ma-cat-gold);
}

.ma-catalog-sort__go {
  min-height: 44px;
  border: 1px solid var(--ma-cat-copper);
  padding: .5rem 1rem;
  color: #100e0b;
  background: var(--ma-cat-copper);
  font-size: var(--ma-fs-sm, .7rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Cu JavaScript, alegerea se trimite singură; butonul devine de prisos. */
.ma-catalog-sort.is-enhanced .ma-catalog-sort__go { display: none; }

@media (max-width: 619px) {
  /*
   * Pe telefon eticheta stă deasupra, iar câmpul ocupă rândul.
   *
   * Pe un rând, „Sortează după” plus un câmp de patruzeci și patru de pixeli nu încăpeau lângă
   * numărul lucrărilor fără să se rupă urât în trei bucăți.
   */
  .ma-catalog-bar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .ma-catalog-sort { flex-wrap: wrap; gap: .4rem .6rem; }
  .ma-catalog-sort__field { flex: 1 1 12rem; }
  .ma-catalog-sort__select { width: 100%; }
}