/* ============================================================
   TGA Hero — ribbon as MASK (plugin CSS)
   Move your old WP “Additional CSS” hero block here to avoid rule fights.
   ============================================================ */

.tga-hero{
  position: relative;
  width: 100%;
  margin: 0 0 32px 0;
  overflow: hidden;

  /* Default frame height; you can override per-page via:
     .tga-hero{ --tga-hero-h: 420px; } */
  height: var(--tga-hero-h, clamp(240px, 45vh, 460px));

  /* Overscan defaults; JS/PHP set these */
  --tga-hero-bleed-x: 0px;
  --tga-hero-bleed-y: 0px;

  background: transparent;
}

.tga-hero img{
  position: absolute;
  display: block;

  /* Overscan behind the mask */
  top:  calc(-1 * var(--tga-hero-bleed-y));
  left: calc(-1 * var(--tga-hero-bleed-x));
  width:  calc(100% + var(--tga-hero-bleed-x) + var(--tga-hero-bleed-x));
  height: calc(100% + var(--tga-hero-bleed-y) + var(--tga-hero-bleed-y));

  max-width: none;
  max-height: none;

  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;

  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform;
}