/*
 * MetalicArt — întrebările frecvente ale paginilor de categorie.
 *
 * Un singur panou crem, așezat pe antracit. Totul este scris sub `.ma-faq-premium`, iar variabilele
 * se declară acolo, nu în `:root`: pe același sit mai există un FAQ, cel de pe prima pagină
 * (`.ma-faq`), plus paginile juridice, iar niciunul nu trebuie atins. Din același motiv nu există
 * aici nicio regulă pe `details`, `summary`, `h2` sau `svg` în general.
 *
 * Desenul are o singură măsură: raza crestăturii. Din ea ies tăietura panoului, conturul exterior
 * și cel interior. Lecția vine din cardurile de catalog, unde trei numere care trebuiau să fie de
 * acord s-au desincronizat pe telefon și colțurile au dispărut cu totul. Aici numărul este unul,
 * fix la orice lățime, iar testul măsoară pixelii, nu felul în care este scris CSS-ul.
 */

.ma-faq-premium {
  --ma-faq-ink: #11120f;
  --ma-faq-paper: var(--wp--preset--color--cream, #f2eadc);
  --ma-faq-copper: var(--wp--preset--color--copper, #b86f3d);
  /*
   * Cuprul paletei este culoarea desenului, nu a textului.
   *
   * Pe hârtia panoului dă 3,27:1 — sub pragul AA de 4,5 pentru textele mici, iar supratitlul are
   * 11,5 px, numerele 20. Rama, linia despărțitoare și rombul rămân în cuprul paletei; textele
   * scrise cu el trec pe tonul de mai jos, aceeași nuanță cu 20% mai puțină lumină: 4,73:1.
   */
  --ma-faq-copper-text: #935931;
  --ma-faq-muted: #5e574f;
  --ma-faq-rule: rgb(83 69 51 / .22);
  --ma-faq-focus: var(--metalicart-text-accent, #e1b270);
  --ma-faq-serif: var(--wp--preset--font-family--display, Georgia, serif);
  --ma-faq-sans: var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);

  /* Raza crestăturii de colț: sfertul de cerc din desenele livrate, 12 dintr-un pătrat de 32. */
  --ma-faq-notch: 12px;
  /* Cât stă conturul interior în afara celui exterior. */
  --ma-faq-inset: 4px;
  --ma-faq-hair: 1px;

  padding: var(--wp--custom--ma-rhythm-y) clamp(1rem, 4vw, 3rem);
  background: var(--wp--preset--color--iron, #0d0e0f);
}

.ma-faq-premium *,
.ma-faq-premium *::before,
.ma-faq-premium *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------------ Panoul */

.ma-faq-premium__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: clamp(2rem, 5vw, 5rem);
  width: min(100%, 1240px);
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 4.5rem);
  color: var(--ma-faq-ink);
  background-color: var(--ma-faq-paper);
  /* Hârtia caldă a sitului, aceeași textură pe care o folosește și FAQ-ul de pe prima pagină. */
  background-image: url("../svg/texture-paper.svg");
  background-size: 320px 320px;
  font-family: var(--ma-faq-sans);

  /*
   * Panoul este tăiat pe conturul concav, nu doar desenat cu el.
   *
   * În machetă, prin crestătura colțului se vede antracitul din spate. Desenată numai cu linii,
   * crema ar fi umplut colțul drept, iar conturul ar fi părut lipit peste un dreptunghi.
   *
   * Trecerea se face chiar înaintea razei, ca linia de un pixel care începe la rază să rămână
   * întreagă. Cele patru straturi acoperă câte un sfert, cu un procent în plus, ca să nu rămână o
   * cusătură pe mijloc.
   */
  -webkit-mask: var(--ma-faq-shape);
  mask: var(--ma-faq-shape);

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

/*
 * Conturul: 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 panoului. Muchiile drepte pornesc
 * de unde se termină arcul, fiindcă pornesc din același număr.
 *
 * Macheta are două linii, la câțiva pixeli una de alta. A doua este același desen, tras înăuntru:
 * o singură rețetă, două întrebuințări, deci nu se pot despărți.
 */
.ma-faq-premium__frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: var(--ma-faq-copper);
  -webkit-mask: var(--ma-faq-line);
  mask: var(--ma-faq-line);

  /*
   * 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-faq-line: radial-gradient(circle at top left, #0000 var(--ma-faq-notch), #000 var(--ma-faq-notch) calc(var(--ma-faq-notch) + var(--ma-faq-hair)), #0000 calc(var(--ma-faq-notch) + var(--ma-faq-hair))) top left / calc(var(--ma-faq-notch) + var(--ma-faq-hair)) calc(var(--ma-faq-notch) + var(--ma-faq-hair)) no-repeat, radial-gradient(circle at top right, #0000 var(--ma-faq-notch), #000 var(--ma-faq-notch) calc(var(--ma-faq-notch) + var(--ma-faq-hair)), #0000 calc(var(--ma-faq-notch) + var(--ma-faq-hair))) top right / calc(var(--ma-faq-notch) + var(--ma-faq-hair)) calc(var(--ma-faq-notch) + var(--ma-faq-hair)) no-repeat, radial-gradient(circle at bottom left, #0000 var(--ma-faq-notch), #000 var(--ma-faq-notch) calc(var(--ma-faq-notch) + var(--ma-faq-hair)), #0000 calc(var(--ma-faq-notch) + var(--ma-faq-hair))) bottom left / calc(var(--ma-faq-notch) + var(--ma-faq-hair)) calc(var(--ma-faq-notch) + var(--ma-faq-hair)) no-repeat, radial-gradient(circle at bottom right, #0000 var(--ma-faq-notch), #000 var(--ma-faq-notch) calc(var(--ma-faq-notch) + var(--ma-faq-hair)), #0000 calc(var(--ma-faq-notch) + var(--ma-faq-hair))) bottom right / calc(var(--ma-faq-notch) + var(--ma-faq-hair)) calc(var(--ma-faq-notch) + var(--ma-faq-hair)) no-repeat, linear-gradient(#000, #000) left var(--ma-faq-notch) top 0 / calc(100% - var(--ma-faq-notch) * 2) var(--ma-faq-hair) no-repeat, linear-gradient(#000, #000) left var(--ma-faq-notch) bottom 0 / calc(100% - var(--ma-faq-notch) * 2) var(--ma-faq-hair) no-repeat, linear-gradient(#000, #000) left 0 top var(--ma-faq-notch) / var(--ma-faq-hair) calc(100% - var(--ma-faq-notch) * 2) no-repeat, linear-gradient(#000, #000) right 0 top var(--ma-faq-notch) / var(--ma-faq-hair) calc(100% - var(--ma-faq-notch) * 2) no-repeat;
}

/* A doua linie, mai subțire ca prezență, trasă înăuntru cu aceeași rețetă. */
.ma-faq-premium__frame--inner {
  inset: var(--ma-faq-inset);
  opacity: .55;
}

/* ------------------------------------------------------------------- Introducerea */

.ma-faq-premium__intro {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-right: clamp(1.25rem, 3vw, 3rem);
  border-right: var(--ma-faq-hair) solid var(--ma-faq-rule);
}

.ma-faq-premium__eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  color: var(--ma-faq-copper-text);
  font-size: var(--ma-fs-xs, .72rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ma-faq-premium__eyebrow::before {
  width: 2.6rem;
  height: var(--ma-faq-hair);
  flex: none;
  background: currentColor;
  content: "";
}

/*
 * Rândurile se umplu, nu se echilibrează.
 *
 * Cu `text-wrap: balance` titlul ieșea „Înainte să / alegi modelul”, pe trei rânduri, iar
 * întrebările se rupeau la jumătate chiar când încăpeau. Macheta le umple: „Înainte să alegi”,
 * apoi „modelul”. `pretty` păstrează grija pentru ultimul rând, fără să scurteze primele.
 */
.ma-faq-premium__title {
  margin: 0;
  color: var(--ma-faq-ink);
  font: 400 var(--wp--custom--ma-title)/var(--wp--custom--ma-title-lh) var(--ma-faq-serif);
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.ma-faq-premium__title em {
  color: var(--ma-faq-copper);
  font-style: italic;
  font-weight: inherit;
}

.ma-faq-premium__lede {
  max-width: 34ch;
  margin: 1.5rem 0 0;
  color: var(--ma-faq-muted);
  font-size: var(--wp--custom--ma-copy);
  line-height: var(--wp--custom--ma-copy-lh);
}

/*
 * Separatorul: două linii cu un romb la mijloc, desenul comun al sitului.
 *
 * Este o mască peste o bandă colorată, deci culoarea rămâne tokenul de cupru și se schimbă odată
 * cu paleta.
 */
.ma-faq-premium__divider {
  display: block;
  width: min(240px, 100%);
  height: 16px;
  margin-top: auto;
  padding-top: 0;
  background: var(--ma-faq-copper);
  -webkit-mask: url("../svg/divider-diamond.svg") left center / 240px 16px no-repeat;
  mask: url("../svg/divider-diamond.svg") left center / 240px 16px no-repeat;
}

/* ---------------------------------------------------------------------- Acordeonul */

.ma-faq-premium__list {
  position: relative;
  z-index: 3;
  min-width: 0;
}

/*
 * Separatorul stă între două întrebări, nu în jurul fiecăreia.
 *
 * Scris ca `border-bottom` pe fiecare intrare și `border-top` pe prima, ieșea o linie și deasupra
 * lui „01”, și sub ultima întrebare. Pe telefon, unde introducerea își are propria linie de
 * încheiere, cele două cădeau una sub alta: un separator dublu la douăzeci și trei de pixeli
 * distanță. Sub ultima întrebare linia n-avea ce despărți — urma chenarul.
 *
 * Fratele adiacent dă exact `n − 1` linii pentru `n` întrebări, oricâte ar avea categoria, și nu
 * se leagă de numerele lor. Grosimea, culoarea și tokenul rămân cele de dinainte.
 */
.ma-faq-premium__item + .ma-faq-premium__item { border-top: var(--ma-faq-hair) solid var(--ma-faq-rule); }

.ma-faq-premium__summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  gap: 1rem;
  align-items: center;
  min-height: 72px;
  padding-block: .9rem;
  cursor: pointer;
  list-style: none;
  /*
   * Evidențierea nativă la atingere desenează un dreptunghi albăstrui peste tot rândul. Se stinge
   * numai ea; inelul de focus al tastaturii rămâne întreg, mai jos.
   */
  -webkit-tap-highlight-color: transparent;
}

/* Săgeata implicită a lui `details` dispare: rombul îi ia locul. */
.ma-faq-premium__summary::-webkit-details-marker { display: none; }
.ma-faq-premium__summary::marker { content: ""; }

.ma-faq-premium__number {
  color: var(--ma-faq-copper-text);
  font: 400 1.25rem/1 var(--ma-faq-serif);
  font-variant-numeric: tabular-nums;
}

.ma-faq-premium__question {
  color: var(--ma-faq-ink);
  font: 400 clamp(1.1rem, 1.75vw, 1.55rem)/1.22 var(--ma-faq-serif);
  text-wrap: pretty;
}

/*
 * Controlul: rombul cu chevron din pachet.
 *
 * Este o mască peste cupru, nu o fotografie, deci urmează culoarea. Ținta are 44 de pixeli pe
 * fiecare latură chiar dacă desenul dinăuntru este mai mic.
 */
.ma-faq-premium__toggle {
  width: 44px;
  height: 44px;
  justify-self: end;
  background: var(--ma-faq-copper);
  -webkit-mask: url("../svg/faq/faq-toggle.svg") center / 44px 44px no-repeat;
  mask: url("../svg/faq/faq-toggle.svg") center / 44px 44px no-repeat;
  transition: transform 220ms ease;
}

.ma-faq-premium__item[open] .ma-faq-premium__toggle { transform: rotate(180deg); }

.ma-faq-premium__answer {
  margin: 0 3rem 1.4rem 4rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--ma-faq-copper);
  color: var(--ma-faq-muted);
}

.ma-faq-premium__answer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.ma-faq-premium__summary:focus-visible {
  outline: 2px solid var(--ma-faq-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ma-faq-premium__summary:hover .ma-faq-premium__question { color: var(--ma-faq-copper); }
}

/* ------------------------------------------------- Tabletă: introducerea trece deasupra */

@media (max-width: 899px) {
  .ma-faq-premium__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .ma-faq-premium__intro {
    padding-right: 0;
    padding-bottom: 1.75rem;
    border-right: 0;
    border-bottom: var(--ma-faq-hair) solid var(--ma-faq-rule);
  }

  .ma-faq-premium__lede { max-width: 60ch; }
  .ma-faq-premium__divider { display: none; }
}

/* ------------------------------------------------------------------------- Telefon */

@media (max-width: 619px) {
  .ma-faq-premium { padding: 1rem; }

  /*
   * Poala se ridică de la douăzeci la douăzeci și șase de pixeli.
   *
   * Cât timp sub ultima întrebare era o linie, ea încheia lista, iar cei douăzeci de pixeli de
   * dedesubt erau doar marginea chenarului. Fără linie, ultima întrebare se sprijină direct pe
   * chenar, deci are nevoie de respirația cerută de atelier.
   */
  .ma-faq-premium__inner {
    gap: 1.5rem;
    padding: 1.75rem 1rem 1.6rem;
  }

  .ma-faq-premium__eyebrow { margin-bottom: 1rem; font-size: var(--ma-fs-xs, .68rem); }
  .ma-faq-premium__eyebrow::before { width: 2rem; }
  .ma-faq-premium__lede { margin-top: 1rem; }

  /*
   * Rândul are cel puțin 56 de pixeli și rămâne apăsabil pe toată suprafața.
   *
   * Numărul, întrebarea și rombul stau în aceeași grilă, deci degetul nimerește oriunde pe rând,
   * nu doar pe text.
   */
  .ma-faq-premium__summary {
    grid-template-columns: 2rem minmax(0, 1fr) 2.75rem;
    gap: .6rem;
    min-height: 56px;
    padding-block: .8rem;
  }

  .ma-faq-premium__number { font-size: 1.05rem; }
  .ma-faq-premium__question { font-size: clamp(1.05rem, 4.6vw, 1.3rem); }

  /* Desenul se micșorează, ținta nu: rămâne 44×44, cât cere degetul. */
  .ma-faq-premium__toggle {
    -webkit-mask-size: 34px 34px;
    mask-size: 34px 34px;
  }

  .ma-faq-premium__answer {
    margin: 0 0 1.2rem 2.6rem;
    padding-left: .95rem;
  }

  .ma-faq-premium__answer p { font-size: 1rem; }
}

@media (max-width: 359px) {
  .ma-faq-premium { padding-inline: .5rem; }
  .ma-faq-premium__inner { padding-inline: .85rem; }
  .ma-faq-premium__summary { grid-template-columns: 1.75rem minmax(0, 1fr) 2.5rem; gap: .5rem; }
  .ma-faq-premium__answer { margin-left: 2.25rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ma-faq-premium__toggle { transition: none; }
}