/* ==========================================================================
   GCA Painting — Base
   Reset, base typography, and layout primitives (container / section band /
   responsive grid). Depends on tokens.css being loaded first.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Guards against the full-bleed sections' 100vw break-out technique
     (.gallery-grid--full-bleed, .map-widget__embed--full-bleed) causing a
     few pixels of horizontal scroll on systems with non-overlay scrollbars,
     where 100vw is measured wider than the actual visible viewport. */
  overflow-x: hidden;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-neutral-900);
  background: var(--color-neutral-000);
}

img, svg { max-width: 100%; display: block; }

a { color: var(--color-brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-tight);
  font-weight: 700;
  color: var(--color-brand-900);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p { margin: 0 0 var(--space-2); }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

.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;
}

.nowrap { white-space: nowrap; }

/* Section bands — alternating background rhythm, structurally inspired by
   certapro.com's repeating white/gray/dark section pattern. */
.section {
  padding: var(--space-6) 0;
}

.section--muted { background: var(--color-neutral-050); }

.section--dark {
  background: var(--color-brand-900);
  color: var(--color-neutral-000);
}
.section--dark .section__title { color: var(--color-neutral-000); }

.section--brand {
  background: var(--color-brand-700);
  color: var(--color-neutral-000);
}

/* Container side padding steps down at narrower widths, structurally
   inspired by certapro.com's tiered container gutters (35px desktop /
   20px tablet / 15px mobile) — values are GCA's own spacing scale. */
.section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (max-width: 767px) {
  .section__inner { padding: 0 var(--space-3); }
}

@media (max-width: 600px) {
  .section__inner { padding: 0 var(--space-2); }
}

/* Section headings sit in a narrower, centered text column — separate from
   the full-width grid content below them, matching certapro.com's split
   between a text container and a wider grid container per section. */
.section__title {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-4);
}

/* Pairs with .section__subtitle directly below — same tighter
   heading-to-subhead gap already used between .hero__title and
   .hero__subtitle (that pairing relies on the base h1 margin, --space-2,
   rather than .section__title's larger default --space-4). */
.section__title--tight { margin-bottom: var(--space-2); }
.section__subtitle {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-neutral-600);
}

/* Responsive card grid helper */
.card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-grid--2up { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3up { grid-template-columns: repeat(2, 1fr); }
  .card-grid--4up { grid-template-columns: repeat(2, 1fr); }
  .card-grid--5up { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .card-grid--3up { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4up { grid-template-columns: repeat(4, 1fr); }
  .card-grid--5up { grid-template-columns: repeat(5, 1fr); }
}

.full-services__cta { text-align: center; margin: var(--space-4) 0 0; }

@media (max-width: 767px) {
  .section { padding: var(--space-5) 0; }
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
}