/* ==========================================================================
   BAURAD Framework – general
   Layout, typography, panels, buttons, forms, utilities (Bootstrap-like)
   ========================================================================== */

/* --- Reset extras (tokens already set box-sizing / body) --- */
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Kanon design systemu dla pol (docs/baurad-design-system.md, „Eingabefelder"):
   wpisany tekst i placeholder zawsze wagi 400. Kontenery pol maja nizej
   font-weight 600 dla samej etykiety (.br-acct-field, .br-reg-field), a pola
   dziedziczylyby te wage przez `font: inherit` powyzej - regula ponizej
   przywraca 400 globalnie (bez !important; reguly klasowe, np. .br-acct-select,
   nadal wygrywaja swoja specyficznoscia). */
input, select, textarea { font-weight: 400; }
input::placeholder, textarea::placeholder { font-weight: 400; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

/* --- Layout: container / row / columns --- */
.br-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-page);
}
.br-container--narrow { max-width: var(--container-read); }
.br-container--flush { padding-inline: 0; }

.br-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-width: 0;
}
.br-row > * { min-width: 0; }

.br-grid {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.br-grid > * { min-width: 0; }
.br-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.br-grid--auto { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.br-col { flex: 1 1 0; }
.br-col--auto { flex: 0 0 auto; }
.br-col-6 { flex: 0 0 calc(50% - var(--space-2)); max-width: calc(50% - var(--space-2)); }
.br-col-4 { flex: 0 0 calc(33.333% - var(--space-3)); max-width: calc(33.333% - var(--space-3)); }
.br-col-3 { flex: 0 0 calc(25% - var(--space-3)); max-width: calc(25% - var(--space-3)); }
.br-col-8 { flex: 0 0 calc(66.666% - var(--space-3)); max-width: calc(66.666% - var(--space-3)); }
.br-col-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 864px) {
  .br-grid--3, .br-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-col-4, .br-col-3, .br-col-8 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 480px) {
  .br-grid--2, .br-grid--3, .br-grid--4 { grid-template-columns: 1fr; }
  .br-col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* --- Typography --- */
.br-hero-title {
  font-family: var(--font-ui);
  font-size: var(--text-hero);
  line-height: var(--text-hero-lh);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.br-hero-title--editorial {
  font-family: var(--font-serif);
  font-size: var(--text-hero-editorial);
  line-height: var(--text-hero-editorial-lh);
}
.br-display {
  font-family: var(--font-ui);
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: break-word;
}
.br-h1 { font-size: var(--text-h1); line-height: var(--text-h1-lh); font-weight: 700; letter-spacing: var(--text-h1-track); margin: 0; }
.br-h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: 600; letter-spacing: var(--text-h2-track); margin: 0; }
.br-h3 { font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: 600; margin: 0; }
.br-lead { font-size: var(--text-lead); line-height: var(--text-lead-lh); margin: 0; }
.br-body { font-size: var(--text-body); line-height: var(--text-body-lh); margin: 0; }
.br-body-lg { font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); margin: 0; }
.br-body-sm { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); margin: 0; }
.br-caption { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-ink-2); margin: 0; }
.br-eyebrow {
  font-size: var(--text-label);
  line-height: var(--text-label-lh);
  font-weight: 600;
  letter-spacing: var(--text-label-track);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0;
}
.br-muted { color: var(--color-ink-2); }
.br-text-serif { font-family: var(--font-serif); }
.br-teaser-title {
  font-family: var(--font-serif);
  font-size: var(--text-teaser-title);
  line-height: var(--text-teaser-title-lh);
  font-weight: 600;
  margin: 0;
}

/* --- Surfaces / panels / cards --- */
.br-paper { background: var(--color-paper); }
.br-surface { background: var(--color-surface); }
.br-bg { background: var(--color-bg); }

.br-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card-lg);
  padding: var(--space-4);
}
.br-panel--surface {
  background: var(--color-surface);
  border-color: transparent;
}
.br-panel--shadow { box-shadow: var(--shadow-panel); }

