/* ==========================================================================
   MMP — Release Page
   File: assets/css/release.css
   ========================================================================== */


/* ==========================================================================
   GLOBAL
   ========================================================================== */

.mmp-release-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.mmp-release-hero,
.mmp-release-intro,
.mmp-release-song,
.mmp-release-inside,
.mmp-release-creators,
.mmp-release-launch,
.mmp-release-related,
.mmp-release-cta {
  padding: 88px 0 !important;
}

.mmp-release-hero h1,
.mmp-release-hero h2,
.mmp-release-intro h2,
.mmp-release-song h2,
.mmp-release-inside h2,
.mmp-release-creators h2,
.mmp-release-launch h2,
.mmp-release-related h2,
.mmp-release-cta h2,
.mmp-release-hero h3,
.mmp-release-intro h3,
.mmp-release-song h3,
.mmp-release-inside h3,
.mmp-release-creators h3,
.mmp-release-launch h3,
.mmp-release-related h3 {
  margin: 0 !important;
  line-height: 1.06 !important;
  font-weight: 500;
}

.mmp-release-hero h1 {
  font-size: clamp(3.8rem, 9vw, 7.6rem) !important;
  letter-spacing: -0.06em !important;
}

.mmp-release-hero h2,
.mmp-release-intro h2,
.mmp-release-song h2,
.mmp-release-inside h2,
.mmp-release-creators h2,
.mmp-release-launch h2,
.mmp-release-related h2,
.mmp-release-cta h2 {
  font-size: clamp(2.3rem, 5vw, 4.6rem) !important;
  letter-spacing: -0.045em !important;
}

.mmp-release-hero h3,
.mmp-release-intro h3,
.mmp-release-song h3,
.mmp-release-inside h3,
.mmp-release-creators h3,
.mmp-release-launch h3,
.mmp-release-related h3 {
  font-size: clamp(1.35rem, 3vw, 2.1rem) !important;
  letter-spacing: -0.025em !important;
}

.mmp-release-hero p,
.mmp-release-intro p,
.mmp-release-song p,
.mmp-release-inside p,
.mmp-release-creators p,
.mmp-release-launch p,
.mmp-release-related p,
.mmp-release-cta p {
  margin: 0 !important;
  color: var(--mmp-page-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.mmp-release-lede {
  font-family: var(--mmp-font-editorial);
  font-size: clamp(1.25rem, 2.4vw, 1.58rem) !important;
  line-height: 1.45 !important;
  color: var(--mmp-page-ink) !important;
}

.mmp-release-kicker {
  margin: 0 0 14px !important;
  font-family: var(--mmp-font-body);
  font-size: 0.76rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mmp-page-sage) !important;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.mmp-release-btn-row {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px !important;
}

.mmp-release-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--mmp-page-ink) !important;
  color: var(--mmp-white) !important;
  text-decoration: none;
  font-family: var(--mmp-font-body);
  font-size: 0.88rem;
  font-weight: 800;
  border: 1px solid var(--mmp-page-ink) !important;
}

.mmp-release-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--mmp-page-ink) !important;
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.mmp-release-badges {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px !important;
}

.mmp-release-badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--mmp-page-paper);
  border: 1px solid var(--mmp-page-border);
  font-family: var(--mmp-font-body);
  font-size: 0.74rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mmp-page-muted) !important;
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.mmp-release-cover-image,
.mmp-release-strip-image,
.mmp-release-video-image,
.mmp-release-spread-image,
.mmp-release-creator-image {
  margin: 0 !important;
}

.mmp-release-cover-image img,
.mmp-release-strip-image img,
.mmp-release-video-image img,
.mmp-release-spread-image img,
.mmp-release-creator-image img,
.mmp-release-cover-image img[src=""],
.mmp-release-strip-image img[src=""],
.mmp-release-video-image img[src=""],
.mmp-release-spread-image img[src=""],
.mmp-release-creator-image img[src=""] {
  width: 100%;
  object-fit: cover;
  display: block;
  background:
    linear-gradient(135deg, rgba(180, 109, 98, 0.95), rgba(63, 84, 97, 0.88)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 12px);
  box-shadow: 0 24px 60px rgba(48, 43, 40, 0.13);
}

.mmp-release-cover-image img,
.mmp-release-cover-image img[src=""] {
  min-height: 590px;
  border-radius: 32px;
}

.mmp-release-strip-image img,
.mmp-release-strip-image img[src=""] {
  min-height: 186px;
  border-radius: 22px;
}

.mmp-release-video-image img,
.mmp-release-video-image img[src=""] {
  min-height: 360px;
  border-radius: 28px;
}

.mmp-release-spread-image img,
.mmp-release-spread-image img[src=""] {
  min-height: 260px;
  border-radius: 28px;
}

.mmp-release-creator-image img,
.mmp-release-creator-image img[src=""] {
  width: 150px;
  min-height: 150px;
  border-radius: 22px;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.mmp-release-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 180, 106, 0.38), transparent 32%),
    linear-gradient(180deg, var(--mmp-page-paper), var(--mmp-page-cream));
  padding-top: 72px !important;
  padding-bottom: 94px !important;
}

.mmp-release-hero-grid {
  display: grid !important;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 54px;
  align-items: center;
}

.mmp-release-hero-copy .mmp-release-lede {
  margin-top: 24px !important;
  max-width: 660px;
}

.mmp-release-hero-media {
  display: grid !important;
  grid-template-columns: 0.72fr 0.28fr;
  gap: 18px;
  align-items: stretch;
}

