/* REVIVE+ member portraits
   Promotional concept images are credited to IVE / Starship Entertainment.
   Source mapping: official IVE "BANGERS" concept-photo posts for REVIVE+. */

/*
   Homepage card fit strategy:
   - the element background supplies a soft edge-to-edge backdrop
   - ::before renders the complete source image with contain, preventing crop/zoom
   - ::after preserves the existing text-legibility gradient
*/
.member-card .member-art {
  background-color: #090710;
  background-image:
    linear-gradient(rgba(5, 4, 10, .54), rgba(5, 4, 10, .54)),
    var(--member-portrait);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(.96) contrast(1.03);
  isolation: isolate;
}

.member-card .member-art::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  transform: none;
  border-radius: 0;
  background: var(--member-portrait) center / contain no-repeat;
  box-shadow: none;
  z-index: 1;
}

.member-card .member-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 4, 10, .02) 38%, rgba(5, 4, 10, .22) 62%, rgba(5, 4, 10, .94) 100%),
    linear-gradient(120deg, rgba(159, 108, 255, .08), transparent 45%, rgba(255, 120, 200, .08));
  pointer-events: none;
  z-index: 2;
}

/* Card order follows the shared members array: Gaeul, Yujin, Rei, Wonyoung, Liz, Leeseo. */
.member-grid .member-card:nth-child(1) .member-art { --member-portrait: url("https://i.imgur.com/WuNitxa.jpg"); }
.member-grid .member-card:nth-child(2) .member-art { --member-portrait: url("https://i.imgur.com/bx3bimk.jpg"); }
.member-grid .member-card:nth-child(3) .member-art { --member-portrait: url("https://i.imgur.com/4UCnYQC.jpg"); }
.member-grid .member-card:nth-child(4) .member-art { --member-portrait: url("https://i.imgur.com/QJEOoxJ.jpg"); }
.member-grid .member-card:nth-child(5) .member-art { --member-portrait: url("https://i.imgur.com/X9GMWnT.jpg"); }
.member-grid .member-card:nth-child(6) .member-art { --member-portrait: url("https://i.imgur.com/dCKfure.jpg"); }

/*
   Members dossier strategy:
   - use a neutral cosmic panel background instead of a second copy of the portrait
   - render exactly one full portrait with contain
   - apply only a light bottom fade for the STAR label
   The added selector specificity prevents late-loaded pages.css from restoring the
   original abstract silhouette.
*/
html[data-page="members"] .dossier-panel .dossier-visual {
  background-color: #08060e;
  background-image:
    radial-gradient(circle at 50% 20%, rgba(159, 108, 255, .18), transparent 42%),
    linear-gradient(180deg, #0b0812 0%, #06040a 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

html[data-page="members"] .dossier-panel .dossier-visual::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  transform: none;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--dossier-portrait);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  z-index: 0;
}

html[data-page="members"] .dossier-panel .dossier-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(5, 4, 10, .68) 100%);
  background-size: auto;
  pointer-events: none;
  z-index: 1;
}

html[data-page="members"] .dossier-panel .dossier-visual > span {
  position: relative;
  z-index: 2;
}

html[data-page="members"] .dossier-panel[data-active-member="0"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/WuNitxa.jpg"); }
html[data-page="members"] .dossier-panel[data-active-member="1"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/bx3bimk.jpg"); }
html[data-page="members"] .dossier-panel[data-active-member="2"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/4UCnYQC.jpg"); }
html[data-page="members"] .dossier-panel[data-active-member="3"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/QJEOoxJ.jpg"); }
html[data-page="members"] .dossier-panel[data-active-member="4"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/X9GMWnT.jpg"); }
html[data-page="members"] .dossier-panel[data-active-member="5"] .dossier-visual { --dossier-portrait: url("https://i.imgur.com/dCKfure.jpg"); }

.source-link { margin-left: 16px; }
.photo-credit {
  margin: 18px 4px 0;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.photo-credit a { color: #f2d6ff; text-decoration: underline; text-underline-offset: 3px; }
.photo-credit a:hover { color: white; }

@media (max-width: 760px) {
  .source-link { margin-left: 0; display: flex; }
  html[data-page="members"] .dossier-panel .dossier-visual::before { background-size: contain; }
}