/* OHSCORP page hero: one component for every page (site_public_hero_open() in app/public_layout.php).
   Black text panel on the left; the page photo fills the right side and fades into it, so the
   photos (800 px wide) are never stretched across the full screen. Colours from site-brand.css. */
/* --oc-hero-offset: height of the site header, which sits over the top of the hero. */
.site-campus-hero{--oc-hero-offset:148px;background:var(--oc-black);color:#fff;padding:calc(var(--oc-hero-offset) + 2px) 0 56px;position:relative;overflow:hidden;isolation:isolate}
.site-campus-hero::after{content:"";position:absolute;left:-120px;top:60px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(200,146,58,.18),rgba(200,146,58,0) 70%);pointer-events:none;z-index:0}
.site-campus-hero>.container{position:relative;z-index:2}
.site-campus-hero h1{color:#fff;font-size:clamp(30px,4.2vw,46px);line-height:1.15;max-width:860px;margin:6px 0 14px}
.site-campus-hero p{color:rgba(255,255,255,.82);font-size:18px;line-height:1.6;max-width:760px;margin:0}
.site-campus-eyebrow{display:inline-block;color:var(--oc-gold-light);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.site-campus-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;margin-bottom:18px;color:rgba(255,255,255,.6)}
.site-campus-breadcrumbs a{color:rgba(255,255,255,.85)}
.site-campus-breadcrumbs a:hover{color:var(--oc-gold-light)}

/* Photo */
.site-campus-hero-media{position:absolute;top:var(--oc-hero-offset);right:0;bottom:0;width:56%;background-color:var(--oc-black-2);background-size:cover;background-position:center;z-index:1}
.site-campus-hero-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--oc-black) 0%,rgba(16,12,40,.82) 22%,rgba(16,12,40,.35) 55%,rgba(16,12,40,.12) 100%)}
.site-campus-hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,rgba(200,146,58,0),var(--oc-gold) 40%,var(--oc-gold-light))}
.site-campus-hero.has-image{min-height:calc(var(--oc-hero-offset) + 340px);padding:calc(var(--oc-hero-offset) + 44px) 0 64px;display:flex;align-items:center}
.site-campus-hero.has-image>.container{width:100%}
.site-campus-hero.has-image h1,.site-campus-hero.has-image p,.site-campus-hero.has-image .site-campus-hero-content{max-width:620px}
.site-campus-hero.has-image h1,.site-campus-hero.has-image p{text-shadow:0 1px 12px rgba(10,8,25,.45)}

/* Homepage: taller, bigger heading */
.site-campus-hero.is-home{min-height:clamp(700px,92vh,900px);padding:calc(var(--oc-hero-offset) + 56px) 0 84px}
.site-campus-hero.is-home .site-campus-hero-media{width:60%}
.site-campus-hero.is-home h1{font-size:clamp(36px,5vw,62px);line-height:1.08;margin:10px 0 18px}
.site-campus-hero.is-home .site-campus-hero-content,.site-campus-hero.is-home h1{max-width:680px}
.site-campus-hero.is-home p{font-size:19px;max-width:600px}

/* Compact (student portal) */
.site-campus-hero.is-compact,.site-campus-hero.is-compact.has-image{min-height:calc(var(--oc-hero-offset) + 150px);padding:calc(var(--oc-hero-offset) + 28px) 0 32px}
.site-campus-hero.is-compact h1{font-size:clamp(24px,3vw,34px);margin:4px 0 0}
.site-campus-hero.is-compact::after{display:none}
.site-campus-hero.is-compact .site-campus-hero-media{width:45%}

@media (max-width:991px){
  .site-campus-hero{--oc-hero-offset:138px}
  .site-campus-hero.has-image{min-height:calc(var(--oc-hero-offset) + 260px);padding:calc(var(--oc-hero-offset) + 32px) 0 44px}
  .site-campus-hero.is-home{min-height:0;padding:calc(var(--oc-hero-offset) + 36px) 0 56px}
  /* Narrow screens: the photo sits behind the text with a heavier tint. */
  .site-campus-hero-media,.site-campus-hero.is-home .site-campus-hero-media,.site-campus-hero.is-compact .site-campus-hero-media{width:100%}
  .site-campus-hero-media::before{background:linear-gradient(180deg,rgba(16,12,40,.66) 0%,rgba(16,12,40,.82) 60%,rgba(16,12,40,.94) 100%)}
  .site-campus-hero.is-compact,.site-campus-hero.is-compact.has-image{min-height:0;padding:calc(var(--oc-hero-offset) + 22px) 0 26px}
  .site-campus-hero.has-image h1,.site-campus-hero.has-image p,.site-campus-hero.has-image .site-campus-hero-content,.site-campus-hero.is-home h1,.site-campus-hero.is-home p{max-width:none}
}
@media (max-width:640px){
  .site-campus-hero p,.site-campus-hero.is-home p{font-size:16px}
}

/* Video hero (homepage): the video fills the whole hero; its dark left side carries the text. */
.site-campus-hero.has-video .site-campus-hero-media,.site-campus-hero.is-home.has-video .site-campus-hero-media{left:0;width:100%;background-size:cover;background-position:right center}
.site-campus-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none;display:block}
/* No play button, timeline or other controls, even where a browser adds them (e.g. iOS power saving). */
.site-campus-hero-video::-webkit-media-controls,.site-campus-hero-video::-webkit-media-controls-panel,.site-campus-hero-video::-webkit-media-controls-play-button,.site-campus-hero-video::-webkit-media-controls-start-playback-button,.site-campus-hero-video::-webkit-media-controls-overlay-play-button,.site-campus-hero-video::-webkit-media-controls-timeline{display:none!important;-webkit-appearance:none;opacity:0}
.site-campus-hero.has-video .site-campus-hero-media::before{z-index:1;background:linear-gradient(90deg,rgba(16,12,40,.82) 0%,rgba(16,12,40,.55) 34%,rgba(16,12,40,0) 60%)}
.site-campus-hero.has-video .site-campus-hero-media::after{z-index:1}
@media (max-width:991px){
  .site-campus-hero-video{object-position:72% center}
  .site-campus-hero.has-video .site-campus-hero-media::before{background:linear-gradient(180deg,rgba(16,12,40,.55) 0%,rgba(16,12,40,.78) 55%,rgba(16,12,40,.92) 100%)}
}
