/* ══════════════════════════════════════════════════════════════
   INDEX.CSS — page-specific styles for index.php.
   Extracted verbatim from index.html during the Phase 1 dedup pass.
   Shared components live in design-system/shared.css.

   NOTE: the homepage's original nav CSS was never byte-identical to
   the other pages (a pre-existing inconsistency, not introduced by
   this migration) — bigger logo, slightly higher nav-link opacity,
   and an uncapped --site-px on narrow viewports. Preserved here as
   overrides loaded after shared.css so the homepage keeps its exact
   current appearance. Worth reconciling deliberately in a future pass,
   not silently "fixed" during a dedup migration.
   ══════════════════════════════════════════════════════════════ */

:root {
  --site-px: 5.4vw;
}

@media (min-width: 1280px) {
  :root { --site-px: 8rem; }
}

h2 { font-weight: var(--weight-black); }

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo-img { height: 26px; width: auto; }

.nav-link { color: rgb(255 255 255 / 0.8); }

/* ─── HERO ───────────────────────────────────────────────── */
/* Két képernyőnyi magas szekció, benne egy odaragadó színpad: az első
   képernyőn tisztán fut a reél, a második képernyőnyi görgetés alatt épül
   fel a sötétítés és a szöveg.

   FONTOS: a .hero-n NEM lehet overflow: hidden — az elrontaná a sticky-t.
   A vágás a színpad dolga. */
.hero {
  position: relative;
  height: 200vh;
  height: 200svh;
  background: var(--color-black);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;   /* mobil: a böngésző-UI ne lógjon rá a CTA-kra */
  overflow: hidden;
  color: var(--color-text-inverted);
  border-bottom: 1px solid var(--color-gray-200);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* MINDIG LÁTSZIK. Szűk felső vignetta, kizárólag a navért: a nav-linkek nem
   tiszta fehérek, hanem 75%-osak, ezért sokkal sötétebb hátteret kívánnak,
   mint a tömör fehér címsor. Enélkül a világos kockákon 2:1 alá esnek.
   Ez a fajta vignetta minden hero-videón szokásos — nem feliratréteg. */
.hero-navscrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 26%;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.94) 0%,
    rgb(0 0 0 / 0.88) 20%,
    rgb(0 0 0 / 0.45) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* GÖRGETÉSRE ÉPÜL FEL. Betöltéskor átlátszó, tehát a reél tisztán fut.
   Két réteg: alulról induló rámpa a szöveg sávjában, plusz egyenletes
   alapárnyalás, ami padlót ad bármelyik videókockára. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgb(0 0 0 / 0.90) 0%,
      rgb(0 0 0 / 0.82) 24%,
      rgb(0 0 0 / 0.55) 48%,
      rgb(0 0 0 / 0.18) 72%,
      transparent 88%
    ),
    rgb(0 0 0 / 0.34);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* a tartalom a képernyő aljára ül */
  padding-top: calc(72px + var(--space-16));
  padding-bottom: var(--space-16);
}

/* A görgetéses felúszást a JS kapcsolja be — enélkül (JS nélkül, illetve
   prefers-reduced-motion mellett) a szöveg és a sötétítés eleve látszik.
   A --hero-scrim / --hero-text értékét a görgetés állítja 0 és 1 között. */
.hero.is-scroll-reveal .hero-scrim {
  opacity: var(--hero-scrim, 0);
}

.hero.is-scroll-reveal .hero-inner {
  opacity: var(--hero-text, 0);
  transform: translateY(calc((1 - var(--hero-text, 0)) * 28px));
}

/* A motion.js minden hero-ban megcímkézi a h1/p/a elemeket, és betöltéskor
   beúsztatja őket. Itt ez pont az ellenkezője annak, amit akarunk: a szöveg
   NE legyen ott betöltéskor. A felúszást a .hero-inner opacitása viszi. */
.motion-enabled .hero [data-hero-reveal],
.motion-enabled body:not(.is-loading) .hero [data-hero-reveal] {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-title {
  /* Az oldal legnagyobb típusa — alatta a záró CTA 60px, a szekciócímek 48px. */
  font-size: clamp(var(--text-4xl), 6vw, var(--text-8xl));
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-white);
  max-width: 18ch;
  text-wrap: balance;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-10);
}

