/* ==========================================================================
   ub-sections.css — the section blocks' own styles
   University of Bridgeport · plugin: ub-elements

   WHY THIS FILE EXISTS
   These rules used to live in the theme, in css/home3.css — a PAGE-named
   stylesheet inside a THEME, styling blocks that belong to this plugin. That
   was wrong for the reason css/ub-elements.css already documents at length:

     "Style by element, not by page. A component's styles live with the
      component and load wherever the component can appear."

   ub-elements.css got that right and was then left in the theme. This file
   finishes the move. Every selector below is emitted by a block registered in
   includes/ub-section-blocks.php, so the styling now ships with the code that
   renders it: install the plugin under any theme and the blocks still paint.

   WHICH BLOCKS
     ub/door-band     → .doors, .doors-grid, .door*
     ub/news-events   → .whatson*, .news-*, .events*, .ev*, .subscribe
     ub/impact-cards  → .impact*
     ub/legacy-band   → .legacy*
     ub/stat-strip    → .proof-strip--standalone (a variant, not the base)
     ub/cta-band      → .cta-more*
     ub/hero-carousel → .hero2--four / .hero2--multi slide-track counts

   TOKEN CONTRACT
   These rules read design tokens the UB design system provides — --ub-purple,
   --ub-blue-text, --ink, --bg-light, --section-pad, --shadow-md — plus the
   .container / .btn / .reveal primitives. That is a contract with the design
   system, not with one theme, which is why the enqueue in ub-elements.php
   names no theme handle: a missing dependency handle makes wp_enqueue_style()
   drop the sheet silently. Defaults for the tokens that were only ever
   declared in a page stylesheet are set below.

   SCOPING
   The `.v2` / `body.v2` scopes are preserved exactly as they were. That class
   is applied by the theme's ubridgeport_uses_section_blocks(); dropping the
   scope would repaint pages that never opted into this design layer.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens these blocks need.

   --doors-overlap and --proof-overlap were declared on body.v2 in home3.css.
   They are the door band's own geometry — how far it rides up over the hero —
   so they belong with the band. Kept on body.v2 rather than :root for the
   original reason: --proof-overlap is home.css's, and raising it from 56px
   changes .proof-strip's negative margin and the hero's bottom padding on
   every page that loads home.css.
   -------------------------------------------------------------------------- */

body.v2 {
  /* How far the door band rides up over the hero. Set to EXACTLY the band's own
     height so the whole band clears the fold rather than peeking: ride up by
     your own height and your bottom edge lands on the hero's bottom edge, which
     home.css's min-height clamp already holds 35px above the fold.
     home.css derives .hero2-body's bottom padding and the slide switcher's
     offset from --proof-overlap, so changing it here keeps that interlock
     intact automatically — the hero copy simply reserves more or less room.

     116px → 70px because the cells lost their descriptor line. 4px border-top +
     22px padding + one 22px title line + 22px padding = 70px, and every pixel
     handed back is a pixel of hero copy space, spent 1:1. That is where the
     room for a 57px headline and 40px of air above the buttons came from. */
  --doors-overlap: 70px;
  --proof-overlap: var(--doors-overlap);
}

/* Body-copy link colour for the new sections. Same reasoning as home.css:
   scoped per section, never a blanket `.v3 a`, so the header, footer, and
   dark panels keep their own colours. */
.v2 .whatson a:not([class*="btn"]):not(.news-lead):not(.news-item):not(.ev),
.v2 .impact a:not([class*="btn"]):not(.impact-card) {
  color: var(--ub-blue-text);
}


/* --------------------------------------------------------------------------
   HERO — four slides instead of three
   One slide per constituency: the centennial (everyone), clinical care
   (applicants + the neighbours our clinics treat), applied engineering
   (applicants + industry), alumni & giving (alumni + donors).
   -------------------------------------------------------------------------- */
/* Column count comes from --hs-count so the track follows the number of slides
   rather than a hardcoded four. home.css sets three; anything above that lands
   here. `--four` is kept as the literal class index3.html ships and falls back
   to 4 when no count is supplied; `--multi` is what a renderer emits when it
   knows the count (the WP block does — an editor can add a fifth slide, and a
   fifth item in a four-column grid wraps into a second row). */
