/* About page (pages/about.html). Every rule is scoped to [data-page="about"].
   Rhythm: a wide opening (offset lede), a two-column history with the hanging Meritta "9"
   (the page's one sweep word), the ivory daybreak for the two ministries (UCFM open on the
   ground, United Excel on a white sheet, mirrored), then the BRCC close on the CTA band.
   Tokens only; flat controls; no new gradients. */

/* ---------- Opening ---------- */
[data-page="about"] .about-header__lede{margin-top:20px}

/* ---------- History: the hanging numeral and the two blocks ---------- */
[data-page="about"] .about-history__grid{display:grid;gap:32px}
[data-page="about"] .about-history__mark{display:flex;align-items:flex-end;gap:20px}
[data-page="about"] .about-numeral{font-size:144px;line-height:.82;letter-spacing:0}
[data-page="about"] .about-numeral__label{padding-bottom:10px;font:600 13px/18px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
[data-page="about"] .about-numeral__rule{display:none}
[data-page="about"] .about-block > p{max-width:var(--measure);color:var(--text-1)}
[data-page="about"] .about-block__h{margin-bottom:16px}
[data-page="about"] .about-block--ruled{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
[data-page="about"] .about-links{display:flex;flex-wrap:wrap;column-gap:32px;margin-top:12px;list-style:none}

/* ---------- Ministries: the ivory daybreak ---------- */
[data-page="about"] .about-ucfm{display:grid;gap:32px}
[data-page="about"] .about-ucfm__mark{display:grid;gap:28px;align-content:start;justify-items:start}
[data-page="about"] .about-ucfm__logo{width:240px;height:auto}
[data-page="about"] .about-since{display:grid;gap:4px}
[data-page="about"] .about-since__num{font-size:72px;line-height:.9;color:var(--wine)}
[data-page="about"] .about-since__label{font:600 13px/18px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
[data-page="about"] .about-ministry__h{margin-bottom:20px}
[data-page="about"] .about-ucfm__body > p,
[data-page="about"] .about-ue__body > p:not(.eyebrow){max-width:var(--measure);color:var(--fg-1)}
[data-page="about"] .about-ucfm__body > p + p,
[data-page="about"] .about-ue__body > p:not(.eyebrow) + p{margin-top:20px}

/* United Excel: a white sheet on the ivory, text first and the ministry's mark beside it */
[data-page="about"] .about-ue{display:grid;gap:32px;margin-top:64px;padding:24px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-card)}
[data-page="about"] .about-ue__body .eyebrow + .about-ministry__h{margin-top:8px}
[data-page="about"] .about-ue__aside{display:grid;gap:16px;align-content:start;justify-items:start;padding-top:24px;border-top:1px solid var(--rule)}
[data-page="about"] .about-ue__logo{width:200px;height:auto}
[data-page="about"] .about-ue__join{max-width:22rem;font:400 17px/26px var(--f-body);color:var(--fg-1)}
[data-page="about"] .about-ue__join b{font-weight:600}
/* External link, new tab: the drawn arrow points up and out */
[data-page="about"] .about-ext::after{content:"\2197";content:"\2197" / ""}

/* ---------- The BRCC close (the page's CTA band) ---------- */
/* Built like the CTA band (--grad-cta through .surface-cta, the 4px 2026 sweep on its top edge) but not
   classed .cta-band, so the partnership line still prints (site.css hides .cta-band in print). */
[data-page="about"] .about-close{position:relative;padding-block:64px}
[data-page="about"] .about-close::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-2026);pointer-events:none}
[data-page="about"] .about-close__grid{display:grid;gap:32px}
[data-page="about"] .about-close__chip{order:-1;display:flex;align-items:center;justify-content:center;width:100%;max-width:240px;padding:16px 24px;background:var(--white);border-radius:var(--r-card)}
[data-page="about"] .about-close__chip img{width:100%;max-width:200px;height:auto}
[data-page="about"] .about-close__text > .eyebrow + .about-close__h{margin-top:12px}
[data-page="about"] .about-close__h{max-width:40rem}
/* Keep the college's name on its own line(s) rather than splitting "Baton / Rouge" after the lead-in */
[data-page="about"] .about-close__h em{display:inline-block}
[data-page="about"] .about-close__line{margin-top:20px;max-width:var(--measure-lede);color:var(--text-1)}
[data-page="about"] .about-close__actions{margin-top:32px}

@media (min-width:768px){
  [data-page="about"] .about-numeral{font-size:200px}
  [data-page="about"] .about-ue{margin-top:80px;padding:40px}
  [data-page="about"] .about-close__chip{max-width:320px;padding:24px 32px}
  [data-page="about"] .about-close__chip img{max-width:256px}
}

@media (min-width:1024px){
  /* Opening: the H1 runs wide; the lede steps in to the right-hand column */
  [data-page="about"] .about-header__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  [data-page="about"] .about-header__grid > *{grid-column:1 / -1}
  [data-page="about"] .about-header__title{grid-column:1 / 12;max-width:none}
  [data-page="about"] .about-header__lede{grid-column:6 / 13;max-width:none;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}

  /* History: the numeral hangs in the left five columns, the text runs in the right seven */
  [data-page="about"] .about-history__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  [data-page="about"] .about-history__mark{grid-column:1 / 6;display:grid;gap:0;justify-items:start;margin-top:-8px}
  [data-page="about"] .about-numeral{font-size:440px;line-height:.74}
  [data-page="about"] .about-numeral__label{margin-top:20px;padding-bottom:0}
  [data-page="about"] .about-numeral__rule{display:block;width:64px;margin-top:16px}
  [data-page="about"] .about-history__body{grid-column:6 / 13}
  [data-page="about"] .about-block__h{font-size:44px;line-height:48px;margin-bottom:20px}
  [data-page="about"] .about-block--ruled{margin-top:64px;padding-top:56px}

  /* Ministries: UCFM's mark on the left, the text on the same right-hand column line as the history */
  [data-page="about"] .about-ucfm{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  [data-page="about"] .about-ucfm__mark{grid-column:1 / 5;gap:40px;padding-top:12px}
  [data-page="about"] .about-ucfm__logo{width:280px}
  [data-page="about"] .about-since__num{font-size:112px}
  [data-page="about"] .about-ucfm__body{grid-column:6 / 13}
  [data-page="about"] .about-ministry__h{font-size:44px;line-height:48px;margin-bottom:24px}

  /* United Excel mirrored: text left, the mark and the way to join on the right */
  [data-page="about"] .about-ue{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:112px;padding:56px}
  [data-page="about"] .about-ue__body{grid-column:1 / 8}
  [data-page="about"] .about-ue__aside{grid-column:9 / 13;gap:20px;padding:4px 0 0 32px;border-top:0;border-left:1px solid var(--rule)}
  [data-page="about"] .about-ue__logo{width:232px}

  /* The close: statement and buttons on the left, BRCC's mark on a white chip on the right */
  [data-page="about"] .about-close__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  [data-page="about"] .about-close__text{grid-column:1 / 8}
  [data-page="about"] .about-close__chip{order:0;grid-column:9 / 13;max-width:none;aspect-ratio:4 / 3;padding:32px 40px}
  [data-page="about"] .about-close__chip img{max-width:300px}
  [data-page="about"] .about-close{padding-block:96px}
  [data-page="about"] .about-close__h{font-size:44px;line-height:50px}
}