/* ==========================================================================
   home-scale.css — roomier scale layer for the homepage
   University of Bridgeport

   Layered ON TOP of style.css → home.css → the plugin's ub-sections.css. Changes size and space
   only: no colours, no structure, no new components. Every rule here targets a
   selector those files already define, so removing this file returns the page
   to its previous appearance exactly.

   WHY A SEPARATE FILE, and not edits in place
   The sizes in home.css and ub-sections.css are tuned against each other — the hero
   interlock, the "reserve three lines of hero sub" trick, the deliberately
   restrained proof-strip heading. Editing ~200 scattered declarations to bump
   a scale risks silently undoing one of those decisions. Here the delta is
   visible in one place and reversible in one line of functions.php.

   THE DIAGNOSIS this file answers
   Display type was never the problem: headlines already run to 6.4rem. The
   problem was the middle and bottom of the scale — body copy at 0.84–1rem
   (13.5–16px), card text at 0.9–0.94rem, labels at 0.72–0.8rem. Set against
   6.4rem headlines, that gap reads as dense rather than confident, and no
   single element looks wrong on its own. So this file lifts the small and
   medium tiers, leaves the big display sizes alone, and buys the extra room
   the larger text needs by opening section padding and grid gaps.

   WHAT IS DELIBERATELY NOT SCALED
     - The hero (.hero2-*). Its height is viewport-locked and its copy sits in
       a box whose bottom padding is computed from --proof-overlap,
       --switcher-h and --switcher-gap. Growing hero text inside a fixed-height
       box eats the clearance those variables exist to guarantee, and on a
       short laptop the copy collides with the switcher. Hero proportions come
       from vh/vw on purpose; they are already sized to the screen.
     - The oversized numerals and watermarks (--section watermark, .out-figure,
       26vw/34vh display figures). These are graphic elements sized in viewport
       units. Scaling them with the text tier only reduces the scale contrast
       that makes the layout feel composed.
     - Anything below 1100px. The mobile and tablet stacks were tuned against
       a narrower measure and are not the "tight on a desktop" complaint this
       file addresses. Mobile keeps a smaller lift; see the bottom of the file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Spacing scale
   --section-pad is already the single lever for vertical rhythm across
   home.css, ub-sections.css and academics.css. Raising it here moves every section
   band at once, which is most of the "roomier" ask on its own.
   -------------------------------------------------------------------------- */
body.v2 {
  --section-pad: 152px;    /* was 120px */
}

/* THE WIDER MEASURE MOVED TO style.css.
   It was `body.v2 .container { max-width: 1384px; padding: 0 32px }` here,
   which made the page measure depend on which sheets a page loaded — the
   header chrome in header.php is on every page, so it jumped 104px between
   the homepage and, say, /admissions/. A site measure cannot be scoped to a
   body class that only some pages carry, so it now lives in style.css, which
   loads everywhere. The 1384px and its breakpoints are unchanged; only the
   selector moved. This file continues to own the homepage type and spacing. */

/* --------------------------------------------------------------------------
   2. Shared typography primitives
   These four classes carry most of the page's non-hero text, so they are the
   highest-leverage rules in the file.
   -------------------------------------------------------------------------- */

/* Section ledes: 1.18rem → 1.32rem (~19px → 21px), and a slightly wider
   measure so the longer line length does not turn into more lines. */
body.v2 .section-lede {
  font-size: 1.32rem;
  line-height: 1.7;
  max-width: 50rem;
}

/* Eyebrows sit above almost every section heading. At 0.78rem with 0.2em
   tracking they read as fine print; 0.86rem holds the same graphic role while
   staying legible. Extra bottom margin separates the label from its heading
   rather than letting the two read as one block. */
body.v2 .eyebrow-rule {
  font-size: 0.86rem;
  margin-bottom: 28px;
}

/* .display-lg is the standard section heading. Lifted at the small end of the
   clamp only: the 3.6rem ceiling is already generous, and raising it would
   start competing with the hero. The floor moving 2.3 → 2.6rem is what shows
   up on a laptop, which is where the page is actually read. */
body.v2 .display-lg {
  font-size: clamp(2.6rem, 4.1vw, 3.85rem);
  line-height: 1.08;
}

/* --------------------------------------------------------------------------
   3. Buttons and calls to action
   0.95rem/1rem labels with 10px–16px padding read as small controls next to
   the display type. Larger tap targets also help on touch.
   -------------------------------------------------------------------------- */
/* The multipliers are applied to THIS file's larger values, not to
   style.css's. That is what makes one "Size" setting keep the homepage's
   buttons proportionally bigger than the rest of the site's instead of
   collapsing both to the same number. At 1 these compute to 13x30, 17x38 and
   18x36 exactly as before. */
