/* =========================================================
   music.css — Composer / Music page only
   Cleaned / pruned version
   ========================================================= */

/* ---------- Base ---------- */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Ubuntu", sans-serif;
}

img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* ---------- Brand colours / helpers ---------- */

.bg-red {
  background-color: #ce0008;
}

.font-colorAll {
  color: #ce0008;
}

.color-4 {
  color: #f1916e;
}

.bg-3 {
  background-color: #fef3f4;
}

.bordercolor {
  border: 1px solid #cbd3db;
}

.font13 {
  font-size: 13px;
}

/* ---------- Header / navigation ---------- */

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.navbar-nav .nav-link:hover {
  color: #ce0008;
  text-decoration: underline #ce0008 2px;
  text-underline-offset: 8px;
}

.navbar-nav > li.active > a {
  color: #ce0008;
  text-decoration: underline #ce0008 2px;
  text-underline-offset: 8px;
}

.lft {
  left: -40px !important;
}

@media (max-width: 991.98px) {
  .fixed-top.row {
    width: 100%;
    margin: 0;
  }
}

/* ---------- Music page tabs ---------- */

.nav-pills {
  gap: 0.75rem;
}

.nav-pills .nav-item {
  margin-left: 0 !important; /* overrides Bootstrap ms-3 in the HTML */
}

.nav-pills .nav-link {
  color: #ce0008;
  background-color: #ffffff !important;
  font-weight: 400;
  border: 1px solid #ce0008 !important;
}

.nav-pills .nav-link.active {
  color: #ffffff;
  background-color: #ce0008 !important;
  border-color: #ce0008 !important;
}

.tab-pane.active {
  transition: 0.3s;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .nav-pills {
    gap: 0.65rem;
  }

  .nav-pills .nav-link {
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 575.98px) {
  .nav-pills {
    gap: 0.5rem;
  }

  .nav-pills .nav-link {
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
  }
}

/* ---------- Quote / press blocks in Albums ---------- */

.card {
  margin: 10px 10px;
  max-width: 100%;
}

.pressHome {
  display: flex;
  justify-content: center;
}

.pressbox1 {
  height: 140px;
  width: 140px;
  position: relative;
  bottom: 70px;
  border-radius: 50%;
}

.news-content {
  font-size: 14px;
  margin-top: -51px;
}

.pc2 {
  padding-bottom: 45px;
}

/* ---------- YouTube embeds ---------- */

.iframeHW {
  width: 100%;
  height: 306px;
  border-radius: 12px;
}

/* iPad Mini / tablet: calmer YouTube boxes */
@media (min-width: 768px) and (max-width: 991.98px) {
  .iframeHW {
    height: 220px !important;
  }

  /* Keeps the two Film videos aligned even if the second column still has mt-5 */
  #films .col-md-6.mt-5 {
    margin-top: 0 !important;
  }

  #films p,
  #brands p,
  #collabs h6 {
    font-size: 0.95rem;
    line-height: 1.35;
  }
}

/* iPad Pro / small laptop */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .iframeHW {
    height: 240px;
  }
}

@media (min-width: 1500px) {
  .iframeHW {
    height: 350px;
  }
}

@media (min-width: 1920px) {
  .iframeHW {
    height: 446px;
  }
}

@media (max-width: 575.98px) {
  .iframeHW {
    height: 220px;
  }
}

/* ---------- Spotify embeds + action buttons ---------- */

.music-embed-frame {
  width: 100% !important;
  max-width: 100%;
  border: 0;
  display: block;
  border-radius: 12px;
}

.music-embed-actions {
  margin-top: 0.25rem !important;
  display: flex;
  justify-content: center;
}

.music-platform-btn {
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Albums and Playlists: full players on desktop/laptop */
#albums iframe[src*="open.spotify.com/embed/album"],
#albums .spotify-music-embed,
#playlists iframe[src*="open.spotify.com/embed/playlist"],
#playlists .spotify-music-embed {
  height: 380px !important;
  min-height: 360px !important;
  border-radius: 12px;
}

/* Singles: compact players everywhere */
#singles iframe[src*="open.spotify.com/embed/album"],
#singles iframe[src*="open.spotify.com/embed/track"],
#singles .spotify-music-embed,
#singles .spotify-track-embed {
  height: 180px !important;
  min-height: 160px !important;
  border-radius: 12px;
}

