/* Block: cnm-interior-hero
 * Extracted from theme CSS by wp-arch-agent.
 * Classes: bg, inner, pill, cnm-interior-hero, interior-hero, interior-hero--researchers, interior-hero--utuc
 */

/* 480px, was 400 — "make the image area a little taller" / "make the image
   taller if possible" (client, 86ak0hg44 on Understanding UTUC and 86ak0hh5g on
   For Researchers, the same component both times).
   Keep in lockstep with assets/css/interior.css, which duplicates this rule. */
.interior-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 400 — the comp's own frame (91:8560), down from 560 (BHL-217 / BHL-221).
     THE HISTORY MATTERS HERE, because this reverses two earlier client asks.
     400 -> 480 was "make the image area a little taller" (86ak0hg44,
     86ak0hh5g) and 480 -> 560 was "Please make hero image taller"
     (86ak0htu3). The client has now asked the other way, for a concrete
     reason: "they want the UTUC Defined section to show up above the fold on
     laptops. So image may need to be shorter" — and the same note on For
     Researchers ("shorten image enough so you can see Our Goal above the
     fold"). So this is not "restoring the Figma value" on our own initiative;
     it lands there because the note above was right that 400 is what the file
     says, and 400 is what satisfies the request.
     Measured on /understanding-utuc/ at 1920: the "UTUC Defined" heading's
     bottom sat at document y=932 at 560px and sits at 772 at 400px — inside a
     790px laptop viewport (1440x900 less browser chrome), which it was not
     before. Intermediate steps for reference: 480 -> 852, 340 -> 712.
     The crop is expressed in percentages (--hero-crop-*), so the framing stays
     proportional as the band shrinks (verified: object-fit cover, the box still
     clips) — which is also what "match crop from Figma" asks for, since those
     percentages were derived against this same 400px frame.
     Keep in step with assets/css/interior.css, which is the copy the non-block
     team bio pages get. */
  height: 400px;
  display: flex;
  align-items: center;
}

/* 300px — "under 1690px make the hero area 1/4 smaller in height" (operator,
   BHL-221). A quarter off 400. 1690 is the operator's own breakpoint, not one of
   the theme's 1399/991/767/575 gears; header.css states the same number for the
   bar's padding and --header-h, which halve in the same band. The crop is all
   percentages of the band, so the framing stays proportional as it shortens —
   the same reason the 560 -> 400 step needed no crop maths.
   NOTE the >=992 floor: the 991 block below already lands on 300px, so without
   it this rule and that one would say the same thing twice and the next person
   would have to diff them to find out. Keep in step with
   assets/css/interior.css, which is the copy the non-block bio pages get. */
@media (min-width: 992px) and (max-width: 1689px) {
  .interior-hero {
    height: 300px;
  }
}

.interior-hero .bg {
  position: absolute;
  z-index: -2;
  left: var(--hero-crop-x, 0);
  top: var(--hero-crop-y, -150%);
  width: var(--hero-crop-w, 100%);
  height: var(--hero-crop-h, 256%);
  max-width: none;
  /* cover, not fill: the crop box is a % of the viewport width but a % of the
     fixed 400px hero height, so past the 1440 design width it grows sideways
     only and `fill` stretched the image (≈2.1x at 2560). The --hero-crop-*
     offsets still set the framing; cover just keeps the aspect ratio.
     Keep in lockstep with assets/css/interior.css, which duplicates this rule
     and is the only copy loaded on the non-block team bio pages. */
  object-fit: cover;
}

.interior-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--hero-tint, #4C759C);
  /* Default 0.55, was 0.75 — "reduce the amount of blue overlay" / "slightly
     reduce the blue overlay" (86ak0hg44, 86ak0hh5g). The photo underneath also
     carries its own opacity, so the two dimmers compound; this is the one the
     client pointed at. Per-hero overrides through --hero-tint-opacity still win. */
  opacity: var(--hero-tint-opacity, 0.55);
  mix-blend-mode: var(--hero-tint-blend, hard-light);
  pointer-events: none;
}

.interior-hero .inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 102px;
}

/* 14/40 symmetric and weight 600, from 30/50/30/73 at 700 via 14/40/14/52 —
   the left value came down to match the right on 2026-08-25 ("make it smaller
   like it is in the right side"), at every step of the ladder below too. This is
   the copy that WINS wherever the block renders (it is enqueued as its own
   <link> after the inlined theme CSS), so the change is meaningless unless it is
   made here too. The reasoning, and the client reports behind it, are written out
   once on the same rule in assets/css/interior.css. Keep the two in step. */
