/* =====================================================================
   About Values — Figma "D - About Values" 8045:53146.
   A white content card locked to the 1240 content area (radius 8, 1px soft
   border, generous padding) inside a band padded by --home-sec-pad-y.
   Centred header (big B.I.G. colour logo + Axiforma Medium 32/45 H2), intro
   (Axiforma Medium 24 H3 + Axiforma Regular 18/25 lead), then a 4-up grid of
   value cards (gold glyph + Axiforma Medium 20 title + Axiforma Regular 14-16
   body). Grid wraps 4 -> 2 -> 1 as the viewport narrows. Tokens only;
   component-local --av-* properties for non-token values.
   ===================================================================== */

.about-values {
  /* Component-local values (no token edits; mirrors feature-carousel's --fc-* pattern). */
  --av-card-pad-y-top: 80px;   /* generous top padding inside the card        */
  --av-card-pad-y-bot: 60px;   /* bottom padding inside the card              */
  --av-card-pad-x: 100px;      /* side padding inside the card                */
  --av-header-gap: 30px;       /* logo -> heading                             */
  --av-section-gap: 40px;      /* header -> intro -> grid                     */
  --av-intro-gap: 20px;        /* "Our Values" H3 -> lead paragraph           */
  --av-grid-gap: 40px;         /* between value cards                         */
  --av-value-gap: 16px;        /* icon -> title -> body within a value card   */
  --av-icon-h: 35px;           /* gold glyph height (SVGs are all ~35px tall) */
  --av-icon-max-w: 50px;       /* widest glyph (greatness) is ~50px wide      */
  --av-lead-max: 1040px;       /* lead paragraph measure                      */
  --av-value-body-max: 280px;  /* value body measure                          */

  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

/* ---- White card locked to the 1240 content area ---- */
.about-values__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-section-gap);
  background: var(--gray-0);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-8);
  padding: var(--av-card-pad-y-top) var(--av-card-pad-x) var(--av-card-pad-y-bot);
  text-align: center;
}

/* ---- Header: colour logo + H2 ---- */
.about-values__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-header-gap);
  width: 100%;
}

.about-values__logo {
  display: block;
  flex: none;
  width: 155px;
  height: 55px;
}

/* H2 — Axiforma Medium 32/45 (OG Desktop H2). */
.about-values__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Intro: "Our Values" H3 + lead paragraph ---- */
.about-values__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-intro-gap);
  width: 100%;
}

/* H3 — Axiforma Medium 24. */
.about-values__values-heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-36);
  color: var(--gray-8);
  word-break: break-word;
}

/* Lead — Axiforma Regular 18/25. */
.about-values__lead {
  margin: 0;
  max-width: var(--av-lead-max);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-7);
  word-break: break-word;
}

/* ---- Values grid: 4 across at desktop, wraps to 2-up then 1-up ---- */
.about-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--av-grid-gap);
  width: 100%;
}

/* A single value card: gold glyph on top, title, body — all centred. */
.about-values__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--av-value-gap);
  min-width: 0;
  text-align: center;
}

/* Gold glyph (~35px tall, up to 50px wide). The source SVGs declare
   width/height 100% with preserveAspectRatio="none", so the <img> carries
   explicit width/height attributes (50x35) and object-fit:contain keeps each
   glyph's own ratio within that box — the repo pattern for these assets. */
.about-values__value-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--av-icon-max-w);
  height: var(--av-icon-h);
}
.about-values__value-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Title — Axiforma Medium 20. */
.about-values__value-title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* Body — Axiforma Regular 14-16 (OG small body). */
.about-values__value-body {
  margin: 0;
  max-width: var(--av-value-body-max);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-7);
  word-break: break-word;
}

/* ---- Tablet: relax the heavy side padding, wrap the grid to 2-up ---- */
@media (max-width: 1023.98px) {
  .about-values__card {
    padding-inline: clamp(24px, 6vw, var(--av-card-pad-x));
  }
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--av-section-gap);
  }
}

/* ---- Mobile (M - About Values @390): single column, tighter card,
   scaled-down heading. ---- */
@media (max-width: 767.98px) {
  .about-values {
    padding-inline: var(--pad-mobile);
  }
  .about-values__card {
    padding: 40px var(--pad-mobile);
    gap: var(--av-section-gap);
  }
  .about-values__heading {
    font-size: clamp(24px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .about-values__values-heading {
    font-size: var(--fs-20);
    line-height: var(--lh-25);
  }
  .about-values__lead {
    font-size: var(--fs-16);
    max-width: none;
  }
  .about-values__grid {
    grid-template-columns: 1fr;
  }
  .about-values__value-body {
    max-width: none;
  }
}