/* Fundament layoutu motywu.
   Reset, .ff-container, .ff-label, .ff-mono i .ff-section-title przychodzą z tokens/base.css —
   tutaj tylko to, czego design system nie dostarcza. Żadnych liczb spoza tokenów. */

.ff-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ff-main {
  flex: 1 0 auto;
}

/* Rytm sekcji: 64px, 88px dla sekcji wyróżnionych. */
.ff-section { padding-block: var(--section-y); }
.ff-section--feature { padding-block: var(--section-y-lg); }
.ff-section--tight { padding-block: var(--section-y-sm); }
.ff-section--tint { background: var(--surface-1); }
.ff-section--dark {
  background: var(--graphite-800);
  color: var(--surface-0);
}
.ff-section--dark h1,
.ff-section--dark h2,
.ff-section--dark h3 { color: var(--surface-0); }

.ff-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.ff-section__lead {
  color: var(--ink-600);
  max-width: 60ch;
  margin-top: var(--space-3);
}

.ff-section--dark .ff-section__lead { color: var(--ink-300); }

/* Element siatki i flexa ma domyślnie min-width: auto, więc nie zejdzie poniżej
   szerokości własnej zawartości — a zdjęcia niosą atrybut width z WordPressa
   (np. 420 px). Na wąskim ekranie rozpycha to całą stronę w poziomie.
   Zerujemy to u źródła, zamiast łatać overflow-x na body. */
.ff-grid > *,
.ff-products > *,
.ff-cat-grid > *,
.ff-art-grid > *,
.ff-real-grid > *,
.ff-steps > *,
.ff-hero__inner,
.ff-bf__inner > *,
.ff-custom__inner > *,
.ff-osp__inner > *,
.ff-product__top > *,
.ff-quote__layout > * { min-width: 0; }

/* Zdjęcia nigdy nie wychodzą poza swój kontener, niezależnie od atrybutu width. */
img { max-width: 100%; height: auto; }

/* Siatki. */
.ff-grid {
  display: grid;
  gap: var(--grid-gap-lg);
}
.ff-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ff-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ff-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ff-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1279px) {
  .ff-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .ff-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ff-grid--2,
  .ff-grid--3,
  .ff-grid--4,
  .ff-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .ff-grid { gap: var(--grid-gap); }
}

.ff-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ff-no-scroll { overflow: hidden; }

/* Pasek pomocniczy pod nagłówkiem sekcji ciemnej. */
.ff-section--dark .ff-section-title::after { background: var(--red-500); }

/* Treść redakcyjna: strony informacyjne i wpisy bloga. Szerokość ograniczamy do ok.
   70 znaków — pełny kontener (1320 px) daje wiersze, po których oko gubi początek
   następnego. Nagłówki i akapity dostają rytm z tokenów, nie z domyślnych marginesów
   przeglądarki, bo reset je wyzerował. */
.ff-prose { max-width: 70ch; }
.ff-prose > * + * { margin-top: var(--space-4); }
.ff-prose p { line-height: var(--body-lh); }

.ff-prose h2 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: var(--space-7);
}
.ff-prose h3 {
  font-family: var(--font-condensed);
  font-size: var(--body-lg-size);
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  margin-top: var(--space-6);
}

.ff-prose ul,
.ff-prose ol { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.ff-prose li { margin-bottom: var(--space-2); }
.ff-prose ul { list-style: disc; }
.ff-prose ol { list-style: decimal; }

.ff-prose a {
  color: var(--red-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ff-prose a:hover { color: var(--red-500); }

/* Nuta na tekstach, które przed produkcją musi obejrzeć prawnik — ma się rzucać
   w oczy, a nie ginąć w akapitach. */
.ff-prose .ff-note {
  padding: var(--space-4);
  border-left: var(--border-w-accent) solid var(--red-500);
  background: var(--surface-1);
  font-size: var(--body-sm-size);
  color: var(--ink-600);
}