/* Build 300 — site-wide desktop hero image plane.
   Approved from the Build 299 Home prototype. On desktop the hero image occupies
   the right-hand 70% of the hero, leaving a clean dark copy area on the left.
   The fade spans the join so the transition remains smooth. Tablet/mobile retain
   the existing responsive treatment. Hero Manager measures the real media plane,
   so its resizable crop frame automatically uses this 70% desktop aspect ratio. */

@media (min-width: 1001px) {
  html body #main-content > .jt-standard-hero .jt-standard-hero-media,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
  }

  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }
}
/* Build 305 — Wedding Advice parity fix.
   public-polish-258 still gave this legacy resource hero its own full-bleed
   background image and hid the real media element. That sat underneath the new
   70% hero system, so Wedding Advice could not visually match the shared fade.
   Remove the legacy background and force the managed media plane back on. */
html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero {
  background: #050505 !important;
  background-image: none !important;
}
html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero .resource-hero-media.jt-standard-hero-media {
  display: block !important;
}



/* Build 306 — Wedding Advice uses the same DOM layering as the working heroes.
   Keep its media as a direct hero child so the shared hero fade sits above the
   image and below the copy instead of being trapped behind the old resource grid. */
@media (min-width: 1001px) {
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero > .resource-hero-media.jt-standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero > .resource-hero-grid.jt-standard-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }
}



/* Build 309 — exact crop first paint.
   Hero Manager's X/Y/zoom values describe the exact draggable source rectangle.
   The public runtime now applies that same proportional crop before revealing the
   proxy image. This avoids both the Build 308 approximate object-fit/transform
   interpretation and the visible load-then-jump that Build 307 suffered from. */
html body #main-content > .jt-standard-hero .jt-standard-hero-media img[data-jt-hero-proxy],
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img[data-jt-hero-proxy] {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  opacity: 0 !important;
  transition: none !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media img[data-jt-hero-proxy][data-jt-crop-ready="1"],
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img[data-jt-hero-proxy][data-jt-crop-ready="1"] {
  opacity: 1 !important;
}


/* Build 311 — lighter portrait-mobile hero fade.
   On phones the image already fills the hero behind the copy, so the previous
   desktop-strength overlay hid too much of the photograph. Keep enough contrast
   behind the left-aligned text, but reveal substantially more of the image.
   Landscape mobile/tablet and desktop are intentionally unchanged. */
@media (max-width: 640px) and (orientation: portrait) {
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.16) 74%,
        rgba(3,3,3,.05) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.06) 0%,
        rgba(0,0,0,.02) 56%,
        rgba(0,0,0,.30) 100%) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.16) 74%,
        rgba(3,3,3,.05) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.06) 0%,
        rgba(0,0,0,.02) 56%,
        rgba(0,0,0,.30) 100%) !important;
  }
}

/* Build 328 — Credentials uses the exact same desktop fade as the other
   standard landing heroes. The selector is deliberately more specific than
   the legacy Credentials stylesheet so that older resource-page rules cannot
   replace the shared fade when they are loaded later. */
@media (min-width: 1001px) {
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }

  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero .jt-standard-hero-media {
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
  }
}

/* Build 329 — one desktop hero fade rule for the whole public site.
   The image plane begins at 30vw. Keep the overlay fully black beyond that join,
   then reveal the photograph progressively across a longer gradient. This removes
   the visible vertical image edge and makes the same fade treatment authoritative
   for Home, Weddings, Occasions, Listen, THOV, Collaborations, Gigs, Reviews,
   Gallery, About, Contact, Booking, Wedding Advice, Suppliers, Setup and Credentials. */
@media (min-width: 1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 34%,
        rgba(0,0,0,.995) 38%,
        rgba(0,0,0,.965) 43%,
        rgba(0,0,0,.87) 49%,
        rgba(0,0,0,.68) 56%,
        rgba(0,0,0,.46) 63%,
        rgba(0,0,0,.27) 70%,
        rgba(0,0,0,.13) 79%,
        rgba(0,0,0,.055) 90%,
        rgba(0,0,0,.02) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.14) 0%,
        rgba(0,0,0,.05) 58%,
        rgba(0,0,0,.30) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 331 — shared hero image vibrancy.
   The source images are unchanged. Keep the strong left fade for copy contrast,
   but stop dimming the whole photograph: restore brightness/saturation and let
   the far-right image plane read much closer to the original image. */
html {
  --jt-public-hero-image-filter: brightness(1.10) saturate(1.12) contrast(1.03);
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media > img,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture > img,
html body #main-content > .jt-standard-hero .jt-standard-hero-media figure > img,
html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image img,
html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main img,
html body.collaborations-page #main-content > .jt-standard-hero .jt-standard-hero-media .collab-hero-photo-grid img,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img {
  filter: var(--jt-public-hero-image-filter) !important;
}

