/* ==========================================================================
   Mozgás Műhely – theme.css
   Alapja: főoldal-design.md
   ========================================================================== */


:root {
  /* Színek (arculat.pdf) */
  --color-background: #F7F7F7;
  --color-white: #FFFFFF;
  --color-surface-warm: #DECAB6;
  --color-muted: #A8A8A8;
  --color-heading: #353535;
  --color-dark: #1D1D1D;
  --color-accent: #DECAB6;

  /* Tipográfia */
  --font-heading: 'Play', sans-serif;
  --font-body: 'Quicksand', sans-serif;

  --size-h1: 50px;
  --size-h2: 40px;
  --size-h3: 30px;
  --size-h4: 25px;
  --size-body: 18px;
  --size-cta: 20px;

  /* Spacing skála */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2.5rem;   /* 40px */
  --space-xl: 4rem;     /* 64px */
  --space-2xl: 6rem;    /* 96px */
  --space-3xl: 8rem;    /* 128px */

  /* Layout */
  --container-max: 1600px;
  --content-max: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-dark);
  background-color: var(--color-background);
  line-height: 1.6;
  width: 100%;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.15;
}
h1 { font-size: var(--size-h1); font-weight: 400; }
h2 { font-size: var(--size-h2); font-weight: 400; }
h3 { font-size: var(--size-h3); }
h4 { font-size: var(--size-h4); }

p { margin: 0 0 var(--space-sm); }

ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* Natív <button> chrome eltávolítása, hogy a .btn osztály ugyanúgy nézzen ki
   <button> elemen (pl. űrlap submit gomb), mint <a class="btn">-on. */
button {
  font: inherit;
  color: inherit;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: 9rem 0;
}

.section--dark {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-background);
  background-image: url("../../img/mozgas-muhely-galeria-36.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Az edzéstípusok oldal "Mire helyezzük a fókuszt?" szekciója saját háttérképet kap */
.section--dark--fokusz {
  background-image: url("../../img/mozgas-muhely-galeria-40.webp");
}
.section--dark--fokusz::before {
  opacity: 0.7;
}
/* Sötétítő réteg a háttérkép felett, hogy a kártyák jól olvashatók maradjanak */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-heading);
  opacity: 0.5;
}
.section--dark > .container {
  position: relative;
  z-index: 1;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-background); }

.section--muted {
  background-color: var(--color-muted);
}

.section-intro {
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto var(--space-xl);
}
.section-intro--wide {
  max-width: 800px;
}
.section-intro .eyebrow {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

/* Gombok
   ------------------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--size-cta);
  padding: 0.85em 2em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
}
.btn--primary:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
}
.btn--outline {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn--outline:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
}
.btn--outline-light {
  background-color: transparent;
  color: var(--color-background);
  border-color: var(--color-background);
}
.btn--outline-light:hover {
  background-color: var(--color-background);
  color: var(--color-dark);
}
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 15px;
  color: var(--color-dark);
  transition: color .2s ease, gap .2s ease;
}
.link-arrow:hover { color: var(--color-accent); gap: 0.6em; }

/* ==========================================================================
   KAPCSOLAT ŰRLAP → patterns/kapcsolat-urlap.php
   Egyszerű, keretes input/textarea stílus, ami illeszkedik a .split-bleed
   képkeret vizuális nyelvéhez (2px sötét keret, 4px lekerekítés). Fókuszban
   a keret bézs színre vált.
   ========================================================================== */
.contact-form__card {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  padding: var(--space-lg);
}
.contact-form__group {
  margin-bottom: var(--space-md);
}
.contact-form__group input,
.contact-form__group textarea {
  width: 100%;
  padding: 0.85em 1em;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-dark);
  background-color: var(--color-white);
  border: 1px solid var(--color-muted);
  border-radius: 4px;
  transition: border-color .2s ease;
}
.contact-form__group textarea {
  min-height: 160px;
  resize: vertical;
}
.contact-form__group input:focus,
.contact-form__group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.contact-form__group.is-invalid input,
.contact-form__group.is-invalid textarea {
  border-color: #b43c3c;
}
.contact-form__consent.is-invalid label {
  color: #b43c3c;
}
.contact-form__group input::placeholder,
.contact-form__group textarea::placeholder {
  font-family: var(--font-body);
  color: var(--color-muted);
}
.contact-form .btn {
  margin-top: var(--space-xs);
  padding: 0.6em 1.5em;
  font-size: 0.85rem;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.contact-form .btn:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  transform: scale(1.06);
}
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: var(--space-md);
}
.contact-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.contact-form__consent label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
  cursor: pointer;
}
.contact-form__consent a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color .2s ease;
}
.contact-form__consent a:hover {
  color: var(--color-dark);
}

/* Honeypot mező – bot-csapda, vizuálisan és screen readerből is elrejtve,
   de a DOM-ban marad, hogy a botok kitölthessék. */
.contact-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sikeres / hibás beküldés visszajelzés – a .contact-form__card tetején
   jelenik meg, ugyanazt a keretes-lekerekített vizuális nyelvet követi,
   mint a kártya, csak státusz-színezéssel. */
.contact-form__notice {
  padding: 0.85em 1em;
  margin-bottom: var(--space-md);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.contact-form__notice p {
  margin: 0;
}
.contact-form__notice--success {
  background-color: rgba(222, 202, 182, 0.35);
  border: 1px solid var(--color-accent);
  color: var(--color-dark);
}
.contact-form__notice--error {
  background-color: rgba(180, 60, 60, 0.08);
  border: 1px solid #b43c3c;
  color: #b43c3c;
}

/* Elérhetőségek blokk – ugyanaz a pöttyös lista, mint az .arrow-list, az
   e-mail cím bézs kiemeléssel */
.contact-info__title {
  font-weight: 300;
}
.contact-info__list {
  margin: var(--space-sm) 0 var(--space-lg);
}
.contact-info__list li {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-sm);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contact-info__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 0.8em;
  border-radius: 50%;
  background-color: var(--color-surface-warm);
  transform: translateY(-0.15em);
}
.contact-info__email {
  color: var(--color-accent);
  transition: color .2s ease;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contact-info__email:hover {
  color: var(--color-dark);
}
.contact-info__map {
  position: relative;
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.contact-info__map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}
.contact-info__map-link {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Kép placeholder
   ------------------------------------------------------------------------ */
.img-placeholder {
  background: repeating-linear-gradient(
    45deg,
    var(--color-muted) 0px,
    var(--color-muted) 1px,
    var(--color-background) 1px,
    var(--color-background) 12px
  );
  border: 1px dashed var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-heading);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--space-sm);
  min-height: 220px;
}

/* ==========================================================================
   HEADER → parts/header.html
   ========================================================================== */
.site-header {
  background-color: var(--color-heading);
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: 25px;
  margin-bottom: -105px; /* 25px margin-top + 80px magasság: a hero ennyivel húzódik fel alá */
  box-shadow: 0 6px 16px rgba(29,29,29,0.35);
  transition: margin-top .2s ease;
}
.site-header.is-stuck {
  margin-top: 0;
}
.site-header .container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.site-header__nav {
  display: flex;
  gap: var(--space-lg);
}
.site-header__nav a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-background);
  transition: color .2s ease;
}
.site-header__nav a:hover { color: var(--color-accent); }
.site-header__nav a.is-current { color: var(--color-accent); }
.site-header__nav--left { justify-self: end; }
.site-header__nav--right { justify-self: start; }
.site-header__logo { justify-self: center; }
.site-header__logo img { height: 48px; margin: 0 35px; }

