/* Desktop heroes fit the viewport; mobile heroes use spacious natural flow. */
.hero--immersive {
 --hero-nav-height:92px;
 height:calc(100svh - var(--hero-nav-height)); min-height:0; max-height:none;
 display:grid; grid-template-rows:minmax(0,1fr) auto; align-items:center;
 padding:clamp(18px,4svh,52px) var(--content-gutter) clamp(16px,2.5svh,30px);
 row-gap:clamp(16px,3svh,30px);
}
.hero--immersive .hero-content { align-self:center; min-width:0; }
.hero--immersive h1 { font-size:clamp(40px,min(7.3vw,11.8svh),112px); }
.hero--immersive .eyebrow { margin-bottom:clamp(12px,2.8svh,28px); }
.hero--immersive .hero-description { margin-top:clamp(14px,2.8svh,26px); }
.hero--immersive .hero-actions { margin-top:clamp(14px,2.8svh,28px); }
.hero--immersive .hero-bottom { position:relative; inset:auto; width:100%; min-width:0; z-index:2; }
.hero--immersive .hero-art { top:0; right:-1%; width:54%; height:calc(100% - 76px); }
.hero--immersive .orb-labels { bottom:3%; left:8%; right:8%; }
.hero--editorial {
 --hero-nav-height:calc(var(--scene-top,106px) - 12px);
 height:calc(100svh - var(--hero-nav-height)); min-height:0; max-height:none;
 display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
 padding-block:clamp(20px,5svh,70px) clamp(16px,3svh,32px);
 row-gap:clamp(16px,3.5svh,36px);
}
.hero--editorial h1 { font-size:clamp(40px,min(7.6vw,11.8svh),122px); margin:0; }
.hero--editorial .hero-details { margin:0; align-self:start; }
.hero--editorial .hero-actions { margin-top:clamp(16px,3svh,30px); }
.hero--editorial .hero-foot { margin:0; padding:0; }
@media (max-width:1000px) { .hero--immersive { --hero-nav-height:82px; } }
@media (min-width:761px) and (max-height:500px) {
 .hero--immersive,.hero--editorial { padding-block:12px; row-gap:12px; }
 .hero--immersive { grid-template-rows:minmax(0,1fr) auto; }
 .hero--immersive .hero-content { display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; max-width:none; }
 .hero--immersive .eyebrow { grid-column:1/-1; margin:0; }
 .hero--immersive h1 { grid-column:1; grid-row:2/4; font-size:clamp(34px,5vw,52px); align-self:center; }
 .hero--immersive .hero-description { grid-column:2; grid-row:2; margin:0; font-size:16px; line-height:1.5; }
 .hero--immersive .hero-actions { grid-column:2; grid-row:3; margin:0; gap:8px 16px; flex-wrap:wrap; }
 .hero--immersive .button { min-height:44px; padding-block:10px; white-space:nowrap; }
 .hero--immersive .hero-art { position:absolute; grid-row:auto; padding:0; top:0; width:45%; height:calc(100% - 76px); right:auto; left:0; opacity:.25; }
 .hero--immersive .orb-labels { bottom:4px; }
 .hero--immersive .orb-label { font-size:9px; }
 .hero--immersive .hero-bottom { grid-row:2; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
 .hero--immersive .hero-bottom>a { grid-column:2; grid-row:1; }
 .hero--immersive .hero-bottom .local-time { grid-column:3; grid-row:1; }
 .hero--editorial { grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr) auto; column-gap:28px; }
 .hero--editorial .hero-kicker,.hero--editorial .hero-foot { grid-column:1/-1; }
 .hero--editorial h1 { font-size:clamp(34px,5vw,52px); align-self:center; }
 .hero--editorial .hero-details { align-self:center; }
 .hero--editorial .hero-details>p { font-size:16px; line-height:1.5; }
 .hero--editorial .hero-actions { margin-top:12px; gap:8px 16px; }
}

@media (min-width:761px) and (max-height:500px) {
 .hero--editorial .button { min-height:44px; padding:8px 12px; font-size:14px; line-height:1.5; gap:12px; }
 .hero--editorial .text-action { font-size:14px; gap:12px; }
 .hero--editorial .hero-actions { column-gap:12px; }
}
/* On phones, restore generous vertical flow and center the content beneath the art. */
@media (max-width:760px) {
 .hero--immersive {
  --hero-nav-height:76px;
  display:flex; flex-direction:column; align-items:stretch;
  height:auto; min-height:calc(100svh - var(--hero-nav-height)); max-height:none;
  padding:60px var(--content-gutter) 24px; gap:0;
 }
 .hero--immersive .hero-content { display:block; align-self:auto; width:100%; }
 .hero--immersive h1 { font-size:clamp(38px,8.5vw,64px); line-height:1.12; }
 .hero--immersive .eyebrow { font-size:var(--type-label); margin-bottom:26px; }
 .hero--immersive .hero-description { margin-top:25px; font-size:var(--type-copy); line-height:var(--copy-leading); }
 .hero--immersive .hero-actions { margin-top:27px; gap:20px; flex-wrap:wrap; }
 .hero--immersive .button { min-height:52px; padding:15px 17px; }
 .hero--immersive .hero-art {
  position:relative; inset:auto; grid-row:auto; align-self:center;
  width:100%; height:380px; min-height:0; padding-bottom:75px;
  margin-top:28px; transform:none; opacity:1;
 }
 .hero--immersive .orb-labels { left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
 .hero--immersive .orb-label { flex:0 1 auto; max-width:100%; font-size:11px; line-height:1.6; }
 .hero--immersive .orb-label-top { border-left:0; padding-left:0; }
 .hero--immersive .hero-bottom { position:relative; inset:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:24px; align-items:center; text-align:center; }
 .hero--immersive .hero-bottom>a { grid-column:1; grid-row:1; justify-self:center; }
 .hero--immersive .hero-bottom .local-time { grid-column:1; grid-row:2; justify-self:center; margin:0; }
 .hero--editorial {
  height:auto; min-height:calc(100svh - var(--hero-nav-height)); max-height:none;
  display:flex; flex-direction:column; padding-block:66px 25px; gap:0;
 }
 .hero--editorial h1 { font-size:clamp(35px,8.8vw,55px); margin-top:38px; }
 .hero--editorial .hero-details { margin-top:28px; }
 .hero--editorial .hero-details>p { font-size:17px; line-height:1.75; }
 .hero--editorial .hero-actions { margin-top:28px; gap:16px 24px; }
 .hero--editorial .button { min-height:52px; padding:13px 20px; }
 .hero--editorial .hero-foot { margin-top:auto; padding-top:48px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
 .hero--editorial .hero-foot>span { width:100%; max-width:none; }
 .hero--editorial .hero-foot>a { align-self:center; justify-content:center; }
}