/* ─────────────────────────────────────────
   RRP — The Rockstars (overzicht + detail)
   PDF optie B + detailpagina Ricky Bonaire
   ───────────────────────────────────────── */

/* ─── Gedeelde layout ─── */
.rockstars-page {
  position: relative;
  background: var(--bg);
}

.rockstars-members > .section-inner + .section-inner {
  padding-top: var(--section-padding-y-tight);
}

.rockstars-members > .section-inner:first-child {
  padding-top: 0;
}

/* ─── Overzicht — bandlid-rij (section-split) ─── */
.member-split {
  align-items: center;
}

.rockstars-members .section-body p.dim {
  font-weight: var(--fw-light);
  color: var(--magenta);
}

.rockstars-members .section-body p.member-quote,
.rockstars-members .section-body em.member-quote,
.member-detail-story-section .section-body p.member-quote,
.member-detail-intro .section-body p.member-quote,
.member-detail-intro .section-body em.member-quote,
.member-detail-story-section .section-body em.member-quote {
  font-style: italic;
}

.section-body .member-meer-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-lg);
  margin-bottom: 0;
  margin-left: calc(-1 * var(--text-indent-column));
  width: calc(100% + var(--text-indent-column));
}

.member-meer {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  vertical-align: middle;
  transform-origin: 50% 92%;
  transition: transform 0.22s ease;
}

.member-meer:hover,
.member-meer:focus-visible {
  transform: rotate(-10deg);
}

.member-meer img {
  width: clamp(4.5rem, 14vw, 5.75rem);
  height: auto;
  display: block;
  filter: var(--drop-shadow-display);
}

@media (prefers-reduced-motion: reduce) {
  .member-meer {
    transition: none;
  }

  .member-meer:hover,
  .member-meer:focus-visible {
    transform: none;
  }
}

/* ─── Polaroid ─── */
.polaroid {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: clamp(0.65rem, 1.5vw, 1rem) clamp(0.65rem, 1.5vw, 1rem) clamp(2rem, 4vw, 2.75rem);
  background: var(--magenta);
  box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.28);
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
}

.polaroid--placeholder img {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.polaroid--tilt-right {
  transform: rotate(2.5deg);
}

.polaroid--tilt-left {
  transform: rotate(-2.5deg);
}

.polaroid--landscape {
  width: min(100%, 48rem);
}

/* ─── Detailpagina ─── */
.member-detail-page {
  background: var(--bg);
}

.member-detail-header {
  padding-bottom: var(--space-md);
}

.member-detail-header .section-headings .member-detail-tagline {
  margin-bottom: 0;
}

.member-detail-intro .intro-text > p {
  letter-spacing: 0.04em;
}

.member-detail-story-section .section-inner {
  padding-top: var(--section-padding-y-tight);
}

.member-back {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-xl);
}

.member-signature {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.member-signature img {
  width: clamp(8rem, 18vw, 14.25rem);
  height: auto;
  display: block;
}

/* Story — twee kolommen (tekst + polaroid), zelfde spacing als rockstars-overzicht */
.member-story-split {
  align-items: start;
}

.member-detail-story-section .member-story-split:not(:first-of-type) .section-body > p:first-child {
  font-size: var(--text-body);
  font-weight: var(--fw-light);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .rockstars-intro .intro-text,
  .member-detail-intro .intro-text {
    max-width: none;
    text-align: left;
  }

  .member-split.section-split--headings-over-media {
    gap: var(--space-lg);
  }

  /* Optie B: foto full-bleed als achtergrond kop/subkop (zoals homepage Rock History) */
  .member-split.section-split--headings-over-media .section-split__media {
    order: -1;
    width: calc(100% + 2 * var(--section-padding-x));
    max-width: 100vw;
    margin-inline: calc(-1 * var(--section-padding-x));
  }

  .member-split.section-split--headings-over-media .polaroid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    aspect-ratio: 9 / 16;
    overflow: hidden;
  }

  .member-split.section-split--headings-over-media .polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .member-split.section-split--headings-over-media .polaroid--placeholder img {
    opacity: 1;
    filter: none;
  }

  .member-split.section-split--headings-over-media .section-split__headings {
    padding-inline: var(--section-padding-x);
  }

  .member-story-split.section-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .member-story-split .section-split__media {
    order: -1;
    width: calc(100% + 2 * var(--section-padding-x));
    max-width: 100vw;
    margin-inline: calc(-1 * var(--section-padding-x));
  }

  .member-story-split .section-split__media .polaroid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    aspect-ratio: 9 / 16;
    overflow: hidden;
  }

  .member-story-split .section-split__media .polaroid--landscape {
    aspect-ratio: auto;
    overflow: visible;
  }

  .member-story-split .section-split__media .polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .member-story-split .section-split__media .polaroid--landscape img {
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .section-body .member-meer-wrap {
    margin-left: 0;
    width: auto;
  }
}