/* Banner Block Responsive Styles */

.banner-block {
  width: 100%;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* 
   * Extract image URL and height from inline CSS variables 
   * provided by paragraph--banner-block.html.twig 
   * Fallback values are set in case variables are missing.
   */
  background-image: var(--banner-bg-desktop, none);
  min-height: var(--banner-height-desktop, auto);
  display: flex;
  align-items: center;
}

.banner-block__inner {
  position: relative;
  z-index: 10;
  width: 100%;
}

/* Tablet Breakpoint (Fallback to Desktop) */
@media (max-width: 1280px) {
  .banner-block {
    background-image: var(--banner-bg-tablet, var(--banner-bg-desktop, none));
    min-height: var(--banner-height-tablet, var(--banner-height-desktop, auto));
  }
}

/* Mobile Breakpoint (Fallback to Tablet, then Desktop) */
@media (max-width: 768px) {
  .banner-block {
    background-image: var(--banner-bg-mobile, var(--banner-bg-tablet, var(--banner-bg-desktop, none)));
    min-height: var(--banner-height-mobile, var(--banner-height-tablet, var(--banner-height-desktop, auto)));
  }
}