/* ==========================================================================
   New Ways of Working — Utilities
   Reusable layout and modifier classes shared across blocks.
   Block-specific adjustments belong in components.css via combined
   selectors (e.g. .offer-cards__grid.grid-2-col).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containers
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--container-max), 100% - 2.5rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--container-narrow), 100% - 2.5rem);
}

/* --------------------------------------------------------------------------
   Sections (white / soft gray / black sandwich)
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-pad);
}

.section--soft {
  background: var(--c-bg-soft);
}

.section--dark {
  background: var(--c-black);
  color: var(--c-text-on-dark);
}

.section--dark h2,
.section--dark h3 {
  color: var(--c-accent-on-dark);
}

.section--dark .text-soft { color: var(--c-text-soft-on-dark); }

/* --------------------------------------------------------------------------
   Grids — generic column patterns reused by every card grid
   -------------------------------------------------------------------------- */
.grid-2-col,
.grid-3-col,
.grid-4-col {
  display: grid;
  gap: var(--space-3);
}

.grid-2-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4-col { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --------------------------------------------------------------------------
   Gradient text (style guide: hero blue→purple, accent purple→red-dark)
   Fallback color first for browsers without background-clip:text
   -------------------------------------------------------------------------- */
.grad-text,
.grad-text--accent {
  color: var(--c-purple); /* fallback when background-clip unsupported */
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  /* keep descenders (g, p, y) inside the clipped background */
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.grad-text--accent { background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   Text helpers
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-center.grad-text, .text-center.grad-text--accent { margin-inline: auto; }
.text-soft { color: var(--c-text-soft); }
.text-small { font-size: var(--fs-small); }

.kicker {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: var(--space-1);
}

.section--dark .kicker { color: var(--c-text-soft-on-dark); }

/* --------------------------------------------------------------------------
   Spacing helpers
   -------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

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