/* Diet hero responsive fixes.
 * Keep the existing woman image unchanged. Only remove visual framing effects,
 * add a separate decorative layer behind her, and control position/size by breakpoint.
 */

/* Decorative layer: uses the uploaded 1024x1024 crop behind the woman only.
 * Keep a soft mask at the outer edge so the layer blends naturally into the hero.
 */
main#top > section:first-child .container.relative > .grid > div:nth-child(2)::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 50%;
  top: 52%;
  width: 108%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background-image: url("/images/diet-hero-decor-1024.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 54% 52%, #000 58%, rgba(0,0,0,0.72) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 74% at 54% 52%, #000 58%, rgba(0,0,0,0.72) 74%, transparent 100%);
}

/* Base hero model treatment: absolutely no rectangular visual treatment.
 * The external SVG filter only removes near-transparent edge contamination
 * from the existing WebP; it does not replace or redraw the woman image.
 */
img[src$="/images/diet-hero-model.webp"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: url("/diet-alpha-clean.svg#diet-alpha-clean") !important;
  -webkit-filter: url("/diet-alpha-clean.svg#diet-alpha-clean") !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Mobile portrait */
@media (max-width: 767px) and (orientation: portrait) {
  main#top > section:first-child .container.relative > .grid > div:nth-child(2)::before {
    top: 56%;
    width: 104%;
    opacity: 0.34;
    -webkit-mask-image: radial-gradient(ellipse 78% 74% at 52% 54%, #000 54%, rgba(0,0,0,0.68) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 78% 74% at 52% 54%, #000 54%, rgba(0,0,0,0.68) 72%, transparent 100%);
  }

  img[src$="/images/diet-hero-model.webp"] {
    width: auto !important;
    height: 440px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* Small landscape phones */
@media (max-width: 767px) and (orientation: landscape) {
  main#top > section:first-child .container.relative > .grid > div:nth-child(2)::before {
    width: 98%;
    opacity: 0.30;
  }

  img[src$="/images/diet-hero-model.webp"] {
    width: auto !important;
    height: 420px !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* Tablet landscape (1024–1366px): lift the model and pull it toward the copy. */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  main#top > section:first-child .container.relative > .grid > div:nth-child(2)::before {
    left: 47%;
    top: 49%;
    width: 116%;
    opacity: 0.40;
  }

  img[src$="/images/diet-hero-model.webp"] {
    height: 700px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    transform: translate(-22px, -42px) !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

/* Desktop: reduce excessive copy-to-image spacing. */
@media (min-width: 1367px) {
  main#top > section:first-child .container.relative > .grid > div:nth-child(2)::before {
    left: 43%;
    top: 52%;
    width: 118%;
    opacity: 0.42;
  }

  img[src$="/images/diet-hero-model.webp"] {
    height: 690px !important;
    width: auto !important;
    max-height: none !important;
    max-width: none !important;
    transform: translateX(-92px) !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}