/* pages-about: page-specific styles for the About group (agent B5). All classes prefixed .ab-
   Pages: /about/, /about/quality-compliance/, /about/people/, /careers/, /careers/lead-design-renewable-energy-unit/
   Shared v1.3 components (.creds, .phase-note, .source-note, .band/.pillars, .pe-* careers pieces) come from
   components.css / pages-people.css; this file only adds layout. */

/* ---- Inner hero ------------------------------------------------------------ */
.ab-hero { border-bottom: 1px solid var(--rule); }
/* .ab-hero / .ab-hero--shard heroes now use the client gradient g3 (components.css §6); the shard is retired. */
.ab-labels { --cluster-gap: 12px 16px; margin-bottom: var(--s-4); }
.page-hero .ab-labels .eyebrow { margin-bottom: 0; }
.ab-statement {
  margin-top: var(--s-5); max-width: 26ch;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: var(--fw-light); line-height: 1.2; color: var(--ink);
}

/* On-page index (quality & compliance) */
.ab-toc { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); }
.ab-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.ab-toc a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-top: var(--s-3);
  font-family: var(--font-ui); font-size: var(--fs-small); color: var(--ink); text-decoration: none;
}
.ab-toc a::before { content: ""; width: 10px; height: 1px; background: var(--aqua-ink); }
.ab-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- About: "Our story" ------------------------------------------------------ */
.ab-story { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.ab-story__head .page-hero__title { max-width: 10ch; }
.ab-story__body > * + * { margin-top: var(--s-5); }
.ab-story__body p { color: var(--ink-2); max-width: 60ch; }
.ab-story__body .ab-story__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.ab-story__actions { padding-top: var(--s-2); }
.ab-story__media .media { aspect-ratio: 16 / 9; }
@media (min-width: 1025px) {
  .ab-story__media .media { aspect-ratio: 21 / 8; }
}
/* About hero = client gradient g4 + mark (components.css §6; client change 21 Oct: page 4, not page 1).
   One text column on the left (the glows and the mark fill the right). */
.page-hero--g4.ab-hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); }
.page-hero--g4 .ab-story__head .page-hero__title { max-width: none; }
.page-hero--g4 .ab-story__body { margin-top: clamp(8px, 1vw, 16px); }
.page-hero--g4 .ab-story__body p { max-width: 54ch; }
@media (min-width: 1025px) {
  .page-hero--g4.ab-hero { min-height: min(calc(100svh - var(--header-h) - var(--stripe-h)), 760px); display: flex; align-items: center; }
  .page-hero--g4.ab-hero > .container { width: 100%; }
}
/* Story photo, moved out of the hero */
.ab-story-photo { padding-top: clamp(40px, 6vw, 88px); background: var(--surface); }
.ab-media-wide { aspect-ratio: 884 / 378; }

/* ---- Two-column sections: heading left (sticky on desktop), content right ---- */
.ab-cols { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.ab-cols__head h2 { max-width: 14ch; }
.ab-num {
  margin-bottom: var(--s-3);
  font-size: 1.25rem; font-weight: var(--fw-light); line-height: 1; color: var(--aqua-ink); font-variant-numeric: tabular-nums;
}
.ab-cols__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--fs-small); }
.ab-cols__body { min-width: 0; }
.ab-after { margin-top: var(--s-5); font-size: var(--fs-small); }
.ab-cols__body .source-note { margin-top: var(--s-5); }
@media (min-width: 1025px) {
  .ab-cols { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
  .ab-cols__head { position: sticky; top: calc(var(--header-h-compact) + var(--stripe-h) + 32px); }
}

/* Policies line (QLT-05 is one verbatim line with " · " separators) */
.ab-policies {
  padding-block: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: var(--fw-light); line-height: 1.5; color: var(--ink);
}
.ab-policies a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--aqua-ink); }
.ab-policies a:hover { color: var(--teal-deep); }

/* Downloads (QLT-06) */
.ab-downloads { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.ab-download {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center;
  padding-block: var(--s-5); border-top: 1px solid var(--rule);
}
.ab-download__icon { grid-row: span 2; align-self: start; width: 28px; height: 28px; color: var(--aqua-ink); }
.ab-download__icon svg { width: 100%; height: 100%; }
.ab-download__name { font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: 1.3; }
.ab-download__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.ab-download__meta a { color: inherit; }
.ab-download .btn { grid-column: 2; justify-self: start; }
@media (min-width: 768px) {
  .ab-download { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ab-download .btn { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
}

/* ---- People (phase 2) ---------------------------------------------------------- */
.ab-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7) var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .ab-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-person { min-width: 0; }
.ab-person__portrait { aspect-ratio: 4 / 5; min-height: 0; }
.ab-person__line { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-h4); line-height: 1.35; color: var(--ink-2); }
.ab-person__name { font-size: var(--fs-h3); color: var(--ink); }

.ab-experts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ab-experts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-expert.ph-block { place-items: stretch; align-content: start; gap: var(--s-4); text-align: left; background-color: var(--surface); }
.ab-expert__title { font-weight: var(--fw-medium); color: var(--ink); }
.ab-expert__fields { display: grid; gap: var(--s-3); margin: 0; }
.ab-expert__fields div { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.ab-expert__fields dt { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.ab-expert__fields dd { display: grid; gap: 6px; margin: 0; }
.ab-skel { display: block; height: 10px; width: 80%; background: var(--rule-strong); opacity: .5; }
.ab-skel--short { width: 30%; }

/* ---- Careers -------------------------------------------------------------------- */
.ab-hero-grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); }
.ab-hero-grid__copy .page-hero__title { max-width: 14ch; }
.ab-hero-grid__text { margin-top: var(--s-4); color: var(--ink-2); max-width: 60ch; }
.ab-hero-grid__media .media { aspect-ratio: 884 / 371; }
@media (min-width: 1025px) {
  .ab-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
}
.ab-ph-roles { min-height: 120px; margin-bottom: var(--s-6); }
.ab-vacancy__cta { margin-top: 0; padding-top: 0; white-space: nowrap; }
@media (min-width: 1025px) {
  .pe-vacancy.ab-vacancy { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr) auto; }
  .ab-vacancy__cta { justify-self: end; }
}

/* Vacancy body copy: paragraphs separated by hairlines */
.ab-paras { border-bottom: 1px solid var(--rule); }
.ab-paras > p { padding-block: var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-2); line-height: 1.6; max-width: 68ch; }

/* Middle-dot separators: Rinter has no "·" glyph, so render them in the UI face */
.ab-sep { font-family: var(--font-ui); color: var(--aqua-ink); padding-inline: .15em; }
/* Long status badges (vacancy) may wrap on small screens */
.ab-page .page-hero .badge-confirm { white-space: normal; }