/* Hamburger gomb – csak mobilon jelenik meg (ld. reszponzív blokk lentebb) */
.site-header__toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 22px;
  height: 16px;
  position: relative;
  z-index: 31;
}
.site-header__toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-background);
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.site-header__toggle span:nth-child(1) { top: 0; }
.site-header__toggle span:nth-child(2) { top: 7px; }
.site-header__toggle span:nth-child(3) { top: 14px; }
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Mobil navigációs lenyíló panel – a header alól gördül le, nem takarja el a teljes oldalt */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 30;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.mobile-nav.is-open {
  grid-template-rows: 1fr;
}
.mobile-nav__inner {
  overflow: hidden;
  min-height: 0;
}
.mobile-nav__links {
  background-color: var(--color-heading);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}
.mobile-nav__links a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--color-background);
  transition: color .2s ease;
}
.mobile-nav__links a:hover,
.mobile-nav__links a.is-current { color: var(--color-accent); }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   HERO → patterns/hero.php
   ========================================================================== */
.hero {
  position: relative;
  color: var(--color-background);
  height: 1000px;
  margin-top: -105px;
  display: flex;
  flex-direction: column;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(53, 53, 53, 0.6);
  z-index: 1;
}
/* A .site-header és .stats-bar a .hero belsejébe kerül,
   így a margóik résein átlátszik a hero háttérképe – "lebegő" hatás. */
.hero .stats-bar {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  margin-bottom: 50px;
  background-color: var(--color-muted);
}
.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}
.hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 20px;
  margin-bottom: var(--space-sm);
  color: var(--color-background);
}
.hero__title {
  color: var(--color-background);
  margin-bottom: var(--space-md);
}
.hero__title-accent {
  color: var(--color-accent);
}
.hero__text {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: var(--space-lg);
  color: var(--color-background);
}
.hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero__eyebrow,
.hero__title,
.hero__text,
.hero__actions {
  opacity: 0;
  animation: hero-fade-in-up 1.3s ease forwards;
}
.hero__eyebrow { animation-delay: 0.2s; }
.hero__title { animation-delay: 0.5s; }
.hero__text { animation-delay: 0.8s; }
.hero__actions { animation-delay: 1.1s; }

.hero .btn {
  padding: 0.5em 1.4em;
  font-size: 16px;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.hero .btn:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
  transform: scale(1.06);
}

/* ==========================================================================
   PAGE HERO → patterns/page-hero.php (belső oldalak, pl. GYIK, Rólunk, Kapcsolat)
   Kisebb, egyszerűsített hero-változat aloldalakhoz: ugyanaz a "lebegő fejléc"
   trükk, mint a főoldali .hero-nál (margin-top: -105px + a fejléc a hero
   belsejében lebeg), de alacsonyabb magassággal és csak cím + rövid felvezető
   szöveggel, kép nélküli tartalommal.
   ========================================================================== */
.page-hero {
  position: relative;
  color: var(--color-background);
  height: 420px;
  margin-top: -105px;
  display: flex;
  flex-direction: column;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(53, 53, 53, 0.65);
  z-index: 1;
}
.page-hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 105px;
  max-width: 100%;
}
.page-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  margin-bottom: var(--space-xs);
  color: var(--color-background);
}
.page-hero__title {
  color: var(--color-background);
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.page-hero__eyebrow,
.page-hero__title {
  opacity: 0;
  animation: hero-fade-in-up 1.3s ease forwards;
}
.page-hero__eyebrow { animation-delay: 0.2s; }
.page-hero__title { animation-delay: 0.5s; }

/* ==========================================================================
   STATS BAR → patterns/stats-bar.php
   ========================================================================== */
.stats-bar {
  background-color: var(--color-muted);
  border-top: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  display: flex;
  justify-content: center;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.stats-bar__viewport {
  width: 900px;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.stats-bar__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.stats-bar__item {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: center;
  padding: 0.2em var(--space-md);
  border-left: 1px solid rgba(29,29,29,0.15);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-heading);
}

/* ==========================================================================
   MIT KELL TUDNI → patterns/mit-kell-tudni.php
   ========================================================================== */
.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 1024px felett a teljes var(--space-2xl) (96px) hely marad a kép és a
     szöveg között; 1024px alatt ez a hely fokozatosan, dinamikusan csökken,
     de 768px-ig (a mobil, egyoszlopos nézetig) sosem éri el var(--space-lg)
     (40px) alá, hogy a kép és a szöveg soha ne érjen össze */
  gap: clamp(var(--space-lg), calc(21.875vw - 128px), var(--space-2xl));
  align-items: stretch;
}
.split--reverse .split__media { order: 2; }
.split--reverse .split__content { order: 1; }

/* .split--trio: háromoszlopos változat (szöveg + 2 kép), pl. Rólunk oldal,
   Ramóna-szekció – a szöveg kapja a legszélesebb oszlopot, a két kép
   egyenlő, keskenyebb (így téglalap alakú, álló arányú) oszlopot kap. */
.split--trio {
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-lg);
}
.split--trio .split__content {
  margin-right: var(--space-lg);
}

/* .split--trio-reverse: a .split--trio tükrözött verziója – a két kép balra
   kerül (keskenyebb oszlopok), a szöveg jobbra (legszélesebb oszlop), pl.
   Rólunk oldal, Dániel-szekció. */
.split--trio-reverse {
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--space-lg);
}
.split--trio-reverse .split__content {
  margin-left: var(--space-lg);
}

.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* .split-bleed: a kép oszlopa ugyanolyan széles, mint a .split__content
   oszlopa (rendes grid-oszlop, nem fut ki a szekció széléig), a magassága
   pedig a grid sor magasságához igazodik (align-items: stretch). */
.split-bleed {
  position: relative;
  overflow: hidden;
}
.split-bleed .split__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--color-dark);
  border-radius: 4px;
  max-height: 700px;
}
.split-bleed .split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.split-bleed .split__media:hover img {
  transform: scale(1.08);
}
.split-bleed .btn {
  padding: 0.5em 1.4em;
  font-size: 16px;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.split-bleed .btn:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
  transform: scale(1.06);
}
/* Két gomb egymás mellett (pl. Rólunk oldal bevezető szekció: Edzéstípusok +
   Kapcsolat) – a másodlagos gomb körvonalas változatot kap, hogy elváljon
   az elsődleges (bézs) gombtól. */
.split__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.split-bleed .btn--outline {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.split-bleed .btn--outline:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
}

.split__content .eyebrow {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 25px;
  font-weight: 400;
  color: var(--color-muted);
  margin: var(--space-sm) 0 var(--space-md);
}
.split__content h2 { margin-bottom: var(--space-xs); }
.trainer-bio h2 { margin-bottom: var(--space-md); }

/* Belépési animáció, mint a hero elemeinél – JS kapcsolja be az .is-visible
   osztályt, amint a .split__content a viewportba görgetve láthatóvá válik.
   Kulcskocka-animációt használunk (nem transitiont), hogy a gombok hover
   transitionjét (pl. .split-bleed .btn:hover) ne befolyásolja a késleltetés. */
