/* ============================================================================
   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;
  }
}

/* Linki w treści (artykuły, projekty, podstrony z CMS). Reset Tailwinda daje <a> kolor i dekorację
   tekstu wokół, więc link w akapicie był NIEWIDOCZNY — wyglądał jak zwykłe słowa (zgłoszenie Natalii
   30.09.2026, uslugispoleczne.org/zapytania-ofertowe: „napisałeś «otwiera się w nowej karcie», ale nie
   widzę żadnego linku"). Kolor marki + podkreślenie: WCAG 1.4.1 — link nie może różnić się samym kolorem. */
.article-content p a, .article-content li a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content p a:hover, .article-content li a:hover { text-decoration-thickness: 2px; }
body.high-contrast .article-content p a, body.high-contrast .article-content li a { color: #000; }