/* About page (a-propos.html) — reuses tokens and components from style.css */
.ap-banner { background: var(--newbtp-primary); padding: 56px 0; }
.ap-banner h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 800; }

.ap-section { padding: 88px 0; }
.ap-section--tint { background: var(--newbtp-surface); }
@media (max-width: 767px) { .ap-section { padding: 56px 0; } }

.ap-section h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin-bottom: 22px; }
.ap-section h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; color: var(--newbtp-primary); margin-bottom: 14px; }
.ap-section p {
  font-family: var(--font-subtext, var(--font-body));
  color: var(--newbtp-text-muted);
  font-size: 17px; line-height: 1.75; max-width: 64ch;
}
.ap-section p + p { margin-top: 16px; }

.ap-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.ap-split--reverse { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) {
  .ap-split, .ap-split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .ap-split--reverse .ap-figure { order: 2; }
  .ap-split .ap-figure { order: -1; }
  .ap-split .ap-figure--flag img { max-width: 100%; }
}

.ap-narrow { max-width: 860px; }
.ap-center { text-align: center; }

.ap-figure { margin: 0; }
.ap-figure img { width: 100%; height: auto; border-radius: var(--radius); }
.ap-figure--chart { margin-top: 36px; }
.ap-figure--chart img { margin: 0 auto; max-width: 1100px; background: #fff; }
.ap-figure--flag img { max-width: 320px; margin: 0 auto; border-radius: 0; }

/* Shown only if an image file is absent from images/about/ */
.ap-figure.is-missing {
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--newbtp-border); border-radius: var(--radius);
  color: var(--newbtp-text-muted); font-size: 14px; text-align: center; padding: 16px;
}
.ap-figure.is-missing img { display: none; }
.ap-figure.is-missing::before { content: attr(data-missing-label); }