/* ==========================================================================
   Gyalogolj.hu — főoldal
   ========================================================================== */

/* ---- HERO ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; }

/* Egy kép (nincs slider): a régi lassú ráközelítés. */
.hero-bg:not(.hero-slider) img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 42%;
  transform: scale(1.08); animation: heroZoom 12s var(--ease-out) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

/* Kép-slider: a diák egymáson, keresztfade + finom Ken Burns. A váltást az
   app.js vezérli (az .aktiv osztály mozgatásával). */
.hero-slider .hero-dia {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.4s var(--ease);
}
.hero-slider .hero-dia.aktiv { opacity: 1; visibility: visible; }
.hero-slider .hero-dia img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  transform: scale(1.02);
}
/* Az aktív dia lassan ráközelít – ettől „él" a kép. */
.hero-slider .hero-dia.aktiv img {
  transform: scale(1.1);
  transition: transform 7s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg:not(.hero-slider) img { animation: none; transform: none; }
  .hero-slider .hero-dia { transition: opacity .01ms; }
  .hero-slider .hero-dia img,
  .hero-slider .hero-dia.aktiv img { transform: none; transition: none; }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(15,17,14,.94) 0%, rgba(15,17,14,.72) 34%, rgba(15,17,14,.28) 62%, rgba(15,17,14,.55) 100%),
    linear-gradient(105deg, rgba(15,17,14,.72) 0%, rgba(15,17,14,0) 58%);
}
.hero-in { position: relative; z-index: 2; width: min(100% - 2*var(--pad), var(--wrap)); margin-inline: auto; padding: 150px 0 78px; }
.hero h1 { color: #fff; font-size: clamp(46px, 8vw, 116px); font-weight: 500; letter-spacing: -.03em; max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--lime); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; }
.hero-sub { color: #D7DBCE; max-width: 52ch; margin: 30px 0 40px; font-size: clamp(18px, 1.9vw, 22px); }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-stats {
  position: relative; z-index: 2; margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid rgba(232,236,222,.22);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hstat { padding: 30px 26px 34px; border-right: 1px solid rgba(232,236,222,.16); }
.hstat:last-child { border-right: none; }
.hstat b { display: block; font-family: 'Fraunces', serif; font-size: clamp(34px, 4vw, 54px); color: var(--lime); line-height: 1; font-weight: 500; }
.hstat > span { display: block; margin-top: 10px; font-family: 'Space Grotesk', monospace; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #A9AEA0; }


/* ---- MANIFESZTUM ---- */
.manifesto { display: grid; grid-template-columns: 1.35fr .95fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.manifesto-txt p + p { margin-top: 22px; }
.manifesto-txt .lead { margin-top: 26px; }
.manifesto-gomb { margin-top: 30px !important; }
.big-quote { font-family: 'Fraunces', serif; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); font-weight: 500; }
.manifesto-img { position: relative; }
.manifesto-img .arch { aspect-ratio: 3/4; box-shadow: var(--shadow-l); }
.img-tag {
  position: absolute; left: -26px; bottom: 44px;
  background: var(--lime); color: var(--ink);
  padding: 16px 22px; border-radius: 3px;
  font-family: 'Space Grotesk', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  box-shadow: var(--shadow-m); max-width: 220px; line-height: 1.5;
}

/* ---- SZÁMOK ---- */
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.num-card { padding: 40px 34px 38px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.num-card::before { content: ''; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.num-card.in::before { transform: scaleX(1); }
.num-card b { font-family: 'Fraunces', serif; font-size: clamp(52px, 6.4vw, 84px); line-height: .95; color: var(--moss); font-weight: 500; display: block; }
.num-card p { margin-top: 16px; font-size: 17.5px; color: var(--muted); }
.num-card h3 { font-size: 21px; margin-top: 6px; }

.benefits { list-style: none; columns: 2; column-gap: 56px; margin-top: 56px; }
.benefits li { display: flex; gap: 15px; align-items: flex-start; padding: 15px 0; border-bottom: 1px dashed var(--line); break-inside: avoid; font-size: 17.5px; }

/* ---- EDZŐ ---- */
.coach { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.coach-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-badge {
  position: absolute; right: -18px; top: 30px; z-index: 3;
  background: var(--bone); color: var(--ink);
  border-radius: 999px; padding: 14px 24px; font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-m); border: 2px solid var(--lime);
}
.coach-titulus { margin-top: 8px; color: var(--lime); font-size: clamp(19px, 2vw, 23px); line-height: 1.62; }
.coach-szoveg { margin-top: 24px; color: #C6CBBC; }
.coach-gomb { margin-top: 34px; }
.timeline { list-style: none; margin-top: 40px; border-left: 2px solid rgba(232,236,222,.2); padding-left: 30px; display: grid; gap: 24px; }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: -37px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(189,213,66,.16); }
.timeline b { font-family: 'Space Grotesk', monospace; color: var(--lime); font-size: 15px; letter-spacing: .06em; display: block; }
.timeline span { color: #C6CBBC; font-size: 17px; }

/* ---- PROGRAMOK ---- */


/* ---- IDÉZET ---- */
.quoteband { background: var(--lime); color: var(--ink); padding: clamp(64px, 9vw, 116px) 0; position: relative; overflow: hidden; }
.quoteband::before {
  content: '\201C'; position: absolute; left: 2%; top: -6%;
  font-family: 'Fraunces', serif; font-size: 34vw; line-height: 1; color: rgba(23,26,22,.07);
}
.quoteband blockquote { font-family: 'Fraunces', serif; font-size: clamp(28px, 4.3vw, 60px); line-height: 1.14; letter-spacing: -.025em; font-weight: 500; max-width: 20ch; position: relative; }
.quoteband cite { display: block; margin-top: 30px; font-style: normal; font-family: 'Space Grotesk', monospace; font-size: 14px; letter-spacing: .17em; text-transform: uppercase; color: rgba(23,26,22,.66); }

/* ---- TÚRÁK ---- */
.trip-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; }
.trip-grid-egy { grid-template-columns: 1fr; }
.trip { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
.trip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.trip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,17,14,.92) 6%, rgba(15,17,14,.28) 55%, rgba(15,17,14,.1) 100%); }
.trip:hover img { transform: scale(1.06); }
.trip-body { position: relative; z-index: 2; padding: 36px; color: #fff; }
.trip-date { display: inline-block; background: var(--lime); color: var(--ink); font-family: 'Space Grotesk', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 8px 15px; border-radius: 3px; margin-bottom: 16px; }
.trip h3 { font-size: clamp(26px, 2.6vw, 36px); color: #fff; }
.trip p { color: #CFD4C6; margin-top: 10px; font-size: 16.5px; max-width: 44ch; }
.trip-ar { margin-top: 16px !important; color: var(--lime); font-weight: 700; }

/* ---- GALÉRIA ---- */
.galeria-sec { padding-top: clamp(72px,10vw,130px); }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.mosaic figure { overflow: hidden; border-radius: 14px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .5s; filter: saturate(.95); }
.mosaic figure:hover img { transform: scale(1.07); filter: saturate(1.12); }
.m-a { grid-column: span 2; grid-row: span 2; }
.m-b { grid-column: span 2; }
.m-e { grid-column: span 2; }

/* ---- VÉLEMÉNYEK ---- */
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rev { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; display: flex; flex-direction: column; }
.stars { color: var(--lime-dk); letter-spacing: 3px; font-size: 19px; }
.rev-szoveg { margin: 18px 0 22px; flex: 1; font-size: 17px; color: #3D4238; }
.rev-szoveg p + p { margin-top: 12px; }
.rev-who { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.rev-who i { width: 38px; height: 38px; border-radius: 50%; background: var(--moss); color: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 700; flex: none; }
.rev-who small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; }

@media (max-width: 1080px) {
  .manifesto, .coach { grid-template-columns: 1fr; }
  .coach-photo { max-width: 460px; }
  .prog-grid, .numbers, .revs { grid-template-columns: repeat(2, 1fr); }
  .trip-grid { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .m-a { grid-column: span 2; grid-row: span 2; } .m-b, .m-e { grid-column: span 2; }
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hstat:nth-child(2) { border-right: none; }
  .hstat:nth-child(-n+2) { border-bottom: 1px solid rgba(232,236,222,.16); }
  .prog-grid, .numbers, .revs { grid-template-columns: 1fr; }
  .benefits { columns: 1; }
  .img-tag { left: 0; bottom: -18px; }
}