/* ==============================================
   NTF WALLONIE — Utility Layer
   All classes are prefixed with u- to avoid
   conflicts with component CSS in theme.css.
   RULE: Never add a color here that isn't in
   the :root tokens or the official ntfColors.pdf
   ============================================== */

/* ─── BACKGROUNDS ─────────────────────────────── */

/* Core brand */
.u-bg-primary        { background: var(--primary); }
.u-bg-primary-mid    { background: var(--primary-mid); }
.u-bg-primary-light  { background: var(--primary-light); }
.u-bg-primary-pale   { background: rgba(152, 194, 123, 0.15); }

/* Dark gradient (hero / CTA) — Combination B */
.u-bg-dark {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 60%, #355e1a 100%);
}

/* Browns */
.u-bg-secondary      { background: var(--secondary); }
.u-bg-tertiary       { background: var(--tertiary); }
.u-bg-tertiary-fixed { background: var(--tertiary-fixed); }

/* Surfaces */
.u-bg-surface        { background: var(--surface); }
.u-bg-surface-low    { background: var(--surface-low); }
.u-bg-surface-lowest { background: var(--surface-lowest); }
.u-bg-surface-high   { background: var(--surface-high); }
.u-bg-white          { background: #ffffff; }

/* PDF companion greens (use with a base token in same section) */
.u-bg-pdf-green      { background: #00662c; }
.u-bg-pdf-teal       { background: #008b7b; }

/* Monochrome greens — ONLY use alone, no other base in same section */
.u-bg-mono-a         { background: #35712e; }
.u-bg-mono-b         { background: #458d41; }


/* ─── TEXT COLORS ─────────────────────────────── */

.u-text-primary      { color: var(--primary); }
.u-text-primary-mid  { color: var(--primary-mid); }
.u-text-secondary    { color: var(--secondary); }
.u-text-tertiary     { color: var(--tertiary); }
.u-text-body         { color: var(--on-surface); }
.u-text-muted        { color: var(--on-surface-muted); }
.u-text-white        { color: #ffffff; }
.u-text-white-70     { color: rgba(255, 255, 255, 0.70); }
.u-text-white-50     { color: rgba(255, 255, 255, 0.50); }
.u-text-on-dark      { color: var(--tertiary-fixed); } /* accent on dark green bg */


/* ─── SECTION WRAPPERS ────────────────────────── */

/* Outer section — sets vertical padding */
.u-section    { padding: 5rem 2rem; }
.u-section--lg { padding: 7rem 2rem; }
.u-section--sm { padding: 3rem 2rem; }

/* Inner container — centres and caps width */
.u-section__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Header block above grid/content */
.u-section__header {
  margin-bottom: 2.5rem;
}

.u-section__header .eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--secondary);
}

/* Responsive: tighten padding on small screens */
@media (max-width: 700px) {
  .u-section, .u-section--lg, .u-section--sm {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}


/* ─── CARDS ───────────────────────────────────── */

/* Light card — use on surface / surface-low backgrounds */
.u-card {
  background: var(--surface-lowest);
  border-radius: 1.25rem;
  padding: 1.5rem;
}

.u-card--lg {
  border-radius: 1.6rem;
  padding: 2rem;
}

.u-card--xl {
  border-radius: 1.6rem;
  padding: 2.5rem;
}

/* Dark card — use inside .u-bg-dark or .u-bg-primary sections */
.u-card--dark {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.u-card--dark:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Warm accent card — brown left border */
.u-card--warm {
  background: var(--surface-lowest);
  border-radius: 1.25rem;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  border-left: 4px solid var(--secondary);
}

/* Shadows */
.u-shadow    { box-shadow: 0 14px 34px rgba(29, 28, 23, 0.06); }
.u-shadow--md { box-shadow: 0 18px 42px rgba(29, 28, 23, 0.08); }
.u-shadow--lg { box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12); }


/* ─── GRIDS ───────────────────────────────────── */

.u-grid       { display: grid; gap: 1.5rem; }
.u-grid--2    { grid-template-columns: repeat(2, 1fr); }
.u-grid--3    { grid-template-columns: repeat(3, 1fr); }
.u-grid--4    { grid-template-columns: repeat(4, 1fr); }
.u-grid--auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Flex row */
.u-flex       { display: flex; flex-wrap: wrap; }
.u-flex--center { align-items: center; justify-content: center; }
.u-flex--between { align-items: center; justify-content: space-between; }

@media (max-width: 700px) {
  .u-grid--2, .u-grid--3, .u-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .u-grid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* ─── TYPOGRAPHY ──────────────────────────────── */

.u-display {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.u-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.15;
}

.u-heading--white {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.15;
}

.u-subheading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-mid);
}

.u-lead {
  font-size: 1.05rem;
  color: var(--on-surface-muted);
  line-height: 1.75;
  max-width: 60ch;
}

.u-label {
  font-family: var(--font-body);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}


/* ─── BADGES / PILLS ──────────────────────────── */

.u-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.u-badge--green  { background: rgba(23, 57, 1, 0.08);    color: var(--primary); }
.u-badge--brown  { background: rgba(135, 81, 52, 0.10);  color: var(--secondary); }
.u-badge--warm   { background: var(--tertiary-fixed);    color: var(--on-tertiary-fixed); }
.u-badge--white  { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.u-badge--stone  { background: var(--surface-high);      color: var(--on-surface-muted); }


/* ─── SPACING HELPERS ─────────────────────────── */

.u-mt-1 { margin-top: 0.5rem; }
.u-mt-2 { margin-top: 1rem; }
.u-mt-3 { margin-top: 1.5rem; }
.u-mt-4 { margin-top: 2rem; }
.u-mt-6 { margin-top: 3rem; }
.u-mt-8 { margin-top: 4rem; }

.u-mb-1 { margin-bottom: 0.5rem; }
.u-mb-2 { margin-bottom: 1rem; }
.u-mb-3 { margin-bottom: 1.5rem; }
.u-mb-4 { margin-bottom: 2rem; }

.u-gap-1 { gap: 0.5rem; }
.u-gap-2 { gap: 1rem; }
.u-gap-3 { gap: 1.5rem; }
.u-gap-4 { gap: 2rem; }
.u-gap-6 { gap: 3rem; }


/* ─── BORDER RADIUS ───────────────────────────── */

.u-rounded-sm   { border-radius: 0.5rem; }
.u-rounded      { border-radius: 1rem; }
.u-rounded-lg   { border-radius: 1.25rem; }
.u-rounded-xl   { border-radius: 1.6rem; }
.u-rounded-pill { border-radius: 999px; }


/* ─── DIVIDERS ────────────────────────────────── */

/* Use instead of <hr> — surface color shift, no visible line */
.u-divider {
  border: none;
  height: 1px;
  background: var(--surface-high);
  margin: 2rem 0;
}

.u-divider--ghost {
  border: none;
  height: 1px;
  background: rgba(195, 201, 185, 0.20);
  margin: 2rem 0;
}


/* ─── IMAGE HELPERS ───────────────────────────── */

.u-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.u-img-ratio-16-9 { aspect-ratio: 16 / 9; overflow: hidden; }
.u-img-ratio-4-3  { aspect-ratio: 4 / 3;  overflow: hidden; }
.u-img-ratio-1-1  { aspect-ratio: 1 / 1;  overflow: hidden; }


/* ─── BUTTON ACTIONS ROW ──────────────────────── */

/* Wraps two buttons side by side */
.u-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.u-actions--center { justify-content: center; }

/* Turnstile (ENG-286) — espacement du widget dans les formulaires publics. */
.ntf-turnstile {
	margin: 1rem 0;
}