/* ============================================================================
   site-responsive.css — wspólne poprawki responsywności stron tenantów.
   Ładowany PO /styles.css (styles.css jest per-tenant i wyłączony z deployu,
   więc poprawek działających u WSZYSTKICH nie da się tam trzymać).

   Powód powstania (Four Kings, 12.08.2026): nagłówek hero z długą nazwą
   organizacji wychodził poza ekran telefonu. Dwie przyczyny naraz:
   1) `text-5xl` (48 px) jest stałe na każdej szerokości — „STOWARZYSZENIE"
      w 48 px ma ~200 px więcej niż szerokość ekranu 360–412 px,
   2) `.hero-left-col` to flex z `items-start`, więc h1/p kurczą się do
      fit-content, a fit-content DŁUŻSZEGO SŁOWA jest szersze niż rodzic —
      tekst nie zawija się w kolumnie, tylko ją rozpycha.
   ========================================================================= */

/* ── 1. Nagłówki łamią zbyt długie słowa zamiast wychodzić poza ekran ────── */
h1, h2, h3, h4,
.section-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── 2. Kolumna tekstowa hero: dzieci nigdy szersze niż kolumna ──────────── */
.hero-left-col > * {
  max-width: 100%;
}
.hero-left-col h1,
.hero-left-col p {
  width: 100%;
}

/* ── 3. Skalowanie nagłówków na małych ekranach ──────────────────────────────
   clamp() ma GÓRNĄ granicę równą dotychczasowemu rozmiarowi, więc nic się nie
   powiększa — zmiana działa wyłącznie w dół, na wąskich ekranach.            */
@media (max-width: 767px) {
  #hero-heading {
    font-size: clamp(1.75rem, 7.5vw, 3rem);
    line-height: 1.15;
  }

  /* nagłówki sekcji (O nas, Aktualności, FAQ…) — te same 48 px co hero */
  h2.text-5xl,
  h2.section-title {
    font-size: clamp(1.6rem, 6.5vw, 3rem);
    line-height: 1.2;
  }

  h1.text-5xl,
  h1.text-4xl,
  h2.text-4xl {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.2;
  }

  /* lead pod nagłówkiem hero */
  #hero-description {
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }
}

/* ── 4. Hero od 768 px: dwie kolumny po 50% + gap 2rem = 100% + 32 px, czyli
       prawa kolumna wychodziła poza kontener. Odejmujemy połowę odstępu.    */
@media (min-width: 768px) {
  .hero-flex-container > .hero-left-col,
  .hero-flex-container > .hero-right-col {
    flex-basis: calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}