.br-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.br-card:hover { transform: translateY(-4px); color: var(--color-ink); }
.br-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface) center / cover no-repeat;
  border-radius: var(--radius-field);
  overflow: hidden;
  margin-bottom: var(--space-2);
  transition: box-shadow 0.2s ease;
}
.br-card:hover .br-card__media { box-shadow: var(--shadow-card-hover); }
.br-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.br-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-badge);
  font-weight: 600;
  padding: var(--space-05) var(--space-15);
  border-radius: var(--radius-pill);
}

/* --- Buttons --- */
.br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-15);
  height: var(--btn-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-button);
  font-weight: 600;
  line-height: var(--text-button-lh);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.br-btn:hover { text-decoration: none; }
.br-btn--primary {
  background: var(--color-action);
  color: var(--color-bg);
  border-color: var(--color-action);
}
.br-btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-bg);
}
.br-btn--primary:active { background: var(--color-action-active); }
.br-btn--secondary {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.br-btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}
.br-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.br-btn--ghost:hover {
  border-color: var(--color-action);
  color: var(--color-action);
}
.br-btn--sm {
  height: var(--btn-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-body-sm);
}
.br-btn--icon {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  padding: 0;
}
.br-btn:disabled, .br-btn.is-disabled {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-text);
  pointer-events: none;
}

/* --- Chips / pills / badges --- */
.br-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  background: none;
  border-radius: var(--radius-pill);
  padding: var(--space-15) var(--space-25);
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.br-chip:hover {
  border-color: var(--color-action);
  color: var(--color-action);
  transform: translateY(-1px);
}
.br-chip.is-active {
  border-color: var(--color-ink);
  background: var(--color-surface);
  font-weight: 600;
}
.br-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: var(--text-badge-track);
  text-transform: uppercase;
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-disabled);
  color: var(--color-ink-2);
}

/* --- Forms --- */
.br-label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--text-label-track);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-1);
}
.br-input,
.br-select,
.br-textarea {
  width: 100%;
  height: var(--field-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-bg);
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.br-textarea { height: auto; min-height: 7rem; padding: var(--space-2); resize: vertical; }
.br-input:focus-visible,
.br-select:focus-visible,
.br-textarea:focus-visible {
  box-shadow: none;
  border-color: var(--focus-field-border);
  outline: none;
}
.br-field {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-bg);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.br-field:focus-within {
  border-color: var(--focus-field-border);
  box-shadow: var(--focus-ring-field);
}
.br-field--pill { border-radius: var(--radius-pill); padding: var(--space-15) var(--space-15) var(--space-15) var(--space-3); }
.br-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--space-1) 0;
}
.br-field input:focus-visible { box-shadow: none; outline: none; }
.br-form-error { color: var(--color-error); font-size: var(--text-caption); margin-top: var(--space-1); }
.br-form-success { color: var(--color-success); font-size: var(--text-caption); margin-top: var(--space-1); }

/* --- Section helpers --- */
.br-section {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-12) var(--space-page);
}
.br-section--sm { padding-block: var(--space-8); }
.br-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.br-divider {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-6) 0;
}

/* --- Hero (start page pattern) --- */
.br-hero {
  position: relative;
  background: var(--color-paper);
  overflow: hidden;
}
.br-hero__img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  background: center / cover no-repeat;
}
.br-hero__fade {
  position: absolute;
  top: 0; bottom: 0;
  left: 28%;
  width: 34%;
  background: linear-gradient(90deg, var(--color-paper) 0%, rgba(247,243,232,0.86) 40%, rgba(247,243,232,0) 100%);
  pointer-events: none;
}
.br-hero__logo {
  position: absolute;
  top: 50%;
  left: 68%;
  width: clamp(120px, 13vw, 190px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 34px rgba(255,255,255,1));
}
.br-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 6.5rem var(--space-4) var(--space-15x);
}
.br-hero__copy { max-width: 46%; }