@keyframes split-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.split__content > * {
  opacity: 0;
}
.split__content.is-visible > * {
  animation: split-fade-in-up 1.3s ease forwards;
}
.split__content.is-visible > *:nth-child(1) { animation-delay: 0.1s; }
.split__content.is-visible > *:nth-child(2) { animation-delay: 0.3s; }
.split__content.is-visible > *:nth-child(3) { animation-delay: 0.5s; }
.split__content.is-visible > *:nth-child(4) { animation-delay: 0.7s; }
.split__content.is-visible > *:nth-child(5) { animation-delay: 0.9s; }
.split__content.is-visible > *:nth-child(6) { animation-delay: 1.1s; }
.split__content.is-visible > *:nth-child(7) { animation-delay: 1.3s; }

.check-list, .arrow-list {
  margin: var(--space-md) 0 var(--space-lg);
}
.arrow-list li {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-sm);
}
.arrow-list li::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 0.8em;
  border-radius: 50%;
  background-color: var(--color-surface-warm);
  transform: translateY(-0.15em);
}

.check-list li {
  position: relative;
  padding-left: 2em;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
}
.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
  font-size: 1.1em;
}

.trio__card .check-list li {
  display: flex;
  align-items: baseline;
  padding-left: 0;
  margin-bottom: var(--space-md);
}
.trio__card .check-list li::before {
  content: '';
  position: static;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: var(--space-sm);
  border-radius: 50%;
  background-color: var(--color-surface-warm);
  font-size: 0;
}

.split__media {
  width: 100%;
  height: 100%;
}
.split__media .img-placeholder { height: 100%; min-height: 360px; }
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   HOGYAN DOLGOZUNK – 3 oszlop → patterns/hogyan-dolgozunk.php
   ========================================================================== */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
/* Mire helyezzük a fókuszt? szekció (edzestipusok.html) – 4 kártyás elrendezés:
   2x2 rács, 900px alatt (a .trio többi töréspontjával összhangban) 1 oszlopra vált */
.trio--quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trio__card {
  background-color: var(--color-dark);
  padding: var(--space-lg);
  border-radius: 4px;
}
.trio__card h4 {
  color: var(--color-background);
  font-weight: 400;
  margin-bottom: var(--space-sm);
}
.trio__card p {
  color: var(--color-muted);
  margin: 0 0 var(--space-xs);
}
.trio__card p:last-child {
  margin-bottom: 0;
}
.trio__card:nth-child(1),
.trio__card:nth-child(3) {
  background-color: transparent;
  border: 1px solid var(--color-background);
}
.trio__card:nth-child(1) p,
.trio__card:nth-child(3) p {
  color: var(--color-background);
}
.trio__card:nth-child(2) {
  background-color: rgba(168, 168, 168, 0.85);
}
.trio__card:nth-child(2) h4,
.trio__card:nth-child(2) p {
  color: var(--color-dark);
}

/* Hogyan dolgozunk szekció (index.html) – a 2. kártya megkapja az 1./3. kártya formázását */
.section--dark--hogyan .trio__card:nth-child(2) {
  background-color: transparent;
  border: 1px solid var(--color-background);
}
.section--dark--hogyan .trio__card:nth-child(2) h4,
.section--dark--hogyan .trio__card:nth-child(2) p {
  color: var(--color-background);
}

/* ==========================================================================
   ESZKÖZÖK ÉS MÓDSZEREK → patterns/eszkozok.php
   ========================================================================== */
.section--tools {
  /* a bézs (--color-surface-warm) 20%-os erősséggel, a világos háttéren átütve */
  background-color: rgba(222, 202, 182, 0.2);
}
.section--tools .section-intro {
  max-width: 900px;
}
.section--tools .section-intro p {
  margin-top: var(--space-lg);
}
.section--schedule .section-intro p {
  margin-top: var(--space-lg);
}
#orarend {
  scroll-margin-top: 110px;
}
/* Középen futó, görgetésre kirajzolódó függőleges vonal: a .tools-timeline__track
   a teljes (halvány) vonal, a .tools-timeline__progress pedig a fölötte lévő,
   JS-sel vezérelt "kitöltés" – a magassága a görgetési pozíció szerint nő
   (ld. script a lap alján). Az elemek a vonal két oldalán, soronként egy-egy
   párban helyezkednek el. */
.tools-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.tools-timeline__track,
.tools-timeline__progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  z-index: 0;
}
.tools-timeline__track {
  bottom: 0;
  background-color: var(--color-accent);
  opacity: 0.3;
}
.tools-timeline__progress {
  height: 0%;
  background-color: var(--color-accent);
}
.tools-timeline__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-2xl);
}
.tools-grid__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  align-content: start;
  column-gap: var(--space-md);
  text-align: left;
  max-width: 500px;
  padding: var(--space-md);
}
/* a bal oldali kártyák a vonal felőli (jobb) szélükhöz, a jobb oldaliak
   a vonal felőli (bal) szélükhöz igazodnak, így mindkét oldalon a vonalhoz
   simulnak, és kifelé hagynak szabad helyet */
.tools-timeline__row .tools-grid__item:first-child { justify-self: end; }
.tools-timeline__row .tools-grid__item:last-child { justify-self: start; }
.tools-grid__icon {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Az ikon-svg-k már eleve bézs (#DECAB6) színűek, nincs szükség CSS-es
   átszínezésre. */
.tools-grid__icon img {
  max-height: 64px;
  max-width: 64px;
  width: auto;
  margin: 0 auto;
}
.tools-grid__label {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--color-heading);
}
.tools-grid__tagline {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  margin: var(--space-xs) 0 0;
}
.tools-grid__desc {
  grid-column: 2;
  grid-row: 3;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-heading);
  margin: var(--space-xs) 0 0;
}

/* ==========================================================================
   EDZÉSTÍPUSOK KÁRTYÁK → patterns/edzestipusok-kartyak.php
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.card {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: 0 10px 24px rgba(29,29,29,0.12);
  transform: translateY(-4px);
}
.card__media {
  position: relative;
  height: 500px;
}
.card__media .img-placeholder { min-height: 500px; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__badge {
  position: absolute;
  top: auto;
  right: var(--space-md);
  bottom: 0;
  transform: translateY(50%);
  width: 76px;
  height: 76px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-dark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.card__badge-max {
  font-size: 10px;
}
.card__body {
  padding: var(--space-md);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body h3 { font-size: 22px; font-weight: 400; margin-bottom: var(--space-sm); }
.card__body ul { margin-bottom: var(--space-md); flex: 1; }
.card__body ul li {
  margin-bottom: 0.4em;
  font-size: 15px;
  color: var(--color-dark);
}
.card__body .link-arrow {
  color: var(--color-accent);
}
.card__body .link-arrow:hover {
  color: var(--color-heading);
}

/* ==========================================================================
   EDZÉSTÍPUSOK – típus-összehasonlító kártyák → patterns/tipus-osszehasonlito.php
   Kétoszlopos, szöveges kártyarács (edzéstípusok aloldal, 4 kártya)
   ========================================================================== */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}
