/* =========================================================================
   anaprecup.com — sistemul de design
   Sursa de adevar: design/TOKENS.md, design/BRIEF-DESIGN-ANAPRECUP.md
   Nu se editeaza din UI-ul blocurilor. Tot ce e aici se expune ca block style.

   NOTA DE CASCADA: componentele de aici raman NELAYERIZATE, ca sa concureze
   de la egal cu Astra. Layerele se folosesc doar pentru ce vrem sa PIARDA
   (resetari), pentru ca declaratiile nelayerizate bat pe cele layerizate.
   ========================================================================= */

@layer ap-reset;

/* ---------- 1. FONTURI — subsetate local, 65,4 KB total ---------- */
/* Fara unicode-range: fiecare fisier acopera deja tot ce foloseste site-ul
   (latin + latin-ext + CE + punctuatie tipografica). Un fisier per greutate. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. TOKENI ---------- */

:root {
  /* Fundal deschis — starea implicita, ~70% din site */
  --ap-cream:        #F7F1E8;
  --ap-parchment:    #FDFAF4;
  --ap-sand:         #E3D8C7;
  --ap-espresso:     #241A14;   /* 15,2:1 pe crem */
  --ap-cocoa:        #5C4A3D;   /*  7,5:1 pe crem */
  --ap-taupe:        #7A6A5B;   /*  4,6:1 pe crem · 5,0:1 pe parchment */
  --ap-brass:        #A87A3C;   /*  3,4:1 — DOAR display si text >=24px */
  --ap-brass-deep:   #8A6229;   /*  4,9:1 — accent pentru text mic */
  --ap-brass-lit:    #D9B173;
  --ap-brass-hi:     #FFF3D8;

  /* Fundal inchis — ~30%, acolo unde sticla poate citi */
  --ap-walnut:        #1A1310;
  --ap-walnut-raised: #241B16;
  --ap-linen:         #C3B4A3;  /* 9,1:1 pe walnut · 8,4:1 pe raised */

  /* Tokeni semantici — componentele citesc DOAR de aici, nu culorile brute.
     Sectiunea intunecata ii redefineste si tot ce e inauntru se recoloreaza. */
  --ap-surface:      var(--ap-cream);
  --ap-surface-2:    var(--ap-parchment);
  --ap-text:         var(--ap-espresso);
  --ap-text-2:       var(--ap-cocoa);
  --ap-text-3:       var(--ap-taupe);
  --ap-accent:       var(--ap-brass);       /* display / >=24px */
  --ap-accent-text:  var(--ap-brass-deep);  /* text mic, linkuri */
  --ap-hairline:     var(--ap-sand);
  --ap-focus:        var(--ap-brass-deep);

  /* Tipografie */
  --ap-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
              Palatino, Georgia, serif;
  --ap-sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system,
              "Helvetica Neue", Arial, sans-serif;

  --ap-t-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem);
  --ap-t-h1:      clamp(2rem, 1.35rem + 2.8vw, 3.6rem);
  --ap-t-h2:      clamp(1.75rem, 1.15rem + 2.1vw, 2.9rem);
  --ap-t-h3:      clamp(1.2rem, 1rem + .8vw, 1.6rem);
  --ap-t-body:    clamp(1rem, .35vw + .93rem, 1.0625rem);
  --ap-t-small:   .875rem;
  --ap-t-label:   .6875rem;

  /* PODEAUA DE DIACRITICE. Sub 1.12 pe display, breve-ul lui a si
     virgula de sub s/t se taie intr-un serif cu contrast mare. */
  --ap-lh-display: 1.12;
  --ap-lh-h2:      1.18;
  --ap-lh-h3:      1.3;
  --ap-lh-body:    1.7;

  /* Spatiere, baza 8 */
  --ap-s1: 4px;   --ap-s2: 8px;   --ap-s3: 12px;  --ap-s4: 16px;
  --ap-s5: 24px;  --ap-s6: 32px;  --ap-s7: 48px;  --ap-s8: 72px;
  --ap-s9: 112px;

  --ap-measure:    66ch;
  --ap-radius:     4px;
  --ap-radius-panel: 10px;
  --ap-section-pad: clamp(72px, 10vw, 148px);
  --ap-hero-pad:    clamp(112px, 15vh, 180px);

  --ap-ease: cubic-bezier(.22, .61, .36, 1);
  --ap-dur:  .22s;

  /* Straturi — niciun z-index ad-hoc in proiect */
  --ap-z-base: 0;
  --ap-z-structure: 20;
  --ap-z-surface: 30;
  --ap-z-content: 40;
  --ap-z-chrome: 50;
}

/* Sectiunea intunecata: se schimba doar tokenii semantici. */
.ap-section--dark {
  --ap-surface:     var(--ap-walnut);
  --ap-surface-2:   var(--ap-walnut-raised);
  --ap-text:        var(--ap-cream);
  --ap-text-2:      var(--ap-linen);
  --ap-text-3:      var(--ap-linen);
  --ap-accent:      var(--ap-brass-lit);
  --ap-accent-text: var(--ap-brass-lit);
  --ap-hairline:    rgba(255, 243, 216, .16);
  --ap-focus:       var(--ap-brass-lit);

  background-color: var(--ap-surface);
  color: var(--ap-text);
}

/* ---------- 3. BAZA ---------- */

