/* ============================================================
   Apex Promo Banner Block
   Layout: [large left] | [right-top]
                        | [right-bottom]
   ============================================================ */

.apex-promo-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.apex-promo-banner__right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.apex-promo-banner__panel {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.apex-promo-banner__panel--left {
  min-height: 400px;
}

.apex-promo-banner__panel--right-top,
.apex-promo-banner__panel--right-bottom {
  min-height: 196px;
}

.apex-promo-banner__panel picture,
.apex-promo-banner__panel img,
.apex-promo-banner__img {
  display: block;
  width: 100%;
  height: 100%;
}

.apex-promo-banner__panel img,
.apex-promo-banner__img {
  object-fit: cover;
  transition: transform 0.35s ease;
}

.apex-promo-banner__panel:hover .apex-promo-banner__img,
.apex-promo-banner__panel:hover img {
  transform: scale(1.03);
}

/* Mobile image variant: hidden by default everywhere. Panels that haven't
   configured a mobile image never render one (Twig's {% if %} guard), so
   this rule never has an effect on them — the desktop image keeps showing
   at every screen size, exactly as before this feature existed.
   Selector is scoped with .apex-promo-banner__panel (not just the bare
   class) so its specificity (0,2,0) beats the earlier
   ".apex-promo-banner__panel img { display: block }" rule (0,1,1) — a bare
   ".apex-promo-banner__img--mobile { display: none }" loses that fight and
   the mobile image never actually hides. */
.apex-promo-banner__panel .apex-promo-banner__img--mobile {
  display: none;
}

.apex-promo-banner__cta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-block;
  padding: 8px 18px;
  background: #e91e8c;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease;
  z-index: 2;
}

.apex-promo-banner__cta:hover {
  background: #c4167a;
  color: #ffffff;
}

@media (max-width: 640px) {
  .apex-promo-banner {
    grid-template-columns: 1fr;
  }

  .apex-promo-banner__right {
    grid-template-rows: auto;
  }

  .apex-promo-banner__panel--left,
  .apex-promo-banner__panel--right-top,
  .apex-promo-banner__panel--right-bottom {
    min-height: 220px;
  }
}

/* Mobile image swap — deliberately a separate breakpoint (767px) from the
   layout-stacking media query above (640px). Only swap to the mobile image
   when one is actually configured for this panel (:has() scopes it to that
   panel only) — panels without a mobile image keep showing their desktop
   image, unaffected.

   Desktop images render inside a <picture> wrapper (from the
   responsive_image theme). Hiding just the inner <img>.apex-promo-banner__img--desktop
   isn't enough — the <picture> tag itself still matches
   ".apex-promo-banner__panel picture { display:block; width:100%; height:100% }"
   from earlier in this file, so it keeps reserving a full-size empty box
   and pushes the mobile image (which follows it in the DOM) out of view.
   Hide the whole <picture> wrapper instead. Also still hide the <img>
   directly, in case a panel's desktop image has no responsive style
   picked (plain <img>, no <picture> wrapper at all in that case). */
@media (max-width: 767px) {
  .apex-promo-banner__panel:has(.apex-promo-banner__img--mobile) picture:has(.apex-promo-banner__img--desktop) {
    display: none;
  }

  .apex-promo-banner__panel:has(.apex-promo-banner__img--mobile) .apex-promo-banner__img--desktop {
    display: none;
  }

  .apex-promo-banner__panel:has(.apex-promo-banner__img--mobile) .apex-promo-banner__img--mobile {
    display: block;
  }
}