/* Preserve the top and complete silhouette of campaign subjects on wide screens.
   Keep source artwork unchanged; let the image ratio set the available space. */
.hero .hero-photo img,.hero>.hero-img{object-position:64% top}
.hero>.hero-bottom{margin-top:auto}
.collection-banner>.banner-media img,.public-collection-banner .public-banner-media img{object-fit:contain;object-position:right center}
.series-card>.banner-media img,
.category-hero:has(img[src*="ambient-macro-banner"]) .banner-media img{object-fit:contain;object-position:right center}

/* FWD uses portrait editorial artwork inside a wide banner. Fit that artwork
   to its media area; containing the entire portrait creates a narrow strip. */
.series-card:has(img[src*="fwd-macro"]) .banner-media img,
.category-hero:has(img[src*="fwd-macro"]) .banner-media img{
  object-fit:cover;object-position:center 48%;
}

/* Full-width product photographs retain their own aspect ratios. */
.truefwd-portrait-banner img,.viofwd-screen-banner img,.mono-ambient-banner img,
.clarite-water-banner img,.clearfwd-road-banner img{
  display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;
}
.visitor-hero.product-banner-wide .hero-image{height:auto;min-height:0;flex-shrink:0}
.visitor-hero.product-banner-wide .hero-image img{position:static;height:auto;object-fit:contain}
.visitor-hero:not(.product-banner-wide) .hero-image img{object-position:center top}
.product-intro>.campaign-photo img{object-position:center top}
.eh-home .eh-hero-photo{object-position:right top}

@media(min-width:701px){
  /* Pull back the FWD crop slightly while keeping a full-height image panel. */
  .series-card:has(img[src*="fwd-macro"]) .banner-media img,
  .category-hero:has(img[src*="fwd-macro"]) .banner-media img{
    left:44%;width:56%;
    /* Blend the photo's left edge into the copy surface without resizing it. */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.16) 5%,rgba(0,0,0,.5) 11%,rgba(0,0,0,.84) 17%,#000 24%);
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.16) 5%,rgba(0,0,0,.5) 11%,rgba(0,0,0,.84) 17%,#000 24%);
  }
  .hero{min-height:max(710px,56.28vw)}
  .hero .hero-photo img,.hero>.hero-img{object-position:center top}
  .category-hero.collection-banner,.family-banner.collection-banner,
  .public-collection-banner{min-height:max(540px,33.334vw)}
  .eh-home .eh-hero{height:auto;min-height:max(620px,57.143vw);max-height:none}
}

@media(max-width:700px){
  /* Text grows independently above the image; it cannot cover the lens rim. */
  .category-hero.collection-banner,.family-banner.collection-banner{
    display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:34px 0 0;gap:18px;
  }
  .collection-banner>div:not(.banner-media),.collection-banner>.family-copy{
    width:100%;max-width:none;padding:0 6%;
  }
  .collection-banner>.banner-media{
    position:relative!important;inset:auto;width:100%;height:min(62.5vw,440px);flex-shrink:0;z-index:0;
  }
  .collection-banner>.banner-media img{
    inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;
  }
  .collection-banner:after{display:none}
  .public-collection-banner .public-banner-media{height:min(62.5vw,440px)}
  .public-collection-banner .public-banner-media img{object-fit:cover;object-position:right top}
  .truefwd-portrait-banner,.viofwd-screen-banner,.mono-ambient-banner,
  .clarite-water-banner,.clearfwd-road-banner{height:auto}

  /* Stack FWD copy and its original portrait on phones, so growing text never
     overlaps the lens and the photograph keeps its natural proportions. */
  .series-card:has(img[src*="fwd-macro"]),
  .category-hero:has(img[src*="fwd-macro"]){
    display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0;
  }
  .series-card:has(img[src*="fwd-macro"])>div:not(.banner-media),
  .category-hero:has(img[src*="fwd-macro"])>div:not(.banner-media){
    order:0;width:100%;max-width:none;padding:32px 6%;
  }
  .series-card:has(img[src*="fwd-macro"])>.banner-media,
  .category-hero:has(img[src*="fwd-macro"])>.banner-media{
    position:relative!important;order:1;inset:auto;z-index:0;width:100%;min-height:0;aspect-ratio:auto!important;
  }
  .series-card:has(img[src*="fwd-macro"]) .banner-media img,
  .category-hero:has(img[src*="fwd-macro"]) .banner-media img{
    position:static;inset:auto;display:block;width:100%;height:auto;object-fit:contain;
  }
  .series-card:has(img[src*="fwd-macro"]):after,
  .category-hero:has(img[src*="fwd-macro"]):after{display:none}
}