/* ============================================================
   ALINA MIHAIL — servicii & prețuri
   Un singur fișier pentru cele două pagini: împart același hero
   de pagină, aceleași siluete decupate și aceeași listă de prețuri.
   Se încarcă după core / motion / components / home.
   ============================================================ */

/* ---------- 1. HERO DE PAGINĂ ----------
   Scurt, nu pe tot ecranul: pe paginile interioare vizitatoarea a venit
   după informație, nu după o poză mare. */
.phero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.2rem, 7vh, 5rem));
  padding-bottom: clamp(2.6rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(58vw 52vh at 80% 16%, rgba(232, 213, 168, .48), transparent 70%),
    radial-gradient(44vw 40vh at 2% 94%, rgba(201, 169, 97, .14), transparent 72%),
    var(--ivory);
}
.phero__fan {
  position: absolute;
  right: -7vw;
  top: 4%;
  width: min(40vw, 420px);
  opacity: .15;
  transform: rotate(7deg);
  pointer-events: none;
}
.phero__in { position: relative; z-index: 1; }
.phero--split .phero__in {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
}
.phero__copy { min-width: 0; }
.phero__h { margin-top: .9rem; max-width: 17ch; }
.phero__script {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  color: var(--ink);
  margin-block: .3rem .2rem;
}
.phero__lede { margin-top: 1.2rem; max-width: 46ch; }
.phero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.phero__meta li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.phero__meta svg { width: 17px; height: 17px; flex: none; color: var(--gold-deep); }
.phero__cta { margin-top: 1.9rem; }

/* ---------- 2. SILUETE DECUPATE ----------
   Fotografiile au fundalul scos. Nu le pun în chenar cu `cover`: le așez
   peste un halou cald și le dau umbră la sol dintr-un gradient pe ::after.
   `filter: drop-shadow()` ar recalcula o mască blurată la fiecare compunere
   — aceeași decizie ca în home.css. */
.silo {
  position: relative;
  margin: 0;
  justify-self: center;
  isolation: isolate;
  display: grid;
  place-items: end center;
  width: 100%;
}
.silo::before {
  content: "";
  position: absolute;
  inset: 3% -8% 3% -8%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(232, 213, 168, .6), rgba(247, 243, 234, 0) 70%);
  pointer-events: none;
}
.silo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: 58%;
  height: 7%;
  translate: -50% 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(11, 11, 12, .22), rgba(11, 11, 12, 0) 70%);
  pointer-events: none;
}
.silo img {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 62svh;
  object-fit: contain;
  object-position: bottom;
}
.dark .silo::before { background: radial-gradient(circle at 50% 46%, rgba(201, 169, 97, .24), rgba(11, 11, 12, 0) 66%); }
.dark .silo::after  { background: radial-gradient(ellipse, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%); }
.ivory2 .silo::before { background: radial-gradient(circle at 50% 46%, rgba(232, 213, 168, .72), rgba(241, 234, 220, 0) 70%); }

/* ---------- 3. SĂRITURI LA SECȚIUNE ---------- */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.jump a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62em 1.15em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft), background .4s var(--ease-soft);
}
.jump a:hover { color: var(--fg); border-color: var(--gold-line); background: rgba(201, 169, 97, .12); }
.jump svg { width: 13px; height: 13px; flex: none; color: var(--gold-deep); }

/* ---------- 4. LISTA DE PREȚURI ----------
   Panoul care ține grupurile din components.css. Prețul scris, nu fotografiat:
   se citește la orice mărime, se copiază și se schimbă într-o secundă. */
.plist { max-width: 1000px; margin-inline: auto; }
.plist__panel {
  padding: clamp(1.3rem, 3.2vw, 3rem);
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  box-shadow: 0 46px 90px -66px rgba(11, 11, 12, .45);
}
.dark .plist__panel {
  background: rgba(247, 243, 234, .045);
  border-color: rgba(247, 243, 234, .14);
  box-shadow: none;
}
.plist .price-group:last-child { margin-bottom: 0; }