.hero2--four .hs-track,
.hero2--multi .hs-track {
  grid-template-columns: repeat(var(--hs-count, 4), minmax(0, 1fr));
  /* Wider than .hero2-inner (39rem) on purpose — home.css already accounts
     for the track overhanging the dark panel with the hero's bottom scrim.
     54rem → 46rem now that the numerals are hidden and each control is just its
     label: 46rem/4 is 184px a column, still 50px more than the longest label
     ("Care for the City") needs, and it stops the track from reaching a third of
     the way across a 1680px screen for no reason. */
  max-width: min(46rem, 100%);
}

/* Slide 1 keeps the oversized "100". On the alumni slide the watermark is the
   centennial mark again, so it is set per-slide in the markup, not globally. */


/* --------------------------------------------------------------------------
   DOOR BAND — the five audiences, overlapping the hero
   Icon + audience name sit on the FIRST line of each cell, deliberately: on a
   short laptop where the band cannot fully clear the fold, the part that peeks
   is the part that names the audience, not decorative padding.
   -------------------------------------------------------------------------- */
.doors {
  position: relative;
  z-index: 6;
  margin-top: calc(var(--doors-overlap) * -1);
  /* No bottom padding of its own — the next section's --section-pad supplies
     the gap. Both would stack to 240px of dead air. */
  padding-bottom: 0;
}
/* The flat variant drops the overlap. The negative margin above is only correct
   when there is a hero directly above to ride over; anywhere else it pulls the
   band up over whatever precedes it. Declared after .doors so plain source order
   settles it — no !important needed, and both stay single-class so a later
   media query can still override either. */
.doors--flat {
  margin-top: 0;
  padding-top: var(--section-pad);
}
.doors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.door {
  position: relative;
  display: block;
  /* Symmetric now. The 2px of extra bottom padding balanced a descriptor line
     whose own line-height sat higher than its box; with the descriptor gone it
     just made a one-line cell look like it was sitting up. */
  padding: 22px 22px 22px;
  border-right: 1px solid #E8ECEE;
  border-top: 4px solid var(--ub-purple);
  text-decoration: none;
  transition: var(--transition);
  overflow: hidden;
}
.door:nth-child(even) { border-top-color: var(--ub-blue); }
.door:last-child { border-right: none; }

/* Wedge wash on hover — the hero's diagonal, reused at cell scale. */
.door::before {
  content: '';
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: linear-gradient(180deg, rgba(89,45,130,0) 0%, rgba(89,45,130,0.07) 100%);
  transform: translateY(102%);
  transition: transform 0.45s cubic-bezier(0.25,0.8,0.25,1);
  pointer-events: none;
}
.door:hover::before,
.door:focus-visible::before { transform: translateY(40%); }
.door:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.door:focus-visible { outline: 3px solid var(--ub-blue); outline-offset: -3px; }

.door-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.door-head i {
  font-size: 0.95rem;
  color: var(--ub-purple);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.door:nth-child(even) .door-head i { color: var(--ub-blue-text); }
.door-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--text-main);
  transition: var(--transition);
}
.door:hover .door-title { color: var(--ub-purple); }
.door-line {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: 9px;
  font-size: 0.845rem;
  line-height: 1.45;
  color: var(--text-light);
}
/* The arrow rides on the FIRST line rather than in a labelled row of its own.
   Measured: a separate "Explore programs →" row made the band 137px tall
   against a 104px overlap, so 44px of every cell hung below the fold. The row
   only restated what the title and the descriptor already say, and the fold is
   worth more than the restatement. */
