/* ==========================================================================
   Moduł Featured Boxes — sekcja kafli (siatka / karuzela).
   Bazuje na markupie .br-feat-* z motywu BAURAD (theme/baurad/css/home.css),
   ale scope'owany pod .mod-featured-boxes i rozszerzony o konfigurację układu
   (--mod-fbox-cols dla siatki, --mod-fbox-per dla karuzeli). Dzięki temu
   sekcja wygląda poprawnie także tam, gdzie home.css nie jest dołączone.
   Tokeny BAURAD z wartościami zapasowymi — działa też w motywie bez tokenów.
   ========================================================================== */

.mod-featured-boxes {
  --mod-fbox-gap: var(--space-25, 1.25rem);
  --mod-fbox-cols: 3;
  --mod-fbox-per: 4;
  max-width: clamp(64rem, 88vw, 120rem);
  margin: 5.5rem auto 0;
  padding: 0 var(--space-4, 2rem);
}

.mod-featured-boxes .br-feat-item {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-field, 0.75rem);
  padding: var(--space-4, 2rem) var(--space-3, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-15, 0.75rem);
  color: inherit;
  text-decoration: none;
}
.mod-featured-boxes .br-feat-item__icon {
  height: 2rem;
  display: flex;
  align-items: center;
  color: var(--color-action, #c96a2b);
}
.mod-featured-boxes .br-feat-item__title {
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  line-height: var(--text-body-lh, 1.5);
}
.mod-featured-boxes .br-feat-item__sub {
  font-size: var(--text-caption, 0.875rem);
  color: var(--color-ink-2, #6b645e);
  line-height: var(--text-caption-lh, 1.45);
}
.mod-featured-boxes .mod-fbox__lucide {
  width: 26px;
  height: 26px;
  display: block;
}
.mod-featured-boxes .br-feat-arrows { margin-left: auto; }

/* --- Karuzela ------------------------------------------------------------ */
.mod-featured-boxes.is-carousel .br-feat-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mod-featured-boxes.is-carousel .br-feat-wrap::-webkit-scrollbar { display: none; }
.mod-featured-boxes.is-carousel .br-feat-track {
  display: flex;
  gap: var(--mod-fbox-gap);
}
.mod-featured-boxes.is-carousel .br-feat-item {
  width: calc((100% - (var(--mod-fbox-per) - 1) * var(--mod-fbox-gap)) / var(--mod-fbox-per));
  flex: 0 0 auto;
}

/* --- Siatka -------------------------------------------------------------- */
.mod-featured-boxes.is-grid .br-feat-wrap { overflow: visible; }
.mod-featured-boxes.is-grid .br-feat-track {
  display: grid;
  grid-template-columns: repeat(var(--mod-fbox-cols), minmax(0, 1fr));
  gap: var(--mod-fbox-gap);
}
.mod-featured-boxes.is-grid .br-feat-item { width: auto; }
.mod-featured-boxes.is-grid .br-feat-controls { display: none; }

/* --- Karty finansowe (br-fin-grid / br-fin-card) ------------------------- */
/* Układ z makiety BAURAD (sekcja "3. BAUFINANZIERUNG"): karty z ikoną
   w pigułce, etykietą nad tytułem, tytułem, treścią i etykietą odnośnika.
   Sekcja jest osadzona we własnym bloku motywu (.br-home-section), dlatego
   neutralizujemy odstępy opakowania modułu — margines i padding zostają po
   stronie motywu (tak jak w makiecie, gdzie karty leżą w .br-home-section). */
.mod-featured-boxes.is-finance {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
.mod-featured-boxes.is-finance .br-feat-wrap { overflow: visible; }
.mod-featured-boxes.is-finance .br-feat-track {
  display: grid;
  grid-template-columns: repeat(var(--mod-fbox-cols, 2), minmax(0, 1fr));
  gap: var(--space-3, 1.5rem);
}
.mod-featured-boxes.is-finance .br-feat-controls { display: none; }
.mod-featured-boxes.is-finance .br-fin-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 1.5rem);
  background: var(--color-surface, #F5F3F0);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-card-lg, 1rem);
  padding: var(--space-4, 2rem);
  text-decoration: none;
  color: var(--color-ink, #2B2622);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mod-featured-boxes.is-finance .br-fin-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover, 0 10px 28px rgba(43, 38, 34, .1));
  border-color: var(--color-action, #FF6D00);
  color: var(--color-ink, #2B2622);
}
.mod-featured-boxes.is-finance .mod-fbox-fin-icon {
  width: 3.5rem;
  height: var(--btn-height, 3.5rem);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-action, #FF6D00);
}
.mod-featured-boxes.is-finance .mod-fbox-fin-body { min-width: 0; }
.mod-featured-boxes.is-finance .mod-fbox-fin-badge {
  font-size: var(--text-badge, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--text-nav-track, 0.06em);
  text-transform: uppercase;
  color: var(--color-ink-3, #9A938C);
  margin-bottom: var(--space-1, 0.5rem);
}
.mod-featured-boxes.is-finance .mod-fbox-fin-title {
  font-weight: 600;
  margin-bottom: var(--space-15, 0.75rem);
}
.mod-featured-boxes.is-finance .mod-fbox-fin-text { margin-bottom: var(--space-2, 1rem); }
.mod-featured-boxes.is-finance .mod-fbox-fin-cta {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.5rem);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-action-text, #B84E00);
}
/* Makieta: karty przechodzą w jedną kolumnę poniżej 900 px. */
@media (max-width: 900px) {
  .mod-featured-boxes.is-finance .br-feat-track { grid-template-columns: minmax(0, 1fr); }
}

/* --- Opakowanie modułu w motywie (elements/modules.html) ----------------- */
/* Motyw opakowuje każdy moduł w kartę z nagłówkiem (nazwa instancji). Sekcja
   kafli jest blokiem własnym, więc opakowanie neutralizujemy, a nazwę
   instancji ukrywamy. Selektor :has() — w starszych przeglądarkach nazwa
   instancji pozostanie widoczna (wpis kosmetyczny). */
section.module:has(> .module-body > .mod-featured-boxes) {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
section.module:has(> .module-body > .mod-featured-boxes) > .neon-card-title { display: none; }

/* --- Układ „teaser": karty z tłem i CTA (makieta: „Pozostałe moduły
   BAURAD" na stronie projektów). Karta = obraz w tle + gradient + etykieta,
   tytuł, opis i strzałka CTA w kolorze akcji. --------------------------- */
/* Sekcja jest osadzona we własnym bloku motywu (.br-arch-modules__inner na
   stronie projektów, z containerem i paddingiem), dlatego neutralizujemy
   odstępy opakowania modułu — margines i padding zostają po stronie motywu,
   tak jak w makiecie (ten sam wzorzec co układ `finance`). */
.mod-featured-boxes.is-teaser {
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
.mod-featured-boxes.is-teaser .br-feat-wrap { overflow: visible; }
.mod-featured-boxes.is-teaser .mod-fbox-teaser {
  display: grid;
  grid-template-columns: repeat(var(--mod-fbox-cols, 3), minmax(0, 1fr));
  /* Makieta (i siatka teaserów redakcyjnych motywu) używa --space-4. */
  gap: var(--space-4, 2rem);
}
.mod-fbox-teaser__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 16.5rem;
  min-width: 0;
  border-radius: var(--radius-card-lg, 1.25rem);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-bg, #fff);
  background-color: var(--color-ink, #2B2622);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mod-fbox-teaser__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-overlay, 0 18px 40px rgba(43,38,34,.22));
  color: var(--color-bg, #fff);
}
.mod-fbox-teaser__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink, #2B2622);
  background-size: cover;
  background-position: center;
}
.mod-fbox-teaser__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(43,38,34,0.15) 25%, rgba(43,38,34,0.86) 100%);
}
.mod-fbox-teaser__badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--color-bg, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill, 999px);
}
.mod-fbox-teaser__body {
  position: relative;
  padding: var(--space-3, 1.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2, 1rem);
}
.mod-fbox-teaser__texts { display: flex; flex-direction: column; gap: var(--space-1, 0.5rem); }
.mod-fbox-teaser__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.mod-fbox-teaser__sub { font-size: 0.875rem; line-height: 1.35; color: rgba(255,255,255,0.82); }
.mod-fbox-teaser__arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-action, #FF6D00);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .mod-featured-boxes.is-teaser .mod-fbox-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mod-featured-boxes.is-teaser .mod-fbox-teaser { grid-template-columns: minmax(0, 1fr); }
}

/* --- Responsywność ------------------------------------------------------- */
/* Układ z konfiguracji obowiązuje na desktopie; na mniejszych ekranach
   ograniczamy liczbę kolumn / widocznych kafli (jak makieta). */
@media (max-width: 1024px) {
  .mod-featured-boxes.is-grid .br-feat-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod-featured-boxes.is-carousel .br-feat-item { width: calc((100% - 2 * var(--mod-fbox-gap)) / 3); }
}
@media (max-width: 768px) {
  .mod-featured-boxes.is-grid .br-feat-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-featured-boxes.is-carousel .br-feat-item { width: calc((100% - var(--mod-fbox-gap)) / 2); }
}
@media (max-width: 640px) {
  .mod-featured-boxes.is-grid .br-feat-track { grid-template-columns: minmax(0, 1fr); }
  .mod-featured-boxes.is-carousel .br-feat-item { width: 100%; }
}

/* --- Redukcja ruchu ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mod-featured-boxes.is-carousel .br-feat-wrap { scroll-behavior: auto; }
}

/* --- Nagłówek sekcji (tytuł + opis z ustawień instancji) ----------------- */
/* Nagłówek jest opcjonalny (pusty tytuł/opis = brak bloku). Tytuł korzysta z
   klas motywu (.br-sec-title), opis to treść HTML z edytora TinyMCE. */
.mod-featured-boxes .mod-fbox-head {
  margin-bottom: var(--space-6, 3rem);
}
.mod-featured-boxes .mod-fbox-head__title {
  margin: 0;
}
.mod-featured-boxes .mod-fbox-head__text {
  max-width: 48rem;
  margin-top: var(--space-2, 1rem);
  color: var(--color-ink-2, #6B645E);
}
.mod-featured-boxes .mod-fbox-head__text > :first-child { margin-top: 0; }
.mod-featured-boxes .mod-fbox-head__text > :last-child { margin-bottom: 0; }

/* --- Wariant redakcyjny „values" ----------------------------------------- */
/* Blok „WERTE (editorial, no icon grid)" z makiety BAURAD
   (`Ueber uns.dc.html`): pełna szerokość z hairline'ami, wewnątrz kontener
   --container, label w stylu uppercase + lead, kafle jako obramowane karty
   w dwóch kolumnach z numerem porządkowym 01..04 zamiast ikony.

   Włączanie: dodatkowa klasa instancji (panel: Moduły → instancja →
   „Dodatkowa klasa CSS"): `addclass = mod-fbox--values`. Bez tej klasy
   moduł wygląda jak dotąd (kafle z ikoną, siatka/karuzela).

   Numeracja to licznik CSS (kolejność kafli w panelu = kolejność numerów),
   więc moduł nie potrzebuje dodatkowego pola „index" w wierszu kafla.
   Ikony są ukryte, bo makieta nie ma ich w tym bloku — usunięcie reguły
   `.br-feat-item__icon { display: none }` przywraca ikony bez zmiany
   pozostałych stylów. Wariant działa w układzie `grid` (w karuzeli numer
   nie ma sensu — makieta pokazuje ten blok jako siatkę). */
.mod-featured-boxes.mod-fbox--values {
  max-width: none;
  margin: 0;
  padding: var(--space-10, 5rem) 0;
  background: var(--color-bg, #fff);
  border-top: 1px solid var(--color-line, #E5E1DC);
  border-bottom: 1px solid var(--color-line, #E5E1DC);
}

/* Nagłówek i siatka siedzą w kontenerze makiety (--container) — tło i
   hairline'y sekcji zostają pełnej szerokości. */
.mod-featured-boxes.mod-fbox--values .mod-fbox-head,
.mod-featured-boxes.mod-fbox--values .br-feat-wrap {
  width: 100%;
  max-width: var(--container, clamp(64rem, 88vw, 120rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4, 2rem);
  padding-right: var(--space-4, 2rem);
}
.mod-featured-boxes.mod-fbox--values .mod-fbox-head {
  padding-top: 0;
  margin-bottom: var(--space-6, 3rem);
}

/* Label sekcji: 1rem 600 uppercase w --color-ink-2 (makieta), a nie
   displayowy .br-sec-title ze strony głównej. */
.mod-featured-boxes.mod-fbox--values .mod-fbox-head__title {
  margin: 0 0 var(--space-15, 0.75rem);
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  line-height: var(--text-body-lh, 1.65);
  letter-spacing: var(--text-nav-track, 0.06em);
  text-transform: uppercase;
  color: var(--color-ink-2, #6B645E);
}
/* Lead sekcji: --text-lead w pełnym kolorze tekstu, maks. 40rem (makieta). */
.mod-featured-boxes.mod-fbox--values .mod-fbox-head__text {
  max-width: 40rem;
  margin: 0;
  font-size: var(--text-lead, 1.5rem);
  line-height: var(--text-lead-lh, 1.55);
  color: var(--color-ink, #2B2622);
}

/* Kafle: obramowane karty w dwóch kolumnach, odstępy przez marginesy
   dzieci (jak w makiecie, gdzie karta nie ma gap). */
.mod-featured-boxes.mod-fbox--values .br-feat-track {
  display: grid;
  grid-template-columns: repeat(var(--mod-fbox-cols, 2), minmax(0, 1fr));
  gap: var(--space-4, 2rem);
  align-items: stretch;
  counter-reset: mod-fbox-values;
}
.mod-featured-boxes.mod-fbox--values .br-feat-item {
  counter-increment: mod-fbox-values;
  gap: 0;
  padding: var(--space-4, 2rem);
  background: var(--color-surface, #F5F3F0);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-field, 0.75rem);
}
.mod-featured-boxes.mod-fbox--values .br-feat-item::before {
  content: counter(mod-fbox-values, decimal-leading-zero);
  margin-bottom: var(--space-25, 1.25rem);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-body-sm, 0.875rem);
  color: var(--color-ink-3, #9A938C);
}
.mod-featured-boxes.mod-fbox--values .br-feat-item__icon { display: none; }
.mod-featured-boxes.mod-fbox--values .br-feat-item__title {
  margin-bottom: var(--space-15, 0.75rem);
  font-size: var(--text-h3, 1.5rem);
  font-weight: 600;
  line-height: var(--text-h3-lh, 1.3);
  color: var(--color-ink, #2B2622);
}
.mod-featured-boxes.mod-fbox--values .br-feat-item__sub {
  font-size: var(--text-body, 1rem);
  line-height: var(--text-body-lh, 1.65);
  color: var(--color-ink, #2B2622);
}

/* Siatka wartości trzyma dwie kolumny do 864 px, niżej jedną (makieta).
   Bazowy układ `.is-grid` schodzi do trzech kolumn już przy 1024 px,
   dlatego wariant nadpisuje oba progi. */
@media (max-width: 1024px) {
  .mod-featured-boxes.mod-fbox--values .br-feat-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 864px) {
  .mod-featured-boxes.mod-fbox--values .br-feat-track {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Motyw nadpisuje rozmiar .br-sec-title na 640 px z !important — wariant
   musi to przebić, żeby label pozostał 1rem uppercase (wyższa specyficzność
   przy obu !important). */
@media (max-width: 640px) {
  .mod-featured-boxes.mod-fbox--values .mod-fbox-head__title {
    font-size: var(--text-body, 1rem) !important;
    line-height: var(--text-body-lh, 1.65) !important;
    letter-spacing: var(--text-nav-track, 0.06em) !important;
  }
}