/* PluriNexa — per-image safe overlay placement
   The generated photography keeps people predominantly on the right-hand side.
   UI overlays and feature icons are therefore anchored to the available negative space,
   with per-card vertical tuning and smaller mobile footprints. */

/* Fresh asset names prevent stale browser/CDN image caches. */
.feature-photo.profile{background-image:url('./assets/feature-profiles-v3.webp');background-position:52% center}
.feature-photo.discovery{background-image:url('./assets/feature-discovery-v3.webp');background-position:50% center}
.feature-photo.conversation{background-image:url('./assets/feature-conversation-v3.webp');background-position:51% center}
.feature-photo.reveal{background-image:url('./assets/feature-reveal-v3.webp');background-position:50% center}
.feature-photo.privacy{background-image:url('./assets/feature-privacy-v3.webp');background-position:52% center}
.feature-photo.safety{background-image:url('./assets/feature-safety-v3.webp');background-position:50% center}
.feature-photo.ecosystem{background-image:url('./assets/feature-ecosystem-v3.webp');background-position:51% center}
.feature-cta-band{background:linear-gradient(90deg,#080b18 0,rgba(8,11,24,.86) 37%,rgba(8,11,24,.18) 64%),url('./assets/feature-cta-v3.webp') center/cover no-repeat}

/* All photography in this set carries usable negative space on the left.
   Never let the app UI default back over the people on the right. */
.feature-photo .feature-ui,
.feature-story.reverse .feature-photo .feature-ui{
  left:clamp(14px,1.5vw,22px);
  right:auto;
  width:min(210px,40%);
  max-width:40%;
  transform-origin:left bottom;
}

.feature-story.reverse .feature-icon{
  left:18px;
  right:auto;
}

/* Per-image placement: horizontal safe-zone remains left; vertical position follows composition. */
.feature-photo.profile .feature-ui{top:auto;bottom:17px;transform:scale(.96)}
.feature-photo.discovery .feature-ui{top:auto;bottom:17px;transform:scale(.94)}
.feature-photo.conversation .feature-ui{top:50%;bottom:auto;transform:translateY(-50%) scale(.94);transform-origin:left center}
.feature-photo.reveal .feature-ui{top:auto;bottom:17px;transform:scale(.93)}
.feature-photo.privacy .feature-ui{top:50%;bottom:auto;transform:translateY(-50%) scale(.91);transform-origin:left center}
.feature-photo.safety .feature-ui{top:auto;bottom:17px;transform:scale(.92)}
.feature-photo.ecosystem .feature-ui{top:50%;bottom:auto;transform:translateY(-50%) scale(.92);transform-origin:left center}

/* Tablet: retain the safe side and trim the cards slightly. */
@media(max-width:900px){
  .feature-photo{background-position:50% center}
  .feature-photo .feature-ui,
  .feature-story.reverse .feature-photo .feature-ui{
    left:14px;
    right:auto;
    width:min(188px,44%);
    max-width:44%;
    padding:9px;
  }
  .feature-story.reverse .feature-icon{left:14px;right:auto}
  .feature-photo.profile .feature-ui,
  .feature-photo.discovery .feature-ui,
  .feature-photo.reveal .feature-ui,
  .feature-photo.safety .feature-ui{bottom:14px}
  .feature-photo.conversation .feature-ui,
  .feature-photo.privacy .feature-ui,
  .feature-photo.ecosystem .feature-ui{top:52%}
}

/* Mobile: the overlay becomes deliberately smaller rather than covering faces/bodies. */
@media(max-width:620px){
  .feature-photo{min-height:280px;background-position:50% center}
  .feature-photo .feature-ui,
  .feature-story.reverse .feature-photo .feature-ui{
    left:10px;
    right:auto;
    width:min(174px,46%);
    max-width:46%;
    padding:7px;
    border-radius:9px;
    box-shadow:0 12px 34px rgba(0,0,0,.38);
    backdrop-filter:blur(10px);
  }
  .feature-story.reverse .feature-icon,
  .feature-icon{
    left:10px;
    right:auto;
    top:10px;
    width:38px;
    height:38px;
    font-size:21px;
  }
  .feature-ui-title{font-size:6.8px;margin-bottom:5px}
  .ui-row{padding:4px 5px;margin-top:4px;font-size:6.7px;gap:5px}
  .ui-row .dot{width:6px;height:6px}
  .ui-pills{gap:3px;margin-top:5px}
  .ui-pill{font-size:5.8px;padding:3px 4px}
  .ui-match{gap:5px;margin-top:4px;padding:5px}
  .ui-avatar{width:18px;height:18px}
  .ui-match b{font-size:6.7px}.ui-match span{font-size:5.8px}
  .ui-toggle{width:18px;height:10px}.ui-toggle:after{width:6px;height:6px}
  .soft-levels{gap:3px}.soft-level{font-size:6.5px;padding:5px 6px;gap:5px}
  .portal-links{gap:4px}.portal-link{padding:5px;font-size:6px}.portal-link b{margin-bottom:1px}

  .feature-photo.profile .feature-ui{bottom:10px;transform:scale(.94)}
  .feature-photo.discovery .feature-ui{bottom:10px;transform:scale(.91)}
  .feature-photo.conversation .feature-ui{top:54%;transform:translateY(-50%) scale(.90)}
  .feature-photo.reveal .feature-ui{bottom:10px;transform:scale(.90)}
  .feature-photo.privacy .feature-ui{top:54%;transform:translateY(-50%) scale(.88)}
  .feature-photo.safety .feature-ui{bottom:10px;transform:scale(.89)}
  .feature-photo.ecosystem .feature-ui{top:54%;width:min(184px,49%);max-width:49%;transform:translateY(-50%) scale(.90)}
}

@media(max-width:390px){
  .feature-photo .feature-ui,
  .feature-story.reverse .feature-photo .feature-ui{
    width:min(160px,45%);
    max-width:45%;
  }
  .feature-photo.ecosystem .feature-ui{width:min(172px,49%);max-width:49%}
}