@media (max-width: 1024px) {
  .br-hero__copy { max-width: 48%; }
  .br-hero__fade { left: 20%; width: 40%; }
  .br-hero__logo { left: 70%; width: clamp(104px, 14vw, 150px); }
}
@media (max-width: 864px) {
  .br-hero { display: flex; flex-direction: column; }
  .br-hero__inner { padding: var(--space-8) var(--space-4) var(--space-5); order: 1; }
  .br-hero__copy { max-width: 100%; }
  .br-hero__img {
    position: relative;
    width: 100%;
    height: 19rem;
    order: 2;
    background-position: 68% 82%;
  }
  .br-hero__fade { display: none; }
  .br-hero__logo {
    top: auto;
    bottom: 9.5rem;
    left: 2rem;
    width: 6rem;
    transform: translateY(50%);
  }
}
@media (max-width: 480px) {
  .br-hero__inner { padding: var(--space-6) var(--space-3) var(--space-4); }
  .br-hero__logo { bottom: 7rem; left: 1.5rem; width: 5.5rem; }
  .br-hero__img { height: 14.5rem; }
}

/* --- Partner CTA bars --- */
.br-pcta { display: flex; flex-direction: column; gap: var(--space-2); }
.br-pcta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card-lg);
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.br-pcta__row:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
}
.br-pcta__inner { display: flex; align-items: center; gap: var(--space-25); min-width: 0; }
.br-pcta__icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-field);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .br-pcta__row, .br-pcta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* --- Icons (img/icons/*.svg) --- */
.br-icon-img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: none;
}
/* Monochrome: inherits text color via CSS mask */
.br-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: middle;
}
.br-icon--14 { width: 14px; height: 14px; }
.br-icon--15 { width: 15px; height: 15px; }
.br-icon--16 { width: 16px; height: 16px; }
.br-icon--17 { width: 17px; height: 17px; }
.br-icon--18 { width: 18px; height: 18px; }
.br-icon--20 { width: 20px; height: 20px; }
.br-icon--22 { width: 22px; height: 22px; }
.br-icon--26 { width: 26px; height: 26px; }
.br-icon--30 { width: 30px; height: 30px; }
.br-icon--34 { width: 34px; height: 34px; }

/* --- Page shell --- */
.br-page { min-height: 100vh; display: flex; flex-direction: column; }
.br-page__main { flex: 1 0 auto; }
.br-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border: 0;
}

/* --- Spacing utilities --- */
.br-mt-1 { margin-top: var(--space-1); }
.br-mt-2 { margin-top: var(--space-2); }
.br-mt-3 { margin-top: var(--space-3); }
.br-mt-4 { margin-top: var(--space-4); }
.br-mt-5 { margin-top: var(--space-5); }
.br-mt-6 { margin-top: var(--space-6); }
.br-mt-8 { margin-top: var(--space-8); }
.br-mb-1 { margin-bottom: var(--space-1); }
.br-mb-2 { margin-bottom: var(--space-2); }
.br-mb-3 { margin-bottom: var(--space-3); }
.br-mb-4 { margin-bottom: var(--space-4); }
.br-mb-6 { margin-bottom: var(--space-6); }
.br-gap-1 { gap: var(--space-1); }
.br-gap-2 { gap: var(--space-2); }
.br-gap-3 { gap: var(--space-3); }
.br-gap-4 { gap: var(--space-4); }
.br-flex { display: flex; }
.br-flex-col { display: flex; flex-direction: column; }
.br-items-center { align-items: center; }
.br-justify-between { justify-content: space-between; }
.br-wrap { flex-wrap: wrap; }
.br-text-center { text-align: center; }
.br-w-full { width: 100%; }

/* --- Media object / meta row --- */
.br-meta {
  display: flex;
  gap: var(--space-25);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--color-ink-2);
}
.br-meta__item { display: flex; align-items: center; gap: var(--space-1); }

/* --- Category tiles --- */
.br-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  border-radius: var(--radius-control);
  overflow: hidden;
  transition: transform 0.2s ease;
}
.br-cat:hover { transform: translateY(-2px); color: var(--color-ink); }
.br-cat__img {
  aspect-ratio: 16 / 10;
  background: var(--color-surface) center / cover no-repeat;
  border-radius: var(--radius-control);
}

