/* ==========================================================================
   Layout primitives: container, section rhythm, shared grid scaffolding.
   Requires tokens.css + base.css to be loaded first.
   ========================================================================== */

.container {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 32px);
  }
}

@media (max-width: 430px) {
  .container {
    width: calc(100% - 24px);
  }
}

section {
  background: var(--section-bg);
}

/* Shared anchor-offset: any in-page jump to an id (#services, #faq,
   #contact, #contact-form, etc.) would otherwise land with the target
   partially hidden behind the sticky header (measured 83px tall at every
   width - .site-header has no responsive height change). 103px = 83px
   header + 20px breathing room, so the target's own heading is always
   fully visible on arrival. Scoped to [id] generally (not just section[id])
   since anchor targets aren't always the section itself - e.g. #contact-form
   sits on the form box, not its enclosing section. No JS scroll handler
   needed - anchor navigation already respects scroll-margin. */
[id] {
  scroll-margin-top: 103px;
}

.section {
  padding: 80px 0;
}

@media (max-width: 900px) {
  .section {
    padding: 60px 0;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 48px 0;
  }
}

/* Site-wide section-spacing system: sections use padding (not margin), so
   two stacked sections' visible gap is always the sum of both paddings -
   up to 160px on desktop with the plain .section value above. .section
   stays on the first section after each hero and every final-CTA section
   (the two boundaries worth protecting a little more); --compact goes on
   everything in between - repeated card grids, pricing, FAQ, related-link
   sections, and mid-page CTA blocks - since those are the gaps that read
   as excessive. See each page's <section> classes for the assignment. */
.section--compact {
  padding: 60px 0;
}

@media (max-width: 900px) {
  .section--compact {
    padding: 48px 0;
  }
}

@media (max-width: 640px) {
  .section--compact {
    padding: 40px 0;
  }
}

/* ---- section--footer: bottom-only override for the section that sits
   directly against the footer on every page (the final CTA on 9 pages,
   "Related BI services" on contact.html - both already use plain
   .section). Pairs with .section; top padding stays untouched (80/60/48,
   same protected first-section-after-hero/final-CTA boundary as before) -
   only the bottom side is reduced, closing the visible gap to the footer
   without touching .footer-inner's own (internal) padding. Declared after
   .section so its padding-bottom wins at equal specificity, same pattern
   as .section--compact above. */
.section--footer {
  padding-bottom: 50px;
}

@media (max-width: 900px) {
  .section--footer {
    padding-bottom: 30px;
  }
}

@media (max-width: 640px) {
  .section--footer {
    padding-bottom: 18px;
  }
}

.section-heading {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-heading p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: var(--lead-size);
}

/* Use for technical detail, pricing, proof, comparisons, process content, and
   any section-heading paragraph longer than ~2 sentences. Leave the default
   centered treatment for short introductions, brand statements, FAQs, and
   section-to-section transitions. Tried on the four fit-check sections in
   an earlier iteration; those sections were rebuilt to use the default
   centered treatment instead (matching why-borrowed-bi.html's "Where
   Borrowed BI fits" reference), so this remains available but currently
   unused - see git history if reviving it. */
.section-heading.align-left {
  margin-left: 0;
  text-align: left;
}

/* generic responsive grid scaffolding shared by card sections;
   component files set --grid-min per section, this file only
   supplies the mechanism */
.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 260px), 1fr));
}

@media (max-width: 640px) {
  .grid {
    gap: 20px;
  }
}