/* =========================================================
   Sekcja Kontakt — wspólny styl + 2 warianty (avatary / bez)
   Zakres tylko w #kontakt, żeby nie mieszać w reszcie strony
   ========================================================= */

/* --- Design tokens (dopasuj do kolorystyki motywu) --- */
#kontakt {
  --contact-radius: 12px;
  --contact-border: 1px solid #e5e7eb;
  --contact-card-bg: #fff;
  --contact-shadow: 0 1px 2px rgba(0,0,0,.06);
  --contact-gap: 20px;
  --contact-accent: #b21a1a;   /* bordowy akcent – zmień pod siebie */
}

/* --- Ogólne poprawki widoczności (na wypadek animacji/overflow) --- */
#kontakt p, #kontakt .wp-block-columns,
#kontakt .wp-block-group, #kontakt .wp-block-column {
  opacity: 1;
  transform: none;
}
#kontakt .wp-block-group, #kontakt .wp-block-column { overflow: visible; }

#kontakt .lead { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.5; }

/* --- Mapka --- */
#kontakt .contact-map {
  border-radius: var(--contact-radius);
  overflow: hidden;
  box-shadow: var(--contact-shadow);
}
#kontakt .contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 40vh, 420px);
  border: 0;
}

/* --- Kolumny Gutenberga: trochę większy gap na desktopie --- */
#kontakt .wp-block-columns { row-gap: var(--contact-gap); }
@media (min-width: 1024px) {
  #kontakt .wp-block-columns { column-gap: var(--contact-gap); }
}

/* --- Karty kontaktowe (przedstawiciele) --- */
#kontakt .contact-card {
  background: var(--contact-card-bg);
  border: var(--contact-border);
  border-radius: var(--contact-radius);
  box-shadow: var(--contact-shadow);
  padding: 16px;
}
#kontakt .contact-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
#kontakt .contact-card p {
  margin: 0;
  word-wrap: break-word;
}
#kontakt .contact-card a { text-decoration: none; }
#kontakt .contact-card a:hover { text-decoration: underline; }

/* =========================================================
   VARIANT A — Z AVATARAMI
   ---------------------------------------------------------
   Aktywuj dodając klasę "has-avatars" do całej sekcji #kontakt
   lub odkomentuj cały blok poniżej, a wersję B zakomentuj.
   ========================================================= */
#kontakt.has-avatars .contact-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

/* Avatar (okrągłe zdjęcie 72x72) */
#kontakt .contact-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08);
}

/* Placeholder (jeśli nie masz zdjęcia — element <div class="contact-avatar contact-avatar--ph">AB</div>) */
#kontakt .contact-avatar--ph {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f1f1f1, #e7e7e7);
  color: #444;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: .5px;
}

/* Treść obok avatara */
#kontakt.has-avatars .contact-card .contact-body > p { margin: 0; }
#kontakt.has-avatars .contact-card .contact-name {
  font-weight: 600; margin-bottom: 2px;
}
#kontakt.has-avatars .contact-card .contact-meta {
  opacity: .9;
}

/* Na wąskich ekranach układ pod sobą */
@media (max-width: 520px) {
  #kontakt.has-avatars .contact-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  #kontakt .contact-avatar { margin-bottom: 8px; }
}

/* =========================================================
   VARIANT B — BEZ AVATARÓW (DOMYŚLNIE)
   ---------------------------------------------------------
   Aktywuj dodając klasę "no-avatars" do #kontakt,
   albo zostaw bez żadnej klasy – avatar i tak się schowa.
   ========================================================= */
#kontakt .contact-avatar { display: none; }          /* domyślnie ukryte */
#kontakt.no-avatars .contact-card { display: block; } /* klasyczny układ */
#kontakt.no-avatars .contact-card h3 { margin-bottom: 10px; }
#kontakt.no-avatars .contact-card p + p { margin-top: 6px; }

/* --- Akcent (opcjonalny pasek u góry karty) — odkomentuj jeśli chcesz
#kontakt .contact-card { position: relative; }
#kontakt .contact-card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 40px; background: var(--contact-accent);
  border-top-left-radius: var(--contact-radius);
  border-top-right-radius: var(--contact-radius);
}
*/

/* --- Stabilizacja układu kolumn w sekcji #kontakt --- */
#kontakt .wp-block-columns {
  display: flex;
  flex-wrap: wrap;             /* ważne: zawijanie wierszy */
  gap: var(--contact-gap, 20px);
}

#kontakt .wp-block-columns > .wp-block-column {
  flex: 1 1 300px;             /* min. szerokość kolumny 300px, potem równo dziel */
  min-width: 260px;            /* zabezpieczenie przed „zjechaniem” do zera */
}

/* Wariant bez avatarów: klasyczny układ kart */
#kontakt.no-avatars .contact-card { display: block; }

/* Na wszelki wypadek utrzymujemy lead jako widoczny */
#kontakt .lead { opacity: 1 !important; transform: none !important; }

/* --- Wymuś grid tylko na wierszu z przedstawicielami --- */
#kontakt .contact-reps { 
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--contact-gap, 20px) !important;
}
@media (min-width:700px)  { #kontakt .contact-reps { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (min-width:1024px) { #kontakt .contact-reps { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }

/* Każda kolumna jako zwykła „komórka” grida (bez flexów, marginesów itp.) */
#kontakt .contact-reps > .wp-block-column {
  margin: 0 !important;
  min-width: 0 !important;
}

/* Wariant bez avatarów – klasyczny układ karty + drobne „bezpieczniki” */
#kontakt.no-avatars .contact-card { display: block !important; }
#kontakt .contact-card { position: relative; min-height: 1px; }

/* Lead nad mapą — wyłącz ewentualne animacje/ukrywanie */
#kontakt .contact-lead { 
  opacity: 1 !important; 
  transform: none !important; 
  animation: none !important;
}

/* Jeśli jakaś okładka/sekcja narzuca overflow:hidden – otwórz to tutaj */
#kontakt .wp-block-group,
#kontakt .wp-block-columns,
#kontakt .wp-block-column { overflow: visible !important; }