.type-card {
  position: relative;
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}
.type-card__badge {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 76px;
  height: 76px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-surface-warm);
  color: var(--color-dark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.type-card__badge-max {
  font-size: 10px;
}
.type-card h3 {
  font-weight: 400;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.type-card__trainer {
  font-size: 16px;
  color: var(--color-muted);
  margin-top: calc(-1 * var(--space-xs));
  margin-bottom: var(--space-sm);
}
.type-card p {
  margin-bottom: var(--space-sm);
}
.type-card__fit-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.type-card__fit-list {
  flex: 1;
  margin-top: 0;
  margin-bottom: var(--space-lg);
}
.type-card .btn {
  align-self: flex-start;
}
/* CTA a kártyákon belül a főoldali kártyák (.card__body .link-arrow)
   mintáját követi: nyilas szöveglink szolid gomb helyett. */
.type-card .link-arrow {
  align-self: flex-start;
  font-size: 16px;
  color: var(--color-accent);
}
.type-card .link-arrow:hover {
  color: var(--color-heading);
}

/* Belépési animáció, ugyanaz a mintázat, mint a .split__content-nél:
   JS kapcsolja be az .is-visible osztályt a .type-grid elemen, amint
   a szekció a viewportba görgetve láthatóvá válik. */
.type-card {
  opacity: 0;
}
.type-grid.is-visible .type-card {
  animation: split-fade-in-up 1.3s ease forwards;
}
.type-grid.is-visible .type-card:nth-child(1) { animation-delay: 0.1s; }
.type-grid.is-visible .type-card:nth-child(2) { animation-delay: 0.25s; }
.type-grid.is-visible .type-card:nth-child(3) { animation-delay: 0.4s; }
.type-grid.is-visible .type-card:nth-child(4) { animation-delay: 0.55s; }

/* ==========================================================================
   RÓLUNK – EDZŐI BEMUTATKOZÓ KÁRTYÁK → patterns/rolunk-edzok.php
   Edzőnként 3 egyenlő szélességű/magasságú kártya (Ez vagyok én / Bátran
   jöhetsz hozzám / Releváns végzettségeim), a .type-card vizuális nyelvét
   követve (fehér kártya, bézs szegély), listás tartalommal (.arrow-list).
   ========================================================================== */
.trainer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  margin-top: 48px;
}
.trainer-card {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}
.trainer-card__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.trainer-card .arrow-list {
  margin: var(--space-sm) 0 0;
  flex: 1;
}
.trainer-card .arrow-list li {
  font-size: 16px;
}

.trainer-card { opacity: 0; }
.trainer-cards.is-visible .trainer-card { animation: split-fade-in-up 1.3s ease forwards; }
.trainer-cards.is-visible .trainer-card:nth-child(1) { animation-delay: 0.1s; }
.trainer-cards.is-visible .trainer-card:nth-child(2) { animation-delay: 0.25s; }
.trainer-cards.is-visible .trainer-card:nth-child(3) { animation-delay: 0.4s; }

/* ==========================================================================
   MŰHELY PILLANATOK GALÉRIA → patterns/galeria.php
   Mansory (Pinterest-szerű) elrendezés CSS columns-szal: a képek eredeti
   arányukban jelennek meg, fentről lefelé töltik ki az oszlopokat. A képek
   nagy része induláskor .is-hidden osztállyal rejtett, a "Tölts be további
   képeket" gomb JS-sel fedi fel adagonként (ld. galeria.html script
   blokkja). Kattintásra lightboxban nagyítható a kép.
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.gallery-item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
}
.gallery-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gallery-item:hover img {
  transform: scale(1.08);
}
.gallery-item.is-hidden {
  display: none;
}
.gallery-load-more {
  text-align: center;
  margin-top: var(--space-xl);
}
.gallery-load-more .link-arrow {
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-accent);
}
.gallery-load-more .link-arrow:hover {
  color: var(--color-dark);
}
.gallery-load-more.is-done {
  display: none;
}
.gallery-progress {
  margin-top: var(--space-sm);
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-progress__bar {
  height: 3px;
  background-color: var(--color-surface-warm);
  border-radius: 2px;
  overflow: hidden;
}
.gallery-progress__fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-muted);
  transition: width .3s ease;
}
.gallery-counter {
  margin-top: var(--space-xs);
  text-align: center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* Lightbox – kép nagyítás kattintásra */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(29, 29, 29, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 1000;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: 0;
  color: var(--color-background);
  font-family: var(--font-heading);
  cursor: pointer;
  padding: var(--space-xs);
  line-height: 1;
  transition: color .2s ease;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  color: var(--color-accent);
}
.lightbox__close {
  top: var(--space-md);
  right: var(--space-md);
  font-size: 32px;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
}
.lightbox__prev { left: var(--space-md); }
.lightbox__next { right: var(--space-md); }
.lightbox__counter {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-background);
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* .trio__card lista-változata (pl. "Mire helyezzük a fókuszt?" szekció) */
.trio__card ul {
  margin: 0;
}
.trio__card li {
  margin-bottom: var(--space-xs);
  font-size: 18px;
}
.trio__card li:last-child {
  margin-bottom: 0;
}
.trio__card:nth-child(1) li,
.trio__card:nth-child(3) li {
  color: var(--color-background);
}
.trio__card:nth-child(2) li {
  color: var(--color-dark);
}

/* Mire helyezzük a fókuszt? szekció (edzestipusok.html) – minden kártya (a 4.-kel együtt)
   az 1./3. kártya "kontúros" formázását kapja */
.section--dark--fokusz .trio__card {
  background-color: transparent;
  border: 1px solid var(--color-background);
}
.section--dark--fokusz .trio__card h4,
.section--dark--fokusz .trio__card li {
  color: var(--color-background);
}

/* ==========================================================================
   MITŐL MŰKÖDIK A PROGRAM – 4 lépéses szekció → patterns/mukodik-a-program.php
   ========================================================================== */
.steps-grid {
  /* a kártya (max 320px) a saját oszlopában középre igazítva jelenik meg;
     ha az oszlop szélesebb 320px-nél, a kör tényleges középpontja ennyivel
     tolódik el az oszlop bal szélétől (a kör mindig a kártya BAL oldalán
     van, ezért a jobb szélhez való távolság nem ugyanennyi – ld. lentebb) */
  --step-colwidth: calc((100% - 3 * var(--space-lg)) / 4);
  --step-inset: max(0px, calc((var(--step-colwidth) - 320px) / 2));
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
/* a köröket összekötő vonal: alaphelyzetben vízszintes, pontosan az első és
   az utolsó kör közepéig tart (nem lóg ki egyik oldalon sem). 768px alatt
   (egy oszlopos, egymás alatti kártyák esetén) függőlegesre vált,
   ld. a reszponzív szekcióban. A .steps-line a halvány, álló sín, a benne
   lévő .steps-line__progress pedig a balról jobbra végigfutó, telítettebb
   haladó szakasz.
   A bal oldali távolság: az első kártya bal margója + a kör fél szélessége.
   A jobb oldali távolság ETTŐL ELTÉR: az utolsó kártya köre is a kártya BAL
   oldalán van, tehát a negyedik oszlop teljes szélességéből kell levonni
   a kártya bal margóját és a kör fél szélességét, hogy a vonal pontosan
   a negyedik körnél érjen véget (ne lógjon ki mögüle). */
.steps-line {
  position: absolute;
  top: 28px;
  left: calc(var(--step-inset) + 28px);
  right: calc(var(--step-colwidth) - var(--step-inset) - 28px);
  height: 2px;
  /* alaphelyzetben nincs szine -- csak a benne futo .steps-line__progress
     ad neki szint, mikozben athalad rajta */
  background-color: transparent;
  z-index: 0;
  overflow: hidden;
}
.steps-line__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: var(--color-accent);
  animation: steps-line-progress-h 8s ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
}
.step-card {
  position: relative;
  z-index: 1;
  max-width: 320px;
  margin: 0 auto;
}
.step-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background-color: var(--color-background);
  color: var(--color-accent);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: var(--space-md);
  /* az alap szabaly nem animal semmit -- minden tenyleges kort (lentebb,
     nth-child szerint) sajat, konkret kulcskocka-animacio ir felul */
  animation: none;
}
/* FONTOS: a .steps-grid elso gyermeke maga a .steps-line elem, igy a
   negy .step-card valojaban a 2./3./4./5. gyermek -- ezert az nth-child
   szamozas eggyel el van tolva a lathato sorszamhoz kepest.

   A korabbi animation-delay-alapu megoldas hibas volt: minden kor a SAJAT
   8s-os cikluson futott, es a delay csak az elso korre hatott -- a tobbi
   kor "toltott" allapota igy fokozatosan elcsuszott a vonal sajat (delay
   nelkuli) ciklusahoz kepest, ezert amikor a vonal ujraindult az elejerol,
   a 3. es 4. kor meg a sajat, korabbi ciklusabol maradt toltve.
   Megoldas: minden kornek SAJAT kulcskocka-keszlete van, delay nelkul,
   pontosan ugyanazon a 8s-os, delay=0 idovonalon, mint a vonal -- igy
   garantaltan egyszerre ernek vissza a kiindulo (ures) allapotba es
   egyszerre indul ujra az egesz folyamat. */
