/* ===================== Intro (hero) ===================== */
.mm-web-intro {
  position: relative;
  /* výšku scrollu (pin spacing) doplní ScrollTrigger; stage je 1 viewport */
}

.mm-web-intro__stage {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-contrast);
}

/* Plovoucí prvky jsou do rozmístění JS skryté (jinak před spuštěním
   animace probliknou na výchozích CSS pozicích) — odkrývá je intro.js */
.mm-web-intro [data-float] { visibility: hidden; }

/* Vrstva s plovoucími prvky = škálované plátno dle Figmy (frame
   „Top screen" 1440×2415). Šířka se drží v pásu 1920px (na ultraširokých
   monitorech centrovaná), výška dopočítaná v poměru plátna, takže všechny
   prvky uvnitř můžou být umístěné v % a drží přesné rozmístění z Figmy.
   Tuto vrstvu posouvá JS svisle nahoru (parallax přes celé plátno). */
.mm-web-intro__layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* JS přebíjí přes xPercent + animuje y */
  width: min(100vw, 1920px);
  height: calc(min(100vw, 1920px) * 2415 / 1440);
  z-index: 1;
  will-change: transform;
}

/* Fixní text uprostřed */
.mm-web-intro__center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Malé logo CZECHCRUNCH nad titulkem */
.mm-web-intro__logo {
  width: 157px;
  height: 18px;
  margin-bottom: 24px;
  opacity: 0; /* nájezd při loadu */
}

/* Titulek MONEY/MAKER = vektorové SVG logotypy (každý řádek zvlášť,
   kvůli mezeře a šířce řádků; viditelný hned, bez nájezdu) */
.mm-web-intro__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(800px, 100%);
  margin: 0;
}
.mm-web-intro__title-line { display: block; width: 100%; }
.mm-web-intro__title-line--maker { margin-top: 3.48%; } /* mezera řádků dle Figmy */
.mm-web-intro__title-inner { display: block; }
.mm-web-intro__title-inner img { display: block; width: 100%; height: auto; margin: 0 auto; }
.mm-web-intro__title-line--maker img { width: 96.98%; } /* MAKER je o chlup užší */

.mm-web-intro__subtitle {
  margin: 48px 0 0;
  font-family: "Founders Grotesk", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  color: rgba(255, 255, 255, 0.95);
  opacity: 0; /* nájezd při loadu */
}

/* ---------- Číselné štítky ---------- */
/* Pozice + šířka v % plátna (1440×2415) → škálují se s fotkami.
   Kontejner je široký jako číslo (width), popisek se centruje pod ním. */
.mm-web-intro__badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3; /* čísla se odhalují nad fotkami (text hera je nad celou vrstvou) */
}
/* číslo = SVG z Figmy (barevný nakloněný box i číslice jsou součástí SVG) */
.mm-web-intro__badge-num {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}
.mm-web-intro__badge-label {
  font-size: calc(min(100vw, 1920px) * 0.0125); /* 18px @ 1440 */
  font-weight: 400;
  white-space: nowrap;
}

/* Náklon je zapečený v SVG, na kontejner ho už nedáváme (jinak dvojitá
   rotace). Popisek si necháváme nakloněný dle Figmy.
   left/top/width = absolutní pozice a šířka čísla v % plátna. */
.mm-web-intro__badge--views    { left: 9.444%;  top: 9.399%;  width: 8.145%;  }
.mm-web-intro__badge--views    .mm-web-intro__badge-label { color: var(--lime);         transform: rotate(4.03deg);  }

.mm-web-intro__badge--visitors { left: 69.583%; top: 29.565%; width: 11.503%; }
.mm-web-intro__badge--visitors .mm-web-intro__badge-label { color: var(--purple-muted); transform: rotate(-2deg);    }

.mm-web-intro__badge--articles { left: 13.403%; top: 43.147%; width: 8.075%;  }
.mm-web-intro__badge--articles .mm-web-intro__badge-label { color: var(--blue-muted);   transform: rotate(-3.36deg); }

.mm-web-intro__badge--podcast  { left: 81.667%; top: 52.008%; width: 8.681%;  }
.mm-web-intro__badge--podcast  .mm-web-intro__badge-label { color: var(--green-muted);  transform: rotate(4.33deg);  }

/* ---------- Fotografie ---------- */
/* Desktop: každá fotka je umístěná v % plátna (1440×2415) na pozici
   z Figmy. Náklon je zapečený v obrázku (průhledné rohy), proto žádná
   CSS rotace ani crop — obrázek vyplní svůj box 1:1. */
.mm-web-intro__photo {
  position: absolute;
  margin: 0;
}
.mm-web-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* mobilní sada fotek — na desktopu skrytá */
.mm-web-intro__photo--m1,
.mm-web-intro__photo--m2,
.mm-web-intro__photo--m3,
.mm-web-intro__photo--m4,
.mm-web-intro__photo--m5 { display: none; }

