/* =============================================================================
   Iktató — „ÍGY MŰKÖDIK” a termék-nyitólapon (#igy-mukodik): görgetés-vezérelt 3D réteg-torony.
   Elrendezés: BALRA a ragadós (sticky) vizuál, JOBBRA a kilenc lépés szövege, amely görgetésre váltakozik.
   A rétegek rajza a torony-reteg.css-ben, a 3D-vászon a torony-szinpad.css-ben, a záró sáv a torony-cta.css-ben.
   ÁTVÉVE: modulok/three-scrolly-reteg-torony (flow.css), az `f-` előtagú osztályrendszerre nevezve át.
   Telefonon (≤ 900 px) egy oszlop: a vizuál felül ragad, a lépések alatta görögnek; ≤ 768 px alatt nincs 3D.
   ============================================================================= */
.f-igy { background: var(--f-card); }

.f-igy__racs {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* A lépések a jobb oszlopban, a vizuál a bal oszlopban (a DOM-ban a szöveg áll elöl: olvasási sorrend). */
.f-igy__lepesek {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0 0 50vh; /* alsó ráhagyás: a vizuál a 09. lépés után is ragad (p = 8,5-ig), amíg a pecsét leér */
  list-style: none;
}

.f-igy__lepes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: 72vh;
  padding-block: 4vh;
}
.f-igy__lepes h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.f-igy__lepes p { max-width: 46ch; margin: 0; line-height: 1.6; color: var(--f-ink-soft); }
.f-igy__lepes .f-eyebrow { margin-bottom: 0; }
.f-igy__lepes--emberi h3 { color: var(--f-primary-ink); }

/* Csak ha a JS elindult, halványodnak a nem aktív lépések (JS nélkül minden teljes fényerejű). */
.f-igy.is-js .f-igy__lepes { opacity: 0.4; transition: opacity 400ms var(--ease); }
.f-igy.is-js .f-igy__lepes.is-aktiv { opacity: 1; }

/* A ragadós vizuál: a ragadó fejléc (68 px) alatt kezdődik. */
.f-igy__vizual {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 88px;
  height: clamp(440px, calc(100vh - 112px), 720px);
  overflow: hidden;
  border-radius: var(--r-section);
  background: var(--f-hero);
  border: 1px solid var(--f-line);
}

/* Lépésszámláló és folyamatsáv a vizuál tetején */
.f-igy__meta {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f-grey);
}
.f-igy__szamlalo b { color: var(--f-ink); font-weight: 500; }
.f-igy__sav { flex: 1; max-width: 180px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--f-line); }
.f-igy__sav i {
  display: block;
  height: 100%;
  width: calc(var(--haladas, 0) * 100%);
  background: var(--f-primary);
  transition: width 400ms var(--ease);
}

@media (max-width: 900px) {
  .f-igy__racs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .f-igy__vizual { grid-column: 1; grid-row: 1; top: 76px; height: 46vh; z-index: 2; border-radius: var(--r-card); box-shadow: var(--glass-depth-2); }
  .f-igy__lepesek { grid-column: 1; grid-row: 2; padding-bottom: 12vh; }
  .f-igy__lepes { min-height: 62vh; padding-top: 6vh; }
}

/* Telefon: a lépésszövegek mind teljes fényerejűek, hogy görgetés közben is olvashatók maradjanak. */
@media (max-width: 768px) {
  .f-igy.is-js .f-igy__lepes { opacity: 1; }
  .f-igy__lepes { min-height: 54vh; }
}

/* Mozgás nélkül: minden lépés teljes fényerővel, átmenet nélkül */
@media (prefers-reduced-motion: reduce) {
  .f-igy.is-js .f-igy__lepes { opacity: 1; transition: none; }
  .f-igy__sav i { transition: none; }
}