/* Nordic Pro — unified photo grading
   Active look: html[data-photo-grade="muted"]
   Future swap: html[data-photo-grade="vivid"] */

html[data-photo-grade="muted"],
html:not([data-photo-grade]) {
  --photo-filter-light: saturate(0.82) contrast(1.05) brightness(0.98) sepia(0.07);
  --photo-filter-dark: saturate(0.74) contrast(1.08) brightness(0.88) sepia(0.1);
  --photo-strip-overlay: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.52) 0%,
    rgba(26, 58, 92, 0.1) 45%,
    rgba(244, 241, 235, 0.05) 100%
  );
  --photo-story-overlay: linear-gradient(
    145deg,
    rgba(244, 241, 235, 0.14) 0%,
    transparent 42%,
    rgba(200, 168, 75, 0.07) 100%
  );
  --photo-coach-overlay: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.35) 0%,
    rgba(26, 58, 92, 0.12) 55%,
    rgba(244, 241, 235, 0.04) 100%
  );
}

html[data-photo-grade="vivid"] {
  --photo-filter-light: saturate(1.08) contrast(1.12) brightness(1.02);
  --photo-filter-dark: saturate(1.15) contrast(1.18) brightness(0.92);
  --photo-strip-overlay: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.45) 0%,
    transparent 55%
  );
  --photo-story-overlay: linear-gradient(
    145deg,
    transparent 0%,
    rgba(200, 168, 75, 0.06) 100%
  );
  --photo-coach-overlay: linear-gradient(
    to top,
    rgba(14, 14, 14, 0.3) 0%,
    transparent 60%
  );
}

/* ── Exempt logos & UI marks ── */
.nav-logo img,
img[src*="logo-reversed"],
img[src*="Logo.png"],
img[src*="Stahre Logo"],
.partner-card img {
  filter: none !important;
}

/* ── Light / editorial sections ── */
html[data-photo-grade="muted"] .story-img-main,
html[data-photo-grade="muted"] .story-img-float,
html[data-photo-grade="muted"] .photo-item img,
html[data-photo-grade="muted"] .coach-img img,
html[data-photo-grade="muted"] .photo-editorial,
html:not([data-photo-grade]) .story-img-main,
html:not([data-photo-grade]) .story-img-float,
html:not([data-photo-grade]) .photo-item img,
html:not([data-photo-grade]) .coach-img img,
html:not([data-photo-grade]) .photo-editorial {
  filter: var(--photo-filter-light) !important;
}

/* ── Dark / cinematic sections ── */
html[data-photo-grade="muted"] .hero-img-right img,
html[data-photo-grade="muted"] .page-hero-img img,
html[data-photo-grade="muted"] .apply-left img,
html:not([data-photo-grade]) .hero-img-right img,
html:not([data-photo-grade]) .page-hero-img img,
html:not([data-photo-grade]) .apply-left img {
  filter: var(--photo-filter-dark) !important;
}

/* ── Unified overlays ── */
.story-visual {
  position: relative;
}

.story-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-story-overlay);
}

.story-badge {
  z-index: 2;
}

.story-img-float {
  z-index: 2;
  position: absolute;
}

.photo-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-strip-overlay);
}

.photo-item .photo-overlay {
  z-index: 2;
}

.coach-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-coach-overlay);
}

.coach-img img {
  position: relative;
  z-index: 0;
}

/* Campus / inline editorial frames */
.photo-frame {
  position: relative;
  overflow: hidden;
}

.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--photo-story-overlay);
}

.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-frame > *:not(img) {
  z-index: 2;
}

/* ── Desktop hero: keep full player visible below fixed nav ── */
@media (min-width: 769px) {
  .hero-img-right {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: calc(var(--desktop-nav-height, 180px) + 12px) !important;
    box-sizing: border-box !important;
  }

  .hero-img-right picture {
    display: block;
    width: 100%;
    text-align: center;
  }

  .hero-img-right img {
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - var(--desktop-nav-height, 180px) - 32px) !important;
    max-width: min(540px, 48vw) !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}