/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE ABOUT PAGE (0168)

   Every value measured off vapeandgo.co.uk's computed styles at a 1440px viewport rather than
   chosen. Reference: `docs/design/2026-09-11-vapeandgo-measured-design.md`.

   ⚠️ LOADED ONLY BY `pages/about-us.html.twig`, never from the layout — the same rule `rewards.css`
   follows. It uses the shop's own Inclusive Sans (a theme token), so unlike the rewards page it
   ships no typeface of its own.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.vg-ab {
  --ab-brand: #035c56;
  --ab-ink: #1f2d28;
  --ab-body: #3a4a43;
  --ab-card: #fff;
  --ab-tint: #f6f9f8;
  --ab-line: #e4ebe8;

  /* Full bleed out of the CMS measure: the banners and the tinted brand strip run edge to edge
     inside a 1400px wrap that is padded. Without this they stop short and read as stray boxes. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  color: var(--ab-body);
}
.vg-ab .ab-wrap { width: min(1386px, 100% - 40px); margin-inline: auto; }

.vg-ab h1 { font-size: 44px; line-height: 1.1; font-weight: 800; color: var(--ab-brand);
  margin: 0 0 10px; text-wrap: balance; }
.vg-ab .ab-lede { font-size: 17px; line-height: 1.65; margin: 0 0 28px; max-width: 760px; }
.vg-ab h2 { font-size: 30px; line-height: 36px; font-weight: 800; color: var(--ab-brand);
  margin: 0 0 14px; text-wrap: balance; }
.vg-ab p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.vg-ab p:last-child { margin-bottom: 0; }

.vg-ab .ab-section { padding: 44px 0; }

/* Full-width photograph. `aspect-ratio` + `object-fit` so a tall source cannot push the page
   around while it loads, and `loading=lazy` on the markup keeps it off the critical path. */
.vg-ab .ab-banner { margin: 0 0 8px; }
.vg-ab .ab-banner img { display: block; width: 100%; aspect-ratio: 1386 / 420; object-fit: cover;
  border-radius: 20px; }

/* Text beside a photograph, alternating. */
.vg-ab .ab-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px;
  align-items: center; padding: 34px 0; }
.vg-ab .ab-split__media { margin: 0; }
.vg-ab .ab-split__media img { display: block; width: 100%; aspect-ratio: 676 / 420;
  object-fit: cover; border-radius: 20px; }
/* ⚠️ The reversal is `order`, not a second markup block. Swapping the DOM would put the image
   before its own heading for a screen reader on every other section. */
.vg-ab .ab-split--rev .ab-split__media { order: -1; }

/* ⚠️ THREE, EXPLICITLY — the live shop's own count at 1386px. `auto-fill` with a 280px minimum
   gave FOUR here, which is not a rounding difference: six cards then read as 4+2 instead of 3+3 and
   the section stops looking like the page being matched. The breakpoints below step it down. */
.vg-ab .ab-trust-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-ab .ab-trust-card { background: var(--ab-card); border: 1px solid var(--ab-line);
  border-radius: 18px; padding: 26px 22px; }
.vg-ab .ab-trust-card h3 { font-size: 17px; line-height: 20.4px; font-weight: 800;
  color: var(--ab-ink); margin: 0 0 8px; }
.vg-ab .ab-trust-card p { font-size: 15px; margin: 0; }

.vg-ab .ab-brands { background: var(--ab-tint); border-radius: 20px; padding: 34px 28px;
  margin: 12px 0 0; }
.vg-ab .ab-brands h2 { margin-bottom: 18px; }
.vg-ab .ab-brand-strip { display: flex; flex-wrap: wrap; gap: 10px; list-style: none;
  margin: 0; padding: 0; }
.vg-ab .ab-brand-strip a { display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: var(--ab-card); border: 1px solid var(--ab-line); color: var(--ab-ink);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.vg-ab .ab-brand-strip a:hover { border-color: var(--ab-brand); color: var(--ab-brand); }

/* The press row is FIVE cards at 320px on the live shop, which wraps rather than squeezing — so
   auto-fill is right here where it was wrong above. */
.vg-ab .ab-press-grid { display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vg-ab .ab-press-card { background: var(--ab-card); border: 1px solid var(--ab-line);
  border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; }
.vg-ab .ab-press-card h3 { font-size: 17px; line-height: 1.35; font-weight: 800;
  color: var(--ab-ink); margin: 0 0 10px; text-wrap: balance; }
.vg-ab .ab-press-card p { font-size: 15px; margin: 0 0 14px; }
/* The masthead sits at the card's foot so a short quote and a long one line their sources up. */
.vg-ab .ab-press-card .ab-press-src { margin: auto 0 0; font-size: 13px; font-weight: 600;
  color: var(--ab-brand); text-decoration: none; }
.vg-ab .ab-press-card .ab-press-src:hover { text-decoration: underline; }

.vg-ab .ab-commit { background: var(--ab-tint); border-radius: 20px; padding: 34px 28px;
  margin: 12px 0; }
.vg-ab .ab-community { padding-bottom: 56px; }

@media (max-width: 1100px) {
  .vg-ab .ab-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vg-ab .ab-trust-grid { grid-template-columns: minmax(0, 1fr); }
  .vg-ab h1 { font-size: 34px; }
  .vg-ab h2 { font-size: 25px; line-height: 30px; }
  .vg-ab .ab-split { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 0; }
  /* On one column the image leads every section, reversed or not — the alternation only means
     anything when the two sit side by side. */
  .vg-ab .ab-split--rev .ab-split__media { order: 0; }
  .vg-ab .ab-section { padding: 32px 0; }
}