/* Born in Roots — page-specific styles */
/* Music page uses the same shell, header, hero and content width as Videos. */
.music-catalogue{padding:34px 18px 70px}
.music-intro{background:linear-gradient(115deg,#0c1710,#34442f);border-radius:26px;padding:38px 34px;margin-bottom:32px;color:#fff}
.music-intro .kicker{color:#f5c542;font-weight:900;letter-spacing:4px;font-size:14px;margin-bottom:14px}
.music-intro h2{font-family:Montserrat,sans-serif;font-size:clamp(32px,4vw,56px);line-height:1.08;margin:0 0 16px;font-weight:900;letter-spacing:-1px}
.music-intro h2 span{color:#f5c542}.music-intro p{font-size:17px;line-height:1.8;max-width:850px;margin:0}.music-intro .rasta-line{width:232px;height:8px;border-radius:8px;background:linear-gradient(90deg,#e5232b 0 33%,#f5c542 33% 66%,#42a900 66%);margin-top:24px}
.music-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.music-heading h2{font-family:Montserrat,sans-serif;color:#fff;font-size:32px;font-weight:900;margin:0}.music-filters{display:flex;gap:9px;flex-wrap:wrap}.music-filter{border:1px solid rgba(242,196,0,.45);background:rgba(0,0,0,.35);color:#fff;border-radius:24px;padding:11px 18px;font-weight:800;cursor:pointer}.music-filter.active{background:#f5c542;color:#111;border-color:#f5c542}
.music-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.music-card{background:linear-gradient(135deg,rgba(4,22,10,.96),rgba(35,10,10,.96));border:1px solid rgba(242,196,0,.35);border-radius:18px;overflow:hidden;color:#fff}.music-card-top{min-height:180px;display:flex;align-items:center;justify-content:center;padding:28px 22px;position:relative}.music-card-top h3{text-align:center;font-family:Montserrat,sans-serif;font-size:26px;line-height:1.1;font-weight:900;margin:0;text-transform:uppercase}.music-card-top button{position:absolute;right:17px;bottom:17px;width:56px;height:56px;border:0;border-radius:50%;background:#f5c542;color:#111;font-size:22px;cursor:pointer}.music-card-body{padding:22px}.music-card-body .category{color:#f5c542;font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 13px}.music-card-body .song-title{font-size:22px;font-weight:900;line-height:1.2;margin:0 0 28px}.music-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.music-card-bottom button{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:24px;padding:11px 17px;font-weight:800;cursor:pointer}.music-card-bottom span{color:#aaa}.music-player-local{margin-top:28px;background:#0b120c;border:1px solid rgba(242,196,0,.3);border-radius:18px;padding:22px;color:#fff}.music-player-local h3{margin:0 0 12px;font-size:22px}.music-player-local audio{width:100%}
@media(max-width:1000px){.music-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.music-grid{grid-template-columns:1fr}.music-intro{padding:28px 23px}.music-heading h2{font-size:28px}}



/* moved from <styleid="music-fixed-width-final"> */

.inner-page-body .inner-page{
  width:calc(100% - 40px)!important;
  max-width:1250px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.inner-page-body .inner-page .page-hero{
  width:100%!important;
}
.music-page .music-catalogue{
  padding-left:0!important;
  padding-right:0!important;
}
@media(max-width:650px){
  .inner-page-body .inner-page{
    width:calc(100% - 24px)!important;
  }
}



/* moved from <styleid="music-final-layout"> */

.inner-page-body .page-hero.videos-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  display:block!important;
}
.inner-page-body .inner-page{
  width:calc(100% - 40px)!important;
  max-width:1250px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:650px){
  .inner-page-body .inner-page{
    width:calc(100% - 24px)!important;
  }
}



/* moved from <styleid="compact-music-layout"> */

.music-catalogue .section-heading { margin-bottom: 18px; }
      .music-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
      .music-card { min-width: 0; border-radius: 10px !important; }
      .music-card-top { min-height: 92px !important; padding: 12px !important; }
      .music-card-top h3 { font-size: 16px !important; line-height: 1.18 !important; margin-bottom: 6px !important; }
      .music-card-top p { font-size: 11px !important; line-height: 1.35 !important; }
      .music-card-body { padding: 10px 12px !important; }
      .music-card-body p { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
      .music-card-bottom { padding: 9px 12px !important; gap: 6px !important; }
      .music-card-bottom .music-button, .music-card-bottom a { font-size: 10px !important; padding: 6px 8px !important; }
      .music-playlist-note { font-size: 13px; opacity: .8; margin: 0 0 18px; }
      @media (max-width: 1100px) { .music-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
      @media (max-width: 760px) {
        .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
        .music-card-top { min-height: 82px !important; padding: 10px !important; }
        .music-card-top h3 { font-size: 14px !important; }
        .music-card-body { padding: 9px 10px !important; }
        .music-card-bottom { padding: 8px 10px !important; flex-wrap: wrap !important; }
      }
      @media (max-width: 430px) { .music-grid { grid-template-columns: 1fr !important; } }



/* moved from <styleid="ultra-compact-music-layout"> */

.music-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }
      .music-card {
        border-radius: 7px !important;
      }
      .music-card-top {
        min-height: 0 !important;
        padding: 8px !important;
      }
      .music-card-top h3 {
        font-size: 13px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
      }
      .music-card-top p {
        display: none !important;
      }
      .music-card-body {
        padding: 7px 8px !important;
      }
      .music-card-body p {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin: 0 0 5px !important;
      }
      .music-card-bottom {
        padding: 6px 8px !important;
        gap: 4px !important;
      }
      .music-card-bottom .music-button,
      .music-card-bottom a {
        font-size: 9px !important;
        padding: 4px 6px !important;
      }
      .music-playlist-note {
        font-size: 12px !important;
        margin-bottom: 12px !important;
      }
      @media (max-width: 1200px) {
        .music-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
      }
      @media (max-width: 900px) {
        .music-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      }
      @media (max-width: 620px) {
        .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      }
      @media (max-width: 400px) {
        .music-grid { grid-template-columns: 1fr !important; }
      }



/* moved from <styleid="correct-play-button"> */

.music-card-top {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 76px !important;
        position: relative !important;
      }
      .track-number {
        flex: 0 0 auto;
        font-size: 12px;
        color: rgba(255,255,255,.58);
      }
      .track-copy {
        min-width: 0;
        flex: 1 1 auto;
      }
      .track-copy h3 {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.18 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .track-copy p {
        margin: 4px 0 0 !important;
        font-size: 10px !important;
        color: #f4c62e !important;
      }
      .track-play {
        position: static !important;
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        background: #f4c62e !important;
        color: #111 !important;
        border: 0 !important;
        box-shadow: none !important;
      }
      .music-card-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        padding: 6px 8px !important;
      }
      .track-duration {
        font-size: 10px;
        color: rgba(255,255,255,.62);
      }
      .music-card-open {
        font-size: 10px !important;
        padding: 4px 7px !important;
      }
      .music-card-body { display: none !important; }
      @media (max-width: 760px) {
        .music-card-top { min-height: 72px !important; }
        .track-copy h3 { font-size: 12px !important; }
        .track-play { flex-basis: 29px !important; width: 29px !important; height: 29px !important; min-width: 29px !important; }
      }



/* moved from <styleid="born-in-roots-album"> */

.music-intro h2 span { color: #f4c62e !important; }
      .music-intro h2 { letter-spacing: .02em; }
      .album-badge {
        display: inline-block;
        margin-top: 10px;
        padding: 6px 10px;
        border: 1px solid rgba(244,198,46,.55);
        border-radius: 999px;
        color: #f4c62e;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
      }



/* moved from <styleid="born-in-roots-filter-fix"> */

.music-filters .filter-btn{border:1px solid rgba(242,196,0,.45);background:rgba(0,0,0,.35);color:#fff;border-radius:24px;padding:11px 18px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.music-filters .filter-btn:hover{background:rgba(245,197,66,.18);border-color:#f5c542;transform:translateY(-1px)}
.music-filters .filter-btn.active{background:#f5c542;color:#111;border-color:#f5c542}



/* moved from <styleid="born-in-roots-back-cover"> */

.music-intro-with-back{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:28px;
  align-items:center;
}
.music-intro-copy{min-width:0}
.music-intro-back{
  justify-self:end;
  width:100%;
  max-width:330px;
}
.music-intro-back img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(244,198,46,.34);
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
@media(max-width:800px){
  .music-intro-with-back{
    grid-template-columns:1fr;
  }
  .music-intro-back{
    justify-self:center;
    max-width:420px;
  }
}



/* moved from <styleid="back-cover-lightbox"> */

.back-cover-lightbox-trigger{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:zoom-in;
  text-align:left;
}
.back-cover-lightbox-trigger img{
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.back-cover-lightbox-trigger:hover img{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 22px 46px rgba(0,0,0,.52);
  filter:brightness(1.04);
}
.back-cover-zoom-hint{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:7px 10px;
  border-radius:8px;
  background:rgba(0,0,0,.72);
  color:#f5c542;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  pointer-events:none;
}
.back-cover-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(0,0,0,.90);
  backdrop-filter:blur(5px);
}
.back-cover-lightbox.open{display:flex;}
.back-cover-lightbox img{
  display:block;
  max-width:min(92vw,900px);
  max-height:92vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(245,197,66,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.back-cover-lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  width:44px;
  height:44px;
  border:1px solid rgba(245,197,66,.6);
  border-radius:50%;
  background:rgba(8,12,10,.82);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.back-cover-lightbox-close:hover{background:rgba(245,197,66,.18);}
@media(max-width:800px){
  .back-cover-lightbox{padding:16px;}
  .back-cover-zoom-hint{font-size:10px;padding:6px 8px;}
}