/**
 * Base element defaults layered on top of Bootstrap and design tokens.
 * Keep this to resets/global defaults only — component-specific styles
 * belong in components.css.
 */

body {
  font-family: var(--font-family-base, inherit);
  color: var(--color-text, inherit);
}

/* Typography scale — see tokens.css for the mobile/desktop values these
   read from, and the note on the desktop body-size mismatch. */
h1, .text-h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

h2, .text-h2 {
  font-family: var(--font-family-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

h3, .text-h3 {
  font-family: var(--font-family-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.text-body-lg {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.text-body-bold {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-bold);
  line-height: var(--lh-body-bold);
}

.text-body-md {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}

.text-body-sm {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

/**
 * Standard content column — the single source of truth for the site's
 * horizontal rhythm. Every section that isn't intentionally full-bleed
 * (photo heroes, the partners marquee, floor-plan/intro background photos)
 * should get ITS horizontal max-width/centering/side-padding from this
 * class rather than repeating `max-width: 1320px; margin: 0 auto;
 * padding: 0 32px;` by hand — that duplication is exactly how sections
 * drifted apart (double-padding on the Kontakt section, a stray 1400px on
 * the search page, scrollbar-sensitive 100vw math on the floor-plan card
 * and the carousel bleeds — see memory/project-scope.md, "spacing
 * inconsistency audit", 2026-08-20).
 *
 * Combine with a section-specific class for vertical padding and any other
 * per-section styling, e.g. `<section class="home-apartments
 * section-column">` with `.home-apartments { padding-top: 48px;
 * padding-bottom: 48px; }` in the page CSS — later-loaded page CSS wins
 * the cascade for any property both classes set (same specificity, source
 * order), so a section can still override margin-top etc. on top of this.
 *
 * A section legitimately needing a different width (e.g. a floating stats
 * card meant to feel wider/edge-emphasized, not body copy) should still
 * document that as a deliberate exception rather than silently drifting.
 */
.section-column {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* NOTE if you apply .section-column to a flex ITEM (a direct child of a
   `display:flex` parent, not just a class that itself sets display:flex):
   a flex item with no flex-grow shrinks to its content's natural width
   and treats max-width as just an upper bound, not an assigned size — it
   can end up narrower than 1320px and centered off-column. Add
   `width: 100%` on that specific element's own class to fix it (see
   .home-banner__content in home.css for a worked example) rather than
   adding it here: width:100% is a no-op for the common case (a plain
   block child, which already fills its container) but actively breaks
   elements that pair .section-column with a NON-auto margin override at
   another breakpoint (width:100% + a fixed side margin overflows past the
   container, since the margin is added on top of the forced full width
   instead of being subtracted from it) — hit exactly this on
   .aktualnosci-list's mobile "floating card" override on 2026-08-20. */