body.v2 .btn {
  font-size: calc(1.04rem * var(--btn-font-scale));
  padding: calc(13px * var(--btn-pad-scale)) calc(30px * var(--btn-pad-scale));
}
body.v2 .btn-large {
  font-size: calc(1.14rem * var(--btn-font-scale));
  padding: calc(17px * var(--btn-pad-scale)) calc(38px * var(--btn-pad-scale));
}
body.v2 .btn-ghost {
  font-size: calc(1.08rem * var(--btn-font-scale));
  padding: calc(18px * var(--btn-pad-scale)) calc(36px * var(--btn-pad-scale));
}

/* --------------------------------------------------------------------------
   4. DOOR BAND — the five audience cells
   The tightest block on the page: 22px padding around a 1.02rem title and a
   0.845rem descriptor, five across. Because the band rides UP over the hero by
   --doors-overlap, growing it pushes more of it below the fold — so the
   padding grows modestly and the type does the visible work.
   -------------------------------------------------------------------------- */
/* Type in the cells scales at every viewport height — legibility of the
   audience name is the whole point of the band. */
body.v2 .door-title {
  font-size: 1.14rem;
}
body.v2 .door-head i {
  font-size: 1.05rem;
  width: 22px;
}
body.v2 .door-arrow {
  font-size: 0.86rem;
}

/* Cell PADDING AND THE OVERLAP NO LONGER SCALE, and that is the change.
   They used to grow on tall viewports (28px/30px padding, 128px overlap) and be
   trimmed twice on short ones by the old home3.css's priority ladder, because a band
   holding a wrapping descriptor had no single correct height and the fold had no
   spare room to absorb the difference.

   The cells hold one line now, so the band has exactly one height — 4px border +
   22px + a 22px title line + 22px = 70px — and ub-sections.css sets --doors-overlap to
   that number so the band's bottom edge lands on the hero's. A padding bump here
   would break that identity in the one direction that shows: 12px more cell
   height against an unchanged overlap is 12px of every cell hanging below the
   hero's bottom edge, straight out of the 35px of fold clearance home.css's
   min-height clamp reserves. So the band keeps one padding at every size and the
   TYPE does all the scaling, which was always the more visible half.

   The descriptor sizes below stay. Nothing on the homepage renders a `line`, but
   ub/door-band still registers the attribute and the flat variant elsewhere uses
   it, so these are the correct sizes the moment one comes back. Note that a
   descriptor returning to the OVERLAP variant also needs --doors-overlap raised
   to match the taller band — the two are one number in two files, and that is
   the interlock ub-sections.css's comment describes. */
@media (min-width: 1101px) and (min-height: 901px) {
  body.v2 .door-line {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 11px;
  }
}

/* On short viewports the descriptor keeps ub-sections.css's trimmed size. */
@media (min-width: 1101px) and (max-height: 900px) {
  body.v2 .door-line {
    font-size: 0.88rem;
  }
}

/* Below 1101px the band has stacked, so cell height no longer competes with the
   fold and the descriptor can take the full lift. */
@media (max-width: 1100px) {
  body.v2 .door-line {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 11px;
  }
}

/* --------------------------------------------------------------------------
   5. WHAT'S HAPPENING — news and events
   The most text-dense section on the page, and the one the "text heavy"
   complaint most likely came from.
   -------------------------------------------------------------------------- */
/* ub-sections.css aligns this row on `flex-end`, which pinned "All UB news →" to the
   BOTTOM of the heading column. That read as level when the lede was one line;
   with the larger lede the column grew and the link dropped away from the text
   it belongs to, sitting alone in the whitespace. Aligning to the top and
   nudging it down by the heading's own height instead keeps it beside the
   copy — it now tracks the text rather than the container. */
