/* =====================================================================
 * Tenify landing — style 1:1 z projektu Figmy (_home_v1).
 * Wszystkie wartości projektowe żyją jako zmienne CSS w :root — w regułach
 * używamy wyłącznie tokenów (wymóg: zero wartości „na oko").
 * ===================================================================== */

/* ---- Fonty projektu (paczka identyfikacji Tenify).
 * RL Aqva Black — nagłówki; Montserrat (font zmienny, oś wght 100–900) —
 * teksty. Pliki to subsety latin/latin-ext wygenerowane z paczki od
 * projektanta (fonttools), stąd małe rozmiary. */
@font-face {
  font-family: 'RL Aqva';
  src: url('assets/fonts/RLAqva-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- Kolory (zmienne z Figmy, ramka KOLORY) */
  --yellow-ball: #faff37;
  --court-black: #111111;
  --tennis-green: #b8ff00;
  --padel-blue: #3eb4ff;
  --squash-orange: #ff8400;
  --badminton-violet: #a15fff;
  --white: #ffffff;
  --scrim: rgba(0, 0, 0, 0.2);

  /* ---- Typografia */
  --font-display: 'RL Aqva', 'Arial Black', 'Arial', sans-serif;
  --font-wide: 'Montserrat', 'Arial', 'Helvetica Neue', sans-serif;

  --text-hero: 105px;
  /* Interlinia tytulu hero — poluzowana po podpieciu oryginalnych fontow
   * (0.84 -> 0.92 -> 1.06). */
  --lh-hero: 1.06;
  --text-h2: 45px;
  --text-h3: 35px;
  --text-body-lg: 25px;
  --lh-body-lg: 33px;
  --text-hero-sub: 21px;
  --text-input: 20px;
  --lh-input: 26px;
  --text-btn: 16px;
  --text-small: 15px;
  --text-kicker: 14px;

  --tracking-kicker: 4.2px;
  --tracking-hero-sub: 1.47px;
  --tracking-btn: 1.6px;
  --tracking-tasma: 0.56px;

  /* ---- Odstępy */
  --space-section: 140px;
  --space-60: 60px;
  --space-40: 40px;
  --space-30: 30px;
  --space-20: 20px;
  --space-10: 10px;
  --page-pad: 40px;

  /* ---- Promienie */
  --radius-input: 40px;
  --radius-card: 30px;

  /* ---- Wymiary z projektu */
  --header-h: 850px;
  --content-w: 967px;
  --card-w: 400px;
  --card-h: 480px;
  --card-pad-top: 210px;
  --card-pad-bottom: 60px;
  --card-txt-w: 284px;
  --input-w: 440px;
  --control-h: 60px;
  --arrow-size: 60px;
  --some-icon: 60px;
  --logo-w: 252px;
  --logo-h: 78px;
  --logo-footer-w: 180px;
  --logo-footer-h: 55.71px;
  --tasma-h: 34px;
  --dot-size: 7px;
  --dot-gap: 10px;

  /* ---- Slider — dluzszy crossfade dla plynnej zmiany tla */
  --fade-duration: 2.5s;
}

/* ---- Reset minimalny */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  /* Zaden element nie moze poszerzyc strony poza ekran — bez tego mobilne
     przegladarki dodaja poziomy scroll i biala przestrzen z prawej. */
  overflow-x: clip;
}

body {
  font-family: var(--font-wide);
  background: var(--white);
  color: var(--court-black);
  overflow-x: clip;
  /* Ponizej 320px nie schodzimy — layout ma dolny kres, strona sie nie kruszy. */
  min-width: 320px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================
 * HERO — rotujący baner
 * ===================================================================== */
.hero {
  position: relative;
  height: var(--header-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-30);
  overflow: hidden;
  background: var(--court-black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--fade-duration) ease-in-out;
}

.hero__bg.is-visible {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.hero__menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--page-pad);
}

/* Logo składane z dwóch SVG (sygnet + napis) — proporcje z Figmy. */
.logo {
  display: flex;
  align-items: center;
  width: var(--logo-w);
  height: var(--logo-h);
  gap: calc(var(--logo-w) * 0.06);
}

.logo__sign {
  height: 100%;
}

.logo__text {
  height: calc(var(--logo-h) * 0.67);
}

.hero__some img {
  height: var(--space-40);
}

.hero__content {
  position: relative;
  width: var(--content-w);
  max-width: 100%;
  text-align: center;
  color: var(--yellow-ball);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-40);
}

.hero__kicker {
  font-family: var(--font-wide);
  font-weight: 600;
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  /* COMING SOON siedzi tuz nad tytulem, podtytul dostaje pelny oddech. */
  margin-top: var(--space-10);
}