.step-card:nth-child(3) .step-card__number {
  animation: step-fill-2 8s ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
}
.step-card:nth-child(4) .step-card__number {
  animation: step-fill-3 8s ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
}
.step-card:nth-child(5) .step-card__number {
  animation: step-fill-4 8s ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
}
/* az elso (lathatoan "1"-es) kor mindig bezs toltessel jelenik meg, a lap
   betoltesetol fogva -- ez a folyamat allo kiindulopontja, nem resze a
   lejatszas/szunet valtasnak */
.step-card:nth-child(2) .step-card__number {
  animation: none;
  background-color: var(--color-accent);
  color: var(--color-dark);
}
/* az animacio (2-4. kor + az osszekoto vonal) csak akkor indul el, amikor
   gorgetessel elerjuk a szekciot -- ld. az IntersectionObserver-t a
   edzestipusok.html script blokkjaban, ami hozzaadja az .is-visible
   osztalyt a .steps-grid elemhez */
.steps-grid.is-visible .step-card__number,
.steps-grid.is-visible .steps-line__progress {
  animation-play-state: running;
}

/* a folyamat-erzetet ado telitodes-animaciok: a kor pontosan akkor valt
   bezsre, amikor a haladó vonal (steps-line-progress-h) odaer hozza (25% /
   50% / 75%-nal), toltve marad amig a vonal el nem kezd elhalványulni
   (88%-nal), majd VELE EGYUTT (88-92% kozott) visszahalvanyul es a ciklus
   vegeig (100%-ig) ures marad -- igy a vonal es mind a harom kor pontosan
   egyszerre er vissza a kiindulo allapotba, mielott a ciklus ujrakezdodik. */
@keyframes step-fill-2 {
  0%, 24%  { background-color: var(--color-background); color: var(--color-accent); }
  26%, 100% { background-color: var(--color-accent); color: var(--color-dark); }
}
@keyframes step-fill-3 {
  0%, 49%  { background-color: var(--color-background); color: var(--color-accent); }
  51%, 100% { background-color: var(--color-accent); color: var(--color-dark); }
}
@keyframes step-fill-4 {
  0%, 74%  { background-color: var(--color-background); color: var(--color-accent); }
  76%, 100% { background-color: var(--color-accent); color: var(--color-dark); }
}

/* a haladó vonal: 0-75%-ig (a ciklus 6 másodperce alatt) balról jobbra
   végigfut, sorban elérve mind a 4 kört (a delay-ekkel egyeztetve:
   0s / 2s / 4s / 6s = a szakasz 0% / 33% / 66% / 100%-a), majd rövid
   ideig tart, elhalványul, és a ciklus végén (láthatatlanul) visszaáll,
   mielőtt újrakezdődne. */
@keyframes steps-line-progress-h {
  0%   { width: 0%; opacity: 1; }
  25%  { width: 33.33%; opacity: 1; }
  50%  { width: 66.66%; opacity: 1; }
  75%, 100% { width: 100%; opacity: 1; }
}

/* függőleges (mobil) változat a haladó vonalhoz, ld. a reszponzív szekció */
@keyframes steps-line-progress-v {
  0%   { height: 0%; opacity: 1; }
  25%  { height: 33.33%; opacity: 1; }
  50%  { height: 66.66%; opacity: 1; }
  75%, 100% { height: 100%; opacity: 1; }
}
.step-card h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: var(--space-xs);
}
.step-card p {
  margin: 0 0 var(--space-xs);
  font-size: 16px;
}
.step-card p:last-child {
  margin-bottom: 0;
}

/* Ikonos, öt oszlopos elrendezés → "Milyen fejlődésre számíthatsz?" szekció.
   Flexbox + wrap, hogy törésponttól függetlenül mindig középre rendeződjön
   (páratlan elemszám esetén az utolsó, csonka sor is szépen középen marad). */
.benefit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl) var(--space-2xl);
  max-width: 1300px;
  margin: 0 auto;
}
.benefit-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  flex: 0 1 150px;
  max-width: 170px;
}
.benefit-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}
.benefit-grid__icon img {
  max-width: 52px;
  max-height: 64px;
  width: auto;
  height: auto;
}
.benefit-grid__text {
  margin: 0;
  font-size: 16px;
  color: var(--color-heading);
}

/* page-hero háttérkép módosító: a kép aljára fókuszáló kivágás (object-position),
   ha a fotó jellegéből adódóan az alsó rész a kifejezőbb (pl. álló formátumú fotók) */
.page-hero__bg-img--bottom {
  object-position: center bottom;
}

/* ==========================================================================
   ÓRAREND → patterns/orarend.php
   Napi bontású kártyarács: asztali nézetben egymás mellett (heti áttekintés),
   1024px alatt 3 oszlopos, 768px alatt (mobil) egyoszlopos, egymás alatti
   kártyák – így nincs vízszintesen görgetendő/összenyomott táblázat mobilon.
   ========================================================================== */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-sm);
  align-items: stretch;
}
.schedule-day {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 4px;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  display: flex;
  flex-direction: column;
}
.schedule-day__name {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  color: var(--color-heading);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-surface-warm);
  cursor: default;
  list-style: none;
}
.schedule-day__name::-webkit-details-marker { display: none; }
.schedule-day__name::marker { content: ""; }
/* a +/x ikon csak 768px alatt jelenik meg, ld. lentebb */
.schedule-day__icon { display: none; }
/* 769px-től (deszktop/tablet) az órarend NEM harmonika: a napok mindig
   nyitva maradnak (natív <details> lenne csak akkor csukható, ha nincs
   [open] attribútuma -- ezt itt !important-tal felülírjuk), a summary
   pedig nem kattintható, hogy véletlenül se lehessen becsukni */
