/* =====================================================================
   MyvanCMS — inner-page hero
   ---------------------------------------------------------------------
   Replaces .page-banner on About, Contact, Properties, Blog, single-post and
   generic pages, so every page opens the way the home page and the project
   detail page already do: a dark photo under a scrim, a brand eyebrow with a
   rule, a large uppercase headline and a light breadcrumb.

   WHY IT IS A NEW FILE
     .page-banner lives in pages.css, which is a byte-identical copy of the
     original static site and must not be edited. This overrides it instead.
     Removing the <link> in layouts/public.php restores the old light-blue
     banner exactly.

   IT ALSO REMOVES A REMOTE DEPENDENCY
     .page-banner's city silhouette is hotlinked from data.themeim.com:
       background:#D5E5F7 url("https://data.themeim.com/.../banner_breadcrum.png")
     Every inner page therefore fetched an image from a third party's server on
     every load. The hero below uses MyVan's own locally-held photos.

   SIZING
     Deliberately shorter than the home hero (900px): this is a page header, not
     a landing panel. 420px is enough to feel composed without pushing the
     actual content below the fold.
   ===================================================================== */

:root{
  --ph-h:420px;
  --ph-navy:#171B2A;
  /* Slightly stronger than the home hero's scrim: these headings are shorter,
     so there is less mass of white type to carry contrast on its own. */
  --ph-scrim-left:rgba(23,27,42,.84);
  --ph-scrim-mid:rgba(23,27,42,.68);
  --ph-scrim-right:rgba(23,27,42,.46);
}

.page-hero{
  position:relative;
  min-height:var(--ph-h);
  display:flex;
  align-items:flex-end;          /* content sits low, above the fold line */
  overflow:hidden;
  background:var(--ph-navy);     /* the empty state when no photo is set */
}

.page-hero__image{
  position:absolute;inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.page-hero__image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--ph-scrim-left) 0%,
    var(--ph-scrim-mid) 55%,
    var(--ph-scrim-right) 100%);
}

/* Top padding clears the transparent overlay header; bottom padding is the
   breathing room under the breadcrumb. */
.page-hero__inner{position:relative;z-index:2;width:100%;padding:150px 0 54px}

@media (min-width:1200px){
  /* Matches the home hero, where the rotated contact rail occupies the left
     edge. Keeping the same indent means headings line up between pages. */
  .page-hero__inner .pl-container{padding-left:72px}
}

/* --- eyebrow: label + rule, identical to the home hero ------------- */
.page-hero__eyebrow{
  display:flex;align-items:center;gap:16px;
  /* WHITE label, BRAND rule.
     The home hero can afford a maroon label because it sits over a bright
     sky. These heroes sit over darker photography, where #6B1216 on a navy
     scrim is far too low-contrast to read. Keeping the rule in the brand
     colour preserves the accent without sacrificing legibility. */
  color:#fff;
  font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 14px;
}
.page-hero__eyebrow::after{
  content:"";height:2px;width:88px;background:var(--pl-brand);opacity:.9;
}

/* --- headline ------------------------------------------------------ */
.page-hero h1{
  color:#fff;
  font-size:56px;line-height:64px;font-weight:700;
  text-transform:uppercase;text-align:left;
  margin:0 0 8px;
  max-width:22ch;
}
/*
   The accent word uses the brand hue LIGHTENED, not var(--pl-brand).
   #6B1216 is a deep maroon: against a dark navy scrim it reads as almost-black
   and the accent disappears, which is the opposite of an accent. This keeps the
   same hue and raises the lightness until it carries well over dark photography
   (comfortably past 4.5:1 on the scrimmed background), so the word still reads
   as MyVan's red rather than as a generic pink.
   The home hero keeps the deep maroon because its accent sits over a bright sky.
*/
.page-hero h1 .page-hero__accent{color:#E08A8F}

.page-hero__lead{
  color:rgba(255,255,255,.80);
  font-size:1.0625rem;line-height:1.8;
  max-width:60ch;
  margin:10px 0 0;
}

/* --- breadcrumb ---------------------------------------------------
   .crumb in pages.css is centre-justified dark-on-light. Here it is
   left-aligned light-on-dark. Only the properties that must change are
   overridden, so the component's spacing and separators stay as designed.
   ------------------------------------------------------------------ */
.page-hero .crumb{
  justify-content:flex-start;
  margin-top:16px;
}
.page-hero .crumb,
.page-hero .crumb a,
.page-hero .crumb .current{color:rgba(255,255,255,.78)}
.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb .sep{color:rgba(255,255,255,.42)}
.page-hero .crumb .current{color:#fff;font-weight:600}

/* --- responsive ---------------------------------------------------- */
@media (max-width:1199.98px){
  :root{--ph-h:360px}
  .page-hero h1{font-size:44px;line-height:52px}
  .page-hero__inner{padding:140px 0 44px}
}

@media (max-width:991.98px){
  :root{--ph-h:300px}
  .page-hero h1{font-size:34px;line-height:42px;max-width:100%}
  .page-hero__inner{padding:130px 0 36px}
  /* An even scrim reads better once the layout is narrow enough that text
     spans the full width. */
  .page-hero__image::after{background:rgba(23,27,42,.74)}
}

@media (max-width:575.98px){
  :root{--ph-h:250px}
  .page-hero h1{font-size:27px;line-height:34px}
  .page-hero__lead{font-size:.9375rem}
  .page-hero__inner{padding:120px 0 28px}
}