@layer ap-reset {
  :where(html) {
    scrollbar-gutter: stable;      /* fara saltul de ~15px cand apare bara */
    -webkit-text-size-adjust: 100%;
  }
  :where(h1, h2, h3, h4) {
    overflow: visible;             /* niciun container de titlu nu se cliparza */
    text-wrap: balance;
    overflow-wrap: normal;         /* nu rupe „Consultanță" in „Consultanț/a" */
    word-break: normal;
    hyphens: manual;
  }
  :where(p, li) { text-wrap: pretty; }
}

body {
  background-color: var(--ap-cream);
  color: var(--ap-espresso);
  font-family: var(--ap-sans);
  font-size: var(--ap-t-body);
  line-height: var(--ap-lh-body);
  -webkit-font-smoothing: antialiased;
}

.ap-display, h1.ap-display {
  font-family: var(--ap-serif);
  font-size: var(--ap-t-display);
  font-weight: 400;
  line-height: var(--ap-lh-display);
  letter-spacing: -.015em;
  color: var(--ap-text);
}

h1 { font-family: var(--ap-serif); font-size: var(--ap-t-h1); font-weight: 400;
     line-height: var(--ap-lh-display); letter-spacing: -.015em; }
h2 { font-family: var(--ap-serif); font-size: var(--ap-t-h2); font-weight: 400;
     line-height: var(--ap-lh-h2); letter-spacing: -.01em; }
h3 { font-family: var(--ap-serif); font-size: var(--ap-t-h3); font-weight: 500;
     line-height: var(--ap-lh-h3); letter-spacing: -.005em; }

.ap-eyebrow {
  display: block;
  font-family: var(--ap-sans);
  font-size: var(--ap-t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;          /* POZITIV pe uppercase, niciodata negativ */
  line-height: 1.4;
  color: var(--ap-accent-text);
  margin: 0 0 var(--ap-s3);
}

.ap-meta {
  font-size: var(--ap-t-small);
  color: var(--ap-text-3);
  font-variant-numeric: tabular-nums;
}

.ap-prose { max-width: var(--ap-measure); }
.ap-prose > * + * { margin-block-start: var(--ap-s5); }

/* Silabisire doar pe coloana ingusta — la 66ch arata artificial. */
@media (max-width: 47.99rem) { .ap-prose { hyphens: auto; } }
@media (min-width: 48rem)    { .ap-prose { hyphens: manual; } }

/* Focus: outline REAL, mereu, niciodata inlocuit de glow. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ap-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ---------- 4. SECTIUNI SI HAIRLINE-URI ---------- */

.ap-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--ap-section-pad);
  background-color: var(--ap-surface);
  color: var(--ap-text);
}

/* Intre o sectiune crem si una walnut NU se pune linie — schimbarea de
   culoare e separatorul. Hairline doar intre doua sectiuni de aceeasi culoare. */
.ap-section + .ap-section:not(.ap-section--dark) { border-top: 1px solid var(--ap-hairline); }
.ap-section--dark + .ap-section--dark { border-top: 1px solid var(--ap-hairline); }

.ap-hairline {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--ap-hairline);
}

/* Sectiune amanata — DOAR sub fold. Deasupra ar intarzia LCP-ul. */
.ap-section--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;   /* obligatoriu, altfel sare scrollbar-ul */
}

/* Bazine radiale pictate DIRECT in fundal. Zero div-uri, zero filter:blur.
   Oprirea se face cu rgba(aceeasi culoare, 0) — `transparent` interpoleaza
   prin negru si lasa o banda gri murdara la mijloc. */
.ap-section--pools {
  background-image:
    radial-gradient(640px 460px at 78% 8%,  rgba(217, 177, 115, .09), rgba(217, 177, 115, 0)),
    radial-gradient(760px 560px at 4% 96%,  rgba(168, 122, 60, .08),  rgba(168, 122, 60, 0));
  background-repeat: no-repeat;
}

/* ---------- 5. COLOANA EDITORIALA + SINA ---------- */

.ap-layout {
  display: grid;
  gap: var(--ap-s5);
  width: min(100% - 2 * var(--ap-s5), 1280px);
  margin-inline: auto;
}
@media (min-width: 60rem) {
  .ap-layout {
    grid-template-columns: 80px minmax(0, 7fr) minmax(0, 3fr);
    column-gap: var(--ap-s6);
  }
  .ap-layout__rail  { grid-column: 1; }
  .ap-layout__main  { grid-column: 2; }
  .ap-layout__aside { grid-column: 3; }
}

.ap-rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ap-s3);
}
@media (min-width: 60rem) {
  .ap-rail { flex-direction: column; align-items: flex-start; position: sticky;
             top: var(--ap-s8); }
}
.ap-rail__num {
  font-family: var(--ap-serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ap-accent-text);
  letter-spacing: .02em;
}

/* ---------- 6. MARCAJUL OUTLINE — singurul ornament din proiect ---------- */
/* Trei rigle orizontale descrescatoare = ierarhia de titluri, ca glifa. */

.ap-mark {
  display: inline-block;
  width: 24px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  color: var(--ap-accent);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
          mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
}
:root {
  --ap-mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Crect y='1' width='24' height='2' rx='1'/%3E%3Crect y='6' width='16' height='2' rx='1'/%3E%3Crect y='11' width='8' height='2' rx='1'/%3E%3C/svg%3E");
}

/* Lista cu marcaj outline, in loc de bullet. */
.ap-outline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ap-s3); }
.ap-outline-list > li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--ap-s3);
  align-items: start;
}
.ap-outline-list > li::before {
  content: "";
  width: 24px; height: 14px;
  margin-top: .45em;
  background-color: var(--ap-accent);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
          mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
}