.door-arrow {
  margin-left: auto;
  padding-left: 10px;
  font-size: 0.78rem;
  color: var(--ub-purple);
  opacity: 0.45;
  transition: var(--transition);
}
.door:hover .door-arrow,
.door:focus-visible .door-arrow { opacity: 1; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   DOOR BAND, DESKTOP — cells sized by their own name, not by 1/5 of the row
   Five equal columns were correct while every cell held a wrapping descriptor:
   the tallest cell set the row and a 1/5 column was wide enough for a title.
   With the descriptor gone the row is ONE line tall, so the widest title now
   decides the band's height — and "Community & Neighbors" needs 232px of a
   206px column at 1366px, wraps to two lines, and takes the other four cells'
   height with it. Measured: 92px against a 70px overlap, so 22px of every cell
   hangs below the hero's bottom edge and eats the fold clearance.

   Content-sized cells fix the cause rather than the symptom. Each door is as
   wide as its own name plus its padding, they share the leftover space, and the
   band is 70px because nothing wraps. Cheaper than a nowrap + truncation guard,
   which would have hidden the overflow instead of removing it.

   The arrow leaves the flow for the same reason: five arrows at ~22px each is
   110px of row width spent on decoration that was pushing the titles into a
   wrap. Absolute keeps it flush right where a 1/5 column used to put it, and
   costs the row nothing.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .doors-grid { display: flex; flex-wrap: nowrap; }
  .door { flex: 1 1 auto; min-width: 0; }
  .door-arrow {
    position: absolute;
    top: 26px;
    right: 20px;
    margin-left: 0;
    padding-left: 0;
    /* Hidden at rest, not at 0.45. In a 128px band with a descriptor under it
       the arrow was one detail among several; in a 70px band of nothing but five
       names, five permanent arrows are the loudest thing on the strip. The cell
       is a link with a border-top accent and a title — it does not need to be
       told it is clickable until the cursor is on it. */
    opacity: 0;
  }
  .door:hover .door-arrow,
  .door:focus-visible .door-arrow { opacity: 1; }
  /* The hover wash was tuned to sweep a 128px cell. At 70px the same 120%-tall
     gradient stopping at translateY(40%) barely enters the box, so both are
     re-proportioned to the shorter cell. */
  .door::before { inset: auto -20% -30% -20%; height: 90%; }
  .door:hover::before,
  .door:focus-visible::before { transform: translateY(30%); }
  /* -6px was a third of a 22px title's height in a tall cell. In a 70px strip
     it reads as the row coming apart. */
  .door:hover { transform: translateY(-3px); }
}


/* --------------------------------------------------------------------------
   PROOF STRIP — relocated
   No longer overlaps anything; it now introduces the Outcomes block on the
   light background. home.css pulls it up by --proof-overlap, which is why
   that has to be cancelled here rather than just left alone.
   -------------------------------------------------------------------------- */
/* A VARIANT CLASS, not a blanket override of .proof-strip.
   The overlap version is still correct wherever the strip does ride over a hero
   — program pages use it that way — and repainting every instance from one
   stylesheet would change those pages as a side effect of loading this file.
   Same reasoning as ub/cta-band's `variant`: appearance differs, structure and
   data do not. */
.v2 .proof-strip--standalone {
  margin-top: 0;
  padding: var(--section-pad) 0 100px;
  background: var(--bg-light);
}
.v2 .proof-strip--standalone .proof-lead {
  max-width: 40rem;
  margin-bottom: 34px;
}
/* Smaller than .display-lg on purpose: this heading introduces the block that
   introduces Outcomes, so it must not compete with the 8rem figure below. */
.v2 .proof-strip--standalone .proof-lead h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-main);
}


/* --------------------------------------------------------------------------
   WHAT'S HAPPENING — news + events
   The one section that serves every audience at once, and the one a
   university homepage cannot credibly omit. Left column is editorial, right
   column is the events rail; each event carries an audience tag so a parent
   or an alum can see at a glance which items are for them.
   -------------------------------------------------------------------------- */
.whatson { padding: var(--section-pad) 0; background: var(--white); }
.whatson-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.whatson-head .section-lede { margin-top: 18px; }
.whatson-head-link {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ub-blue);
  white-space: nowrap;
}
.whatson-grid {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 44px;
}

.news-lead { display: block; text-decoration: none; }
.news-lead-img {
  height: 330px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.news-lead-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,16,35,0) 55%, rgba(27,16,35,0.35) 100%);
  transition: var(--transition);
}
.news-lead:hover .news-lead-img::after { background: linear-gradient(180deg, rgba(89,45,130,0.18) 0%, rgba(89,45,130,0.65) 100%); }
.news-kicker {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ub-purple);
}
.news-lead h3 {
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.16;
  color: var(--text-main);
  margin: 9px 0 10px;
  transition: var(--transition);
}
.news-lead:hover h3 { color: var(--ub-purple); }
.news-lead p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 38rem;
}
.news-date {
  display: block;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  /* Not a lighter grey: #8593A0 measured 3.1:1 on white and fails WCAG AA at
     this size. --text-light is 5.3:1. */
  color: var(--text-light);
}

