/* =================================================================
   MOBILE FIXES dla PODSTRON (≤900px)
   ──────────────────────────────────────────────────────────────────
   Reguła:
   - GÓRA ABSOLUTE: brand (lewy) + Menu pill (prawy) — sklejone do top
   - DOLNA POŁOWA (≥50%): tytuł → opis → przycisk → socials, zwarty blok
   - margin-top: auto na tytule = pcha cały blok do dolnej połowy
   - padding-bottom: 90px = nigdy pod paskiem iPhone Safari
   - gap przycisk → socials: 14px (zwarte, jak prosił PK)
   Desktop = bez zmian.
   ================================================================= */

@media (max-width: 900px) {

  /* ═══════════════════════════════════════════════════════════════
     SPAGE-HERO (Konsultacje / Trening / Wizerunek)
     ═══════════════════════════════════════════════════════════════ */
  .spage-hero {
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    padding: 0 24px 90px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .spage-hero__bg { z-index: 0 !important; }

  .spage-hero__overlay {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.20) 30%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.85) 100%) !important;
  }

  /* Brand ABSOLUTE top-left */
  .spage-hero__brand {
    position: absolute !important;
    top: 18px !important;
    left: 24px !important;
    right: auto !important;
    width: auto !important;
    font-size: 16px !important;
    margin: 0 !important;
    z-index: 4;
  }

  /* Frame flex column wypełnia hero */
  .spage-hero__frame {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 60px !important;
    z-index: 3;
  }

  /* TYTUŁ — margin-top: auto pcha siebie + całą resztę do dolnej połowy */
  .spage-hero__title {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin: auto 0 14px !important;
  }

  /* OPIS — pod tytułem (order 2) */
  .spage-hero__bottom-desc {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    margin: 0 0 14px !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* PRZYCISK — pod opisem (order 3), mały gap do socials */
  .spage-hero__cta {
    position: static !important;
    left: auto !important; top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 3 !important;
    display: flex !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin: 0 0 14px !important;
    z-index: 5;
  }

  /* Sygnatura "/ Paweł Krzywania" = duplikat brandu z góry → ukryta */
  .spage-hero__sig {
    display: none !important;
  }

  /* Socials wyśrodkowane, zaraz pod buttonem */
  .spage-hero__copy {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    order: 5 !important;
    margin: 0 !important;
    z-index: 4;
  }

  /* Menu pill — top right (bez zmian) */
  .spage-hero__menu {
    top: 14px !important;
    right: 16px !important;
    height: 40px !important;
    z-index: 10;
  }
  .spage-hero__menu .hero__menu-pill {
    min-width: 80px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    height: 40px !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     WYST-HERO (Wystąpienia)
     ═══════════════════════════════════════════════════════════════ */
  .wyst-hero {
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    padding: 0 24px 90px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .wyst-hero__bg {
    grid-template-columns: 1fr !important;
    z-index: 0 !important;
  }
  .wyst-hero__bg img:nth-child(2) {
    display: none !important;
  }

  .wyst-hero__dark-band {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.20) 30%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.85) 100%) !important;
    z-index: 1 !important;
  }

  .wyst-hero__brand {
    position: absolute !important;
    top: 18px !important;
    left: 24px !important;
    right: auto !important;
    width: auto !important;
    font-size: 16px !important;
    margin: 0 !important;
    z-index: 4;
  }

  .wyst-hero__frame {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 60px !important;
    z-index: 3;
  }

  .wyst-hero__title {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin: auto 0 14px !important;
  }

  .wyst-hero__bottom-desc {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    margin: 0 0 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--c-white);
  }

  .wyst-hero__cta {
    position: static !important;
    left: auto !important; top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 3 !important;
    display: flex !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin: 0 0 14px !important;
    z-index: 5;
  }

  .wyst-hero__sig {
    display: none !important;
  }

  .wyst-hero__copy {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    order: 5 !important;
    margin: 0 !important;
    z-index: 4;
  }

  .wyst-hero__menu {
    top: 14px !important;
    right: 16px !important;
    height: 40px !important;
    z-index: 10;
  }

  /* ═══════════════════════════════════════════════════════════════
     OMNIE-HERO (O mnie) — bez CTA i bez bottom-desc
     ═══════════════════════════════════════════════════════════════ */
  .omnie-hero {
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    padding: 0 24px 90px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .omnie-hero__bg,
  .omnie-hero__bg-placeholder {
    z-index: 0 !important;
  }

  .omnie-hero__overlay {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.20) 30%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.85) 100%) !important;
  }

  .omnie-hero__brand {
    position: absolute !important;
    top: 18px !important;
    left: 24px !important;
    right: auto !important;
    width: auto !important;
    font-size: 16px !important;
    margin: 0 !important;
    z-index: 4;
  }

  .omnie-hero__frame {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 60px !important;
    z-index: 3;
  }

  /* Tytuł — margin-top: auto, ale przy braku desc/cta dodaję margin-bottom: auto żeby nie spadł zbyt nisko */
  .omnie-hero__title {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin: auto 0 14px !important;
  }

  .omnie-hero__sig {
    display: none !important;
  }

  .omnie-hero__copy {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    order: 5 !important;
    margin: 0 !important;
    z-index: 4;
  }

  .omnie-hero__menu {
    top: 14px !important;
    right: 16px !important;
    height: 40px !important;
    z-index: 10;
  }

  /* ═══════════════════════════════════════════════════════════════
     SOCIALS — większy gap między ikonami, wyśrodkowane
     ═══════════════════════════════════════════════════════════════ */
  .spage-hero__copy .hero-socials,
  .wyst-hero__copy .hero-socials,
  .omnie-hero__copy .hero-socials {
    gap: 24px !important;
    justify-content: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     WYST-MANIFEST — BŁĘKITNE TŁO (kosztem zdjęcia)
     ═══════════════════════════════════════════════════════════════ */
  .wyst-manifest {
    aspect-ratio: auto !important;
    background: #A7B7CA !important;
    padding: 56px 24px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .wyst-manifest__image { display: none !important; }
  .wyst-manifest__overlay { display: none !important; }
  .wyst-manifest__content {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
    color: #12335B !important;
  }
  .wyst-manifest__heading {
    font-size: 24px !important;
    line-height: 1.22 !important;
    color: #12335B !important;
    margin: 0 0 18px !important;
  }
  .wyst-manifest__desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #12335B !important;
    margin: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     SEKCJE Z TEKSTEM — padding boczny
     ═══════════════════════════════════════════════════════════════ */
  .wyst-target,
  .wyst-pitch,
  .wyst-topics,
  .wyst-structure,
  .wyst-why,
  .omnie-mission,
  .omnie-target,
  .omnie-stats,
  .omnie-quote,
  .spage-split,
  .spage-pricing,
  .spage-process,
  .spage-quote {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Mały telefon (≤380px) */
@media (max-width: 380px) {
  .spage-hero,
  .wyst-hero,
  .omnie-hero {
    padding: 0 18px 80px !important;
  }
  .spage-hero__brand,
  .wyst-hero__brand,
  .omnie-hero__brand {
    top: 16px !important;
    left: 18px !important;
  }
  .spage-hero__title,
  .wyst-hero__title,
  .omnie-hero__title {
    font-size: 22px !important;
  }
  .wyst-manifest__heading {
    font-size: 22px !important;
  }
  .wyst-manifest__desc {
    font-size: 14px !important;
  }
  .spage-hero__cta,
  .wyst-hero__cta {
    width: 100% !important;
    max-width: 100% !important;
  }
}