/* --- Alert / notice --- */
.br-alert {
  border-radius: var(--radius-card);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.br-alert--error {
  border-color: var(--color-error);
  background: var(--color-error-tint);
  color: var(--color-error);
}
.br-alert--success {
  border-color: var(--color-success);
  background: var(--color-success-tint);
  color: var(--color-success);
}

/* --- File protocol banner (override via JS) --- */
.br-file-warn {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 99999;
  background: var(--color-ink);
  color: #fff;
  font: 600 14px/1.5 var(--font-ui);
  padding: 14px 20px;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.br-file-warn a { color: var(--color-action); font-weight: 600; margin-left: auto; }

/* ==========================================================================
   BAURAD Framework – podstrona „Kontakt" (widok contact.html)
   Widok: `theme/baurad/contact.html` — `x_pages.template` podstrony
   „Kontakt" (`pl/strona/kontakt-pl`). Arkusz general.css jest w x_includes
   oznaczony jako „Ładuj zawsze", dlatego KAŻDA reguła niżej jest ograniczona
   do `.br-page__contact` (klasa <main> tego jednego widoku) — poza tą
   podstroną nic się nie zmienia.

   Makieta: `makieta_baurad/Kontakt.dc.html`. Układ: pasek tytułu, a pod nim
   dwie kolumny w proporcji 1.15fr / 1fr — karta z formularzem po lewej,
   karty „Kontakt bezpośredni" i „Może szybciej" po prawej. Makieta trzyma
   te wartości w stylach inline; tutaj są w arkuszu, więc treść z panelu
   zostaje czystym HTML-em.

   Markup: pasek tytułu — widok (.contact-header, .contact-header-label,
   .contact-header-content oraz pole „Treść" wpisu), formularz — komponent
   „Kontakty" (`components/contacts/assets/css/contact-form.css`, moduł
   **Contact** na pozycji `contact_left`), karty po prawej — moduł **Tekst
   HTML** (`.contact-data > .mod-html`) i moduł **Menu** (`.contact-menu`
   z `.mod-menu__header` + `.br-nav`).

   Wyjątki wymagające `!important`: kreator formularza wypisuje w treści
   strony własny arkusz z selektorami po `#id`
   (`#fb-mc-99-s-…{margin-bottom:24px}`) — ma więc wyższą specyficzność niż
   dowolny selektor klasowy. Nadpisujemy tylko odstępy i siatkę pól.
   ========================================================================== */

/* --- Powłoka strony: stopka nie jedzie w górę na krótkiej treści (klasa
       `.br-page__main` z general.css tu nie obowiązuje — ten widok ma własną
       klasę <main>). --- */
.br-page__contact {
  display: block;
  flex: 1 0 auto;
}

/* ==========================================================================
   PASEK TYTUŁU (makieta: etykieta + h1 + lead; padding 5rem / 2rem / 0)
   ========================================================================== */

/* --- Miara kolumny treści: --container + boczne 2rem (poniżej 640px
       makieta zwęża margines boczny do --space-3 — patrz media niżej). --- */
.br-page__contact .contact-header {
  max-width: var(--container, 75rem);
  margin: 0 auto;
  padding: var(--space-10, 5rem) var(--space-4, 2rem) 0;
}

/* --- Etykieta nad tytułem: 14px / 700 / uppercase / tracking 0.1em --- */
.br-page__contact .contact-header-label {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-2, #6B645E);
  margin-bottom: var(--space-3, 1.5rem);
}

/* --- Tytuł: --text-h1 z trackingiem -0.032em (makieta), miara 47.5rem --- */
.br-page__contact .contact-header-content h1 {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--text-h1, 2.5rem);
  line-height: var(--text-h1-lh, 1.15);
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--color-ink, #2B2622);
  margin: 0 0 var(--space-25, 1.25rem);
  max-width: 47.5rem;
  text-wrap: pretty;
}

/* --- Lead: --text-body-lg w --color-ink-2, miara 40rem --- */
.br-page__contact .contact-header-content p {
  font-size: var(--text-body-lg, 1.25rem);
  line-height: var(--text-body-lg-lh, 1.62);
  color: var(--color-ink-2, #6B645E);
  margin: 0;
  max-width: 40rem;
}

/* ==========================================================================
   DWIE KOLUMNY (makieta: grid 1.15fr / 1fr, gap 4rem, align-items start,
   padding 3.5rem / 2rem / 7.5rem)
   ========================================================================== */
.br-page__contact .contact-row {
  max-width: var(--container, 75rem);
  margin: 0 auto;
  padding: var(--space-7, 3.5rem) var(--space-4, 2rem) var(--space-15x, 7.5rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8, 4rem);
  align-items: start;
}
.br-page__contact .contact-row-left,
.br-page__contact .contact-row-right {
  min-width: 0;
}

/* --- Prawa kolumna: dwie karty jedna pod drugą, odstęp --space-25 --- */
.br-page__contact .contact-row-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-25, 1.25rem);
}

