/* ============================================================
   05 — hero
   ============================================================ */

/* Hero w projekcie zleceniodawcy stoi na płaskiej bieli — bez gradientu.
   Ciężar niesie wordmark, nie tło. */
.ai-hero {
  position: relative;
  background: var(--ai-bg);
  padding-block: clamp(48px, 6vw, 88px) clamp(64px, 9vw, 120px);
}

/* --- tło hero -------------------------------------------------
   Grafika jest DEKORACJĄ i ma ustąpić tekstowi, nie z nim konkurować.
   Dlatego trzy zabezpieczenia naraz, nie jedno:

   1. `opacity` — ścina siłę obrazu u źródła;
   2. maska gradientowa — obraz gaśnie ku lewej, gdzie stoi H1 i lead;
   3. biała zasłona `::after` — łapie przypadek, w którym redaktor wgra kadr
      ciemniejszy albo bardziej kontrastowy niż nasz.

   Sam obraz nie może wpływać na wysokość sekcji, stąd `position: absolute`. */

.ai-hero__tlo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 80%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 46%, #000 80%, #000 100%);
}

.ai-hero__tlo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Zasłona pod treścią: przy zwykłym kadrze prawie niewidoczna, przy mocnym
   ratuje kontrast tekstu. Gaśnie w prawo, żeby nie zabić całej grafiki. */
.ai-hero--z-tlem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Zasłona miesza się z TŁEM STRONY, nie z bielą. Wpisana wprost biel działała,
     dopóki strona miała jeden wariant; w motywie ciemnym rysowałaby białą smugę
     przez pół hero. `color-mix` trzyma ją przy aktualnym motywie. */
  background: linear-gradient(to right,
      var(--ai-bg) 0%,
      var(--ai-bg) 58%,
      color-mix(in srgb, var(--ai-bg) 82%, transparent) 74%,
      color-mix(in srgb, var(--ai-bg) 30%, transparent) 100%);
}

/* Treść ponad obiema warstwami. */
.ai-hero > .container {
  position: relative;
  z-index: 2;
}

/* Na wąskim ekranie tekst zajmuje całą szerokość, więc grafika nie ma dokąd uciec.
   Zamiast walczyć o kontrast — schodzi prawie do zera i zostaje samym musnięciem. */
@media (max-width: 900px) {
  .ai-hero__tlo { opacity: .22; }
  .ai-hero--z-tlem::after {
    background: linear-gradient(to right,
        var(--ai-bg) 0%,
        color-mix(in srgb, var(--ai-bg) 86%, transparent) 50%,
        color-mix(in srgb, var(--ai-bg) 70%, transparent) 100%);
  }
}

/* --- wordmark ------------------------------------------------ */
/* „AI 4 / BUYERS" na dwie linie, jak w projekcie. Złożony typograficznie,
   nie obrazkiem: skaluje się bez rozmycia i czyta go czytnik ekranu.
   To element graficzny, nie nagłówek — H1 z propozycją wartości stoi niżej. */

.ai-hero__marka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ai-s5);
  margin-bottom: var(--ai-s6);
}

.ai-hero__marka-tekst { min-width: 0; }

/* Słowo nad znakiem. Mniejsze i w wersalikach, bo to podpis rodzaju wydarzenia,
   a nie część samego znaku — ma się czytać jako „Konferencja AI 4 BUYERS",
   nie konkurować z nim wielkością. */
.ai-hero__nadmarka {
  margin: 0 0 var(--ai-s1);
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: clamp(.9375rem, .55rem + 1.2vw, 1.5rem);
  letter-spacing: var(--ai-ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ai-rose);
}

.ai-hero__wordmark {
  margin: 0;
  font-family: var(--ai-font-display);
  font-weight: 800;
  font-size: var(--ai-size-wordmark);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--ai-heading);
}
.ai-hero__wordmark span { display: block; }
.ai-hero__wordmark span + span { color: var(--ai-magenta); }

/* Zmienne słowo dolnej linii („BUYERS" → „FUTURE").
   `inline-block` jest konieczny: `transform` nie działa na elementach liniowych.
   Szerokość ustala skrypt przed startem, żeby dłuższy wariant nie przesuwał treści. */
.ai-hero__wordmark-zmienny {
  display: inline-block;
  transition: opacity .26s var(--ai-ease), transform .26s var(--ai-ease);
}
.ai-hero__wordmark-zmienny--zmiana {
  opacity: 0;
  transform: translateY(.18em);
}

/* Napis zmieniający się w kółko bywa nie do zniesienia przy zaburzeniach uwagi
   i przedsionkowych. Skrypt i tak nie startuje przy `reduce`, ale gdyby ktoś
   dopisał animację w przyszłości — tu jest bezwarunkowy hamulec. */