.hero-sub {
  font-size: clamp(var(--text-lg), 1.45vw, var(--text-2xl));
  font-weight: var(--weight-light);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 0.82);
  max-width: 38ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background 150ms ease;
}

.hero-cta:hover { background: var(--color-gray-100); }

.hero-cta-alt {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}

.hero-cta-alt:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* Az oldalon nincs globális fókuszjelölés — a hero gombjai legalább kapjanak. */
.hero-cta:focus-visible,
.hero-cta-alt:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* A CTA-k a szöveg alá kerülnek, mielőtt egymásba érnének. */
@media (max-width: 1024px) {
  .hero-title { max-width: 14ch; }

  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .hero-sub { max-width: 46ch; }
}

@media (max-width: 768px) {
  .hero-inner {
    padding-top: calc(72px + var(--space-10));
    padding-bottom: var(--space-12);
  }

  .hero-title { max-width: none; }
  .hero-foot { margin-top: var(--space-8); }

  /* Mobilon a szöveg a magasság nagy részét elfoglalja, ezért az alsó rámpa
     korábban zár be. A felső vignetta a navé, az változatlan. */
  .hero-scrim {
    background:
      linear-gradient(
        to top,
        rgb(0 0 0 / 0.90) 0%,
        rgb(0 0 0 / 0.84) 34%,
        rgb(0 0 0 / 0.62) 62%,
        rgb(0 0 0 / 0.25) 84%,
        transparent 100%
      ),
      rgb(0 0 0 / 0.34);
  }

  /* Egymás alá: a fő gomb teljes szélességű hüvelykujj-célpont, a másodlagos
     viszont szöveglink marad — az aláhúzása a szöveget fogja, nem a hasábot. */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    width: 100%;
  }

  .hero-cta { width: 100%; justify-content: center; }
  .hero-cta-alt { align-self: flex-start; }
}

/* ─── CASE STUDIES ──────────────────────────────────────── */
.cases {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding-block: var(--space-40);
}

.cases-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.cases-title {
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cases-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-500);
  transition: color 150ms ease;
  white-space: nowrap;
}

.cases-link:hover { color: var(--color-black); }

/* Egyenlő oszlopok. Az 5fr/6fr aszimmetria addig működött, amíg a kártyakép
   FIX magasságot kapott — akkor a két kép egyforma magas volt, csak az egyik
   szélesebb. Képaránnyal viszont a szélesebb oszlop magasabb is lesz, amitől a
   két kártya elcsúszik és az egyik nagyobbnak látszik. */
.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  cursor: pointer;
}

/* A borítók 1920×1300-asak. A dobozt PONTOSAN erre az arányra állítjuk, és
   `contain`-nel töltjük: így a hely előre le van foglalva (nincs
   elrendezés-ugrás), a kép mégsem vágódik. Ha egyszer más arányú borító
   érkezik, az letterboxolódik — de nem veszít el belőle semmit. */
.case-img {
  width: 100%;
  aspect-ratio: 1920 / 1300;
  overflow: hidden;
  position: relative;
  background: var(--color-gray-100);
}

.case-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms ease;
}

.case-card:hover .case-img img { transform: scale(1.03); }

.case-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.case-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  max-width: 44ch;
}

/* ─── INTRO ─────────────────────────────────────────────── */
.intro {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-block: 7rem;
  gap: var(--site-px);
}

.intro-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
}

.intro-text {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.intro-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-black);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-full);
  transition: background 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}

