/* Styles for images, including banners (and ensuring they appear above the page title) */

/* Use absolute positioning to place the banner at the top */
/* Use :has() to apply styles only when a banner is present */
/* stylelint-disable-next-line selector-class-pattern */
article.md-content__inner.md-typeset:has(.banner-image-wrapper) {
  position: relative;
  /* Make space for the banner: image height (250px) + desired gap (1.5em) */
  padding-top: calc(250px + 1.5em);
}

/* Style the injected buttons to appear next to each other */
.md-typeset .md-content__button {
  display: inline-block;
  margin-right: 1em; /* Space between buttons */
  margin-bottom: 1em; /* Space if they wrap to a new line */
}

/* Default order for all direct children of the flex container.
   This ensures that elements without a specific order are placed last. */
/* stylelint-disable-next-line selector-class-pattern */
article.md-content__inner.md-typeset > * {
  order: 10; /* Default high order */
}

/* The .banner-image-wrapper DIV is now the flex item we order. */
.banner-image-wrapper {
  position: absolute;
  z-index: -1; /* Ensure it is behind the content */
  top: 0;
  left: 0;
  width: 100%; /* Wrapper takes full width */
  /* Height will be determined by the .banner-image inside */
}

/* Styles for the actual <img> tag inside the wrapper */
.banner-image-wrapper .banner-image {
  width: 100%;
  height: 250px;
  object-fit: cover; /* Ensures the image covers the area, might crop */
  display: block; /* Good practice for images, removes bottom space */

  /* Gradient mask for a fade-out effect at the bottom */
  mask-image: linear-gradient(
    to bottom,
    black 30%,
    transparent 100%
  ); /* Safari/Chrome compatibility */
}