@media (prefers-reduced-motion: reduce) {
  .ai-hero__wordmark-zmienny { transition: none; }
  .ai-hero__wordmark-zmienny--zmiana { opacity: 1; transform: none; }
}

.ai-hero__organizator {
  position: relative;
  flex: none;
  margin: 0;
}

/* Znak organizatora stoi po prawej — dokładnie tam, gdzie tło jest najgęstsze.
   Miękka biała poświata daje mu oddech, nie rysując przy tym żadnej krawędzi. */
.ai-hero--z-tlem .ai-hero__organizator::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      color-mix(in srgb, var(--ai-bg) 95%, transparent) 0%,
      color-mix(in srgb, var(--ai-bg) 80%, transparent) 55%,
      transparent 78%);
}

/* --- tło i znak organizatora w motywie ciemnym ----------------
   Znak Vademecum jest rastrem w cudzych barwach: granatowy napis
   z pomarańczowym akcentem, na przezroczystym tle. Na ciemnym tle znika,
   a przemalowanie go filtrem byłoby ingerencją w cudzy znak. Zamiast tego
   dostaje jasną płytkę — tak, jak logo drukuje się na ciemnym materiale. */

[data-motyw="ciemny"] .ai-hero__organizator {
  /* Płytka rysowana `box-shadow`, nie `padding`. Padding zmieniłby wymiary
     elementu, więc logo przeskakiwałoby przy każdym przełączeniu motywu —
     `box-shadow` maluje tło poza obrysem, nie ruszając układu. */
  border-radius: var(--ai-r-md);
  background: var(--ai-biel);
  box-shadow: 0 0 0 12px var(--ai-biel);
}

[data-motyw="ciemny"] .ai-hero--z-tlem .ai-hero__organizator::before {
  display: none;
}

/* Grafika tła jest jasna: białe pole z cienką geometrią. Na ciemnej stronie
   świeciłaby jak kartka papieru. `invert` odwraca jasność, `hue-rotate(180deg)`
   przywraca odcienie — bez tej pary róż zrobiłby się zielony. */
[data-motyw="ciemny"] .ai-hero__tlo {
  opacity: .42;
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 900px) {
  [data-motyw="ciemny"] .ai-hero__tlo { opacity: .3; }
}
/* Logo idzie duże, bo nazwa spółki pod znakiem jest drobnym drukiem i przy
   mniejszej skali robi się nieczytelna. Plik jest PRZYCIĘTY z oryginalnego kwadratu:
   zawierał gruby pusty margines, przez który sam znak zajmował niecałą połowę
   szerokości — powiększanie takiego pliku podnosiło odstęp, nie literę.
   Ma 400 px szerokości, dwukrotność największego wyświetlanego rozmiaru,
   więc na ekranach retina zostaje ostry. Bez zaokrąglenia: to nie kafelek,
   tylko znak na przezroczystym tle. */
.ai-hero__organizator img { width: clamp(140px, 16vw, 200px); height: auto; }

@media (max-width: 640px) {
  .ai-hero__marka { flex-direction: column-reverse; align-items: flex-start; }
}

.ai-hero__eyebrow {
  margin: 0 0 var(--ai-s5);
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-body);
  font-weight: 600;
  color: var(--ai-rose);
  max-width: none;
}

.ai-hero h1 { margin-bottom: var(--ai-s5); }

.ai-hero__lead {
  margin: 0 0 var(--ai-s5);
  font-size: var(--ai-size-lead);
  line-height: 1.6;
  max-width: var(--ai-miara);
}
.ai-hero__lead p { margin: 0 0 0.6em; }
.ai-hero__lead p:last-child { margin-bottom: 0; }

/* --- fakty o wydarzeniu ------------------------------------- */

.ai-hero__fakty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ai-s2) var(--ai-s5);
  margin: 0 0 var(--ai-s5);
  padding: 0;
  list-style: none;
}
.ai-hero__fakty li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--ai-size-small);
  font-weight: 500;
  color: var(--ai-heading);
}
.ai-hero__fakty svg {
  flex: none;
  width: 17px;
  height: 17px;
  stroke: var(--ai-rose);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- obietnica ---------------------------------------------- */
/* Zdanie, które definiuje konferencję. Trzyma je lewa krawędź w różu —
   ten sam sygnał co przy faktach w sekcji „Miejsce". */

.ai-hero__obietnica {
  margin: 0 0 var(--ai-s5);
  padding: 16px 20px;
  max-width: var(--ai-miara);
  background: var(--ai-tint);
  border-left: 3px solid var(--ai-rose);
  font-size: var(--ai-size-lead);
  line-height: 1.6;
  color: var(--ai-rose);
}