/* Zovya Travels — How Booking Works stepper stylesheet (Phase 2, redesigned).
   White editorial surface: serif head, node stepper on a journey rail whose
   gold fill draws with the scroll (native scroll-driven animation +
   IntersectionObserver fallback), auto-fit grid with subgrid-aligned rows.
   Modern-web-guidance compliance: transform/opacity motion only, explicit
   transition properties, @supports-gated animation-timeline (declaration
   order: shorthand first, timeline after), reduced-motion cutoff,
   tabular numerals, balanced headings, semantic <ol> order preserved.
   Depends on header-style.css tokens (always linked together). */

.steps-section {
  background-color: #FFFFFF;
  color: var(--color-navy);
  padding: 85px 0 95px;
}
.steps-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.steps-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.16;
  color: var(--color-navy);
  margin: 0 0 12px;
  text-wrap: balance;
}
.steps-sub {
  font-size: 15px;
  color: var(--color-navy-muted);
  line-height: 1.6;
  margin: 0;
}
/* Journey rail: faint static track + gold progress fill that draws on scroll */
.steps-rail { position: relative; }
.steps-line,
.steps-fill {
  position: absolute;
  top: 27px;
  left: 11%;
  right: 11%;
  height: 2px;
}
.steps-line {
  background: linear-gradient(to right, transparent, rgba(138, 110, 47, 0.28) 18%, rgba(138, 110, 47, 0.28) 82%, transparent);
}
.steps-fill {
  background: linear-gradient(to right, transparent, var(--color-gold) 18%, var(--color-gold) 82%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
}
/* Fallback (Firefox / no scroll timelines): IO .is-in draws the fill */
.js .steps-rail .steps-fill { transition: transform 1.1s cubic-bezier(0.32, 0.72, 0, 1) 0.25s; }
.js .steps-section.is-in .steps-fill { transform: scaleX(1); }
/* Native scroll-driven draw (progressive enhancement over the fallback) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view())) {
    @keyframes steps-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .steps-fill {
      animation: steps-draw-x auto linear both;
      animation-timeline: view();
    }
  }
}
/* Steps grid: resilient auto-fit columns; rows aligned across cards via
   subgrid (same-cascade fallback directly above for older browsers) */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 0 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  display: grid;
  grid-row: span 3;
  grid-template-rows: auto auto 1fr;
  grid-template-rows: subgrid;
  justify-items: center;
  text-align: center;
  padding: 0 6px;
  min-width: 0;
}
.step-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(27, 42, 94, 0.12), 0 0 0 8px #FFFFFF;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.35s cubic-bezier(0.32, 0.72, 0, 1), color 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.step:hover .step-node { transform: scale(1.08); background: var(--color-gold); color: #000; }
.step h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 8px;
  text-wrap: balance;
  min-width: 0;
}
.step p {
  font-size: 14px;
  color: var(--color-navy-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 32ch;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Scroll entry: rise + settle, staggered per step */
.js .steps-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.32, 0.72, 0, 1), transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .steps-section.is-in .steps-reveal { opacity: 1; transform: none; }

/* Steps responsive: vertical timeline on mobile */
@media (max-width: 768px) {
  .steps-section { padding: 60px 0 68px; }
  .steps-head { margin-bottom: 40px; }
  .steps-line,
  .steps-fill {
    top: 12px;
    bottom: 12px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .steps-line { background: linear-gradient(to bottom, transparent, rgba(138, 110, 47, 0.28) 18%, rgba(138, 110, 47, 0.28) 82%, transparent); }
  .steps-fill {
    background: linear-gradient(to bottom, transparent, var(--color-gold) 18%, var(--color-gold) 82%, transparent);
    transform: scaleY(0);
    transform-origin: top center;
  }
  .js .steps-rail .steps-fill { transition: transform 1.1s cubic-bezier(0.32, 0.72, 0, 1) 0.25s; }
  .js .steps-section.is-in .steps-fill { transform: scaleY(1); }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view())) {
      @keyframes steps-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
      .steps-fill {
        animation: steps-draw-y auto linear both;
        animation-timeline: view();
      }
    }
  }
  .steps-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 30px; }
  .step { grid-row: auto; grid-template-rows: none; grid-template-columns: 56px 1fr; gap: 6px 18px; text-align: left; align-items: start; justify-items: start; }
  .step-node { margin-bottom: 0; box-shadow: 0 8px 22px rgba(27, 42, 94, 0.12), 0 0 0 6px #FFFFFF; }
  .step h3 { margin-top: 2px; }
  .step p { margin-left: 0; max-width: none; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .step-node, .js .steps-reveal, .js .steps-rail .steps-fill, .steps-fill { transition: none; animation: none; }
  .js .steps-reveal { opacity: 1; transform: none; }
  .js .steps-section.is-in .steps-fill, .steps-fill { transform: none; }
  .step:hover .step-node { transform: none; }
}