@media (min-width: 769px) {
  .schedule-day__name {
    pointer-events: none;
  }
}
.schedule-day__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.schedule-day__slot {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.schedule-day__session {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.schedule-day__time {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-dark);
}
.schedule-day__type {
  font-size: 15px;
  color: var(--color-heading);
  line-height: 1.3;
}
.schedule-day__trainer {
  font-size: 15px;
  color: var(--color-muted);
}
.schedule-note {
  text-align: center;
  color: var(--color-dark);
  font-size: 18px;
  margin: var(--space-lg) 0 0;
}

/* Belépési animáció, ugyanaz a mintázat, mint a .benefit-grid / .trio elemeknél */
.schedule-day { opacity: 0; }
.schedule-grid.is-visible .schedule-day {
  animation: split-fade-in-up 1.3s ease forwards;
}
.schedule-grid.is-visible .schedule-day:nth-child(1) { animation-delay: 0.1s; }
.schedule-grid.is-visible .schedule-day:nth-child(2) { animation-delay: 0.18s; }
.schedule-grid.is-visible .schedule-day:nth-child(3) { animation-delay: 0.26s; }
.schedule-grid.is-visible .schedule-day:nth-child(4) { animation-delay: 0.34s; }
.schedule-grid.is-visible .schedule-day:nth-child(5) { animation-delay: 0.42s; }
.schedule-grid.is-visible .schedule-day:nth-child(6) { animation-delay: 0.5s; }

/* ==========================================================================
   RÓLUNK ÍRTÁK → patterns/rolunk-irtak.php
   ========================================================================== */
.testimonials {
  background-image: linear-gradient(rgba(53, 53, 53, 0.7), rgba(53, 53, 53, 0.7)), url("../../img/mozgas-muhely-galeria-37.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.testimonials .section-intro h2 {
  color: var(--color-background);
}
.testimonial-slide__text {
  color: var(--color-background);
}
.testimonial-arrow {
  color: var(--color-background);
}
.testimonial-slider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 1000px;
  margin: 0 auto;
}
.testimonial-slider__viewport {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}
.testimonial-slider__track {
  display: flex;
  transition: transform .5s ease;
}
.testimonial-slide {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 var(--space-lg);
  text-align: center;
}
.testimonial-slide__stars {
  color: var(--color-accent);
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: var(--space-sm);
}
.testimonial-slide__text {
  font-size: 18px;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.testimonial-slide__name {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--color-muted);
}
.testimonial-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background-color: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.testimonial-arrow:hover {
  background-color: var(--color-accent);
  color: var(--color-heading);
}
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.testimonial-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-muted);
  opacity: .5;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.testimonial-dot.is-active {
  background-color: var(--color-accent);
  opacity: 1;
}

/* ==========================================================================
   MIÉRT VÁLASZD → patterns/miert-valaszd.php
   ========================================================================== */
.why-section .split__content { padding-right: var(--space-md); }
.why-section .check-list li::before { color: var(--color-accent); }
.why-section .split__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--color-dark);
  border-radius: 4px;
  max-height: 700px;
}
.why-section .split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.why-section .split__media:hover img {
  transform: scale(1.08);
}
.why-section .btn {
  padding: 0.5em 1.4em;
  font-size: 16px;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.why-section .btn:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
  transform: scale(1.06);
}

/* ==========================================================================
   ISMERJ MEG MINKET JOBBAN → patterns/ismerj-meg-minket.php
   ========================================================================== */
.intro-split .split__content h2 { margin-bottom: var(--space-md); }
.intro-split .split__content p:last-of-type { margin-bottom: var(--space-lg); }
.why-section.intro-split .split__content h2 { margin-bottom: var(--space-lg); }
.why-section.intro-split .split__content p:last-of-type { margin-bottom: var(--space-xl); }
.intro-split__hi {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-muted);
}

/* ==========================================================================
   GYIK / GYAKORI KÉRDÉSEK → patterns/gyik.php
   Natív <details>/<summary> alapú "harmonika": JS nélkül működik, billentyűzettel
   és képernyőolvasóval is elérhető. A kérdés (summary) mindig látszik, a válasz
   csak megnyitáskor jelenik meg; a +/− ikon két, egymásra merőleges vonalból áll,
   nyitáskor a függőleges vonal 90°-ot fordul, így vízszintessé/eltűnővé válik.
   ========================================================================== */
.faq-section .section-intro { margin-bottom: var(--space-lg); }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-muted);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item[open] {
  border-color: var(--color-accent);
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ""; }
.faq-item__question:hover { color: var(--color-accent); }
.faq-item[open] .faq-item__question { color: var(--color-accent); }
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-accent);
  transition: transform .25s ease;
}
.faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
}
.faq-item__answer {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--color-dark);
  font-size: 18px;
  line-height: 1.7;
}
.faq-item__answer p { margin: 0; }
/* ==========================================================================
   ZÁRÓ CTA SZEKCIÓ → patterns/zaro-cta.php (aloldalak konverziós lezárása,
   pl. GYIK, Edzéstípusok – középre igazított szöveg + a főoldalon is használt
   akcent-gomb, ld. .hero .btn / .split-bleed .btn / .why-section .btn)
   ========================================================================== */