/* Punctele dintre serviciu și preț — leader de meniu, fără markup în plus.
   Textul rămâne un element anonim de flex, linia punctată e ::after. */
.plist .price-row__n { display: flex; align-items: baseline; gap: .9rem; }
.plist .price-row__n::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  translate: 0 -.3em;
  border-bottom: 1px dotted rgba(201, 169, 97, .55);
}
.price-row__p b { font-weight: 500; }

/* Notele de sub listă */
.pnotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: .9rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.pnotes .price-note { margin-top: 0; }
.pnotes .price-note b { display: block; font-weight: 600; margin-bottom: .2rem; }

/* Subsolul listei oficiale */
.plist__sign {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--gold-line);
  text-align: center;
}
.plist__sign p {
  font-size: var(--t-xs);
  letter-spacing: .26em;
  line-height: 2;
  color: var(--muted);
}
.plist__sign svg { width: clamp(38px, 5vw, 52px); height: auto; margin: 0 auto 1rem; opacity: .9; }

/* ---------- 5. SECȚIUNE DE SERVICIU ---------- */
.svc__in { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.svc--fig .svc__in { grid-template-columns: 1.06fr .94fr; }
.svc--rev .svc__fig { order: -1; }
.svc__copy { min-width: 0; }
.svc__h { margin-top: .9rem; max-width: 18ch; }
.svc__p { margin-top: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.svc__p + .svc__p { margin-top: .9rem; }
.svc__ticks { margin-top: 1.5rem; max-width: 52ch; }
.svc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.9rem;
}
/* Coloana a doua când nu e fotografie, ci o lămurire lângă text. */
.svc__aside { min-width: 0; }

/* Eticheta de preț — trimite la pagina de prețuri, nu o înlocuiește */
.tag {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5em 1.1em;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}
.tag b {
  font-family: var(--display);
  font-size: 1.55em;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--fg);
}
.dark .tag { color: var(--gold); border-color: rgba(201, 169, 97, .5); }

/* ---------- 6. EFECTE SPECIALE ---------- */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(.8rem, 1.8vw, 1.5rem);
}
.fx__i { width: 22px; height: 22px; color: var(--gold); }

/* ---------- 7. CUM DECURGE O ȘEDINȚĂ ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
html.motion .step { opacity: 0; transform: translateY(20px); }
.step {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  transition: opacity .75s var(--ease-out) var(--d, 0ms), transform .75s var(--ease-out) var(--d, 0ms);
}
.step.is-in { opacity: 1; transform: none; }
.step__n {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-deep);
}
.dark .step__n { color: var(--gold); }
.step__t { font-family: var(--display); font-size: var(--t-lg); font-weight: 500; line-height: 1.2; }
.step__d { font-size: var(--t-sm); color: var(--muted); line-height: 1.62; }

/* ---------- 8. ÎNGRIJIRE ---------- */
.care { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.6rem, 4vw, 3.4rem); }
.care li { break-inside: avoid; }

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .phero--split .phero__in { grid-template-columns: 1fr; gap: 1.4rem; }
  .phero--split .phero__fig { order: -1; }
  .phero__fig img { max-height: 34svh; }
  .svc--fig .svc__in { grid-template-columns: 1fr; }
  .svc--fig .svc__fig { order: -1; }
  .svc__fig img { max-width: 320px; max-height: 42svh; }
  .svc__h { max-width: none; }
  .care { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* „Extensii de gene Russian Volume" nu încape pe un rând la 360px, iar
     titlul de grup e `nowrap` în components.css. Aici îl las să curgă. */
  .price-group__head { flex-wrap: wrap; gap: .6rem 1rem; }
  .price-group__t { white-space: normal; }
  .price-group__head .rule { flex: 1 0 40%; }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Pe o coloană prețul coboară sub nume (components.css), iar linia
     punctată nu mai duce nicăieri. */
  .plist .price-row__n::after { display: none; }
  .plist .price-row__n { display: block; }
  .jump a { padding: .6em 1em; }
}