/* ==========================================================================
   Layout primitives — container, section rhythm, grid helpers.
   ========================================================================== */

.trustav-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.trustav-container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.trustav-container--flush {
  padding-inline: 0;
}

/* --- Sections ------------------------------------------------------------ */
.trustav-section {
  padding-block: var(--section-y);
}

.trustav-section--bg-default {
  background-color: var(--c-bg);
}

.trustav-section--bg-alt {
  background-color: var(--c-bg-alt);
}

.trustav-section--bg-dark {
  background-color: var(--c-bg-dark);
  color: var(--c-text-invert);
}

.trustav-section--bg-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--c-text-invert);
}

.trustav-section--bg-dark .trustav-eyebrow,
.trustav-section--bg-dark .text-muted {
  color: var(--c-accent);
}

/* Collapse the gap when two same-background sections sit together. */
.trustav-section--tight {
  padding-block-start: 0;
}

/* --- Section header (eyebrow + heading + text) --------------------------- */
.trustav-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 46rem;
  margin-block-end: var(--space-3xl);
}

.trustav-section__header--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* --- Grid ---------------------------------------------------------------- */
.trustav-grid {
  display: grid;
  gap: var(--space-xl);
}

.trustav-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trustav-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trustav-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .trustav-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trustav-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .trustav-grid--2,
  .trustav-grid--3,
  .trustav-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Flow ---------------------------------------------------------------- */
.trustav-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.trustav-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* --- Media --------------------------------------------------------------- */
.trustav-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--c-neutral-4);
}

.trustav-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trustav-media--4-3 { aspect-ratio: 4 / 3; }
.trustav-media--3-2 { aspect-ratio: 3 / 2; }
.trustav-media--16-9 { aspect-ratio: 16 / 9; }
.trustav-media--square { aspect-ratio: 1; }
.trustav-media--portrait { aspect-ratio: 4 / 5; }

/* --- Page shell ---------------------------------------------------------- */
.trustav-main {
  display: block;
}

/* Offset for the fixed header, when sticky is enabled. */
body.has-sticky-header .trustav-main {
  padding-block-start: var(--header-height);
}

@media (max-width: 1024px) {
  body.has-sticky-header .trustav-main {
    padding-block-start: var(--header-height-mobile);
  }
}