/* ============================================================
   B5 SERVICES GROUP — LAYOUT
   Container, grid, sections, spacing
   ============================================================ */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-narrow {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-wide {
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* --- Section Wrapper --- */
.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-sm {
  padding-top: calc(var(--section-padding) * 0.6);
  padding-bottom: calc(var(--section-padding) * 0.6);
}

.section-lg {
  padding-top: calc(var(--section-padding) * 1.4);
  padding-bottom: calc(var(--section-padding) * 1.4);
}

/* Section background variants */
.section-white     { background-color: var(--color-white); }
.section-warm      { background-color: var(--color-warm-white); }
.section-navy      { background-color: var(--color-navy); }
.section-navy-mid  { background-color: var(--color-navy-mid); }
.section-blue      { background-color: var(--color-blue); }

/* --- Grid System --- */
.grid {
  display: grid;
  gap: var(--grid-gutter);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gutter);
}

/* Tablet */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Specific layout helpers */
.grid-2-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media (min-width: 1024px) {
  .grid-2-1 { grid-template-columns: 2fr 1fr; }
}

.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);
}
@media (min-width: 1024px) {
  .grid-1-2 { grid-template-columns: 1fr 2fr; }
}

.grid-cols-2-equal {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) {
  .grid-cols-2-equal { grid-template-columns: 1fr 1fr; }
}

/* --- Flex Utilities --- */
.flex        { display: flex; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* --- Section Header (centered intro) --- */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--section-gap);
}

/* Base styles — applies inside or outside .section-header */
.section-label {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-4);
}

.section-header h2 {
  margin-bottom: var(--space-5);
}

.section-header p {
  font-size: var(--text-body-lg);
  color: var(--color-gray-400);
  line-height: var(--leading-relaxed);
}

/* Left-aligned variant (for non-centered section headers) */
.section-header--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* On dark backgrounds */
.section-navy .section-label,
.section-navy-mid .section-label,
.section-navy .section-header .section-label,
.section-navy-mid .section-header .section-label {
  color: var(--color-gold);
}
.section-navy .section-header h2,
.section-navy-mid .section-header h2 {
  color: var(--color-white);
}
.section-navy .section-header p,
.section-navy-mid .section-header p {
  color: rgba(255,255,255,0.65);
}

/* --- Divider --- */
.divider {
  height: 1px;
  background: var(--color-gray-100);
  border: none;
  margin: 0;
}

/* --- Spacing Utilities --- */
.mt-auto { margin-top: auto; }
.mb-3    { margin-bottom: var(--space-3); }
.mb-4    { margin-bottom: var(--space-4); }
.mb-5    { margin-bottom: var(--space-5); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-10   { margin-bottom: var(--space-10); }
.mt-3    { margin-top: var(--space-3); }
.mt-4    { margin-top: var(--space-4); }
.mt-5    { margin-top: var(--space-5); }
.mt-6    { margin-top: var(--space-6); }
.mt-8    { margin-top: var(--space-8); }
.mt-10   { margin-top: var(--space-10); }
.mt-12   { margin-top: var(--space-12); }

/* --- Display utilities --- */
.inline-block { display: inline-block; }

/* --- Flex center row (industry tags, badge rows) --- */
.flex-center-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* --- Section header size variants --- */
.section-header--sm { max-width: 600px; }
.section-header--xs { max-width: 480px; }

/* --- Section label color modifiers --- */
.section-label--magenta { color: var(--color-magenta); }
.section-label--green   { color: var(--color-green); }

/* --- Centered max-width wrappers --- */
.max-w-600 { max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- Two-column article layout --- */
.layout-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .layout-article {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}