/* Separator de sectiune cu acelasi marcaj. */
.ap-divider {
  display: flex; align-items: center; gap: var(--ap-s4);
  border: 0; margin: 0; padding: 0;
}
.ap-divider::before, .ap-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--ap-hairline);
}

/* ---------- 7. CELE PATRU FINISAJE ---------- */

/* SOFT-TOUCH — implicit, calul de povara. Zero backdrop-filter.
   Senzatia de sticla vine din trei lucruri: transparenta, muchia de 1px,
   si dunga de lumina de sus. Blurul adauga ultimii 20%. */
.ap-panel {
  position: relative;
  border-radius: var(--ap-radius-panel);
  padding: var(--ap-s5);
  background-color: color-mix(in oklab, var(--ap-surface-2) 92%, transparent);
  border: 1px solid var(--ap-hairline);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--ap-brass-hi) 22%, transparent),
    0 10px 28px color-mix(in oklab, #000 12%, transparent);
}
.ap-section--dark .ap-panel {
  background-color: color-mix(in oklab, var(--ap-walnut) 66%, transparent);
  border-color: color-mix(in oklab, var(--ap-brass-hi) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--ap-brass-hi) 20%, transparent),
    0 10px 28px color-mix(in oklab, #000 34%, transparent);
}

/* SPOT UV — blur real. Bugetul intregii pagini: MAXIM 2 instante in viewport,
   niciodata pe elementul LCP, niciodata intr-o lista. */
.ap-panel--spotuv {
  background-color: color-mix(in oklab, var(--ap-walnut) 88%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ap-panel--spotuv {
    background-color: color-mix(in oklab, var(--ap-walnut) 34%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
            backdrop-filter: blur(18px) saturate(165%);
  }
}
/* Sub 782px degradeaza la opac: pe mobil mid-range blurul se simte la scroll. */
@media (max-width: 48.8125rem) {
  .ap-panel--spotuv {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-color: color-mix(in oklab, var(--ap-walnut) 90%, transparent);
  }
}

/* HOT FOIL — exact o data pe pagina, pe titluri >=28px, sub fold.
   NICIODATA pe H1: e elementul LCP sau vecinul lui. */
@property --ap-foil {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.ap-foil { color: var(--ap-brass); }   /* fallback REAL, nu decorativ */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ap-foil {
    background-image: linear-gradient(100deg,
      var(--ap-brass)     calc(var(--ap-foil) - 40%),
      var(--ap-brass-lit) calc(var(--ap-foil) - 12%),
      var(--ap-brass-hi)  var(--ap-foil),
      var(--ap-brass-lit) calc(var(--ap-foil) + 12%),
      var(--ap-brass)     calc(var(--ap-foil) + 40%));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ap-foil { animation: ap-sheen 9s ease-in-out infinite; }
  }
}
@keyframes ap-sheen {
  0%, 100% { --ap-foil: 0%; }
  50%      { --ap-foil: 100%; }
}
/* Fara blocul asta, in Windows High Contrast titlul dispare complet. */
@media (forced-colors: active) {
  .ap-foil {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* DEBOSS — tesutul conjunctiv. Sectiunile se despart prin linii, nu prin cutii. */
.ap-deboss { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06); }

/* ---------- 8. COMPONENTE ---------- */

/* Card. Definit de bordura, nu de umbra. Raza 4px, nu 16px. */
.ap-card {
  position: relative;
  display: grid;
  gap: var(--ap-s3);
  padding: var(--ap-s5);
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-radius);
  background-color: var(--ap-surface-2);
  transition: transform var(--ap-dur) var(--ap-ease),
              border-color var(--ap-dur) var(--ap-ease);
}
/* NU se anima box-shadow: repaint pe fiecare frame. Umbra ridicata se
   deseneaza gata pe ::after si se tranzitioneaza doar opacity. */
.ap-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(36, 26, 20, .10), 0 24px 48px -20px rgba(36, 26, 20, .16);
  opacity: 0;
  transition: opacity var(--ap-dur) var(--ap-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ap-card:hover { transform: translate3d(0, -3px, 0); border-color: var(--ap-accent); }
  .ap-card:hover::after { opacity: 1; }
}
.ap-card:focus-within { transform: translate3d(0, -3px, 0); border-color: var(--ap-accent); }
.ap-card:focus-within::after { opacity: 1; }

/* Cardul are UN singur nume accesibil: titlul e linkul, ::after il extinde. */
.ap-card__link { color: inherit; text-decoration: none; }
.ap-card__link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
}

/* Slotul de metrica — se livreaza GOL si arata ca atare.
   :has() face cardul sa se restilizeze singur cand primeste o valoare reala,
   fara ca cineva sa adauge o clasa. */
.ap-metric {
  display: grid;
  gap: var(--ap-s2);
  padding: var(--ap-s4);
  border: 1px dashed var(--ap-hairline);
  border-radius: var(--ap-radius);
  color: var(--ap-text-3);
}
.ap-metric__value {
  font-family: var(--ap-serif);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.ap-metric:has(.ap-metric__value[data-filled]) {
  border-style: solid;
  color: var(--ap-text);
}
.ap-metric__source {
  font-size: var(--ap-t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ap-text-3);
}

/* Grila de servicii: cardul se adapteaza la SLOTUL primit, nu la viewport.
   De asta e nevoie de container query si nu de media query. */
.ap-slot { container-type: inline-size; container-name: apcard; }
@container apcard (min-width: 30rem) {
  .ap-card--service { grid-template-columns: 1fr auto; align-items: start; }
}

/* Randuri de carduri aliniate pe subgrid: titlurile si meta se aliniaza
   intre carduri chiar daca titlurile au 1 sau 3 randuri. Fara min-height ghicit. */
.ap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: var(--ap-s5);
}
@supports (grid-template-rows: subgrid) {
  .ap-cards > .ap-card { grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
}

/* Chip / eticheta */
.ap-chip {
  display: inline-flex; align-items: center; gap: var(--ap-s2);
  height: 30px; padding: 0 var(--ap-s3);
  border: 1px solid var(--ap-hairline);
  border-radius: 999px;
  font-size: var(--ap-t-small);
  color: var(--ap-text-2);
  text-decoration: none;
}
.ap-chip[aria-current], .ap-chip[aria-pressed="true"] {
  border-color: var(--ap-accent);
  color: var(--ap-text);
}

/* Rand orizontal cu fade la margini — inlocuieste doua div-uri de gradient. */
.ap-scrollrow {
  display: flex; gap: var(--ap-s4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--ap-s3);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 24px, #000 calc(100% - 40px), rgba(0,0,0,0));
          mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 24px, #000 calc(100% - 40px), rgba(0,0,0,0));
}
.ap-scrollrow > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Tabel real, cu container derulabil pe mobil. */
.ap-table-wrap { overflow-x: auto; border: 1px solid var(--ap-hairline); border-radius: var(--ap-radius); }
.ap-table { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: left; }
.ap-table caption {
  padding: var(--ap-s4) var(--ap-s5) var(--ap-s2);
  text-align: left;
  font-size: var(--ap-t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ap-accent-text);
}
.ap-table th, .ap-table td {
  padding: var(--ap-s3) var(--ap-s5);
  border-top: 1px solid var(--ap-hairline);
  font-size: var(--ap-t-small);
}
.ap-table th { font-weight: 600; color: var(--ap-text-2); }
.ap-table td { font-variant-numeric: tabular-nums; color: var(--ap-text); }

/* Butoane. Umplere SOLIDA — un gradient sub text rupe contrastul.
   ATENTIE: Gutenberg pune clasa pe wrapper-ul .wp-block-button, dar elementul
   vizibil e <a class="wp-block-button__link"> dinauntru. Daca stilezi wrapper-ul,
   ramai cu o rama colorata in jurul butonului implicit al temei. */
.ap-btn { display: inline-flex; background: none; border: 0; padding: 0; }

.ap-btn .wp-block-button__link,
a.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-s2);
  min-height: 46px;
  padding: 0 var(--ap-s5);
  border: 1px solid transparent;
  border-radius: var(--ap-radius);
  font-family: var(--ap-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--ap-dur) var(--ap-ease),
              background-color var(--ap-dur) var(--ap-ease);
}