.hero__sub {
  margin-top: var(--space-30);
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: var(--text-hero-sub);
  letter-spacing: var(--tracking-hero-sub);
  white-space: pre-wrap;
}

.hero__arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  pointer-events: none;
}

.hero__arrow {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  width: var(--arrow-size);
  height: var(--arrow-size);
  padding: 0;
}

.hero__arrow img {
  width: 100%;
  height: 100%;
}

.hero__arrow--prev {
  transform: rotate(180deg);
}

/* Kropki — 1:1 ze SLIDER-a z Figmy: 7px, aktywna pełna, reszta 30%. */
.hero__dots {
  position: absolute;
  bottom: calc(var(--tasma-h) + var(--space-60));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--dot-gap);
}

.hero__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--yellow-ball);
  opacity: 0.3;
  transition: opacity var(--fade-duration) ease-in-out;
}

.hero__dot.is-active {
  opacity: 1;
}

/* Taśma TENIS PADEL… na dole hero i sekcji newslettera. */
.tasma {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tasma-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--yellow-ball);
}

.tasma p {
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-tasma);
  white-space: nowrap;
  text-align: center;
}

/* =====================================================================
 * NEWSLETTER
 * ===================================================================== */
.notify {
  position: relative;
  background: var(--court-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-60);
  padding: var(--space-section) var(--page-pad) calc(var(--space-section) + var(--tasma-h));
  color: var(--yellow-ball);
}

.notify__txt {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: var(--content-w);
  max-width: 100%;
  text-align: center;
}

.notify__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
}

.notify__sub {
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.notify__form {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
  justify-content: center;
}

.notify__input {
  width: var(--input-w);
  max-width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-30);
  border: 1px solid var(--yellow-ball);
  border-radius: var(--radius-input);
  background: var(--court-black);
  color: var(--yellow-ball);
  font-family: var(--font-wide);
  font-weight: 400;
  font-size: var(--text-input);
  line-height: var(--lh-input);
}

.notify__input::placeholder {
  color: var(--yellow-ball);
  opacity: 1;
}

.notify__input:focus {
  outline: 2px solid var(--yellow-ball);
  outline-offset: 2px;
}

/* Pole-pułapka na boty — poza ekranem, niedostępne dla ludzi. */
.notify__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.notify__btn {
  height: calc(var(--control-h) - 2px);
  padding: 0 var(--space-60);
  border: none;
  border-radius: var(--radius-input);
  background: var(--yellow-ball);
  color: var(--court-black);
  font-family: var(--font-wide);
  font-weight: 600;
  font-size: var(--text-btn);
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
  line-height: var(--lh-input);
  cursor: pointer;
}

.notify__status {
  min-height: var(--lh-input);
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: var(--text-small);
  text-align: center;
}

.notify__status.is-error {
  color: var(--squash-orange);
}

/* =====================================================================
 * ZNAJDŹ NAS
 * ===================================================================== */
.some {
  background: var(--yellow-ball);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-30);
  padding: var(--space-60) var(--page-pad);
  flex-wrap: wrap;
}

.some__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h3);
  color: var(--court-black);
}

.some__icons {
  display: flex;
  gap: var(--space-10);
}

/* Czarne kółko + żółty glif — złożenie 1:1 z komponentu Figmy. */
.some__icon {
  width: var(--some-icon);
  height: var(--some-icon);
  border-radius: 50%;
  background: var(--court-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.some__glyph {
  height: calc(var(--some-icon) * 0.36);
}

/* =====================================================================
 * FOOTER
 * ===================================================================== */
.footer {
  background: var(--court-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--page-pad);
  gap: var(--space-20);
  flex-wrap: wrap;
}

.logo--footer {
  width: var(--logo-footer-w);
  height: var(--logo-footer-h);
}

.footer__link {
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: var(--text-small);
  color: var(--yellow-ball);
  text-decoration: underline;
}

/* =====================================================================
 * RWD — w Figmie brak frame'ów mobile, więc skalujemy tokeny.
 * ===================================================================== */
@media (max-width: 1024px) {
  :root {
    --text-hero: 64px;
    --header-h: 700px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-hero: 42px;
    --text-h2: 32px;
    --text-h3: 28px;
    --text-body-lg: 20px;
    --lh-body-lg: 27px;
    --space-section: 80px;
    --page-pad: 20px;
    --header-h: 600px;
    --logo-w: 168px;
    --logo-h: 52px;
    --card-h: 420px;
    --card-pad-top: 170px;
  }

  /* Strzałki zawadzałyby o tekst — na małych ekranach zostają kropki i swipe. */
  .hero__arrows {
    display: none;
  }

  .notify__btn {
    width: 100%;
    justify-content: center;
  }

  .footer {
    justify-content: center;
  }
}