.mmp-release-strip {
  display: grid !important;
  gap: 18px;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.mmp-release-intro {
  background: var(--mmp-white);
}

.mmp-release-intro-grid {
  gap: 58px !important;
  align-items: flex-start;
}

.mmp-release-text-stack {
  display: grid !important;
  gap: 22px;
}

.mmp-release-story-points {
  gap: 20px !important;
  margin-top: 48px !important;
}

.mmp-release-point {
  height: 100%;
  background: var(--mmp-page-paper);
  border: 1px solid var(--mmp-page-border);
  border-radius: 24px;
  padding: 26px !important;
}

.mmp-release-point h3 {
  margin-bottom: 10px !important;
}


/* ==========================================================================
   SONG
   ========================================================================== */

.mmp-release-song {
  background: var(--mmp-page-ink);
  color: var(--mmp-white);
}

.mmp-release-song p,
.mmp-release-song .mmp-release-lede {
  color: rgba(255, 250, 241, 0.82) !important;
}

.mmp-release-song .mmp-release-kicker {
  color: var(--mmp-page-gold) !important;
}

.mmp-release-song h2,
.mmp-release-song h3 {
  color: var(--mmp-white) !important;
}

.mmp-release-song-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.mmp-release-song-card {
  background: rgba(255, 250, 241, 0.09);
  border: 1px solid rgba(255, 250, 241, 0.18);
  border-radius: 30px;
  padding: 36px !important;
}


/* ==========================================================================
   INSIDE THE BOOK
   ========================================================================== */

.mmp-release-inside {
  background: var(--mmp-page-paper);
}

.mmp-release-inside-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 42px;
  align-items: center;
}

.mmp-release-spread-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}


/* ==========================================================================
   CREATORS
   ========================================================================== */

.mmp-release-creators {
  background: var(--mmp-white);
}

.mmp-release-creator-grid {
  gap: 24px !important;
  margin-top: 38px !important;
}

.mmp-release-creator {
  height: 100%;
  background: var(--mmp-page-cream);
  border: 1px solid var(--mmp-page-border);
  border-radius: 28px;
  padding: 30px !important;
  display: grid !important;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: start;
}


/* ==========================================================================
   LAUNCH
   ========================================================================== */

.mmp-release-launch {
  background: linear-gradient(135deg, var(--mmp-page-blue), var(--mmp-page-sage));
  color: var(--mmp-white);
}

.mmp-release-launch p,
.mmp-release-launch .mmp-release-lede {
  color: rgba(255, 250, 241, 0.84) !important;
}

.mmp-release-launch .mmp-release-kicker {
  color: var(--mmp-page-gold) !important;
}

.mmp-release-launch h2 {
  color: var(--mmp-white) !important;
}

.mmp-release-launch-grid {
  display: grid !important;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 50px;
  align-items: center;
}

.mmp-release-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px !important;
}

.mmp-release-stat {
  background: rgba(255, 250, 241, 0.10);
  border: 1px solid rgba(255, 250, 241, 0.18);
  border-radius: 22px;
  padding: 20px !important;
}

.mmp-release-stat p {
  color: rgba(255, 250, 241, 0.82) !important;
}

.mmp-release-stat strong {
  display: block;
  color: var(--mmp-white);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.mmp-release-stat span {
  display: block;
}


/* ==========================================================================
   RELATED
   ========================================================================== */

.mmp-release-related {
  background: var(--mmp-page-cream);
}

.mmp-release-related-grid {
  gap: 24px !important;
  margin-top: 36px !important;
}

.mmp-release-related-card {
  height: 100%;
  background: var(--mmp-white);
  border: 1px solid var(--mmp-page-border);
  border-radius: 26px;
  padding: 28px !important;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.mmp-release-cta {
  background: var(--mmp-page-ink);
  color: var(--mmp-white);
  text-align: center;
}

.mmp-release-cta h2 {
  color: var(--mmp-white) !important;
}

.mmp-release-cta p {
  color: rgba(255, 250, 241, 0.82) !important;
  max-width: 680px;
  margin: 22px auto 0 !important;
}

.mmp-release-cta .mmp-release-kicker {
  color: var(--mmp-page-gold) !important;
}

.mmp-release-cta .mmp-release-btn-row {
  justify-content: center;
}

.mmp-release-cta .mmp-release-btn .wp-block-button__link {
  background: var(--mmp-page-paper) !important;
  color: var(--mmp-page-ink) !important;
  border-color: var(--mmp-page-paper) !important;
}

.mmp-release-cta .mmp-release-btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--mmp-white) !important;
  border-color: rgba(255, 250, 241, 0.5) !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 930px) {
  .mmp-release-hero,
  .mmp-release-intro,
  .mmp-release-song,
  .mmp-release-inside,
  .mmp-release-creators,
  .mmp-release-launch,
  .mmp-release-related,
  .mmp-release-cta {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .mmp-release-hero-grid,
  .mmp-release-hero-media,
  .mmp-release-song-grid,
  .mmp-release-inside-grid,
  .mmp-release-launch-grid,
  .mmp-release-stats {
    grid-template-columns: 1fr !important;
  }

  .mmp-release-intro-grid,
  .mmp-release-story-points,
  .mmp-release-creator-grid,
  .mmp-release-related-grid {
    flex-direction: column !important;
  }

  .mmp-release-cover-image img,
  .mmp-release-cover-image img[src=""] {
    min-height: 430px;
  }

  .mmp-release-creator {
    grid-template-columns: 1fr;
  }

  .mmp-release-creator-image img,
  .mmp-release-creator-image img[src=""] {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .mmp-release-container {
    width: calc(100% - 32px);
  }

  .mmp-release-spread-grid {
    grid-template-columns: 1fr;
  }
}

.mmp-release-hero-media-single {
  display: block !important;
}

.mmp-release-hero-media-single .mmp-release-cover-image img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  background: transparent;
}