/* The closing band: the one section that sits just above the footer on a
 * public page. One look on every page (Sharon, 2 Oct 2026: "some pages the
 * bottom is centered, some pages it is left aligned, some pages it has a
 * contact card like an actual card and some are just ... written in i need
 * consistency across all pages").
 *
 * Linked from partials/meta.html, so every chrome page has it. A page writes
 * the markup in STYLE_GUIDE.md §3b and sets nothing else: no inline styles,
 * no page CSS for .closer. tests/closer-band.test.mjs holds every page to it.
 *
 *   Midnight #100A4A band, full width, content on the footer's width.
 *   One layout everywhere (Sharon, 2 Oct 2026: "why do all the pages under
 *   our work or what we do are different than the rest?"): two columns from
 *   900px, words and buttons on the left, a contact card on the right; on
 *   phones the card drops under the words. A page with no named contact gets
 *   the general Federation card. There is no centred variant.
 *   The card is always: avatar, name or heading, one line, links (email,
 *   phone, then Contact us). No eyebrows, no all caps.
 *   Buttons: the first is the white primary, any others are outlined. Pages
 *   don't pick button classes here, the same rule as the page banner.
 *
 * Selectors carry two classes so a page's own h2, p, a or .btn rules (some of
 * them in <style> blocks below this link) can't restyle the band.
 */

.closer{
  --closer-ink:#fff;
  --closer-soft:#D2E9FF;
  --closer-midnight:#100A4A;
  --closer-mw:var(--chrome-mw,1200px);
  position:relative;isolation:isolate;overflow:hidden;
  background:#100A4A;color:#fff;
  padding:clamp(56px,7vw,96px) 24px;
  font-family:var(--font-display,'Outfit'),system-ui,sans-serif;
  text-align:left;
}
/* One soft Primary Blue glow, low on the left: the same light as the band on
   What We Do. Decorative only. */
.closer::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-14%;bottom:-70%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,62,175,.55),rgba(30,62,175,0));
}
.closer .closer-in{
  max-width:var(--closer-mw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}

/* Two columns from 900px: words left, card right. */
@media (min-width:900px){
  .closer .closer-in{grid-template-columns:minmax(0,1.35fr) minmax(320px,440px)}
}

/* ---- words */
.closer .closer-text{min-width:0;max-width:640px}
.closer .closer-text::before{
  content:'';display:block;width:72px;height:4px;border-radius:2px;
  background:#B49355;margin-bottom:26px;
}
.closer .closer-logo{display:block;height:56px;width:auto;max-width:100%;margin:0 0 22px}
.closer .closer-h{
  margin:0 0 16px;color:#fff;
  font-family:inherit;font-size:clamp(1.75rem,3vw,2.125rem);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;text-wrap:balance;
}
.closer .closer-text p{
  margin:0 0 14px;color:var(--closer-soft);
  font-size:1.0625rem;line-height:1.65;max-width:36em;
}
.closer .closer-text p a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(210,233,255,.55);text-underline-offset:3px}
.closer .closer-text p a:hover{text-decoration-color:#fff}
.closer .closer-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.closer .closer-btns .btn{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.72);
  box-shadow:none;text-decoration:none;white-space:normal;text-align:center;
}
.closer .closer-btns .btn:first-child{background:#fff;color:var(--closer-midnight);border-color:#fff}
.closer .closer-btns .btn:hover{opacity:.88;color:#fff;background:rgba(255,255,255,.08);border-color:#fff}
.closer .closer-btns .btn:first-child:hover{background:#fff;color:var(--closer-midnight)}
.closer .closer-btns .btn:focus-visible{outline:3px solid var(--accent,#1C88ED);outline-offset:3px}

/* ---- the card */
.closer .closer-card{
  min-width:0;background:#fff;color:var(--text,#2D3748);
  border-radius:18px;padding:clamp(24px,2.4vw,34px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
  text-align:left;
}
.closer .closer-person{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
.closer .closer-person + .closer-person{margin-top:18px;padding-top:18px;border-top:1px solid #E2E8F0}
/* An optional short description under a person's links (one sentence or two). */
.closer .closer-bio{margin:14px 0 0;padding-top:12px;border-top:1px solid #E2E8F0;color:var(--gray,#475569);font-size:.9375rem;line-height:1.6}
.closer .closer-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--light,#D2E9FF);color:var(--blue,#1E3EAF);
  font-size:1.125rem;font-weight:700;letter-spacing:.02em;
}
.closer img.closer-avatar{object-fit:cover;object-position:center top;display:block}
/* The general and team cards: the Federation bug in the same circle. */
.closer .closer-avatar-mark{background:#fff;box-shadow:inset 0 0 0 1px #E2E8F0}
.closer .closer-avatar-mark img{width:40px;height:40px;object-fit:contain;display:block}
.closer .closer-name{margin:0;color:var(--navy,#27277C);font-size:1.125rem;font-weight:700;line-height:1.3}
.closer .closer-role{margin:2px 0 0;color:var(--gray,#475569);font-size:.9375rem;line-height:1.45}

/* Email, phone and contact links: one per line, an icon from the link type. */
.closer .closer-reach{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.closer .closer-reach li{margin:0;padding:0}
.closer .closer-reach a{
  display:inline-flex;align-items:center;gap:10px;min-height:36px;
  color:var(--blue,#1E3EAF);font-weight:600;font-size:.9375rem;text-decoration:none;overflow-wrap:anywhere;
}
.closer .closer-reach a:hover{text-decoration:underline;text-underline-offset:3px}
.closer .closer-reach a::before{
  content:'';flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--closer-ico) center/contain no-repeat;mask:var(--closer-ico) center/contain no-repeat;
  --closer-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.closer .closer-reach a[href^="mailto:"]::before{--closer-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E")}
.closer .closer-reach a[href^="tel:"]::before{--closer-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
@media (pointer:coarse){.closer .closer-reach a{min-height:44px}}

/* Wide monitors: the band keeps the footer's width and lets the type breathe. */
@media (min-width:1600px){
  .closer .closer-in{gap:96px}
}

/* Phones: the card sits under the words, buttons go full width. */
@media (max-width:600px){
  .closer{padding:56px 16px 64px}
  .closer .closer-btns{flex-direction:column;align-items:stretch}
  .closer .closer-btns .btn{width:100%}
  /* The avatar sits beside the name; email and phone take the card's full width. */
  .closer .closer-person{grid-template-columns:56px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center}
  .closer .closer-person > div{display:contents}
  .closer .closer-person > .closer-avatar{grid-row:1 / span 2}
  .closer .closer-person:has(> .closer-avatar) > div > p{grid-column:2}
  .closer .closer-person .closer-reach{grid-column:1 / -1;margin-top:12px}
  .closer .closer-person:has(> .closer-avatar) > div > p.closer-bio{grid-column:1 / -1}
  .closer .closer-avatar{width:56px;height:56px;font-size:1rem}
  .closer .closer-avatar-mark img{width:34px;height:34px}
}

/* Accessibility panel: high contrast keeps the band, drops the glow. */
html[data-a11y-contrast] .closer::before{display:none}