/* ==========================================================================
   Home Medica — showpieces.css
   Custom sections. Motion/behaviour is separate from content: every rule
   here targets semantic classes; no text or media lives in CSS or JS.
   A. Hero reveal          (.hero--reveal, .hero-reveal-item, .hero-media)
   B. Process path         (.process, .process-track, .process-step, .process-node)
   C. Coverage checker     (.coverage, .coverage-chip, .coverage-result)
   All motion is disabled under prefers-reduced-motion.
   ========================================================================== */

/* A. Hero reveal ---------------------------------------------------------- */
/* Items rise in sequence; order comes from DOM order via --reveal-i (set by hero.js).
   LCP-safe: the H1 and the photo (the LCP candidates) are visible from the first paint and only
   move (transform). No opacity: 0 / clip-path on them, which would delay LCP until the animation ends.
   The smaller items (trust cards, buttons, stats) still fade in. */
@media (prefers-reduced-motion: no-preference) {
  .hero--reveal .hero-reveal-item {
    animation: hm-rise .7s var(--ease) both;
    animation-delay: calc(var(--reveal-i, 0) * 80ms + 60ms);
  }
  .hero--reveal .hero-headline.hero-reveal-item { animation-name: hm-rise-soft; animation-delay: 0s; }
  .hero--reveal .hero-image { animation: hm-settle 1.6s var(--ease) both; }
  .hero--reveal .stats { animation: hm-rise .7s var(--ease) .45s both; }
  @media (min-width: 1025px) {
    .hero--reveal .stats { animation-delay: .6s; }
  }
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-rise-soft { from { transform: translateY(10px); } to { transform: none; } }
/* Small scale: nothing clips the photo any more, so it must stay inside the page gutter */
@keyframes hm-settle { from { transform: scale(1.03); } to { transform: none; } }

/* B. Process path ("Cum decurge vizita") --------------------------------- */
.process-flow { position: relative; }
.process-steps {
  list-style: none;
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-left: 68px;
}
.process-track {
  position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden;
}
.process-track-fill {
  position: absolute; inset: 0; background: #fff;
  transform-origin: top center; transform: scaleY(var(--process-progress, 1));
}
.process-step { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.process-node {
  position: absolute; left: -68px; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-ink); border: 2px solid rgba(255, 255, 255, .28); color: #fff;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.process-node .icon { width: 22px; height: 22px; }
.process-num { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.process-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.35; }
.process-text { color: var(--c-on-dark-muted); line-height: 1.55; }
@media (min-width: 1025px) { .process-text { max-width: 40ch; } }
/* Enhanced state (JS running): steps light up as the line reaches them */
.process.is-enhanced .process-step { transition: opacity .4s var(--ease); opacity: .42; }
.process.is-enhanced .process-step.is-active { opacity: 1; }
.process.is-enhanced .process-step.is-active .process-node { background: #fff; color: var(--c-ink); border-color: #fff; transform: scale(1.04); }
.process-cta { margin-top: var(--s-6); }
@media (min-width: 1025px) {
  .process-steps { flex-direction: row; gap: var(--s-6); padding-left: 0; padding-top: 80px; }
  .process-step { flex: 1 1 0; min-width: 0; }
  .process-track {
    top: 23px; bottom: auto; left: 24px; width: auto; height: 2px;
    right: calc((100% - 3 * var(--s-6)) / 4 - 24px);
  }
  .process-track-fill { transform-origin: left center; transform: scaleX(var(--process-progress, 1)); }
  .process-node { left: 0; top: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-track-fill { transform: none !important; }
  .process.is-enhanced .process-step { opacity: 1; }
}

/* C. Coverage checker ("Venim și la tine?") ------------------------------ */
.coverage-panel { display: flex; flex-direction: column; gap: var(--s-4); max-width: 760px; }
.coverage-pick { display: none; flex-direction: column; gap: 10px; }
.coverage.is-enhanced .coverage-pick { display: flex; }
.coverage-label { font-weight: 800; color: var(--c-ink); }
.coverage-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-chip { cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.coverage-chip:hover { border-color: var(--c-ink); }
.coverage-chip[aria-pressed="true"] { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.coverage-result:empty { display: none; }
.coverage-answer {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border-radius: var(--r-md); background: var(--c-ok-bg); color: var(--c-ink);
}
.coverage-answer .icon { width: 26px; height: 26px; color: var(--c-ok); }
.coverage-answer-body { display: flex; flex-direction: column; gap: 4px; }
.coverage-answer-title { font-weight: 800; font-size: 1.0625rem; }
.coverage-answer a { font-weight: 800; }

.coverage-all { margin-top: var(--s-2); }
.coverage-all > summary { cursor: pointer; font-weight: 700; color: var(--c-navy); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.coverage-all > summary::-webkit-details-marker { display: none; }
.coverage-all > summary .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.coverage-all[open] > summary .icon { transform: rotate(180deg); }
.coverage-groups { display: flex; flex-direction: column; gap: var(--s-4); padding-top: 8px; }
.coverage-group-title { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 6px; }
.coverage-places { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-sm); color: var(--c-text); }

@media (prefers-reduced-motion: reduce) {
  .coverage-chip, .coverage-all > summary .icon { transition: none; }
}