/* =============================================================================
   About page (pages/about.html) — layout glue only.
   Cards, grids, sections, icons, badges and the type scale come from
   css/components/* and css/globals.css; this sheet holds what is genuinely
   specific to this page: the team-showcase block, the intro, the
   country tiles, the partner pills, the modernization callout and the
   guiding-principles blocks.
   Sources: docs/components/{card,sections}.md,
   docs/design-system/{page-guidelines,colors,typography,spacing-and-layout,motion}.md
   ============================================================================= */

/* ---------------------------------------------------------------------------
   TEAM SHOWCASE — sections.md § Centered heading. The team photo is the
   compact hero's image (hero.css § compact), so this is a single centred
   column, not the two-column About block it used to be.
   Background is the third step of the page rhythm (near-white under the white
   page intro); see the sequence note at the bottom of this file.
   --------------------------------------------------------------------------- */
.team-showcase {
  background-color: var(--color-near-white);
  overflow: hidden;
}

.team-showcase__content {
  display: flex;
  justify-content: center;
}

.team-showcase__text {
  max-width: 920px; /* the centred-heading cap, sections.md */
  text-align: center;
}

.team-showcase__title {
  margin-bottom: var(--gap-title-description);
}

.team-showcase__lead {
  color: var(--section-fg-muted);
  margin-bottom: var(--gap-content-block);
}

.team-showcase__highlights {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.team-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The leading glyph is an emoji in the copy, not an icon — sized, not coloured. */
.team-highlight__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   INTRO — sections.md § Centered heading, capped at the 920px Figma width.
   --------------------------------------------------------------------------- */
.about-intro__content {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.about-intro__lead,
.about-intro__text {
  color: var(--section-fg-muted);
}

.about-intro__lead {
  margin-bottom: var(--gap-title-description);
}

.about-intro__text {
  margin-bottom: 0;
}

.about-values {
  margin-top: var(--gap-section-lg);
}

/* A simple tinted tile — card.md § Simple: no border, no shadow. */
.about-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  min-height: var(--space-30);
  padding: var(--card-padding);
  background-color: var(--color-primary-light);
  border-radius: var(--border-radius-lg);
}

.about-value .icon {
  color: var(--color-division-brand);
}

/* ---------------------------------------------------------------------------
   LOCATIONS — five country tiles; no grid component does five columns.
   --------------------------------------------------------------------------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--card-grid-gap);
  max-width: 1100px;
  margin-inline: auto;
}

.location {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.location__pin {
  color: var(--color-division-brand);
}

.location__name {
  margin-bottom: 0;
}

.location__role {
  color: var(--section-fg-muted);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   MODERNIZATION CALLOUT — page-guidelines.md allows a dark ground on a
   highlight block. The section carries data-tone="dark"; every colour below
   reads the tone switch instead of naming a ground colour.
   --------------------------------------------------------------------------- */
.modernization-callout {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.modernization-callout__title {
  margin-bottom: var(--gap-title-description);
}

.modernization-callout__lead {
  color: var(--section-fg-muted);
  margin-bottom: var(--gap-content-block);
}

.modernization-callout__text {
  color: var(--section-fg-muted);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   PARTNERS — a centred wrapping row of name pills.
   --------------------------------------------------------------------------- */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-grid-gap);
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-near-white);
  border-radius: var(--border-radius-md);
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------------------
   GUIDING PRINCIPLES — a tinted block with a division-coloured leading rule.
   --------------------------------------------------------------------------- */
.principle {
  padding: var(--card-padding);
  background-color: var(--color-near-white);
  border-left: var(--space-1) solid var(--color-primary);
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}

.principle--division {
  border-left-color: var(--color-division-brand);
}

.principle--accent {
  border-left-color: var(--color-accent);
}

.principle__title {
  margin-bottom: var(--space-3);
}

.principle__text {
  color: var(--section-fg-muted);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   GRID WIDTH CAPS — these were inline style="max-width: …; margin-inline: auto"
   on the three grid wrappers (contracts.md, note for W4.3).
   --------------------------------------------------------------------------- */
.approach-grid,
.ai-grid,
.principles-grid {
  margin-inline: auto;
}

.approach-grid { max-width: 1000px; }
.ai-grid { max-width: var(--content-max-width); }
.principles-grid { max-width: 900px; }

/* ---------------------------------------------------------------------------
   Breakpoints — desktop-first, 1200 / 900 / 600 only. Spacing tokens are
   already redefined per breakpoint in css/variables.css, so only the column
   counts and the two-column stack need a query.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   Background rhythm (page-guidelines.md item 1) — no two adjacent sections share
   a ground, and the only dark grounds are the hero and the modernization
   callout (highlight block):

     hero  --color-primary (dark, hero.css § compact, photo)
     page intro  white (section.css § PAGE INTRO)
     team-showcase  near-white
     stats  primary-light (.bg-primary)
     intro  white
     locations  near-white
     what we do  white
     modernization callout  primary-darkest (.bg-dark, data-tone="dark")
     partners  white
     what sets us apart  near-white
     how we work  white
     AI approach  near-white
     guiding principles  white        -> footer is primary-dark
   ----------------------------------------------------------------------------- */