/* =====================================================================
   REAL PHOTOGRAPHY — sourced from the Ecosabor Tropical company profile PDF.
   Loaded after styles.css and any option layer, so it owns the .ph slots:
   it swaps each placeholder for a real photo, drops the placeholder grid +
   mono caption, and keeps text legible where it overlays imagery.
   Shared by index.html and every option file (one source of truth).
   ===================================================================== */

/* --- every photo slot: cover-fit, kill the placeholder grid (::after) --- */
.hero-bg,.final-bg,.descent-img,
#seq02 .ph,#seq04 .ph,#packing .ph,
#productPanel .pp-img,#family .fam-portrait{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-bg::after,.final-bg::after,.descent-img::after,
#seq02 .ph::after,#seq04 .ph::after,#packing .ph::after,
#productPanel .pp-img::after,#family .fam-portrait::after{display:none}

/* interior cards: drop the dark placeholder gradient so the photo shows */
#seq02 .ph::before,#seq04 .ph::before,#packing .ph::before,
#productPanel .pp-img::before,#family .fam-portrait::before,
.descent-img::before{display:none}

/* hide the mono "PLATE" captions wherever a real photo now lives */
.hero-bg .ph-tag,.final-bg .ph-tag,.descent-img .ph-tag,
#seq02 .ph .ph-tag,#seq04 .ph .ph-tag,#packing .ph .ph-tag,
#productPanel .pp-img .ph-tag,#family .fam-portrait .ph-tag{display:none}

/* --- the photos --- */
.hero-bg{background-image:url(../assets/img/hero.jpg);background-position:center 42%}
/* hero background video (hero.jpg stays as poster/fallback) */
.hero-bg .ph-video,.final-bg .ph-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero-bg::before,.final-bg::before{z-index:1}   /* legibility wash sits above the video */
.final-bg{background-image:url(../assets/img/final.jpg);background-position:center 48%}
.descent-img{background-image:url(../assets/img/about.jpg)}
#seq02 .ph{background-image:url(../assets/img/mango.jpg);overflow:hidden}
/* real mango-orchard background video (mango.jpg stays as the poster/fallback) */
#seq02 .ph .ph-video,#seq04 .ph .ph-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
#seq04 .ph{background-image:url(../assets/img/avocado.jpg)}
#packing .ph{background-image:url(../assets/img/packing.jpg)}

/* team portraits — real photos held back for now: show a neutral person
   silhouette placeholder instead (swap back in team-*.jpg when ready). */
#family .fam-portrait{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='37' r='16.5' fill='%238b988d' fill-opacity='0.5'/%3E%3Cpath d='M21 90c0-16 13-27 29-27s29 11 29 27' fill='%238b988d' fill-opacity='0.5'/%3E%3C/svg%3E")
      center 56% / 46% auto no-repeat,
    linear-gradient(180deg, rgba(127,140,124,0.10), rgba(10,15,12,0.18));
  background-color:var(--ink-850);
}

/* product panel: base surface; the per-crop image is set in products.js */
#productPanel .pp-img{background-color:var(--ink-850)}

/* products the PDF only had in low resolution (okra, coconut, papaya) keep the
   elegant placeholder instead of a pixelated photo — products.js flags them. */
#productPanel.pp-noimg .pp-img::before{display:block}
#productPanel.pp-noimg .pp-img::after{display:block}
#productPanel.pp-noimg .pp-img .ph-tag{display:flex}

/* --- hero & final: legibility wash over the photo + light text in any theme --- */
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(183deg,rgba(7,11,9,.34) 0%,rgba(7,11,9,.10) 38%,rgba(7,11,9,.74) 100%);
}
.final-bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,11,9,.82) 0%,rgba(7,11,9,.30) 55%,rgba(7,11,9,.58) 100%);
}
.hero-content .display{
  color:#f6f7f4;-webkit-text-fill-color:#f6f7f4;
  font-size:clamp(38px,6.2vw,92px);   /* calmer than the old 148px max */
  max-width:18ch;letter-spacing:-0.035em;
}
.hero-content .lede{color:#dde3db}
.hero-content .eyebrow{color:var(--accent-bright)}
.hero .hero-foot{color:#ced5cd}
.final .inner .display{color:#f6f7f4;-webkit-text-fill-color:#f6f7f4}
.final .inner .lede{color:#e3e8e1}
.final .inner .eyebrow{color:var(--accent-bright)}