/*
 * SEN2gether site v2: about, people and trust pages (assets/pages.css):
 * /about, /contributors, /contributor/*, /organisations, /contact, /faq,
 * /safeguarding and the legal pages. Builds on s2.css.
 */

/* ── About ──────────────────────────────────────────────────────────────── */
.quote-card { margin: 0; padding: 22px 24px; border-radius: var(--s2-r-card); background: var(--s2-card); display: flex; flex-direction: column; gap: 14px; }
.quote-card blockquote { margin: 0; font-size: var(--s2-fs-body); line-height: 1.6; color: var(--s2-ink); }
.quote-card blockquote::before { content: '“'; display: block; font-size: 48px; line-height: .6; color: var(--s2-tab-active); font-weight: 800; margin-bottom: 6px; }
.quote-card figcaption { font-weight: 800; color: var(--s2-ink); }
.quote-card figcaption span { display: block; font-weight: 600; font-size: var(--s2-fs-footnote); color: var(--s2-text-muted); }
.person { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 18px; border-radius: var(--s2-r-card); background: var(--s2-card); }
.person-photo { width: 100%; aspect-ratio: 1; border-radius: 20px; font-size: 44px; margin-bottom: 8px; }
.person h3 { font-size: var(--s2-fs-title-3); padding: 0 4px; }
.person > p { padding: 0 4px; font-size: var(--s2-fs-subhead); line-height: 1.55; }
.person-role { color: var(--s2-text-muted); font-weight: 700; font-size: var(--s2-fs-footnote); }
.person-more { padding: 0 4px; }
.person-more summary { display: inline-flex; align-items: center; gap: 2px; list-style: none; font-weight: 750; color: var(--s2-link); cursor: pointer; }
.person-more summary::-webkit-details-marker { display: none; }
.person-more[open] summary .ms { transform: rotate(180deg); }
.person-more p { margin-top: 8px; font-size: var(--s2-fs-subhead); line-height: 1.55; }

/* ── Contributors ───────────────────────────────────────────────────────── */
a.person-card { flex-direction: row; align-items: flex-start; gap: 14px; }
.person-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person-card .card-title { font-size: var(--s2-fs-headline); }
.person-card .card-text { font-size: var(--s2-fs-footnote); line-height: 1.45; }
.contributor-banner { aspect-ratio: 16 / 7; border-radius: var(--s2-r-card); margin-bottom: 20px; }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; } }
.contact-side { display: flex; flex-direction: column; gap: 12px; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form > h2 + .muted { margin-top: -8px; }
.contact-form .field-grid { margin-top: 0; }
.contact-small { font-size: var(--s2-fs-footnote); }
.contact-robot { min-height: 65px; } /* Cloudflare's "I'm not a robot" box: room kept so the button doesn't jump */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--s2-ink) 50%), linear-gradient(135deg, var(--s2-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.contact-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; outline: none; }
.contact-done .ink-disc { width: 44px; height: 44px; background: var(--s2-success-text); }

/* ── Safeguarding ───────────────────────────────────────────────────────── */
.urgent { padding: 22px 22px 18px; border-radius: var(--s2-r-card); background: var(--bg); color: var(--fg); }
.urgent h2 { color: inherit; font-size: var(--s2-fs-title-3); }
.urgent > p { margin-top: 8px; font-size: var(--s2-fs-subhead); line-height: 1.55; }
.urgent-list { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.urgent-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--s2-chip-on-fill); }
@media (min-width: 640px) { .urgent-list li { grid-template-columns: 170px minmax(0, 1fr); gap: 12px; } }
.urgent-list b { color: var(--s2-ink); }
.urgent-list a { color: var(--s2-ink); font-weight: 800; }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal h2 { font-size: var(--s2-fs-title-3); }
.legal h3 { font-size: var(--s2-fs-headline); margin-top: 26px; }
.legal ol { padding-left: 22px; }
.legal-meta { margin-top: 28px; color: var(--s2-text-muted); font-size: var(--s2-fs-footnote); }
.legal-ask { margin-top: 24px; }
.orgs-note { margin-top: 14px; font-size: var(--s2-fs-subhead); }
@media (min-width: 900px) { .steps--row { flex-direction: row; gap: 16px; } .steps--row .step { flex: 1; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; } .steps--row .step::before { display: none; } }