/* Outer wrapper for max width */
.ab-banner-wrap { max-width: 1140px; margin: 0 auto; }

/* Base */
.ab-banner { position: relative; overflow: hidden; font-family: inherit;
  transition: none !important; animation: none !important;
}

/* Media wrapper reserves height via aspect ratio */
.ab-banner__media {
  position: relative;
  aspect-ratio: 21 / 9;                 /* desktop ratio */
  min-height: clamp(280px, 35vw, 520px);/* fallback if aspect-ratio ignored */
  line-height: 0;
}

/* Image fills the wrapper */
.ab-banner__media img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}

/* Looser left overlay across the image */
.ab-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--ab-overlay, rgba(0,0,0,0.45)) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.00) 85%);
  z-index: 1;
  pointer-events: none;
}

/* ===== Desktop text panel (upper-left, only as tall as its content) ===== */
.ab-banner__text--desktop{
  position: absolute;
  width: 240px;
  max-width: 240px; 	         /* adjust panel width if needed */
  padding: 1.25rem 1.25rem 1.1rem;
  display: inline-block;                 /* keeps height to content */
  background: rgba(0,0,0,.60);        /* #000000 with slight transparency */
  color: #fff;                           /* default text color */
  z-index: 2;                            /* above overlay */
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Force white text & links inside the panel (beats theme styles) */
.ab-banner__text--desktop .ab-banner__pretitle,
.ab-banner__text--desktop .ab-banner__title,
.ab-banner__text--desktop .ab-banner__subtitle,
.ab-banner__text--desktop .ab-banner__cta,
.ab-banner__text--desktop .ab-banner__cta a,
.ab-banner__text--desktop .ab-banner__cta-link {
  color: #fff !important;
}

/* Typography & spacing */
.ab-banner__pretitle { line-height:1.18 !important; color: #fff !important; letter-spacing:.02em !important; margin:0 0 .6rem; font-weight:700; font-size: clamp(1.25rem, 3vw + .5rem, 2rem); }
		    /* line-height:1.12 !important; color: #fff !important; letter-spacing:.02em; margin:0 0 .3rem; font-weight:800; */
.ab-banner__title    { line-height:1.18 !important; color: #fff !important; letter-spacing:.02em !important; margin:0 0 .6rem; font-weight:700; font-size: clamp(1.25rem, 3vw + .5rem, 2rem); }
.ab-banner__subtitle { line-height:1.4; margin:0 0 .8rem; color: #fff !important;  }
.ab-banner__cta      { margin:0; transform: none !important; color: #fff !important;  text-decoration: underline; font-weight: 800; }
.ab-banner__cta-link { text-decoration: underline; font-weight:800; transform: none !important; color: #fff !important; text-decoration: underline; font-weight: 800; }

/* ===== Stacked block for tablet/mobile ===== */
.ab-banner__text--stacked {
  display: none;
  background: var(--ab-stacked, rgb(0 0 0 / 0.6));
  color: var(--ab-text, #fff !important;);
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.ab-banner__text--stacked .ab-banner__cta a,
.ab-banner__text--stacked .ab-banner__cta-link { color:#fff !important; text-decoration: underline;  text-align: center;}

/* Mobile crop + layout switch + 5px gap under image */
@media (max-width: 768px) {
  .ab-banner__media { aspect-ratio: 16 / 9; }
  .ab-banner__text--desktop { display: none; }
  .ab-banner__overlay { display: none; }
  .ab-banner__text--stacked { display: block; margin-top: 5px; }
}