/* left/top = pozice levého horního rohu, width/height = rozměr boxu
   (vše v % plátna; height v % výšky plátna → poměr stran sedí). */
.mm-web-intro__photo--1 { left: 23.110%; top: -3.431%; width: 31.007%; height: 12.857%; } /* publikum – nahoře, useknuté horní hranou */
.mm-web-intro__photo--2 { left: 70.402%; top: 13.754%; width: 31.007%; height: 12.857%; } /* pódium – vpravo */
.mm-web-intro__photo--3 { left:  4.681%; top: 28.635%; width: 31.354%; height: 13.147%; } /* rozhovor – vlevo */
.mm-web-intro__photo--4 { left: 78.317%; top: 40.534%; width: 31.007%; height: 12.360%; } /* speaker – vpravo (04b 893×597 → nižší box, ať se nezkreslí) */
.mm-web-intro__photo--5 { left:  0%;     top: 61.532%; width: 20.000%; height: 11.926%; z-index: 2; } /* čtverec – vlevo u kraje, PŘES vchod */
.mm-web-intro__photo--6 { left: 18.681%; top: 64.272%; width: 21.042%; height: 18.302%; z-index: 1; } /* vchod CZECHCRUNCH – vlevo */
.mm-web-intro__photo--7 { left: 60.883%; top: 82.940%; width: 31.354%; height: 13.147%; } /* MONEY MAKER OSTRAVA – dole vpravo */

/* Blok čísel je jen mobilní (desktop má plovoucí štítky v plátně). */
.mm-web-intro__stats { display: none; }

/* ===================== Mobil (≤900px) ===================== */
@media (max-width: 900px) {
  /* Mobil běží na původním modelu (per-fotka parallax přes JS y v násobcích
     viewportu), ne na škálovaném plátně → vrátíme base vlastnosti, které
     desktop přenastavil. */
  .mm-web-intro__layer {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .mm-web-intro__photo {
    top: 50%;
    transform: translateY(-50%);
    will-change: transform;
  }

  /* Štítky jsou na mobilu pryč z plátna — čísla jsou dole jako mřížka. */
  .mm-web-intro__badge { display: none; }

  /* desktopová sada fotek pryč, mobilní zapnout */
  .mm-web-intro__photo--1,
  .mm-web-intro__photo--2,
  .mm-web-intro__photo--3,
  .mm-web-intro__photo--4,
  .mm-web-intro__photo--5,
  .mm-web-intro__photo--6,
  .mm-web-intro__photo--7 { display: none; }
  .mm-web-intro__photo--m1,
  .mm-web-intro__photo--m2,
  .mm-web-intro__photo--m3,
  .mm-web-intro__photo--m4,
  .mm-web-intro__photo--m5 { display: block; }

  /* pozice/rozměry dle Figmy (mobil 393px); náklon zapečený v obrázku */
  .mm-web-intro__photo--m1 { left: -3.3%; width: 298px; height: 207px; } /* publikum */
  .mm-web-intro__photo--m2 { left: 27.7%; width: 298px; height: 207px; } /* pódium */
  .mm-web-intro__photo--m3 { left: -5.7%; width: 301px; height: 212px; } /* rozhovor */
  .mm-web-intro__photo--m4 { left: 52.2%; width: 202px; height: 295px; } /* vchod (portrét) */
  .mm-web-intro__photo--m5 { left: -9.4%; width: 298px; height: 207px; } /* OSTRAVA */

  /* ---------- Čísla dole (mřížka) ---------- */
  .mm-web-intro__stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--bg-contrast);
    padding: 0 16px 64px;
    /* text je vycentrovaný v celé výšce stage → čísla přitáhneme nahoru,
       ať mezi MONEY MAKER a čísly není skoro celý prázdný viewport.
       position+z-index drží blok nad sekcí Konference (z-index 6) — jinak
       její neprůhledné pozadí při záporném margin-topu zakrylo popisky. */
    position: relative;
    z-index: 7;
    margin-top: calc(-32vh + 10px);
  }
  .mm-web-intro__stats-row {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .mm-web-intro__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .mm-web-intro__stat-num {
    display: block;
    height: 40px;
    width: auto;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
  }
  .mm-web-intro__stat-label {
    font-size: 14.4px;
    font-weight: 400;
    white-space: nowrap;
  }
  .mm-web-intro__stat--views    .mm-web-intro__stat-label { color: var(--lime); }
  .mm-web-intro__stat--articles .mm-web-intro__stat-label { color: var(--blue-muted); }
  .mm-web-intro__stat--podcast  .mm-web-intro__stat-label { color: var(--green-muted); }
  .mm-web-intro__stat--visitors .mm-web-intro__stat-label { color: var(--purple-muted); }

  .mm-web-intro__center { padding: 0 16px; }
  .mm-web-intro__title { width: min(345px, 100%); }
  .mm-web-intro__subtitle {
    margin-top: 32px;
    font-size: 24px;
  }
}