/* hero-page — shared hero media stack, page-title hero, blog post band
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* =============================== GROUP 5 · HEROES ======================== */

/* All heroes share one media stack: greyscale footage, a brand multiply, a
   scrim. What differs is how much page they spend. */
.hero, .hero-media, .full-page-hero { position: relative; overflow: hidden; background: var(--page-title-bg); }
.hero-background, .full-page-hero__background { position: absolute; inset: 0; opacity: var(--page-title-media-opacity); }
.hero-background > img, .hero-background > video,
.full-page-hero__image > img, .full-page-hero__image > video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45); }
.full-page-hero__image { position: absolute; inset: 0; }
.hero__tint, .full-page-hero__tint { position: absolute; inset: 0; background: var(--hero-tint); mix-blend-mode: color; opacity: .9; }
.overlay, .full-page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(var(--tint-rgb), .94) 0%, rgba(var(--tint-rgb), .62) 100%); }
.full-page-hero__overlay { background: radial-gradient(120% 90% at 12% 12%, rgba(var(--tint-rgb), .3) 0%, rgba(var(--tint-rgb), .94) 78%); }

.hero .content, .hero-media .content { position: relative; padding-block: 2.8rem 2.6rem; max-width: 62ch; }
/* Page-title band (parts/page/hero.php uses .row/.columns, not .content) — give
   it breathing space so the title doesn't hug the header. */
.hero-page { padding-block: 3.4rem 3rem; }
/* padding-inline-start clears an overhanging site logo (--logo-clear in
   tokens.css, 0 for every brand but UCNL). Every page-title band is
   `.hero.hero-page > .row`, so this one rule covers page, blog, course, event
   and 404 titles: the h1 starts to the RIGHT of the logo instead of under it. */
.hero-page > .row {
  position: relative; z-index: 1;
  padding-inline-start: calc(var(--page-gutter) + var(--logo-clear));
}
/* Three page-title heroes wrap their .row in the slider scaffold
   (.hero-slider-container > .hero-slide-inner > .hero-slide) rather than hanging
   it off the section: course-archive-hero, course-tax-hero and
   waterfront-menus/hero. The child combinator above misses all three, so the
   course archive, course category and menu titles ran under the UCNL mark.
   --logo-clear ONLY here, no --page-gutter: these rows have never carried the
   gutter, and adding it would move them 46px on the other five brands. */
.hero-page > .hero-slider-container .row { padding-inline-start: var(--logo-clear); }

/* The three pagebuilder heroes page.php lifts into the hero slot. All three are
   top-of-page by construction (page.php renders the first hero layout it finds
   above <main> and skips every hero layout in the loop), so they sit in the
   drop zone exactly like a page-title band.
   search_hero is deliberately absent: .hero-content-wrapper carries
   padding-top:15rem = 240px, well past the 140px --logo-overhang, so its title
   already clears the mark and 170px of inset would only misalign it. */
.full-page-hero > .row { padding-inline-start: var(--logo-clear); }
.hero-media > .content { padding-inline-start: var(--logo-clear); }
.hero-page-reduced { padding-block: 2.4rem 2.1rem; }
.hero-page-minimal { padding-block: 1.8rem 1.5rem; }
/* .hero-media is on every one of these, not just .hero.
   The media stack (line 9) and the content box (line 18) already pair the two,
   but every COLOUR rule below used to scope to .hero alone. hero_unit emits
   .hero-media, so its heading and body copy inherited dark text onto the dark
   hero band: navy on navy, on all six brands, unreadable.
   This is the same fault as the .hero-page-content one noted below, found a
   second time in a second selector. If a rule here sets a colour for text on the
   hero band, it needs both class names. */
.hero h1, .hero .title-font,
.hero-media h1, .hero-media .title-font { color: var(--page-title-fg); }
.hero .eyebrow,
.hero-media .eyebrow { color: var(--page-title-eyebrow); }
.hero h1 em, .hero .title-font em,
.hero-media h1 em, .hero-media .title-font em { color: var(--page-title-em); }
/* Both the design-export lead class AND what parts/page/hero.php actually emits
   (.hero-page-content > p, the page synopsis). Only .d-lead was styled, so the
   synopsis inherited dark body text onto the dark hero band (invisible on ucdon).
   Both names, one rule.
   .hero-media .content covers hero_unit, whose `content` field is raw WYSIWYG
   dropped straight into .content, so it can hold p, ul, li and strong. */
.hero .d-lead,
.hero .hero-page-content,
.hero .hero-page-content p,
.hero-media .content,
.hero-media .content p,
.hero-media .content li { color: var(--page-title-muted); }
/* Prose links on the band. Colour alone does not clear contrast here, so they
   carry the heading colour and keep their underline. */
.hero-media .content a { color: var(--page-title-fg); }

