/* ============================================================
   Shared hero / pagehead system — Breng het in Beeld
   Used by: over.html (.hero) and every other page's video header
   (.pagehead — Werk/portfolio, Blog, Contact, Registraties,
   Opdrachtfilms, Podcasts, Freelance, Advies).

   Goal: one set of rules that controls hero/video height, the
   vertical placement of the title/intro block, and the shared
   content width, so all non-index pages read as one system.
   Over (.hero) is the visual reference for height + vertical
   placement; its own two-column portrait+copy composition stays
   in that page's local <style> (grid-template-columns etc.) —
   this file only owns the outer box (position/video/gradient/
   min-height/padding) and the shared content container width.

   Do not duplicate these rules back into a page's local <style>;
   page-specific typography (h1/p font sizes, max-widths) stays
   local, per-page video object-position stays local.
   ============================================================ */

:root{
  --hero-pad-top: 150px;     /* clearance below the fixed nav + breathing room, matches Over */
  --hero-pad-bottom: 56px;   /* matches Over */
  --hero-min-h: 60vh;        /* visible hero height floor, tuned to Over at the 1906x872 reference viewport */
  --hero-content-w: 1040px;  /* shared content column width for .pagehead-inner */
}

.hero, .pagehead{
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  min-height:max(420px, var(--hero-min-h));
  padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);
}
.hero video, .pagehead video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(0.4) saturate(1.05);
}
.hero::before, .pagehead::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(11,11,11,0.88) 100%);
}

/* shared content column for the plain (non-two-column) pageheads */
.pagehead-inner{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--hero-content-w);
  margin:0 auto;
  padding:0 32px;
}

/* .pagehead-inner--hug: on desktop, shrink the content box to the width of its
   widest line (the heading, via its own max-width) and center THAT box, instead
   of centering a fixed-width box with the ragged-right text sitting flush-left
   inside it. Text stays left-aligned/ragged-right — only the whole composition's
   horizontal position moves. Opt-in per page via this modifier class so pages
   not in scope (e.g. contact.html) keep the fixed-width centered box. Desktop
   only — mobile keeps the full-width block so wrapping uses all the room it has. */
@media (min-width:861px){
  .pagehead-inner.pagehead-inner--hug{
    width:fit-content;
    max-width:min(var(--hero-content-w), calc(100% - 64px));
  }
}

@media (max-width:860px){
  :root{ --hero-pad-top:128px; --hero-min-h:54vh; }
}

@media (max-width:560px){
  :root{ --hero-pad-top:112px; --hero-pad-bottom:40px; }
  .hero, .pagehead{ min-height:0; } /* let content set the height, no forced floor on mobile */
}