.cta-section {
  position: relative;
  color: var(--color-background);
  background-image: url("../../img/mozgas-muhely-galeria-39.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Sötétítő réteg a háttérkép felett (70%-os feketítés), hogy a fehér
   szöveg jól olvasható maradjon. */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(53, 53, 53, 0.7);
}
.cta-section > .container {
  position: relative;
  z-index: 1;
}
.cta-section__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.cta-section__content h4 {
  color: var(--color-background);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.cta-section__content p {
  font-size: 20px;
  line-height: 1.8;
  color: var(--color-background);
}
.cta-section__content .btn {
  margin-top: var(--space-sm);
  padding: 0.5em 1.4em;
  font-size: 16px;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cta-section__content .btn:hover {
  background-color: var(--color-dark);
  color: var(--color-background);
  border-color: var(--color-dark);
  transform: scale(1.06);
}

/* ==========================================================================
   ÓRAREND CTA SZEKCIÓ → patterns/orarend-cta.php (a főoldalon, az edzéstípus-
   kártyák alatt: sötétszürke sáv háttérkép nélkül, ugyanazzal a fejléc-
   tónussal, mint a .site-header háttere) */
.schedule-cta {
  background-color: var(--color-heading);
}

/* ==========================================================================
   FOOTER → parts/footer.html
   ========================================================================== */
.site-footer {
  background-color: var(--color-heading);
  color: var(--color-background);
}
.site-footer .site-header__nav a { color: var(--color-background); }
.site-footer .site-footer__inner {
  /* csak a függőleges paddingot állítjuk itt – a vízszintes paddingot
     hagyjuk a .container alapértelmezésén (var(--space-lg), 768px alatt
     var(--space-md)), különben a szöveg egészen a szekció szélééig lógna */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.site-footer__nav {
  justify-content: center;
  margin-bottom: var(--space-md);
}
.site-footer__logo-img {
  height: 56px;
}
.site-footer__bottom {
  border-top: 1px solid rgba(247,247,247,0.15);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 15px;
  color: var(--color-muted);
}
.site-footer__contact p { margin: 0 0 4px; }
.site-footer__link {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity .2s ease;
}
.site-footer__link:hover { opacity: 0.8; text-decoration: underline; }
.site-footer__link--insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer__legal { display: flex; gap: var(--space-md); }
.site-footer__legal a:hover { color: var(--color-accent); }
.site-footer__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
  font-size: 13px;
  color: var(--color-muted);
}
.site-footer__credit-logo {
  height: 20px;
  width: auto;
}
.site-footer__copyright {
  text-align: center;
  margin-top: var(--space-xs);
  font-size: 12px;
  color: var(--color-muted);
}

/* ==========================================================================
   Reszponzív
   ========================================================================== */
@media (max-width: 1024px) {
  .tools-timeline__row { gap: var(--space-lg) var(--space-lg); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .trainer-cards { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  /* 2x2 elrendezésnél a vízszintes vonal már nem illik a négy körhöz, ezért elrejtjük */
  .steps-line { display: none; }
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
  /* "Mit kell tudni" szekció (.split-bleed--rect): 1024px alatt egyoszlopos,
     a kép pedig nem nyúlik a szöveg-oszlop teljes magasságáig, hanem egy
     fekvő téglalap marad – a keret ezt egészen kis kijelzőkig lekövedi
     (a szelektor specifikusabb, mint a lentebbi általános 768px-es szabály,
     ezért ott sem íródik felül) */
  .split-bleed--rect .split { grid-template-columns: minmax(0, 1fr); }
  .split-bleed.split-bleed--rect .split__media {
    align-self: start;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    max-height: 360px;
    margin-top: var(--space-sm);
  }
  /* tableten (1024px alatt) már nem fér el a teljes navigáció a logó körül,
     ezért itt váltunk hamburger menüre a szűkítgetés helyett */
  .site-header .site-header__nav { display: none; }
  .site-header__toggle { display: block; }
  /* hamburger nézetben a logó a bal szélre kerül, a gomb pedig jobbra */
  .site-header .container { grid-template-columns: auto 1fr auto; }
  .site-header__logo { grid-column: 1; justify-self: start; }
  .site-header__logo img { margin: 0; }
  .site-footer .site-header__nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
  }
}

/* Külön töréspont a "Hogyan dolgozunk?" (.trio) és a "Miért válaszd a
   Mozgás Műhelyt?" (.why-section) szekcióknak: 900px alatt már egy
   oszlopba rendeződnek, mert a 3 oszlopos elrendezés ez alatt túl szűk
   lenne (a többi szekció csak 768px-en vált mobil nézetre) */
@media (max-width: 900px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .why-section .split--trio { grid-template-columns: minmax(0, 1fr); }

  /* Rólunk oldal edző-szekciói (Ramóna, Dániel): a 3 oszlopos elrendezés
     itt is 900px alatt vált egyoszloposra, ugyanúgy, mint a .trio /
     .why-section fent, mert 3 keskeny oszlop 900px alatt már nem férne el */
  .split--trio, .split--trio-reverse { grid-template-columns: minmax(0, 1fr); }
  .split--trio .split__content,
  .split--trio-reverse .split__content {
    margin-right: 0;
    margin-left: 0;
  }
  /* Dániel szekciója (.split--trio-reverse) 900px alatt: a szöveg kerüljön
     előre, a két kép utána (mint Ramónánál), 900px felett marad az eredeti
     (kép, kép, szöveg) sorrend */
  .split--trio-reverse .split__content {
    order: -1;
  }

  /* a fenti szekciók (Miért válaszd, Ramóna, Dániel) címsorai is 900px-nél
     váltsanak középre, mivel maga a szekció is itt vált mobil nézetre,
     nem a 763px-es általános törésponton */
  .why-section .split--trio h2,
  .split--trio h2,
  .split--trio-reverse h2 {
    text-align: center;
  }
  .why-section .split--trio .split__cta {
    justify-content: center;
  }

  /* Footer mobil nézet: a menüpontok eltűnnek, csak a logó marad,
     középre igazítva; az összes footer-elem egyoszlopos, középre
     igazított rendszerbe rendeződik */
  .site-footer .site-header__nav a:not(.site-header__logo) {
    display: none;
  }
  .site-footer .site-header__nav {
    justify-content: center;
    margin-bottom: var(--space-lg);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer__legal {
    flex-direction: column;
    align-items: center;
  }
  .site-footer__credit {
    margin-top: var(--space-sm);
  }
}

@media (max-width: 768px) {
  :root {
    --size-h1: 34px;
    --size-h2: 28px;
    --size-h3: 22px;
    --size-h4: 19px;
  }
  /* mobilon (főleg iOS Safarin) a background-attachment: fixed nem
     megbízható, ezért ott sima görgetős háttérre váltunk */
  .section--dark, .cta-section { background-attachment: scroll; }
  h1, h2 { text-align: center; }
  .split-bleed--rect .split__content .eyebrow { text-align: center; }
  .split-bleed--rect .split__cta,
  .intro-split .split__cta { justify-content: center; }
  /* Eszközök és módszerek szekció: a címsor középen marad, de a szöveg
     mobil nézetben balra igazított legyen */
  .section--tools .section-intro p {
    text-align: left;
  }
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media, .split--reverse .split__content { order: initial; }
  .split-bleed .split__media {
    position: static;
    width: 100%;
    height: 450px;
    margin-top: 0;
  }
  /* Rólunk oldal bevezető szekció: 763px alatt a kép magasabb legyen,
     majd ahogy a nézet tovább szűkül, a magasság a szélességgel arányosan,
     dinamikusan kövesse (aspect-ratio), nem egy fix érték marad */
  .rolunk-bevezeto .split__media {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 620px;
  }
  /* mobilon egy oszlopba rendeződnek az elemek; a vonal nem tűnik el,
     csak középről a kártyák bal szélére kerül, és onnantól így fut végig */
  .tools-timeline__track,
  .tools-timeline__progress {
    left: 0;
    transform: none;
  }
  /* mobilon a sorok közötti (.tools-timeline) és a soron belüli
     (.tools-timeline__row) távolság is ugyanaz legyen, hogy a kártyák
     között mindenhol egyenletes legyen a hely */
  .tools-timeline { gap: var(--space-md); }
  .tools-timeline__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .tools-timeline__row .tools-grid__item:first-child,
  .tools-timeline__row .tools-grid__item:last-child {
    justify-self: stretch;
    max-width: none;
  }
  .cards-grid { grid-template-columns: minmax(0, 1fr); }
  .card__media { height: 370px; }
  /* mobilon a nyilak eltűnnek, a váltásra elég az alul lévő pontok
     (és az automatikus lapozás) */
  .testimonial-arrow { display: none; }
  .type-grid { grid-template-columns: minmax(0, 1fr); }
  .type-card { padding: 30px; padding-top: 40px; }
  .trio__card { padding: 30px; }
  .schedule-grid { grid-template-columns: minmax(0, 1fr); }
  /* Órarend mobil nézetben: harmonika (mint a GYIK), a napok neve
     látszik, rákattintva nyílik le a hozzá tartozó beosztás */
  .schedule-day {
    border: 1px solid var(--color-muted);
    border-radius: 4px;
    padding: 0;
    transition: border-color .2s ease;
  }
  .schedule-day[open] { border-color: var(--color-accent); }
  .schedule-day__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: 0;
    border-bottom: none;
    cursor: pointer;
    transition: color .2s ease;
  }
  .schedule-day__name:hover { color: var(--color-accent); }
  .schedule-day[open] .schedule-day__name { color: var(--color-accent); }
  .schedule-day__icon {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  .schedule-day__icon::before,
  .schedule-day__icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-accent);
    transition: transform .25s ease;
  }
  .schedule-day__icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
  }
  .schedule-day__icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
  }
  .schedule-day[open] .schedule-day__icon::after {
    transform: translateX(-50%) rotate(90deg);
  }
  .schedule-day__list {
    padding: 0 var(--space-lg) var(--space-md);
  }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  .lightbox__prev, .lightbox__next { font-size: 32px; }
  .lightbox__close { font-size: 26px; }
  .lightbox__img { max-width: 92vw; max-height: 78vh; }
  .steps-grid {
    grid-template-columns: minmax(0, 1fr);
    --step-inset: max(0px, calc((100% - 320px) / 2));
  }
  /* egy oszlopos, egymás alatti kártyáknál a vonal függőlegesre vált */
  .steps-line {
    display: block;
    top: 28px;
    bottom: 28px;
    left: calc(var(--step-inset) + 28px);
    right: auto;
    width: 2px;
    height: auto;
  }
  .steps-line__progress {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 0%;
    animation-name: steps-line-progress-v;
  }
  /* a szám a kártya cím bal oldalára kerül (nem fölé), így a szám-körök
     egy egyenes függőleges oszlopban maradnak és a vonal zavartalanul
     tud végigfutni köztük, mint egy időrendi (timeline) animáció */
  .steps-line { left: 28px; }
  .step-card {
    max-width: none;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-md);
  }
  .step-card__number {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .step-card h4 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
  }
  .step-card p {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--space-sm);
  }
  .section { padding: var(--space-xl) 0; }
  .container { padding: 0 var(--space-md); }
  .page-hero { height: 320px; }
  .page-hero__content { padding-top: 105px; }
  .faq-item__question { padding: var(--space-sm) var(--space-md); font-size: 15px; }
  .faq-item__answer { padding: 0 var(--space-md) var(--space-md); font-size: 15px; }
}

