/* Bay types + the four bay deep dives: the Fund 6 hero Rick asked for on the 2026-09-27 call (99:53).
   Left-aligned navy gradient, a verified park photo on the right, H1 and subtext, two calls to action at most,
   subpage height rather than full screen. Same composition as the Melissa template hero (facility-premium.css).
   Since the 2026-10-02 call this is the supporting-page hero standard (requirements C4 and C5): every former
   "postcard" hero (a framed photo with the orange X behind it) is rebuilt as this hero by
   scripts/supporting_hero.py (`.uf-bh-support`), and it can carry one or two short tags (`.uf-bh-tags`).
   Rule C2 (Rick, 01:19:29): no colour filter over a photo. The gradient covers the copy side and stops, so the
   rest of the photo is full colour; on phones the photo is a band above the copy with a gradient only at its
   lower edge. Unlayered and loaded after site-consistency.css on these pages only. Sharp corners throughout. */

body.uf-site .uf-bh{--bh-deep:#000c13;--bh-navy:#001523;--bh-white:#fffdfc;--bh-orange:var(--uf-orange,#ff7d01);--bh-ease:cubic-bezier(.22,1,.36,1);
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(460px,calc(100svh - 320px),600px);
  margin:0;padding:0;background:var(--bh-deep);color:var(--bh-white)}
