/* -----------------------------------------------------------------------
   Site hero — crawl_page::hero_view().

   Everything here is static. The ONLY per-request value is the photograph,
   which rides as a style attribute on the element because it changes on every
   page load; it is not a reason to emit a <style> block (KB #80).

   Linked from the home branch of logic/crawl_pages/crawl_pages_logic.php and
   from logic/domains/domains_logic.php on the routes that use the hero. It
   used to be built, styled and echoed inside system/cms/home.php, which is a
   thin wrapper and had no business constructing a view.
   ----------------------------------------------------------------------- */

/* LIGHT scrim, not dark. camwebdir-logo.png is fully OPAQUE (alpha 0 across the whole
   1536x1024 frame — it has a solid white background, not a transparency), so a dark
   treatment can't work: flipping the logo to white paints a white block, and leaving it
   dark makes it invisible. A white veil keeps the existing logo and dark type exactly as
   they are and simply lets the photograph through behind them.
   Two knobs: --cwd-hero-veil (0 = full photo, 1 = white) and --cwd-hero-tint.
   If a transparent-background logo ever exists, a dark treatment becomes available:
   set --cwd-hero-tint to 17,19,26, raise the veil to ~0.6, and flip the type to #fff. */
.cwd-hero { --cwd-hero-veil:0.68; --cwd-hero-tint:255,255,255; position:relative; padding:4.5em 1.5em 3em; background-size:cover; background-position:center 38%; }

/* ONE veil, concentrated BEHIND THE TEXT — a flat wash strong enough to read against bleaches
   the whole image. The radial keeps the centre column clean for the logo, wordmark and search
   box; everything else is the photograph at full strength, ending on a clean edge.
   There is deliberately NO vertical fade: it only ever muddied the bottom of the picture, and
   the divider that made one look necessary is gone. */
.cwd-hero:before { content:''; position:absolute; inset:0; background:
	radial-gradient(ellipse 40% 78% at 50% 38%, rgba(var(--cwd-hero-tint),var(--cwd-hero-veil)) 0%, rgba(var(--cwd-hero-tint),calc(var(--cwd-hero-veil) - 0.22)) 50%, rgba(var(--cwd-hero-tint),0.06) 82%); }
.cwd-hero > * { position:relative; }
.cwd-hero .ui.narrow.container { margin-top:0 !important; }
.cwd-hero .ui.header img { mix-blend-mode:multiply; }

/* The wordmark is a div, not an h1 (see hero_view() for why). Semantic UI sizes
   headers by TAG as well as by class — h1.ui.header is 2rem, a bare
   div.ui.header only 1.28em — so dropping the tag shrank it by a third. It is
   pinned here rather than with .huge, which is 2em and drifts with whatever
   font-size it inherits.
   It also SCALES: the hero is full-bleed, so a fixed 2rem that looked right at
   1280 was lost in the middle of a 2000px window. The clamp keeps the old size
   as the floor on a laptop and lets it grow with the band it sits in. */
.cwd-hero .ui.header { font-size:clamp(2rem, 3.4vw, 4rem); }
/* Logo and strapline in em, so the three scale as one lockup rather than the
   type growing away from a fixed-size mark. */
.cwd-hero .ui.header img { width:1.4em; height:auto; margin-bottom:0.35em; }
.cwd-hero .ui.header .sub.header { font-size:0.5em; }

/* Legibility now comes from the TYPE, not from bleaching the photograph: a soft white halo
   behind the wordmark and strapline lets the veil come down without the dark text getting
   lost in busy stonework. */
.cwd-hero .ui.header .content { text-shadow:0 0 18px rgba(255,255,255,0.95), 0 0 6px rgba(255,255,255,0.9); }
.cwd-hero .ui.header .sub.header { text-shadow:0 0 14px rgba(255,255,255,0.95), 0 0 5px rgba(255,255,255,0.9); }
.cwd-hero .ui.form.basic.segment { background:transparent !important; box-shadow:none !important; border:0 !important; }
.cwd-hero .ui.action.input input { background:rgba(255,255,255,0.92); border-color:rgba(17,19,26,0.15); }
@media (max-width:767px) { .cwd-hero { padding:2.5em 1em 2em; } }