/* ==========================================================================
   KARTA FORMULARZA (makieta: karta wypełnia kolumnę 1.15fr — bez własnej
   szerokości; hairline, --radius-surface, padding 2.5rem / 2rem)
   ========================================================================== */
.br-page__contact .contact-row-left .mod-contact-widget {
  max-width: none;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-surface, 1.25rem);
  padding: var(--space-5, 2.5rem) var(--space-4, 2rem);
}

/* --- Tytuł karty: 20px / 700 / -0.02em, odstęp --space-3 --- */
.br-page__contact .mod-contact .mod-contact__intro-heading {
  font-size: var(--text-body-lg, 1.25rem);
  line-height: var(--text-body-lg-lh, 1.62);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink, #2B2622);
  margin: 0 0 var(--space-3, 1.5rem);
}

/* --- Makieta nie ma akapitu wprowadzenia pod tytułem formularza (tytuł idzie
       od razu w pytanie „O co chodzi?"). Tekst zostaje w konfiguracji modułu
       (panel) — ukrywa go wyłącznie ten widok. --- */
.br-page__contact .mod-contact .mod-contact__intro-text {
  display: none;
}

/* --- Etykiety pól: 14px / 600, bez uppercase i trackingu, w kolorze tekstu
       podstawowego (makieta: etykieta to zwykły tekst nad polem). --- */
.br-page__contact .mod-contact .mod-contact__label {
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink, #2B2622);
  margin: 0 0 var(--space-1, 0.5rem);
}

/* --- Gwiazdki wymagalności: makieta ich nie pokazuje, a pola wymagane
       pilnuje atrybut `required` w HTML-u. --- */
.br-page__contact .mod-contact .mod-contact__req {
  display: none;
}

/* --- Odstępy i siatka pól. Kreator ustawia margines sekcji oraz
       row/column-gap na 24px selektorami po `#id`, stąd `!important`.
       Makieta: 20px między polami w wierszu i między wierszami pól, 24px
       po sekcji pytania „O co chodzi?", a sekcja zgody bez marginesu —
       odstęp do przycisku daje `.mod-contact__actions` (2rem). --- */
.br-page__contact .mod-contact .mod-contact__sec {
  margin-bottom: var(--space-25, 1.25rem) !important;
}
.br-page__contact .mod-contact .mod-contact__sec .mod-contact__cols {
  column-gap: var(--space-25, 1.25rem) !important;
  row-gap: var(--space-25, 1.25rem) !important;
}
.br-page__contact .mod-contact .mod-contact__sec:has(input[type="radio"]) {
  margin-bottom: var(--space-3, 1.5rem) !important;
}
.br-page__contact .mod-contact .mod-contact__sec:has(input[type="checkbox"]) {
  margin-bottom: 0 !important;
}

/* --- Pola nie mają własnego marginesu — odstępy dają siatka sekcji
       (grid gap) i etykieta nad polem (0.5rem). --- */
.br-page__contact .mod-contact .mod-contact__field {
  margin: 0;
}

/* --- 0.75rem między pytaniem a rzędem pigułek (makieta) --- */
.br-page__contact .mod-contact .mod-contact__sec:has(input[type="radio"]) .mod-contact__label {
  margin-bottom: var(--space-15, 0.75rem);
}

/* --- Pola: makieta gasi pierścień fokusu i zostawia samą pomarańczową
       ramkę (`box-shadow: none`, `border-color: --color-action`). --- */