.interior-hero .pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  /* No min-width — kept in step with assets/css/interior.css, where the reason is
     written out in full. Do not re-add one here either. */
  padding: 14px 40px;
  border-radius: 70px;
  background: var(--accent-dark, #E65F0E);
  color: var(--white, #ffffff);
  font-family: var(--font-heading, ui-monospace, monospace);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 600;
  /* 1.0, not 1.3 — kept in step with assets/css/interior.css. */
  line-height: 1.0;
  letter-spacing: -0.05em;
  /* Word gap + the min-width: 0 that lets the pill re-hug afterwards
     (BHL-218). Kept in step with assets/css/interior.css, where both numbers
     and the measurements are written out in full. Note this is the "no
     min-width" the comment above asks for, stated rather than left to
     `auto` — `auto` on a flex container resolves to the per-character items'
     combined minimum, which is what was pinning the pill at 696px. */
  word-spacing: -0.17em;
  min-width: 0;
}

.person-profile .inner {
  display: flex;
  justify-content: center;
  gap: 50px;
  width: 100%;
  max-width: calc(79.25rem + (var(--gutter) * 2));
  margin-inline: auto;
  padding-block: 60px;
  padding-inline: var(--gutter);
}

@media (max-width: 1399px) {
  .interior-hero .inner {
    padding-inline: clamp(var(--gutter), 7vw, 102px);
  }
}

@media (max-width: 991px) {
  .interior-hero {
    height: 300px;
  }
  
  .interior-hero .pill {
    padding: 16px 34px;
  }
  
  .person-profile .inner {
    gap: 36px;
  }
}

@media (max-width: 767px) {
  .interior-hero {
    height: 240px;
  }
  
  .interior-hero .pill {
    padding: 12px 26px;
  }
  
  .person-profile .inner {
    flex-direction: column;
    padding-block: 40px;
  }
}

@media (max-width: 575px) {
  .interior-hero {
    height: 200px;
  }

  /* Tighter than the 7vw clamp above, and symmetric. That clamp spent 50 of
     348px on side padding, which left "Understanding UTUC" no room to fit — and
     because the pill then overflowed to the RIGHT, the padding only ever read
     as space on the left.
     Keep in lockstep with assets/css/interior.css, which duplicates this rule
     and is the only copy loaded on the non-block team bio pages. THIS file is
     the one that wins wherever the block renders: it is enqueued by
     cnm-interior-hero.php as its own <link>, after the theme CSS that
     inc/enqueue.php inlines into <head>, so at equal specificity it is last. */
  .interior-hero .inner {
    padding-inline: 12px;
    /* The pill is inline-flex, so text-align centres it — margin:auto does
       nothing to an inline-level box. "Please also refer to our file — the
       Understanding UTUC button is centered" (86ak0n7ke): it was hugging the
       12px left padding with ~80px of slack on the right, which reads as the
       title shoved into a corner rather than as a left alignment.
       This is the copy that WINS — see the note above. The same declaration is
       in assets/css/interior.css and the two must move together. */
    text-align: center;
  }

  .interior-hero .pill {
    min-height: 44px;
    padding: 1px 14px;
    font-weight: 600;
    line-height: 42px;

    /* --- Why the title ran off the screen -------------------------------
     * The pill is display:inline-flex, and animations.js splits its label into
     * one <span class="char"> per character to type it. Those 18 spans are
     * therefore 18 FLEX ITEMS on a single nowrap line: the pill could not wrap
     * and could not shrink, so at 348px it needed 343px inside a 312px box and
     * simply overhung the right edge (measured 2026-08-13).
     *
     * Fluid size is the fix that keeps it on one line, which is what the shape
     * wants — per-character flex items can only break BETWEEN characters, so
     * wrapping would hyphen-less split a word mid-way.
     *
     * 7.4vw capped at 28px, against the designed 31px. Measured on the longest
     * interior title ("Understanding UTUC", 18 chars) the margin is comfortable
     * rather than exact — 47px of slack at 320px and 87px at 390px — so the
     * next label a page adds is not immediately back at the edge.
     * ------------------------------------------------------------------- */
    max-width: 100%;
    min-width: 0;
    font-size: clamp(20px, 7.4vw, 28px);

    /* Last resort only. With the sizing above it never engages for any title
       the site ships; it is here so a longer future label wraps inside the
       pill instead of disappearing off-screen again. */
    flex-wrap: wrap;
  }
}