/* ==========================================================================
   BELÉPÉSI ANIMÁCIÓ – SITE-WIDE (fade-in + enyhe felcsúszás)
   Ugyanazt a mintázatot követi, mint a .split__content / .type-grid /
   .trainer-cards eddigi belépési animációi: JS kapcsolja be az .is-visible
   osztályt a szülőn, amint a szekció a viewportba görgetve láthatóvá válik,
   a @keyframes split-fade-in-up kulcskockát újrahasználva.
   A .steps-grid (edzestipusok.html) saját, ettől független animációja
   ide nem tartozik, azt nem érinti ez a blokk.
   ========================================================================== */

/* Hogyan dolgozunk / Mire helyezzük a fókuszt – .trio kártyák */
.trio__card { opacity: 0; }
.trio.is-visible .trio__card { animation: split-fade-in-up 1.3s ease forwards; }
.trio.is-visible .trio__card:nth-child(1) { animation-delay: 0.1s; }
.trio.is-visible .trio__card:nth-child(2) { animation-delay: 0.25s; }
.trio.is-visible .trio__card:nth-child(3) { animation-delay: 0.4s; }
.trio.is-visible .trio__card:nth-child(4) { animation-delay: 0.55s; }

/* Edzéstípusok kártyák a főoldalon – .cards-grid */
.card { opacity: 0; }
.cards-grid.is-visible .card { animation: split-fade-in-up 1.3s ease forwards; }
.cards-grid.is-visible .card:nth-child(1) { animation-delay: 0.1s; }
.cards-grid.is-visible .card:nth-child(2) { animation-delay: 0.25s; }
.cards-grid.is-visible .card:nth-child(3) { animation-delay: 0.4s; }
.cards-grid.is-visible .card:nth-child(4) { animation-delay: 0.55s; }

/* Eszközök és módszerek – soronként (2 elem/sor) jelenik meg */
.tools-timeline__row { opacity: 0; }
.tools-timeline.is-visible .tools-timeline__row { animation: split-fade-in-up 1.3s ease forwards; }
.tools-timeline.is-visible .tools-timeline__row:nth-child(3) { animation-delay: 0.1s; }
.tools-timeline.is-visible .tools-timeline__row:nth-child(4) { animation-delay: 0.25s; }
.tools-timeline.is-visible .tools-timeline__row:nth-child(5) { animation-delay: 0.4s; }
.tools-timeline.is-visible .tools-timeline__row:nth-child(6) { animation-delay: 0.55s; }

/* Milyen fejlődésre számíthatsz – .benefit-grid elemek */
.benefit-grid__item { opacity: 0; }
.benefit-grid.is-visible .benefit-grid__item { animation: split-fade-in-up 1.3s ease forwards; }
.benefit-grid.is-visible .benefit-grid__item:nth-child(1) { animation-delay: 0.1s; }
.benefit-grid.is-visible .benefit-grid__item:nth-child(2) { animation-delay: 0.22s; }
.benefit-grid.is-visible .benefit-grid__item:nth-child(3) { animation-delay: 0.34s; }
.benefit-grid.is-visible .benefit-grid__item:nth-child(4) { animation-delay: 0.46s; }
.benefit-grid.is-visible .benefit-grid__item:nth-child(5) { animation-delay: 0.58s; }

/* Rólunk írták – a karusszel dinamikusan klónoz/mozgat slide-okat, ezért
   ne egyes elemenként, hanem egy blokkként kapjon belépési animációt. */
.testimonial-slider { opacity: 0; }
.testimonial-slider.is-visible { animation: split-fade-in-up 1.3s ease forwards; }

/* Műhely pillanatok galéria – sok elem + "load more" JS miatt szintén egy
   blokkként animáljuk a teljes rácsot, nem elemenként. */
.gallery-grid { opacity: 0; }
.gallery-grid.is-visible { animation: split-fade-in-up 1.3s ease forwards; }

/* Záró CTA szekció (minden aloldalon) */
.cta-section__content > * { opacity: 0; }
.cta-section__content.is-visible > * { animation: split-fade-in-up 1.3s ease forwards; }
.cta-section__content.is-visible > *:nth-child(1) { animation-delay: 0.1s; }
.cta-section__content.is-visible > *:nth-child(2) { animation-delay: 0.3s; }
.cta-section__content.is-visible > *:nth-child(3) { animation-delay: 0.5s; }

/* GYIK lista – hosszú, egy képernyőnél magasabb, ezért elemenként,
   egyesével figyeljük meg (progresszív megjelenés görgetés közben). */
.faq-item {
  transition: border-color .2s ease, opacity 0.7s ease, transform 0.7s ease;
  opacity: 0;
  transform: translateY(24px);
}
.faq-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}