/* WITH background media, the .overlay guarantees a dark ground whatever the
   brand's band colour is, so the text has to be on-dark rather than band-coloured.
   Those are the same thing on five brands. On dncg they are opposites:
   dncg-child sets --page-title-bg to a light grey and --page-title-fg to dark
   text, but inherits the near-black --tint-rgb the overlay is built from, so
   band-coloured text over media was dark on dark. full_page_hero never hit this
   because it hardcodes var(--white) and ignores the band tokens entirely. */
.hero-media--has-media h1,
.hero-media--has-media .title-font { color: var(--text-on-dark); }
.hero-media--has-media h1 em,
.hero-media--has-media .title-font em { color: var(--accent-on-dark); }
.hero-media--has-media .eyebrow { color: var(--accent-on-dark); }
.hero-media--has-media .content,
.hero-media--has-media .content p,
.hero-media--has-media .content li { color: rgba(var(--on-dark-rgb), .88); }
.hero-media--has-media .content a { color: var(--text-on-dark); }

/* Blog post band. No blog vocabulary exists in the toolkit — see notes.md. */
.hero-post .content { max-width: 70ch; }
.hero-post h1 { font-size: 3rem; line-height: 1.05; letter-spacing: var(--display-track); }
.post-category { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .35rem .9rem; border-radius: var(--radius-pill); }
/* .hero-post-date is what parts/blog/single-hero.php actually emits; only
   .post-meta was ever styled, so the published date inherited the page text colour
   onto the dark hero band and measured 1.02:1. Both names, one rule. */
.post-meta,
.hero-post-date { font-size: var(--fs-min); color: var(--page-title-muted); font-variant-numeric: tabular-nums; }

/* Hero breadcrumb — context nav rendered inside a .hero-page dark ground
   (employer sub-system apply/enquiry/subject pages). Was previously carried by
   per-plugin inline CSS at 0.9rem; re-homed here, tokenised, at the 1.1rem floor. */
.hero-breadcrumb { margin-bottom: 1rem; font-size: var(--fs-min); color: var(--page-title-muted); }
.hero-breadcrumb a { color: var(--page-title-muted); text-decoration: none; transition: color .2s ease; }
.hero-breadcrumb a:hover { color: var(--page-title-fg); text-decoration: underline; }
.hero-breadcrumb span { color: var(--page-title-muted); }
.hero-page-minimal .hero-breadcrumb { margin-bottom: .5rem; }
.post-header-meta { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* .post-byline (__avatar / __name / __role) REMOVED, deliberately.
   design-export/components-heroes.html designs a post byline — avatar, author
   name, role and an "All posts" link. No template ever built it, so this was
   dead CSS, but it was a ready-made styled slot for a staff name on the front
   end, which the author-disclosure rule in functions.php now forbids outright.
   Leaving it would have made re-introducing the leak a one-line markup change
   that already looked designed and intentional.
   The prototype component is superseded, not lost: it is still in the design
   export if the policy is ever revisited. */
.post-share { margin-left: auto; display: flex; gap: .625rem; align-items: center; }
.post-share > span { font-size: var(--fs-min); color: var(--page-title-muted); }
.post-share a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--page-title-border); display: flex; align-items: center; justify-content: center; color: var(--page-title-fg); text-decoration: none; font-weight: 700; }

/* Standard hero with CTAs + video controls (Stage 4: heroes consolidated
   here; the full_page_hero / hero_unit / carousel blocks inherit this). */
.full-page-hero { min-height: 520px; display: flex; background: var(--surface-dark-alt); }
.full-page-hero__content { position: relative; padding-block: 3rem; display: flex; flex-direction: column; justify-content: center; max-width: 74ch; }
.full-page-hero--center .full-page-hero__content { align-items: center; text-align: center; margin-inline: auto; }
.full-page-hero__badge { align-self: flex-start; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .4rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1.2rem; }
.full-page-hero__title { color: var(--white); font-size: 4.25rem; line-height: .98; margin-bottom: 1.1rem; }
.full-page-hero__title em { color: var(--accent-on-dark); }
.full-page-hero__intro { font-size: 1.4375rem; line-height: 1.55; color: rgba(var(--on-dark-rgb), .88); margin-bottom: 1.6rem; }
.full-page-hero__details { display: flex; flex-wrap: wrap; margin-bottom: 1.8rem; font-variant-numeric: tabular-nums; }
.full-page-hero__detail { padding-right: 1.6rem; margin-right: 1.6rem; border-right: 1px solid rgba(var(--on-dark-rgb), .28); }
.full-page-hero__detail:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.full-page-hero__detail strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; color: var(--accent-on-dark); line-height: 1.1; }
.full-page-hero__detail span { display: block; font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .8); }
.full-page-hero__ctas, .carousel-cta { display: flex; gap: .875rem; flex-wrap: wrap; }
.carousel-cta-left { justify-content: flex-start; }

.controls { position: absolute; right: 24px; bottom: 24px; }
.controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(var(--on-dark-rgb), .5); background: rgba(var(--tint-rgb), .45); color: var(--white); font-size: var(--fs-min); }

@media (max-width: 64em) {
  .full-page-hero__title { font-size: 3rem; }
  .hero-post h1 { font-size: 2.25rem; }
}