/* ==========================================================================
   Moduł CTA — panel z ikoną, tytułem, opisem i przyciskiem.
   Układ „panel" 1:1 z makiety BAURAD (Architekturprojekte, kafel
   „Projekt indywidualny"); układ „dark" — ciemny panel z obrazem tła.
   Wszystkie style są scope'owane pod .mod-cta (używamy tokenów motywu
   z wartościami zapasowymi, więc moduł wygląda poprawnie także wtedy,
   gdy css/general.css lub css/tokens.css nie są dołączone).
   ========================================================================== */

.mod-cta {
  --mod-cta-radius: var(--radius-field, 0.75rem);
  --mod-cta-gap: var(--space-25, 1.25rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mod-cta-gap);
  overflow: hidden;
}

/* --- Układ „panel" (jasny pasek) ---------------------------------------- */
.mod-cta--panel {
  background: var(--color-surface, #F2EEE6);
  border-radius: var(--mod-cta-radius);
  padding: var(--space-4, 2rem) var(--space-5, 2.5rem);
  margin-top: var(--space-10, 6rem);
}
.mod-cta--panel .mod-cta__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-card-lg, 1.25rem);
  background: var(--color-bg, #FFFFFF);
  /* Ikona w kolorze tekstu — makieta (Architekturprojekte, kafel „Projekt
     indywidualny") rysuje ją jako #2B2622 (--color-ink) na białym kaflu,
     nie w kolorze akcji. */
  color: var(--color-ink, #2B2622);
}
.mod-cta--panel .mod-cta__title {
  font-size: var(--text-body-lg, 1.125rem);
  font-weight: 600;
}
.mod-cta--panel .mod-cta__sub {
  font-size: var(--text-body-sm, 0.875rem);
  color: var(--color-ink-2, #5C544C);
}

/* --- Układ „partner" (rząd z obramowaniem) ------------------------------
   Odpowiednik pasków partnerskich z makiety BAURAD (komponent „PartnerCta",
   markup `.br-pcta-row` w Architekturprojekte / Fuer Architekten): jasny rząd
   na `--color-bg` z linią `--color-line`, zaokrągleniem karty
   (`--radius-card-lg`) i paddingiem `--space-3` / `--space-4`; hover to
   obramowanie `--color-ink` i tło `--color-surface`. Ikona leży w kwadracie
   3.5rem na `--color-surface` (rysowana w `--color-ink`, jak w makiecie),
   teksty w `--text-body`, a akcja jest tekstem 1rem/600 w `--color-ink` ze
   strzałką (makieta trzyma ją w treści; tutaj dokłada ją CSS, bo treść paska
   pochodzi z modułu). Margines górny zerujemy — odstęp od sekcji należy do
   sekcji (makieta: `.br-pcta-wrap`), tak jak w `#about-cta` (about.css).
   ========================================================================== */
.mod-cta--partner {
  flex-wrap: nowrap;
  gap: var(--space-4, 2rem);
  margin-top: 0;
  padding: var(--space-3, 1.5rem) var(--space-4, 2rem);
  background: var(--color-bg, #FFFFFF);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-card-lg, 1rem);
  color: var(--color-ink, #2B2622);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mod-cta--partner:hover {
  border-color: var(--color-ink, #2B2622);
  background: var(--color-surface, #F5F3F0);
}
.mod-cta--partner .mod-cta__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-field, 0.75rem);
  background: var(--color-surface, #F5F3F0);
  color: var(--color-ink, #2B2622);
}
/* Makieta rysuje ikonę w viewBox 46 jednostek z linią 1.6 — Lucide ma
   gęstszą siatkę (24), więc `stroke-width: 1.6` zbliża wagę linii. */
.mod-cta--partner .mod-cta__lucide {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
}
.mod-cta--partner .mod-cta__texts {
  gap: var(--space-05, 0.25rem);
}
.mod-cta--partner .mod-cta__title {
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  line-height: var(--text-body-lh, 1.65);
  letter-spacing: -0.01em;
}
.mod-cta--partner .mod-cta__sub {
  font-size: var(--text-body, 1rem);
  line-height: var(--text-body-lh, 1.65);
  color: var(--color-ink-2, #6B645E);
}
/* Akcja: tekst w `--color-ink`, bez pigułki i bez tła (makieta trzyma CTA
   w tym samym rzędzie co teksty). */
.mod-cta--partner .mod-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.5rem);
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  color: var(--color-ink, #2B2622);
  transition: none;
}
.mod-cta--partner .mod-cta__btn:hover {
  background: none;
  color: var(--color-ink, #2B2622);
  transform: none;
}
/* Strzałka makiety — treść paska pochodzi z modułu, więc dokładamy ją CSS-em
   (także wtedy, gdy instancja nie ma jeszcze adresu, żeby rząd wyglądał jak
   w makiecie). */
.mod-cta--partner .mod-cta__btn::after {
  content: "→";
}
/* Cały pasek klikalny jak w makiecie (`a.br-pcta-row`): warstwa `inset: 0`
   rozciąga link akcji na rząd, więc hover i klik działają z każdego miejsca. */
.mod-cta--partner a.mod-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card-lg, 1rem);
}

/* --- Układ „dark" (ciemny panel z tłem) --------------------------------- */
.mod-cta--dark {
  display: block;
  background-color: var(--color-ink, #2B2622);
  border-radius: var(--radius-card-lg, 1.25rem);
  padding: var(--space-6, 3rem) var(--space-5, 2.5rem);
  color: var(--color-bg, #FFFFFF);
}
.mod-cta--dark .mod-cta__inner { position: relative; z-index: 2; }
.mod-cta--dark .mod-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.mod-cta--dark .mod-cta__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(43,38,34,0.92) 0%, rgba(43,38,34,0.72) 55%, rgba(43,38,34,0.45) 100%);
  z-index: 1;
}
.mod-cta--dark .mod-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,0.12);
  color: var(--color-bg, #FFFFFF);
  margin-bottom: var(--space-2, 1rem);
}
.mod-cta--dark .mod-cta__title {
  font-size: var(--text-h2, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mod-cta--dark .mod-cta__sub {
  font-size: var(--text-body, 1rem);
  color: rgba(255,255,255,0.82);
  margin-top: var(--space-1, 0.5rem);
  max-width: 44rem;
}
.mod-cta--dark .mod-cta__btn {
  position: relative;
  z-index: 2;
  margin-top: var(--space-4, 2rem);
  align-self: flex-start;
}

/* --- Wspólne elementy --------------------------------------------------- */
.mod-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--mod-cta-gap);
  min-width: 0;
}
.mod-cta__texts { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.mod-cta__lucide { width: 24px; height: 24px; }
.mod-cta__btn {
  background: var(--color-action, #FF6D00);
  color: var(--color-bg, #FFFFFF);
  text-decoration: none;
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  padding: var(--space-15, 0.75rem) var(--space-3, 1.5rem);
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mod-cta__btn:hover {
  background: var(--color-action-hover, #E56200);
  color: var(--color-bg, #FFFFFF);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .mod-cta--panel { padding: var(--space-3, 1.5rem); }
  .mod-cta--panel .mod-cta__inner { align-items: flex-start; }
  .mod-cta--dark { padding: var(--space-4, 2rem) var(--space-3, 1.5rem); }
  /* Partnerski pasek makiety: próg 768px — rząd w kolumnę, ikona nad tekstem,
     padding 1.5rem (`.br-pcta-row` / `.br-pcta-wrap` w makiecie). */
  .mod-cta--partner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 1rem);
    padding: var(--space-3, 1.5rem);
  }
  .mod-cta--partner .mod-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 1rem);
  }
}