/* ==========================================================================
   Inner Banner — Elementor widget additions
   inner-banner.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it. Breakpoints are the original ones.
   ========================================================================== */

/* ---- Per-instance SVG ids ------------------------------------------------
   Each widget prints its own mask / gradient ids and passes the two the
   stylesheet uses in as custom properties, so several banners can share a
   page without duplicate ids. */
.inner-banner[data-ib-uid] {
  --ib-image-mask: var(--ib-mask-wide);
}

@media (max-width: 900px) {
  .inner-banner[data-ib-uid] {
    --ib-image-mask: var(--ib-mask-stacked);
  }
}

.inner-banner[data-ib-uid] .inner-banner__tooth--glass use {
  fill: var(--ib-glass-fill);
}

/* ---- Elementor's global image reset ---------------------------------------
   Elementor's frontend.css sets `.elementor img { height: auto; max-width: 100% }`
   (specificity 0,1,1), which beats the original `.inner-banner__image` rule:
   an uploaded photo with another aspect ratio would no longer fill (cover)
   the organic shape. Restore the original sizing; add the focal point. */
.inner-banner .inner-banner__image {
  height: 100%;
  max-width: none;
  object-position: var(--ib-image-position, 50% 50%);
}

/* Optional tablet / mobile image (<picture>) must not add a box of its own. */
.inner-banner picture {
  display: contents;
}