.news-list { margin-top: 36px; border-top: 1px solid #E4E9EB; }
.news-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #E4E9EB;
  text-decoration: none;
  transition: var(--transition);
}
.news-item:hover { padding-left: 8px; }
.news-item-thumb {
  height: 74px;
  background-size: cover;
  background-position: center;
}
.news-item h4 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.28;
  color: var(--text-main);
  margin: 5px 0 6px;
  transition: var(--transition);
}
.news-item:hover h4 { color: var(--ub-purple); }
.news-item .news-kicker { margin-top: 0; font-size: 0.68rem; }
.news-item .news-date { margin-top: 4px; }

/* Events rail + the subscribe block stack in one side column, so the rail is
   not left floating against 400px of white space. */
.whatson-side {
  align-self: start;
  display: grid;
  gap: 22px;
}
.events {
  background: var(--bg-light);
  border-top: 4px solid var(--ub-blue);
  padding: 26px 26px 12px;
}

.subscribe {
  background: var(--ub-purple-deep);
  border-top: 4px solid var(--ub-blue);
  padding: 26px 26px 28px;
}
.subscribe h3 {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}
.subscribe p {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.subscribe .btn { margin-top: 18px; }
.events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
}
.events-head h3 {
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}
.ev {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid #DDE4E6;
  text-decoration: none;
  transition: var(--transition);
}
.ev:last-of-type { border-bottom: none; }
.ev:hover { transform: translateX(4px); }
.ev-date { border-top: 3px solid var(--ub-purple); padding-top: 8px; }
.ev:nth-child(even) .ev-date { border-top-color: var(--ub-blue); }
.ev-date .m {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ub-purple);
}
.ev-date .d {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-main);
}
.ev-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-main);
  transition: var(--transition);
}
.ev:hover .ev-title { color: var(--ub-purple); }
.ev-meta {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
}
/* Who the event is for. The whole point of the tag: an alum should not have to
   read four event descriptions to find the one addressed to them. */
.ev-aud {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ub-purple);
  background: rgba(89,45,130,0.09);
}
.ev-aud.is-public { color: #0A6E8F; background: rgba(0,167,224,0.12); }
.events-foot {
  padding: 16px 0 18px;
  border-top: 1px solid #DDE4E6;
}
.events-foot a {
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   IN THE CITY — community-facing UB
   Everything here is open to someone who will never enrol: patients at the
   clinics, families at Seaside Park, fans at a home game, an audience at a
   lecture. It is the section that makes the "Community" door honest.
   -------------------------------------------------------------------------- */
.impact {
  padding: var(--section-pad) 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.impact::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  height: 100%;
  background: var(--bg-light);
  clip-path: polygon(var(--wedge) 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.impact .container { position: relative; z-index: 2; }
.impact-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 60px;
  align-items: start;
}
.impact-intro { max-width: 30rem; }
.impact-intro .section-lede { margin-top: 20px; }
.impact-open {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 3px solid var(--ub-blue);
}
.impact-open .n {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ub-purple);
}
.impact-open .l {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.5;
}
.impact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.impact-card {
  display: block;
  background: var(--white);
  border-top: 4px solid var(--ub-purple);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px 26px;
  text-decoration: none;
  transition: var(--transition);
}
.impact-card:nth-child(even) { border-top-color: var(--ub-blue); }
.impact-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.impact-card > i {
  font-size: 1.35rem;
  color: var(--ub-purple);
}
.impact-card:nth-child(even) > i { color: var(--ub-blue-text); }
.impact-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 14px 0 9px;
  transition: var(--transition);
}
.impact-card:hover h3 { color: var(--ub-purple); }
.impact-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-light);
}
.impact-card .go {
  display: block;
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ub-purple);
}
.impact-card .go i { margin-left: 5px; transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1); }
.impact-card:hover .go i { transform: translateX(5px); }


/* --------------------------------------------------------------------------
   A CENTURY OF PURPLE KNIGHTS — alumni & giving
   Full-bleed split, photography on the wedge. Two equal actions, because
   "come back" and "give" are different decisions and collapsing them into one
   button loses the alum who is not ready to donate.
   -------------------------------------------------------------------------- */