.ap-btn--primary .wp-block-button__link,
a.ap-btn--primary {
  background-color: var(--ap-brass-deep);
  color: #FFFFFF;
}
.ap-btn--ghost .wp-block-button__link,
a.ap-btn--ghost {
  background-color: transparent;
  border-color: var(--ap-hairline);
  color: var(--ap-text);
}
@media (hover: hover) and (pointer: fine) {
  .ap-btn .wp-block-button__link:hover,
  a.ap-btn:hover { transform: translate3d(0, -1px, 0); }
  .ap-btn--ghost .wp-block-button__link:hover { border-color: var(--ap-accent); }
}

/* ---------- 9. REVEAL LA SCROLL — CSS nativ, zero JavaScript ---------- */
/* Continutul e VIZIBIL implicit. Animatia se adauga doar daca browserul o
   suporta. Invers, pe un browser fara suport ar ramane sectiuni la opacity 0. */

.ap-reveal > * { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ap-reveal > * {
      animation: ap-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
  }
}
@keyframes ap-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Bara de progres la lectura — tot fara JavaScript. */
.ap-progress {
  position: sticky; top: 0; z-index: var(--ap-z-chrome);
  height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--ap-brass);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ap-progress { animation: ap-progress linear; animation-timeline: scroll(root block); }
  }
}
@keyframes ap-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 10. RAFINAMENTE TIPOGRAFICE (progressive enhancement) ---------- */
/* text-box-trim aliniaza optic titlurile. ATENTIE: `cap` taie la inaltimea
   majusculei, iar diacriticele romanesti stau DEASUPRA ei — de aici padding-ul
   compensator. De verificat vizual cu sirul de test inainte de a-l lasa activ. */
@supports (text-box-trim: trim-both) {
  .ap-display, h1, h2 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    padding-block-start: .08em;
  }
}

/* Textarea care creste singura, fara JavaScript. */
@supports (field-sizing: content) {
  .ap-form textarea { field-sizing: content; min-block-size: 6rem; max-block-size: 16rem; }
}

/* ---------- 11. KILL-SWITCH ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 12. UTILITARE DE CONTINUT ---------- */

/* Fragmentul de alama dintr-un titlu — semnatura brandului.
   O singura clasa refolosibila, nu span-uri cu stil inline. */
.ap-hl {
  color: var(--ap-accent);
  font-weight: 700;
}

/* Paragraful de intrare, sub titlu. */
.ap-lede {
  font-size: clamp(1.0625rem, .5vw + 1rem, 1.25rem);
  color: var(--ap-text-2);
  max-width: 54ch;
}

/* Citat mare, cu marcajul outline in loc de ghilimele. */
.ap-quote {
  margin: 0;
  display: grid;
  gap: var(--ap-s4);
  max-width: 32ch;
}
.ap-quote > p {
  font-family: var(--ap-serif);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ap-text);
  margin: 0;
}
.ap-quote::before {
  content: "";
  width: 24px; height: 14px;
  background-color: var(--ap-accent);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
          mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
}