/* ---------- Albums layout ---------- */

/* iPad Pro / small laptop: slightly tighter album player and quote text */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #albums iframe[src*="open.spotify.com/embed/album"],
  #albums .spotify-music-embed,
  #playlists iframe[src*="open.spotify.com/embed/playlist"],
  #playlists .spotify-music-embed {
    height: 360px !important;
    min-height: 340px !important;
  }

  #albums .col-md-12.mb-5 > .row > .col-md-4:nth-child(2) img {
    width: 100% !important;
    max-width: 100% !important;
  }

  #albums .news-content {
    font-size: 13px;
    line-height: 1.45;
  }

  #albums .bg-3 {
    min-height: 255px;
  }
}

/* iPad Mini: cover + Spotify side-by-side, quote below */
@media (min-width: 768px) and (max-width: 991.98px) {
  #albums .col-md-12.mb-5 > .row {
    align-items: flex-start;
    row-gap: 1.5rem;
  }

  #albums .col-md-12.mb-5 > .row > .col-md-4:nth-child(2) {
    flex: 0 0 42%;
    max-width: 42%;
    margin-top: 0 !important;
  }

  #albums .col-md-12.mb-5 > .row > .col-md-4:nth-child(3) {
    flex: 0 0 58%;
    max-width: 58%;
    margin-top: 0 !important;
  }

  #albums .col-md-12.mb-5 > .row > .col-md-4:nth-child(4) {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 1.25rem !important;
  }

  #albums .modal-trigger,
  #albums .img-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }

  #albums .bg-3 {
    max-width: 72%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Spotify renders compact on iPad Mini, so avoid empty iframe space */
  #albums iframe[src*="open.spotify.com/embed/album"],
  #albums .spotify-music-embed {
    height: 170px !important;
    min-height: 155px !important;
  }
}

/* ---------- Playlists layout ---------- */

#playlists p.fs-3 {
  line-height: 1.25;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #playlists .row.g-5 {
    --bs-gutter-x: 1.75rem;
    --bs-gutter-y: 2rem;
  }

  #playlists .row.g-5 > .col-12.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #playlists p.fs-3 {
    font-size: 1.25rem !important;
    min-height: 3.1rem;
    margin-bottom: 0.75rem !important;
  }

  /* Spotify renders compact on iPad Mini, so avoid empty iframe space */
  #playlists iframe[src*="open.spotify.com/embed/playlist"],
  #playlists .spotify-music-embed {
    height: 170px !important;
    min-height: 155px !important;
  }
}

/* ---------- Singles layout ---------- */

@media (min-width: 768px) and (max-width: 991.98px) {
  #singles .row.g-5 > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #singles iframe[src*="open.spotify.com/embed/album"],
  #singles iframe[src*="open.spotify.com/embed/track"],
  #singles .spotify-music-embed,
  #singles .spotify-track-embed {
    height: 170px !important;
    min-height: 150px !important;
  }
}

@media (max-width: 767.98px) {
  #singles .row.g-5 > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Phone spacing ---------- */

@media (max-width: 575.98px) {
  #films .row.pe-5.ps-5,
  #albums .row.pe-5.ps-5,
  #playlists .col-md-12.pe-5.ps-5,
  #singles .col-md-12.pe-5.ps-5,
  #brands .col-md-12.pe-5.ps-5,
  #collabs .col-md-12.pe-5.ps-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #albums .modal-trigger,
  #albums .img-fluid {
    max-width: 90%;
  }

  #albums iframe[src*="open.spotify.com/embed/album"],
  #albums .spotify-music-embed,
  #playlists iframe[src*="open.spotify.com/embed/playlist"],
  #playlists .spotify-music-embed {
    height: 190px !important;
    min-height: 170px !important;
  }

  #singles iframe[src*="open.spotify.com/embed/album"],
  #singles iframe[src*="open.spotify.com/embed/track"],
  #singles .spotify-music-embed,
  #singles .spotify-track-embed {
    height: 160px !important;
    min-height: 150px !important;
  }

  #playlists p.fs-3 {
    font-size: 1.25rem !important;
    min-height: 0;
    margin-bottom: 0.75rem !important;
  }

  .music-platform-btn {
    width: auto;
    max-width: 220px;
  }
}

/* ---------- Image click cue ---------- */

.modal-trigger {
  cursor: pointer;
}