/*_______________________________________*/
/* Hero (shared banner)                    */
/*_______________________________________*/

/* Full-width image filling half the viewport, sitting above the page content.
   Shared by single projects, Pages and Stories/News. On Pages/Stories it spans
   to the very top, with the logo, nav and page title overlaid (see the
   .has-hero-overlay rules below). */

.hero {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
  background-color: var(--f-purple);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback when no image is set — a solid brand-purple band. */
.hero--empty {
  background-color: var(--f-purple);
}

/* ─── Overlaid title ──────────────────────────────────── */

/* Scrim so the pale logo (top) and title (bottom) stay legible over any photo. */
.hero--titled::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* background-image: linear-gradient(
    to bottom,
    rgba(76, 10, 35, 0.55) 0%,
    rgba(76, 10, 35, 0) 28%,
    rgba(76, 10, 35, 0) 55%,
    rgba(76, 10, 35, 0.65) 100%
  ); */
}

.hero__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(1rem, 1vw, 2.5rem);
  color: var(--f-pale);
}

.hero__title {
  margin: 0;
  color: var(--f-pale);
  font-size: clamp(2rem, 6vw, var(--size-h1));
  line-height: var(--lh-heading);
  text-shadow: 0 1px 12px rgba(76, 10, 35, 0.45);
}

.hero__meta {
  margin: 0.5rem 0 0;
  color: var(--f-pale);
  font-style: italic;
  text-shadow: 0 1px 8px rgba(76, 10, 35, 0.45);
}

/* ─── Logo & nav overlaid on the hero (Pages / Stories) ─── */

/* Lift the logo out of flow so the hero starts at the very top of the page. */
.has-hero-overlay .site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* The brand logo is dark purple — invert it to pale so it reads over the image. */
.has-hero-overlay .site-header__logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}