body.uf-site .uf-bh-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
body.uf-site .uf-bh-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 55%}
body.uf-site .uf-bh::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,21,35,.98) 0%,rgba(0,21,35,.94) 36%,rgba(0,21,35,.78) 52%,rgba(0,21,35,.4) 66%,rgba(0,21,35,0) 80%),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 22%)}
body.uf-site .uf-bh-x{position:absolute;z-index:-1;right:clamp(28px,12vw,200px);top:50%;height:min(66%,400px);width:auto;aspect-ratio:1;transform:translateY(-50%);overflow:visible;pointer-events:none}
body.uf-site .uf-bh-x path{fill:none;stroke:rgba(255,255,255,.78);stroke-width:.3;stroke-linecap:square}
body.uf-site .uf-bh-inner{position:relative;z-index:1;width:100%;padding-block:clamp(56px,7vh,84px)}
body.uf-site .uf-bh-copy{max-width:790px}
body.uf-site .uf-bh-kicker{display:flex;align-items:center;gap:14px;margin:0 0 20px;font:400 13px/1.2 var(--uf-display);letter-spacing:.18em;text-transform:uppercase;color:var(--bh-orange)}
body.uf-site .uf-bh-kicker::before{content:"";flex:0 0 40px;height:2px;background:currentColor}
body.uf-site .uf-bh h1{margin:0 0 22px;max-width:none;overflow-wrap:normal;word-break:normal;hyphens:none;font:400 clamp(36px,4vw,58px)/1.02 var(--uf-display);letter-spacing:0;text-transform:uppercase;color:var(--bh-white);text-wrap:balance}
body.uf-site .uf-bh h1 .o{color:var(--bh-orange)}
body.uf-site .uf-bh-index h1 .o{display:block}
body.uf-site .uf-bh-sub{margin:0;max-width:34em;font:400 18px/1.55 var(--uf-body);color:rgba(255,255,255,.86);text-wrap:pretty}
body.uf-site .uf-bh-facts{margin:16px 0 0;font:700 15px/1.45 var(--uf-body);color:var(--bh-white)}
/* One or two short tags (C3: "you can do one or two tags, not five"). */
body.uf-site .uf-bh-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* UF-19 (2026-10-03 audit): was 11px, under the 12px floor. */
body.uf-site .uf-bh-tags>span{display:inline-block;padding:7px 11px;border:1px solid rgba(255,253,252,.42);background:rgba(0,12,19,.35);font:400 12px/1.25 var(--uf-display);letter-spacing:.12em;text-transform:uppercase;color:var(--bh-white)}
/* Supporting pages keep the copy column inside the gradient side of the photo. */
body.uf-site .uf-bh-support .uf-bh-copy{max-width:min(700px,54vw)}
body.uf-site .uf-bh-support h1{font-size:clamp(34px,3.6vw,52px)}
body.uf-site .uf-bh-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* UF-19 (2026-10-03 audit): was 11px, under the 12px floor. */
body.uf-site .uf-bh-cap{position:absolute;right:max(var(--uf-gutter,24px),calc((100vw - 1240px)/2));bottom:18px;z-index:1;margin:0;padding:7px 11px;background:rgba(0,12,19,.72);font:400 12px/1.3 var(--uf-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* UF-18 (2026-10-03 audit): font, case, height, radius, the wipe-fill and focus/active motion are the
   shared button system now (theme.css); this file keeps only the bay-hero family's min-width (hero CTAs
   read better with a floor) and its own fill colors. */
body.uf-site .uf-bh-btn{min-width:190px;background:var(--bh-orange);border-color:var(--bh-orange);color:var(--bh-deep)}
body.uf-site .uf-bh-btn::before{background:var(--bh-white)}
body.uf-site .uf-bh-btn-light{background:var(--bh-white);border-color:var(--bh-white);color:var(--bh-deep)}
body.uf-site .uf-bh-btn-light::before{background:var(--bh-orange)}

/* in-page targets from the hero CTAs land with a little air above them */
body.uf-site :is(#tgrid,#avail){scroll-margin-top:32px}

@media (max-width:1100px){body.uf-site .uf-bh-x{display:none}}
/* Wide screens: the copy column stays in the centred page grid, so the gradient follows the grid instead of the
   viewport and still stops just past the copy (the rest of the photo is full colour). */
@media (min-width:1600px){
  body.uf-site .uf-bh::before{background:linear-gradient(100deg,rgba(0,21,35,.98) 0,rgba(0,21,35,.94) calc(50vw - 200px),rgba(0,21,35,.78) calc(50vw + 20px),rgba(0,21,35,.4) calc(50vw + 240px),rgba(0,21,35,0) calc(50vw + 480px)),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 22%)}
}
/* Tablets: the copy column keeps to the gradient side, and the gradient reaches a little further, so no line of
   copy sits on the full-colour part of the photo. */
@media (min-width:761px) and (max-width:1100px){
  body.uf-site .uf-bh-copy,body.uf-site .uf-bh-support .uf-bh-copy{max-width:min(560px,60%)}
  body.uf-site .uf-bh::before{background:linear-gradient(100deg,rgba(0,21,35,.97) 0%,rgba(0,21,35,.93) 46%,rgba(0,21,35,.7) 62%,rgba(0,21,35,.22) 76%,rgba(0,21,35,0) 86%),linear-gradient(0deg,rgba(0,12,19,.5) 0%,rgba(0,12,19,0) 22%)}
}
@media (max-width:760px){
  /* Phones: the photo is a full-colour band above the copy; the only gradient sits on its lower edge,
     where it hands over to the navy behind the copy (C2, C4). */
  body.uf-site .uf-bh{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:var(--bh-deep)}
  body.uf-site .uf-bh::before{content:none}
  body.uf-site .uf-bh-media{position:relative;inset:auto;z-index:0;flex:none;height:clamp(220px,62vw,340px)}
  body.uf-site .uf-bh-media::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(0deg,var(--bh-deep) 0%,rgba(0,12,19,0) 100%);pointer-events:none}
  body.uf-site .uf-bh-inner{padding-block:14px 36px}
  body.uf-site .uf-bh h1{font-size:clamp(25px,7.6vw,40px);line-height:1.06}
  /* UF-19 (2026-10-03 audit): was 11px, under the 12px floor. */
  body.uf-site .uf-bh-kicker{gap:10px;font-size:12px;letter-spacing:.12em;margin-bottom:16px}
  body.uf-site .uf-bh-kicker::before{flex-basis:24px}
  body.uf-site .uf-bh-sub{font-size:16px}
  body.uf-site .uf-bh-facts{font-size:14px}
  body.uf-site .uf-bh-btns{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
  body.uf-site .uf-bh-btn{min-width:0;min-height:52px;padding:0 16px;font-size:12px}
  /* a long label (McKinney's "See what's available at Melissa") wraps on two centred lines instead of being clipped
     (2026-10-02 integration, found by tests/browser.cjs at 390px) */
  body.uf-site .uf-bh-btn{white-space:normal;text-align:center;line-height:1.3;padding-block:10px}
  /* UF-19 (2026-10-03 audit): both were under the 12px floor (9px and 10px). */
  body.uf-site .uf-bh-cap{top:14px;bottom:auto;right:var(--uf-gutter,20px);left:auto;max-width:calc(100% - 2 * var(--uf-gutter,20px));padding:6px 9px;font-size:12px;letter-spacing:.1em}
  body.uf-site .uf-bh-tags{margin-top:18px}
  body.uf-site .uf-bh-support .uf-bh-copy{max-width:none}
  body.uf-site .uf-bh-support h1{font-size:clamp(25px,7.6vw,40px)}
  body.uf-site .uf-bh-tags>span{font-size:12px;padding:6px 9px}
}
@media (prefers-reduced-motion:reduce){
  body.uf-site .uf-bh-btn,body.uf-site .uf-bh-btn::before{transition:none}
}

/* ---------- uf-1004 mobile pass (Sun Oct 4, 2026): the first screen on a phone ----------
   Rick, Oct 2 call (12:17:20 and 12:30:35 PM PT; PLAYBOOK M6 and M7): the core message and the primary call to
   action belong on the first screen. At 375x812 the county and market pages put the first button at about
   y=880 to 920, under the fold, because the photo band, the two tags and the stacked buttons came first.
   On phones only: a shorter photo band, and the tags after the buttons, so the primary button comes first.
   Nothing is removed and the desktop and tablet heroes are unchanged. */
@media (max-width:760px){
  body.uf-site .uf-bh-media{height:clamp(150px,42vw,250px)}
  body.uf-site .uf-bh-copy{display:flex;flex-direction:column}
  /* the buttons stay stacked full width: side by side, Norfolk County's "Massachusetts overview" was clipped
     in a half-width button at 375. The primary button is first, so it is the one on the first screen. */
  body.uf-site .uf-bh-btns{order:4;margin-top:20px}
  body.uf-site .uf-bh-tags{order:5;margin-top:16px}
}
/* Rick, C09-51 (2026-10-08): on a phone the next section must show on the first screen. A shorter photo band, a
   tighter copy block, and the two calls to action side by side. Each label wraps inside its half-width button
   (white-space:normal above), so a long one such as "Massachusetts overview" is not clipped. */
@media (max-width:760px){
  body.uf-site .uf-bh-media{height:clamp(110px,30vw,150px)}
  body.uf-site .uf-bh-inner{padding-block:8px 22px}
  body.uf-site .uf-bh-kicker{margin-bottom:10px}
  body.uf-site .uf-bh h1{margin-bottom:14px}
  body.uf-site .uf-bh-sub{font-size:15px;line-height:1.5}
  body.uf-site .uf-bh-btns{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-top:16px}
  /* Eurostile Extended Black (2026-10-15): MASSACHUSETTS fits half a 390px row at 12px with no tracking. */
  body.uf-site .uf-bh-btn{padding-inline:6px;letter-spacing:0}
  body.uf-site .uf-bh-tags{margin-top:12px}
}