.br-page__contact .mod-contact .mod-contact__input:focus-visible,
.br-page__contact .mod-contact .mod-contact__select:focus-visible,
.br-page__contact .mod-contact .mod-contact__textarea:focus-visible {
  border-color: var(--color-action, #FF6D00);
  box-shadow: none;
  outline: none;
}

/* ==========================================================================
   BAZA FORMULARZA (siatka sekcji i kolumn, pola, honeypot).
   Arkusz komponentu „Kontakty"
   (`components/contacts/assets/css/contact-form.css`) NIE dociera do
   przeglądarki: katalog `components/` jest zamknięty dla HTTP
   (`components/.htaccess` → „Require all denied", część frontowa komponentów
   ładuje się wyłącznie serwerowo). Dlatego bazę pól makiety wypisujemy
   w arkuszu motywu — bez niej formularz renderuje się bez stylów (pola jak
   w czystym HTML-u, honeypot widoczny, pigułki jako zwykłe radio).
   ========================================================================== */

/* --- Sekcja + siatka 12 kolumn; szerokości kolumn nadaje kreator w treści
       strony (`grid-column: span n` w regułach po `#id`). --- */
.br-page__contact .mod-contact .mod-contact__sec { display: block; }
.br-page__contact .mod-contact .mod-contact__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.br-page__contact .mod-contact .mod-contact__col { min-width: 0; }

/* --- Honeypot: pole-pułapka zostaje poza ekranem --- */
.br-page__contact .mod-contact .mod-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pola: 48px wysokości, hairline, --radius-field, tło --color-bg,
       tekst 16px (makieta). --- */
.br-page__contact .mod-contact .mod-contact__input,
.br-page__contact .mod-contact .mod-contact__select,
.br-page__contact .mod-contact .mod-contact__textarea {
  width: 100%;
  min-height: var(--field-height, 3rem);
  padding: 0 var(--space-2, 1rem);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-field, 0.75rem);
  background: var(--color-bg, #fff);
  color: var(--color-ink, #2B2622);
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--text-body, 1rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* --- Pole wiadomości: makieta ma 6 wierszy (rows="6"), CMS renderuje
       rows="5", dlatego wysokość pola wpisujemy w arkuszu:
       6 * 1.65rem (--text-body-lh) + 2 * 1rem (padding --space-2). --- */
.br-page__contact .mod-contact .mod-contact__textarea {
  min-height: 11.9rem;
  padding: var(--space-2, 1rem);
  line-height: var(--text-body-lh, 1.65);
  resize: vertical;
}

/* --- Pigułki (pytanie „O co chodzi?"): 40px wysokości, --radius-pill,
       hairline, 14px / 600; wybrana = --color-ink na --color-bg (makieta) --- */
.br-page__contact .mod-contact .mod-contact__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.5rem);
}
.br-page__contact .mod-contact .mod-contact__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-sm, 2.5rem);
  padding: 0 var(--space-25, 1.25rem);
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg, #fff);
  color: var(--color-ink, #2B2622);
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.br-page__contact .mod-contact .mod-contact__pill:hover {
  border-color: var(--color-ink, #2B2622);
}
.br-page__contact .mod-contact .mod-contact__pill:focus-within {
  border-color: var(--color-ink, #2B2622);
  box-shadow: 0 0 0 0.1875rem var(--focus-ring-field, rgba(255, 109, 0, 0.14));
}
/* Radio/checkbox w pigułce jest tylko nośnikiem stanu — klika się pigułkę. */
.br-page__contact .mod-contact .mod-contact__pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.br-page__contact .mod-contact .mod-contact__pill .mod-contact__pill-text {
  pointer-events: none;
}
.br-page__contact .mod-contact .mod-contact__pill.is-active,
.br-page__contact .mod-contact .mod-contact__pill:has(input:checked) {
  border-color: var(--color-ink, #2B2622);
  background: var(--color-ink, #2B2622);
  color: var(--color-bg, #fff);
}

/* --- Rząd przycisku: 2rem nad przyciskiem (odstęp od zgody, makieta) --- */
.br-page__contact .mod-contact .mod-contact__actions {
  margin-top: var(--space-4, 2rem);
}

/* --- Przycisk: pigułka 56px w --color-action, tekst --color-bg;
       hover w --color-action-hover (makieta). --- */
.br-page__contact .mod-contact .mod-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height, 3.5rem);
  padding: 0 var(--space-4, 2rem);
  border: 1px solid var(--color-action, #FF6D00);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-action, #FF6D00);
  color: var(--color-bg, #fff);
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: var(--text-button, 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.br-page__contact .mod-contact .mod-contact__submit:hover {
  background: var(--color-action-hover, #E56200);
  border-color: var(--color-action-hover, #E56200);
}

/* --- Komunikaty po wysłaniu formularza i podpowiedź, gdy formularza brak
       (makieta pokazuje w tym miejscu ekran „Dziękujemy"), --- */
.br-page__contact .mod-contact .mod-contact__msg {
  margin: 0 0 var(--space-3, 1.5rem);
  padding: var(--space-2, 1rem);
  border-radius: var(--radius-field, 0.75rem);
}
.br-page__contact .mod-contact .mod-contact__msg--ok {
  background: var(--color-success-tint, #EAF3EE);
  color: var(--color-success, #2E7D57);
}
.br-page__contact .mod-contact .mod-contact__msg--err {
  background: var(--color-error-tint, #FBECEA);
  color: var(--color-error, #C4362B);
}
.br-page__contact .mod-contact .mod-contact__hint {
  display: block;
  margin-top: var(--space-1, 0.5rem);
  font-size: var(--text-caption, 0.8125rem);
  color: var(--color-ink-3, #9A938C);
}

/* ==========================================================================
   ZGODA RODO (makieta: zwykły checkbox 20px + tekst zgody, ustawione od
   góry; bez ramki pigułki). Kreator renderuje każdy checkbox jako pigułkę,
   dlatego zdejmujemy z niej ramkę, tło i wysokość, a samo pole wyboru
   pokazujemy (component css ukrywa inputy w pigułkach).
   ========================================================================== */
.br-page__contact .mod-contact .mod-contact__pill:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-15, 0.75rem);
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-ink-2, #6B645E);
  font-size: var(--text-body-sm, 0.875rem);
  font-weight: 400;
  line-height: var(--text-body-sm-lh, 1.55);
  text-align: left;
  cursor: default;
}
.br-page__contact .mod-contact .mod-contact__pill:has(input[type="checkbox"]):hover {
  border-color: transparent;
}
.br-page__contact .mod-contact .mod-contact__pill:has(input[type="checkbox"]) input[type="checkbox"] {
  position: static;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  accent-color: var(--color-action, #FF6D00);
}

/* --- Makieta nie ma nagłówka nad zgodą — treść zgody niesie sama pigułka
       (tekst pola), więc etykietę tego jednego pola ukrywamy. --- */
.br-page__contact .mod-contact .mod-contact__sec:has(input[type="checkbox"]) .mod-contact__label {
  display: none;
}

/* --- Rząd przycisku zostaje jak w component css (--space-4 nad przyciskiem,
       pigułka --color-action). Makieta trzyma obok przycisku jeszcze notkę
       „Odpowiedź w ciągu jednego dnia roboczego." — moduł jej nie renderuje,
       więc treść dołożona CSS-em nie wchodzi w grę (patrz README modułu). --- */

/* ==========================================================================
   KARTA „KONTAKT BEZPOŚREDNI" (makieta: tło --color-paper,
   --radius-surface, padding 2rem; cztery pary etykieta/wartość)
   ========================================================================== */
.br-page__contact .contact-data {
  background: var(--color-paper, #F7F3E8);
  border-radius: var(--radius-surface, 1.25rem);
  padding: var(--space-4, 2rem);
}

/* --- Tytuł karty (h3 z modułu „Tekst HTML"): 13px / 700 / uppercase /
       tracking 0.08em w --color-ink-2, odstęp --space-3 --- */
.br-page__contact .contact-data .mod-html > h3 {
  font-size: var(--text-caption, 0.8125rem);
  line-height: var(--text-caption-lh, 1.231);
  font-weight: 700;
  letter-spacing: var(--text-badge-track, 0.08em);
  text-transform: uppercase;
  color: var(--color-ink-2, #6B645E);
  margin: 0 0 var(--space-3, 1.5rem);
}

/* --- Para etykieta/wartość: kolumna z 0.25rem odstępu, etykieta 14px
       w --color-ink-2; pary rozdzielone --space-25 (makieta). --- */
.br-page__contact .contact-data .mod-html > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-05, 0.25rem);
  margin-bottom: var(--space-25, 1.25rem);
  font-size: var(--text-body-sm, 0.875rem);
  line-height: var(--text-body-sm-lh, 1.55);
  color: var(--color-ink-2, #6B645E);
}
.br-page__contact .contact-data .mod-html > div:last-child {
  margin-bottom: 0;
}

/* --- Wartość: 16px / 600 w --color-ink (godziny, adres) --- */
.br-page__contact .contact-data .mod-html > div p {
  margin: 0;
  font-size: var(--text-body, 1rem);
  line-height: var(--text-body-lh, 1.65);
  font-weight: 600;
  color: var(--color-ink, #2B2622);
}

/* --- E-mail i telefon jako linki makiety: 20px / 600 w --color-ink, bez
       podkreślenia, hover w --color-action. --- */
.br-page__contact .contact-data .mod-html > div p a {
  font-size: var(--text-body-lg, 1.25rem);
  font-weight: 600;
  color: var(--color-ink, #2B2622);
  text-decoration: none;
  transition: color 0.15s ease;
}
.br-page__contact .contact-data .mod-html > div p a:hover {
  color: var(--color-action, #FF6D00);
}

/* ==========================================================================
   KARTA „MOŻE SZYBCIEJ" (makieta: hairline, --radius-surface, padding 2rem;
   wiersze linków rozdzielone hairline --color-surface + strzałka po prawej)
   ========================================================================== */
.br-page__contact .contact-menu {
  border: 1px solid var(--color-line, #E5E1DC);
  border-radius: var(--radius-surface, 1.25rem);
  padding: var(--space-4, 2rem);
}

/* --- Tytuł karty (nagłówek nad menu z modułu „Menu"): 13px / 700 /
       uppercase / tracking 0.08em w --color-ink-2, odstęp --space-25 --- */
.br-page__contact .contact-menu .mod-menu__header {
  font-size: var(--text-caption, 0.8125rem);
  line-height: var(--text-caption-lh, 1.231);
  font-weight: 700;
  letter-spacing: var(--text-badge-track, 0.08em);
  text-transform: uppercase;
  color: var(--color-ink-2, #6B645E);
  margin: 0 0 var(--space-25, 1.25rem);
}

/* --- Nawigacja modułu „Menu" jako lista pionowa: header.css trzyma .br-nav
       w poziomie (nagłówek strony), w karcie przestawiamy ją w kolumnę. --- */
.br-page__contact .contact-menu .br-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  flex: none;
}

/* --- Wiersz linku: etykieta + strzałka na końcu, 16px / 600 w --color-ink,
       padding 1rem w pionie, hairline od góry, hover w --color-action --- */
.br-page__contact .contact-menu .br-navlink {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 1rem);
  width: 100%;
  padding: var(--space-2, 1rem) 0;
  border-top: 1px solid var(--color-surface, #F5F3F0);
  border-radius: 0;
  background: none;
  text-decoration: none;
  color: var(--color-ink, #2B2622);
  font-size: var(--text-body, 1rem);
  font-weight: 600;
  transition: color 0.15s ease;
}
.br-page__contact .contact-menu .br-navlink:hover {
  background: none;
  color: var(--color-action, #FF6D00);
}

/* --- Etykieta pozycji: bez uppercase i trackingu z nagłówka strony --- */
.br-page__contact .contact-menu .br-navlink .br-navlink__label {
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/* Strzałka makiety — pozycje renderuje moduł, więc dokładamy ją CSS-em. */
.br-page__contact .contact-menu .br-navlink::after {
  content: "→";
}

/* ==========================================================================
   WĄSKIE EKRANY (progi makiety: 1024px i 640px).
   Poniżej 1024px kolumny zamieniają się w jedną (gap --space-6), poniżej
   640px zwęża się margines boczny sekcji (--space-3). Siatka pól formularza
   zwija się do jednej kolumny wg progu kreatora (768px) — bliżej makiety
   (640px) nie da się tego przenieść bez `!important` na każdą kolumnę,
   bo kolumny numeruje kreator w treści strony.
   ========================================================================== */
@media (max-width: 1024px) {
  .br-page__contact .contact-row {
    grid-template-columns: 1fr;
    gap: var(--space-6, 3rem);
  }
}
@media (max-width: 640px) {
  .br-page__contact .contact-header,
  .br-page__contact .contact-row {
    padding-left: var(--space-3, 1.5rem);
    padding-right: var(--space-3, 1.5rem);
  }
}