/* Placeholder de media, cu dimensiuni rezervate: CLS 0 chiar si gol. */
.ap-slot-media {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ap-ratio, 16 / 9);
  border: 1px dashed var(--ap-hairline);
  border-radius: var(--ap-radius);
  color: var(--ap-text-3);
  font-size: var(--ap-t-small);
  text-align: center;
  padding: var(--ap-s4);
}
.ap-slot-media--portrait { --ap-ratio: 4 / 5; }
.ap-slot-media--reel     { --ap-ratio: 9 / 16; width: clamp(200px, 22vw, 256px); }

/* Banda de logo-uri, plata, fara panouri. */
.ap-logorow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--ap-hairline);
  border-bottom: 1px solid var(--ap-hairline);
}
.ap-logorow > * {
  padding: var(--ap-s5) var(--ap-s4);
  border-right: 1px solid var(--ap-hairline);
  font-size: var(--ap-t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-text-3);
  text-align: center;
}
.ap-logorow > *:last-child { border-right: 0; }


/* ---------- 13. HERO ---------- */
/* Compozitia vine din Claude Design: grila aproape 50/50, fotografia intinsa
   pe toata inaltimea sectiunii, si un scrim care o topeste in fundal in loc
   sa o lase lipita ca o poza de profil. */

.ap-hero { padding-block: 0 !important; }

.ap-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
@media (min-width: 60rem) {
  .ap-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

.ap-hero__text {
  display: grid;
  gap: var(--ap-s5);
  align-content: center;
  padding-block: var(--ap-hero-pad) clamp(64px, 8vw, 110px);
}

/* Fotografia umple coloana pe toata inaltimea si se dizolva spre stanga.

   BUG GASIT SI REPARAT (1 aug 2026): .ap-hero__media era, dupa conversia la
   blocuri Gutenberg, un div care contine <figure class="wp-block-image"><img>.
   Regula veche punea height:100% direct pe <img>, dar procentul unei inaltimi
   nu se rezolva decat fata de un parinte cu inaltime DEFINITA — iar <figure>
   are inaltime auto. Rezultat: height:100% cadea la "auto", object-fit:cover
   nu avea fata de ce sa "acopere", iar fara overflow:hidden pe container
   fotografia isi impunea propria inaltime intrinseca peste layout — de-aici
   senzatia ca "poza s-a dus in sus" (cadrul nu mai era cel proiectat).

   Fix: figure + img devin position:absolute; inset:0 in interiorul lui
   .ap-hero__media (care are deja inaltime definita din grid + min-height).
   Elementele pozitionate absolut isi rezolva procentele fata de containerul
   pozitionat cel mai apropiat, nu fata de parintele imediat — asta ocoleste
   complet problema lanțului de inaltimi si functioneaza indiferent cate
   wrappere mai adauga Gutenberg intre timp. */
.ap-hero__media {
  position: relative;
  margin: 0;
  min-height: clamp(340px, 52vh, 620px);
  height: 100%;
  overflow: hidden;
}
.ap-hero__media .wp-block-image,
.ap-hero__media figure {
  margin: 0;
  position: absolute;
  inset: 0;
}
.ap-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Provizoriu: prima randare CORECTA a acestei imagini (bug-ul de mai sus
     anula orice object-position anterior). Centrat, nu inca reglat fin —
     de verificat vizual dupa deploy si ajustat daca fruntea/barbia se taie. */
  object-position: center 35%;
}
.ap-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--ap-walnut) 0%,
    rgba(26, 19, 16, .55) 26%,
    rgba(26, 19, 16, 0) 62%);
}
@media (max-width: 59.99rem) {
  .ap-hero__media::after {
    background: linear-gradient(180deg,
      rgba(26, 19, 16, 0) 40%, var(--ap-walnut) 100%);
  }
}

/* Panoul SPOT UV asezat peste fotografie — singurul blur real din pagina,
   si exact cazul pentru care exista: sticla peste fotografie. */
.ap-hero__badge {
  position: absolute;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: var(--ap-z-surface);
  display: grid;
  gap: 6px;
  padding: var(--ap-s4) var(--ap-s5);
  max-width: 19rem;
  border-radius: var(--ap-radius-panel);
  border: 1px solid color-mix(in oklab, var(--ap-brass-hi) 22%, transparent);
  background-color: color-mix(in oklab, var(--ap-walnut) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ap-brass-hi) 24%, transparent),
              0 18px 44px rgba(0, 0, 0, .42);
  color: var(--ap-cream);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ap-hero__badge {
    background-color: color-mix(in oklab, var(--ap-walnut) 38%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
  }
}
@media (max-width: 48.8125rem) {
  .ap-hero__badge {
    position: static;
    max-width: none;
    margin: var(--ap-s4) 0 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-color: color-mix(in oklab, var(--ap-walnut) 88%, transparent);
  }
}
.ap-hero__badge strong {
  font-family: var(--ap-serif);
  font-size: 1.35rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ---------- 14. BUTOANE PE FUNDAL INCHIS ---------- */
/* Pe walnut, alama-inchisa cu alb e mata. Claude Design foloseste alama-deschisa
   cu text espresso — luminos, si contrastul e mai bun in ambele sensuri. */

.ap-section--dark .ap-btn--primary .wp-block-button__link {
  background-color: var(--ap-brass-lit);
  color: var(--ap-espresso);
  border-color: var(--ap-brass-lit);
}
.ap-section--dark .ap-btn--ghost .wp-block-button__link {
  color: var(--ap-cream);
  border-color: color-mix(in oklab, var(--ap-cream) 32%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .ap-section--dark .ap-btn--primary .wp-block-button__link:hover {
    background-color: var(--ap-brass-hi);
    border-color: var(--ap-brass-hi);
  }
  .ap-section--dark .ap-btn--ghost .wp-block-button__link:hover {
    border-color: var(--ap-brass-lit);
    color: var(--ap-brass-lit);
  }
}

/* ---------- 15. CARDURI CU FINISAJ SOFT-TOUCH ---------- */
/* Cardurile erau plate. Primesc acum muchia luminata de sus si adancimea
   care face diferenta intre „chenar" si „foaie de hartie groasa". */

.ap-card {
  background-image: none;
  box-shadow: inset 0 1px 0 color-mix(in oklab, #FFFFFF 80%, transparent);
}
.ap-section--dark .ap-card {
  background-color: var(--ap-walnut-raised);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--ap-brass-hi) 10%, transparent) 0%,
    rgba(0, 0, 0, 0) 46%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ap-brass-hi) 20%, transparent),
              0 10px 28px rgba(0, 0, 0, .34);
}