.legacy {
  display: grid;
  grid-template-columns: 41% 59%;
  background: var(--ub-purple-deep);
  position: relative;
  overflow: hidden;
}
.legacy-media {
  background-size: cover;
  background-position: center 30%;
  min-height: 560px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--wedge)) 100%, 0 100%);
}
.legacy-body {
  display: flex;
  align-items: center;
  padding: 96px 5vw 96px 3vw;
}
.legacy-inner { max-width: 36rem; color: var(--white); }
.legacy-inner .eyebrow-rule { color: #7FD9F5; }
.legacy-inner h2 {
  font-size: clamp(2.3rem, 4.1vw, 3.7rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--white);
}
.legacy-inner p.lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin-top: 20px;
}
.legacy-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 34px;
  margin-top: 38px;
  justify-content: start;
}
.legacy-stats > div { border-left: 3px solid var(--ub-blue); padding-left: 16px; }
.legacy-stats .n {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}
.legacy-stats .l {
  margin-top: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.66);
  line-height: 1.4;
}
.legacy-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 42px;
}
.legacy-act {
  display: block;
  border: 1px solid rgba(255,255,255,0.24);
  padding: 24px 22px 26px;
  text-decoration: none;
  transition: var(--transition);
}
.legacy-act:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--ub-blue);
  transform: translateY(-5px);
}
.legacy-act h3 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}
.legacy-act p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}
.legacy-act .go {
  display: block;
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7FD9F5;
}
.legacy-act .go i { margin-left: 5px; transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1); }
.legacy-act:hover .go i { transform: translateX(5px); }


/* --------------------------------------------------------------------------
   CLOSING CTA — enrollment stays the primary ask, with the other three
   audiences given a quiet line rather than a competing button.
   -------------------------------------------------------------------------- */
.cta-section .cta-more {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.24);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
}
.cta-more .cta-more-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0.55 measured 4.5:1 on the purple gradient — a bare pass at 11.5px bold.
     0.62 gives real margin. */
  color: rgba(255,255,255,0.62);
}
.cta-more a {
  color: rgba(255,255,255,0.86);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
}
.cta-more a:hover { color: var(--white); border-bottom-color: var(--white); }



/* ==========================================================================
   RESPONSIVE — 1100px then 768px
   Split out of the theme's home3.css along with the rules above. The two
   short-viewport queries that trimmed .door-line come too: that descriptor
   line is the door band's own, and it is inert on the current homepage but
   correct the moment an editor types a `line` back into a door.
   ========================================================================== */

@media (min-width: 1101px) and (max-height: 900px) {
  .door-line { margin-top: 7px; font-size: 0.82rem; }
}

@media (max-width: 1100px) {
  /* Hero goes static below 1100px, so nothing overlaps it. */
  .doors { margin-top: 0; padding-bottom: 0; }
  .doors-grid { grid-template-columns: repeat(2, 1fr); box-shadow: var(--shadow-md); }
  .door:nth-child(2n) { border-right: none; }
  .door:nth-child(-n+4) { border-bottom: 1px solid #E8ECEE; }
  /* Fifth door has no partner; let it run the full width rather than leaving
     a hole in the grid. */
  .door:last-child { grid-column: 1 / -1; border-right: none; }

  .whatson-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .whatson-grid { grid-template-columns: 1fr; gap: 40px; }
  .news-lead-img { height: 280px; }

  .impact::before { display: none; }
  .impact-grid { grid-template-columns: 1fr; gap: 44px; }
  .impact-intro { max-width: none; }

  .legacy { grid-template-columns: 1fr; }
  .legacy-media {
    min-height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .legacy-body { padding: 60px 0; }
  .legacy-inner { max-width: none; padding: 0 20px; }
}

@media (max-width: 768px) {
  .doors-grid { grid-template-columns: 1fr; }
  .door { border-right: none; border-bottom: 1px solid #E8ECEE; }
  .door:last-child { border-bottom: none; }

  .news-lead-img { height: 210px; }
  .news-lead h3 { font-size: 1.42rem; }
  .news-item { grid-template-columns: 78px 1fr; gap: 14px; }
  .news-item-thumb { height: 60px; }

  .impact-cards { grid-template-columns: 1fr; }

  .legacy-stats { grid-template-columns: 1fr; gap: 20px; }
  .legacy-actions { grid-template-columns: 1fr; }

  .cta-more { gap: 10px 20px; }
}