/* Override Quarto's default banner positioning (top-left, repeat) so
   the background image is centered both axes and only shown once.
   Both homepage and post banners are image banners now; this also
   adds the dark overlay needed for white text contrast and a min
   height so the hero composition is visible without aggressive
   vertical cropping. */
.quarto-title-block .quarto-title-banner {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  background-blend-mode: darken !important;
  min-height: 320px;
}

@media (min-width: 768px) {
  .quarto-title-block .quarto-title-banner {
    min-height: clamp(360px, 32vw, 480px);
  }
}

/* Banner inner: vertically center text, give it breathing room. */
.quarto-title-banner {
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

/* White text + shadow stays readable on both the blue homepage banner
   and the darkened image post banners. */
.quarto-title-banner .quarto-title h1.title,
.quarto-title-banner .quarto-title .subtitle,
.quarto-title-banner .quarto-title .description,
.quarto-title-banner .quarto-title-meta,
.quarto-title-banner .quarto-title-meta a,
.quarto-title-banner .quarto-categories .quarto-category {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.quarto-title-banner .quarto-categories .quarto-category {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}