/* ---------- 16. BLOCURI CONVERTITE DIN HTML BRUT ---------- */
/* Regula: nimic de pe pagina nu ramane <html> brut. Fiecare componenta e
   un bloc core cu o clasa, ca sa poata fi editata din editor. */

/* Citatul, ca bloc core/quote cu varianta de stil */
.wp-block-quote.ap-quote,
.wp-block-quote.is-style-ap-quote {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--ap-s4);
  max-width: 34ch;
}
.wp-block-quote.ap-quote::before,
.wp-block-quote.is-style-ap-quote::before {
  content: "";
  width: 24px; height: 14px;
  background-color: var(--ap-accent);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
          mask: var(--ap-mark-svg) no-repeat center / 24px 14px;
}
.wp-block-quote.ap-quote p,
.wp-block-quote.is-style-ap-quote p {
  font-family: var(--ap-serif);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ap-text);
  margin: 0;
}

/* Slotul de rezultat, ca Group cu trei paragrafe */
.ap-metric p { margin: 0; }
.ap-metric .ap-metric__value {
  font-family: var(--ap-serif);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.9rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Banda de logo-uri, ca Group cu paragrafe */
.ap-logorow p { margin: 0; }

/* Badge-ul din hero, ca Group */
.ap-hero__badge p { margin: 0; }
.ap-hero__badge .ap-hero__figure { font-family: var(--ap-serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }


/* ---------- 17. GRILA DE SERVICII + IERARHIE ---------- */
/* Coloanele 46/54 cu grila imbricata lasau o gaura sub cardul mare si nu se
   aliniau pe inaltime. O singura grila rezolva ambele si e mai responsiva:
   cardul principal ocupa doua randuri, restul umplu 2x2. */

.ap-services {
  display: grid;
  gap: var(--ap-s4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (min-width: 62rem) {
  .ap-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-services > .ap-card--service { grid-column: 1; grid-row: 1 / span 2; }
}
.ap-services > .ap-card { height: 100%; }

/* Titlurile de card: NU linkuri subliniate, NU centrate, NU alama spalacita.
   Espresso plin, aliniat stanga; alama apare la hover, ca semnal, nu ca stare. */
.ap-card h3,
.ap-card h3 a {
  text-align: left;
  color: var(--ap-espresso);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ap-card h3 { font-size: clamp(1.3rem, .95rem + .9vw, 1.75rem); margin: 0; }
.ap-card--service h3 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
.ap-card h3 a { display: inline-block; border-bottom: 2px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  .ap-card:hover h3 a,
  .ap-card h3 a:hover { color: var(--ap-brass-deep); border-bottom-color: var(--ap-brass); }
}
.ap-card h3 a:focus-visible { color: var(--ap-brass-deep); }

/* Tot ce e in card sta la stanga. Nicio exceptie. */
.ap-card, .ap-card * { text-align: left; }

/* Randul de simptom — vocea clientului, deci mai vizibil decat era. */
.ap-card > p {
  color: var(--ap-cocoa);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}
.ap-card--service > p { font-size: clamp(1.0625rem, .35vw + 1rem, 1.15rem); }

/* Bullet-urile erau prea indentate si pluteau spre mijloc. */
.ap-card .ap-outline-list { gap: var(--ap-s2); margin-top: auto; padding-top: var(--ap-s3); }
.ap-card .ap-outline-list > li {
  grid-template-columns: 18px 1fr;
  gap: var(--ap-s3);
  font-size: .9375rem;
  color: var(--ap-cocoa);
}
.ap-card .ap-outline-list > li::before {
  width: 18px; height: 11px; margin-top: .4em;
  -webkit-mask-size: 18px 11px;
          mask-size: 18px 11px;
}

/* Cardul principal se distinge prin greutate, nu prin culoare tipatoare. */
.ap-card--service {
  border-color: color-mix(in oklab, var(--ap-brass) 42%, var(--ap-sand));
  box-shadow: inset 0 1px 0 color-mix(in oklab, #FFFFFF 80%, transparent),
              0 2px 0 color-mix(in oklab, var(--ap-brass) 22%, transparent);
}
.ap-card--service .ap-eyebrow { color: var(--ap-brass-deep); }

/* Cardurile sunt coloane flexibile, ca lista sa cada mereu la baza. */
.ap-card { display: flex; flex-direction: column; gap: var(--ap-s3); }

/* Banda de logo-uri: mai putin gol, text mai citibil. */
.ap-logorow > * {
  padding: var(--ap-s4) var(--ap-s3);
  font-size: .6875rem;
  color: var(--ap-cocoa);
}

/* ---------- 18. HEADER ---------- */
/* Trei stari, si numai una costa ceva:
   (a) sus, peste hero-ul walnut  — TRANSPARENT, zero cost, nu atinge LCP-ul
   (b) derulat                    — SPOT UV, singurul blur permanent din site
   (c) mobil                      — OPAC, fara blur, conform propriei reguli
   Clasele vin de la Astra (.ast-theme-transparent-header / .ast-header-sticked),
   deci nu instalam niciun plugin de sticky si nu scriem header custom. */

.site-header .site-title,
.site-header .ast-site-identity .site-title a {
  font-family: var(--ap-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* Marcajul outline langa wordmark — semnatura, la scara mica. */
.site-header .site-title::before {
  content: "";
  display: inline-block;
  width: 20px; height: 12px;
  margin-right: 10px;
  vertical-align: baseline;
  background-color: var(--ap-brass);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 20px 12px;
          mask: var(--ap-mark-svg) no-repeat center / 20px 12px;
}

/* (a) Starea transparenta: hero-ul urca pe sub header. */
.ast-theme-transparent-header .site-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .28s var(--ap-ease),
              border-color .28s var(--ap-ease);
}

/* (b) Derulat: sticla adevarata. Instanta 1 din bugetul de 2. */
.ast-header-sticked .site-header,
.ast-sticky-active .site-header,
.ast-main-header-wrap.ast-header-sticked {
  background-color: color-mix(in oklab, var(--ap-walnut) 86%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ap-brass-hi) 14%, transparent);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ast-header-sticked .site-header,
  .ast-sticky-active .site-header,
  .ast-main-header-wrap.ast-header-sticked {
    background-color: color-mix(in oklab, var(--ap-walnut) 52%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
  }
}

/* (c) Mobil: opac. Blurul pe latime mica se simte la scroll si nu merita. */
@media (max-width: 48.8125rem) {
  .ast-header-sticked .site-header,
  .ast-sticky-active .site-header,
  .ast-mobile-header-wrap,
  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background-color: var(--ap-walnut);
  }
}

/* Navigatia: subliniere de alama care creste, nu culoare care sare. */
.site-header .main-header-menu > .menu-item > a {
  position: relative;
  font-family: var(--ap-sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.site-header .main-header-menu > .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .55em;
  height: 2px;
  background: var(--ap-brass-lit);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .2s var(--ap-ease);
}
.site-header .main-header-menu > .menu-item > a:hover::after,
.site-header .main-header-menu > .menu-item > a:focus-visible::after,
.site-header .main-header-menu > .current-menu-item > a::after,
.site-header .main-header-menu > .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* CTA-ul din header: alama-deschisa cu text espresso, ca pe hero. */
.site-header .ast-custom-button,
.site-header .ast-header-button-1 .ast-custom-button {
  font-family: var(--ap-sans);
  font-weight: 600;
  border-radius: var(--ap-radius);
  padding: 10px 20px;
}

/* Bara de progres la lectura, pe muchia de jos a header-ului. Zero JavaScript. */
.ap-progress { position: fixed; top: 0; left: 0; right: 0; }

/* ---------- 19. FOOTER ---------- */
/* Ultima sectiune walnut a paginii. Separata prin marcajul outline, nu prin
   linie simpla — semnatura se inchide acolo unde a inceput, in header. */

.site-footer {
  --ap-surface:     var(--ap-walnut);
  --ap-text:        var(--ap-cream);
  --ap-text-2:      var(--ap-linen);
  --ap-text-3:      var(--ap-linen);
  --ap-accent:      var(--ap-brass-lit);
  --ap-accent-text: var(--ap-brass-lit);
  --ap-hairline:    color-mix(in oklab, var(--ap-brass-hi) 14%, transparent);
  --ap-focus:       var(--ap-brass-lit);
  position: relative;
  /* BUG REPARAT (1 aug 2026): pana aici se redefineau doar variabilele, nu si
     proprietatea reala `color`. body{color:var(--ap-espresso)} (aproape negru)
     mostenea peste fundalul walnut (tot aproape negru) — text si linkuri
     neclasate deveneau invizibile. Aceeasi regula generala se aplica oricarei
     sectiuni intunecate: fara `color:` explicit pe container, textul brut
     (paragraf fara clasa) mosteneste din <body>, nu din tokenii sectiunii. */
  color: var(--ap-text);
}
/* Acelasi bug, aceeasi reparatie, pentru orice sectiune viitoare marcata dark. */
.ap-section--dark { color: var(--ap-text); }

/* Fallback de link pentru text NEclasat din sectiuni intunecate — componentele
   deja stilizate explicit (butoane, meniul de footer, citatele) castiga prin
   specificitate mai mare si nu sunt afectate. */
.ap-section--dark a,
.site-footer a {
  color: var(--ap-accent-text);
}

/* Marcajul outline, centrat pe muchia de sus a footer-ului. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 16px;
  background-color: var(--ap-brass);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 28px 16px;
          mask: var(--ap-mark-svg) no-repeat center / 28px 16px;
}

.site-footer .ast-builder-grid-row {
  padding-block: clamp(56px, 7vw, 96px);
  gap: clamp(24px, 4vw, 56px);
}

/* Titlurile de coloana: eyebrow, nu titluri de sectiune. */
.site-footer .widget-title,
.site-footer .wp-block-heading {
  font-family: var(--ap-sans);
  font-size: var(--ap-t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ap-brass-lit);
  margin: 0 0 var(--ap-s4);
}

/* Listele de meniu: fara bullet-uri, cu ritm de citit. */
.site-footer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ap-s3);
}
.site-footer .menu a {
  color: var(--ap-linen);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 1px solid transparent;
  transition: color var(--ap-dur) var(--ap-ease),
              border-color var(--ap-dur) var(--ap-ease);
}
.site-footer .menu a:hover,
.site-footer .menu a:focus-visible {
  color: var(--ap-brass-lit);
  border-bottom-color: color-mix(in oklab, var(--ap-brass-lit) 45%, transparent);
}

/* Coloana de contact foloseste marcajul outline, ca peste tot. */
.site-footer .ap-outline-list > li { color: var(--ap-linen); font-size: .9375rem; }

/* Randul legal: mic, discret, separat prin hairline. */
.site-footer .ast-below-footer-wrap {
  border-top: 1px solid var(--ap-hairline);
  padding-block: var(--ap-s5);
}
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright * {
  font-size: var(--ap-t-small);
  color: var(--ap-linen);
}

/* ---------- 20. BREADCRUMB ---------- */
/* Pe acest site breadcrumb-ul face parte din argument ("pagina e dovada"),
   nu e un detaliu tehnic ascuns — de-aia e vizibil pe orice pagina, nu doar
   in schema. Marcajul outline rotit 90 de grade inlocuieste separatorul '/'. */

.ap-breadcrumb-wrap {
  padding-block: var(--ap-s5) 0;
  font-size: var(--ap-t-small);
}
.ap-breadcrumb-wrap .rank-math-breadcrumb {
  margin: 0;
  color: var(--ap-text-3);
}
.ap-breadcrumb-wrap .rank-math-breadcrumb a {
  color: var(--ap-text-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ap-dur) var(--ap-ease), border-color var(--ap-dur) var(--ap-ease);
}
.ap-breadcrumb-wrap .rank-math-breadcrumb a:hover,
.ap-breadcrumb-wrap .rank-math-breadcrumb a:focus-visible {
  color: var(--ap-accent-text);
  border-bottom-color: currentColor;
}
/* Ultimul element (pagina curenta) e text simplu, nu link — il marcam totusi
   ca fiind "aici" prin greutate, nu prin culoare (culoarea ar strica AA-ul
   daca cineva schimba tokenii mai tarziu). */
.ap-breadcrumb-wrap .rank-math-breadcrumb span[itemprop="itemListElement"]:last-child {
  color: var(--ap-text);
  font-weight: 600;
}
.ap-crumb-sep {
  display: inline-block;
  width: 10px; height: 14px;
  vertical-align: -2px;
  transform: rotate(90deg);
  background-color: var(--ap-hairline);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 10px 14px;
          mask: var(--ap-mark-svg) no-repeat center / 10px 14px;
}

/* ---------- 21. SLOT DE REZULTAT — rafinat ---------- */
/* Placeholderul textual era la aceeasi scara ca o cifra reala (2-3.25rem) —
   pe un text lung ca "[result to be completed]" arata supradimensionat si
   se rupe urat. Starea goala e acum mica si discreta; cand vine cifra reala
   (marcata data-filled), :has() o promoveaza la scara mare, serif, tabulara. */
.ap-metric {
  padding: var(--ap-s5);
  min-height: 168px;
  align-content: start;
  gap: var(--ap-s3);
}
.ap-metric::before {
  content: "";
  width: 22px; height: 13px;
  background-color: var(--ap-hairline);
  -webkit-mask: var(--ap-mark-svg) no-repeat center / 22px 13px;
          mask: var(--ap-mark-svg) no-repeat center / 22px 13px;
}
.ap-metric__value {
  font-family: var(--ap-sans);
  font-size: .9375rem;
  font-style: italic;
  font-variant-numeric: normal;
  color: var(--ap-text-3);
  line-height: 1.5;
}
.ap-metric:has(.ap-metric__value[data-filled]) {
  border-style: solid;
  border-color: var(--ap-hairline);
}
.ap-metric:has(.ap-metric__value[data-filled])::before { background-color: var(--ap-accent); }
.ap-metric:has(.ap-metric__value[data-filled]) .ap-metric__value {
  font-family: var(--ap-serif);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--ap-text);
}

/* ---------- 22. SLOT DE ARTICOL — empty state pentru "From the blog" ---------- */
/* Cu zero articole publicate, wp:latest-posts randeaza gol — o gaura tacuta
   in pagina. Un slot documentat, ca la portret/rezultate/clipuri, e mai
   credibil decat o sectiune goala care pare o eroare. */
.ap-article-slot { color: var(--ap-text-3); }
.ap-article-slot h3 {
  color: var(--ap-text-3);
  font-style: italic;
  font-weight: 400;
}

/* ---------- 23. FOOTER — corectii de cascada ---------- */
/* Astra pune fundal separat pe FIECARE rand de footer, peste fundalul lui
   .site-footer. Setarea culorii doar pe .site-footer nu se vede niciodata,
   pentru ca randurile o acopera integral. Fundalurile se rezolva acum din
   optiunile corecte (hb-/hbb-footer-bg-obj-responsive), nu de aici.

   Ce ramane de corectat in CSS: bordurile randurilor vin pe --ast-global-color-7
   (nisip plin). Pe walnut, o linie de nisip la opacitate maxima e mult mai tare
   decat hairline-ul din restul site-ului — o aducem la acelasi registru. */
.site-primary-footer-wrap,
.site-below-footer-wrap {
  border-top-color: color-mix(in oklab, var(--ap-brass-hi) 12%, transparent) !important;
}