@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 34%,
        rgba(0,0,0,.995) 38%,
        rgba(0,0,0,.965) 43%,
        rgba(0,0,0,.87) 49%,
        rgba(0,0,0,.68) 56%,
        rgba(0,0,0,.46) 63%,
        rgba(0,0,0,.27) 70%,
        rgba(0,0,0,.11) 79%,
        rgba(0,0,0,.035) 90%,
        rgba(0,0,0,.008) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 58%,
        rgba(0,0,0,.18) 100%);
  }
}

@media (min-width:641px) and (max-width:1000px) {
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.94) 26%,rgba(3,3,3,.75) 48%,rgba(3,3,3,.30) 72%,rgba(3,3,3,.06) 100%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.20)) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.94) 26%,rgba(3,3,3,.75) 48%,rgba(3,3,3,.30) 72%,rgba(3,3,3,.06) 100%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.20)) !important;
  }
}

@media (max-width:640px) and (orientation:portrait) {
  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.14) 74%,
        rgba(3,3,3,.03) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.01) 56%,
        rgba(0,0,0,.20) 100%) !important;
  }
}

/* Build 342 - authoritative desktop fade geometry.
   The photograph is now left clean across the right-hand side of the hero.
   Moving from right to left, the fade does not begin until the 70% point; it
   then tightens quickly and is fully black by the 30% image/copy boundary. */
@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 30%,
        rgba(0,0,0,1) 36%,
        rgba(0,0,0,.97) 43%,
        rgba(0,0,0,.86) 49%,
        rgba(0,0,0,.60) 55%,
        rgba(0,0,0,.28) 61%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.01) 70%,
        rgba(0,0,0,0) 72%,
        rgba(0,0,0,0) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 58%,
        rgba(0,0,0,.18) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 343 - corrected desktop fade timing.
   The visible darkening now starts at exactly 70% of the full hero width and
   completes much more quickly. The image remains clean from 70%-100%, then
   transitions through a compact 20% band and is fully black by 50%, well before
   the 30% media/copy join. This is the authoritative desktop rule for every
   managed hero variant. */
@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,.985) 52%,
        rgba(0,0,0,.90) 54%,
        rgba(0,0,0,.72) 56%,
        rgba(0,0,0,.50) 58%,
        rgba(0,0,0,.30) 60%,
        rgba(0,0,0,.15) 62%,
        rgba(0,0,0,.07) 64%,
        rgba(0,0,0,.025) 66%,
        rgba(0,0,0,.008) 68%,
        rgba(0,0,0,0) 70%,
        rgba(0,0,0,0) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.01) 58%,
        rgba(0,0,0,.14) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 344 - 70% of the IMAGE PLANE stays clear.
   Desktop hero media occupies the right-hand 70% of the full hero (30%-100%).
   The previous rule incorrectly treated 70% as a full-hero coordinate, which
   darkened far too much of the photograph. This rule fades only across the
   LEFTMOST 30% of that 70%-wide image plane: full black at the 30% copy/image
   join, fully clear by 51% of the full hero. Therefore the remaining 49% of the
   full hero = exactly 70% of the image plane, untouched by the horizontal fade. */
@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 30%,
        rgba(0,0,0,.99) 32%,
        rgba(0,0,0,.90) 34%,
        rgba(0,0,0,.72) 37%,
        rgba(0,0,0,.48) 40%,
        rgba(0,0,0,.27) 43%,
        rgba(0,0,0,.12) 46%,
        rgba(0,0,0,.045) 48%,
        rgba(0,0,0,0) 51%,
        rgba(0,0,0,0) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 427 - authoritative phone/portrait hero fade.
   The desktop hero already fades the managed image into the black copy plane.
   Phones use a full-bleed image, so give the portrait treatment its own visible
   side-and-bottom fade instead of leaving the photograph visually unblended.
   This rule covers standard managed heroes, Recommended Suppliers and Wedding
   Advice articles. It deliberately does not alter desktop/tablet geometry. */
@media (max-width:640px) {
  html {
    --jt-public-hero-mobile-fade:
      linear-gradient(90deg,
        rgba(3,3,3,.94) 0%,
        rgba(3,3,3,.88) 20%,
        rgba(3,3,3,.72) 40%,
        rgba(3,3,3,.48) 60%,
        rgba(3,3,3,.24) 78%,
        rgba(3,3,3,.08) 91%,
        rgba(3,3,3,0) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.04) 44%,
        rgba(0,0,0,.24) 70%,
        rgba(0,0,0,.68) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-mobile-fade) !important;
  }
}