body.v2 .whatson-head {
  align-items: flex-start;
  margin-bottom: 58px;
}
body.v2 .whatson-head-link {
  margin-top: 0.6rem;
}
body.v2 .whatson-grid {
  gap: 56px;
}
body.v2 .whatson-head-link {
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   6. Card and cell text across the remaining sections
   Grouped by the size they are coming FROM rather than by section, because
   home.css uses the same handful of values (0.68–0.72 micro-labels, 0.8–0.82
   meta, 0.9–1rem body) across unrelated blocks. Selectors stay one class deep
   so a later media query can still override any of them.

   The `from →  to` figures in the comments are the values in home.css and
   ub-sections.css as read at the time of writing. If a base value changes, the note
   goes stale but the rule still wins — this layer loads last.
   -------------------------------------------------------------------------- */

/* Micro-labels: uppercase, heavily tracked, currently 0.68–0.72rem (≈11px).
   These are the smallest text on the page and the least legible. → 0.82rem. */
body.v2 .pathway-degree,
body.v2 .center-body .kicker,
body.v2 .news-kicker,
body.v2 .ev-aud,
body.v2 .pathway-outcome .k,
body.v2 .impact-card .kicker {
  font-size: 0.82rem;
}
/* The news rail sets its own smaller kicker; keep it a step below the lead
   item's rather than letting both collapse to one size. */
body.v2 .news-item .news-kicker {
  font-size: 0.78rem;
}

/* Meta / caption text: 0.78–0.82rem → 0.94rem. */
body.v2 .news-date,
body.v2 .ev-meta,
body.v2 .proof-note {
  font-size: 0.94rem;
  line-height: 1.45;
}

/* Card headings: 1.2–1.5rem → 1.34–1.62rem. .center-body h3 is the largest of
   these already, so it moves proportionally less. */
body.v2 .pathway-name {
  font-size: 1.34rem;
  line-height: 1.28;
}
body.v2 .center-body h3 {
  font-size: 1.62rem;
  line-height: 1.2;
}
body.v2 .impact-card h3 {
  font-size: 1.3rem;
  line-height: 1.28;
}

/* Card body copy: 0.9–1rem → 1.02rem with looser leading. This is the single
   biggest readability change in the file — it covers the descriptive text
   inside every card on the page. */
body.v2 .center-body p,
body.v2 .impact-card p,
body.v2 .ev-title,
body.v2 .tl-text,
body.v2 .apply2-step p,
body.v2 .split-stat .l,
body.v2 .proof-label {
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Tab strip: 1.06rem labels with 15px padding, sitting directly under a
   display heading. */
body.v2 .pathway-tab {
  font-size: 1.16rem;
  padding: 18px 30px 18px 0;
}
body.v2 .pathways-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
body.v2 .pathway-tabs {
  margin-bottom: clamp(1.5rem, 2.25vw, 2rem);
}
body.v2 .pathway-grid {
  gap: 32px;
}
body.v2 .pathway-body {
  padding: 26px 24px 28px;
}

/* Feature panel ("sound") — the long-form pull-quote band. Its paragraph is
   set directly on the element, not via .section-lede, so it needs its own
   bump: 1.16rem → 1.3rem. */
body.v2 .sound-panel {
  max-width: 46rem;
  padding: 108px 0;
}
body.v2 .sound-panel p {
  font-size: 1.3rem;
  line-height: 1.72;
}

/* Numbered steps ("apply2") — the closing conversion block. */
body.v2 .apply2-grid {
  gap: 36px;
}
body.v2 .apply2-step {
  padding: 36px 32px 38px;
}
body.v2 .apply2-step h3 {
  font-size: 1.44rem;
}

/* Proof / stat cells. The figures (.proof-num) are already oversized graphic
   elements; only the supporting caption and note move. */
body.v2 .proof-cell {
  padding: 36px 30px;
}

/* Employer marquee cells. */
body.v2 .employer-name {
  font-size: 1.32rem;
  padding: 30px 24px;
}

/* Grid gutters across the card sections. */
body.v2 .impact-grid,
body.v2 .centers-grid {
  gap: 32px;
}
body.v2 .impact-card {
  padding: 32px 28px;
}
body.v2 .center-body {
  padding: 34px 32px;
}
body.v2 .impact-intro .section-lede,
body.v2 .whatson-head .section-lede {
  margin-top: 22px;
}

/* Timeline nodes inside the legacy band. */
body.v2 .tl-year {
  font-size: 2rem;
}

/* Events rail. */
body.v2 .events-head {
  margin-bottom: 26px;
}

/* Sticky CTA bar — persistent, so it stays comparatively compact. Lifted only
   enough to match the new button scale. */
body.v2 .sticky-cta .container {
  padding: 16px 32px;
}

/* --------------------------------------------------------------------------
   7. Responsive
   Below 1100px the stacks were tuned against a narrower measure, and the
   sections that were two or five across become one or two. A full-strength
   lift there would cost more scroll than it buys in comfort, so the type
   increase is kept but the spacing increase is halved.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body.v2 {
    --section-pad: 104px;    /* home.css sets 88px at this breakpoint */
  }
  /* .container's breakpoints moved to style.css with the measure itself. */
  body.v2 .whatson-grid {
    gap: 44px;
  }
  body.v2 .pathways-head {
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  body.v2 {
    --section-pad: 76px;     /* home.css sets 66px at this breakpoint */
  }
  /* Ledes stop scaling on a phone: 1.32rem on a 375px screen wraps every few
     words, which reads worse than the smaller size did. */
  body.v2 .section-lede {
    font-size: 1.15rem;
    line-height: 1.65;
  }
  body.v2 .display-lg {
    font-size: clamp(2.15rem, 7.4vw, 2.6rem);
  }
  body.v2 .door {
    padding: 24px 22px 26px;
  }
  body.v2 .btn-large,
  body.v2 .btn-ghost {
    font-size: calc(1.06rem * var(--btn-font-scale));
    padding: calc(15px * var(--btn-pad-scale)) calc(30px * var(--btn-pad-scale));
  }
}