.intro-cta:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.intro-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.intro-logo {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

/* ─── EXPAND IMAGE SECTION ──────────────────────────────── */
.expand-section {
  height: 220vh;
  position: relative;
}

.expand-sticky {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow: hidden;
}

.expand-img-wrap {
  width: 100%;
  height: 100%;
  padding-inline: var(--site-px);
  box-sizing: border-box;
}

.expand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── MISSION ────────────────────────────────────────────── */
.mission {
  padding-block: var(--space-48);
  border-bottom: 1px solid var(--color-gray-200);
}

.mission-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mission-num {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* 12 px-es szöveg, tehát 4,5:1 a küszöb — nem a nagy számokra való token. */
  color: var(--color-gray-400);
  margin-bottom: var(--space-10);
}

.mission-text {
  font-size: clamp(var(--text-3xl), 2.76vw, var(--text-5xl));
  font-weight: var(--weight-black);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 33ch;
  color: var(--color-black);
}

/* A kiemelés vastag és vékony váltakozásából áll — a dőltség ehhez nem tesz
   hozzá, csak egy harmadik jelzést vezet be ugyanarra. Marad a súlykülönbség. */
.mission-text em {
  font-style: normal;
  font-weight: var(--weight-light);
}

.mission-divider {
  width: 1px;
  height: 60px;
  background: var(--color-gray-300);
  margin-top: var(--space-10);
}

/* ─── SERVICES CAROUSEL ─────────────────────────────────── */
.services {
  padding-block: var(--space-40);
  border-bottom: 1px solid var(--color-gray-200);
  overflow-x: clip;
}

.services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.services-head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.services-title {
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.services-subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  max-width: 54ch;
}

.services-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--site-px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.services-track::before {
  content: '';
  flex-shrink: 0;
  width: var(--site-px);
}

.services-track::-webkit-scrollbar { display: none; }
.services-track.is-grabbing { cursor: grabbing; user-select: none; }

.svc-card {
  flex: 0 0 calc(5 * (100vw - 2 * var(--site-px) + 2rem) / 12 - 2rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  /* Az élő kártya <a>, a „hamarosan” <div>. A szín és az aláhúzás öröklődjön,
     hogy a kettő ugyanúgy nézzen ki. */
  color: inherit;
  text-decoration: none;
}

/* A billentyűzetes fókusz látszódjon: a kártya most már valódi vezérlő. */
.svc-card:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

/* A „hamarosan” kártya nem visz sehová — a kéz-kurzor félrevezető lenne. */
.svc-card--soon { cursor: default; }

.svc-card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-gray-100);
}

.svc-card-img img,
.svc-card-img > div {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.svc-card:hover .svc-card-img img,
.svc-card:hover .svc-card-img > div { transform: scale(1.03); }

.svc-card-body {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.svc-card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.svc-card-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  max-width: 38ch;
}

/* Még nem élő szolgáltatás: a kártya képe fekete-fehér. A szolgáltatás
   létezik — ezért ott marad —, de a szürkeség jelzi, hogy az oldala még nem
   járható. A `cursor: pointer` is elmarad, mert nincs hova kattintani. */
.svc-card--soon {
  cursor: default;
}

.svc-card--soon .svc-card-img img {
  filter: grayscale(1);
  opacity: 0.75;
}

.svc-card--soon:hover .svc-card-img img {
  transform: none;
}

.svc-card-soon {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* ─── TESTIMONIAL ───────────────────────────────────────── */
.testimonial {
  padding-block: var(--space-40);
  border-bottom: 1px solid var(--color-gray-200);
}

.testimonial-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: center;
}

.testimonial-visual {
  position: relative;
  background: var(--color-gray-100);
  overflow: hidden;
}

.testimonial-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.testimonial-tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-400);
  margin-bottom: var(--space-6);
}

.testimonial-quote-mark {
  display: inline-block;
  font-size: 1.3em;
  line-height: 0;
  color: var(--color-gray-300);
  margin-right: 0.05em;
  vertical-align: -0.32em;
}

.testimonial-text {
  font-size: clamp(var(--text-2xl), 2.6vw, var(--text-4xl));
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-black);
}

.testimonial-attr {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

.testimonial-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-black);
}

.testimonial-role {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}

/* ─── MOBILE (index-only overrides) ─────────────────────── */
@media (max-width: 768px) {
  .cases-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  /* Mobilon SEM adunk fix magasságot: az `aspect-ratio` minden szélességen
     ugyanazt a kivágást tartja, a korábbi 280px pont a panaszolt torzulást
     hozta vissza egy oszlopban. */

  .intro-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-block: var(--space-12);
  }
  .intro-right { justify-content: flex-start; }
  .intro-logo { max-width: 280px; }

  .svc-card { flex: 0 0 80vw; }
  .services-head { flex-direction: column; align-items: flex-start; gap: var(--space-6); }

  .testimonial-row { grid-template-columns: 1fr; gap: var(--space-8); }
  .testimonial-img { aspect-ratio: 16 / 10; }

  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .services-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  .cases-head { flex-wrap: wrap; }
}