/* Lil' ITH · Music page (releases + videos). Uses blog-nav / blog-hero from blog-page.css */

.music-page-body {
   background: var(--ith-black, #030508);
   min-height: 100vh;
}

.music-main-inner {
   max-width: 1140px;
   margin: 0 auto;
   padding: 0 1.25rem 4rem;
}

.music-videos-section {
   background: var(--ith-navy, #0a1628);
   padding: 3rem 0 4.5rem;
   border-top: 1px solid rgba(0, 255, 160, 0.1);
}

.music-videos-section .container {
   max-width: 960px;
}

.music-videos-section .section-eyebrow {
   display: block;
   text-align: center;
   font-size: 0.68rem;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: rgba(154, 160, 0, 0.95);
   margin-bottom: 0.5rem;
}

.music-videos-section h2 {
   text-align: center;
   font-family: 'Futurion', 'Montserrat', sans-serif;
   font-size: clamp(1.25rem, 3vw, 1.75rem);
   letter-spacing: 0.06em;
   color: #00ffa0;
   text-shadow: 0 0 12px rgba(0, 255, 160, 0.25);
   margin-bottom: 0.5rem;
}

.music-videos-lead {
   text-align: center;
   color: #9eb8c8;
   font-size: 0.92rem;
   max-width: 36rem;
   margin: 0 auto 2rem;
   line-height: 1.65;
}

.music-video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
   gap: 1.5rem;
   align-items: start;
}

.music-video-frame {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   border: 1px solid rgba(0, 255, 160, 0.15);
   box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
   background: rgba(3, 5, 8, 0.6);
}

.music-video-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.music-video-empty {
   text-align: center;
   color: rgba(158, 184, 200, 0.75);
   font-size: 0.9rem;
   margin: 0;
   padding: 1.25rem 1rem;
}

.music-video-empty a {
   color: #00ffa0;
   text-decoration: none;
   transition: text-shadow 0.25s ease;
}

.music-video-empty a:hover {
   text-shadow: 0 0 10px rgba(0, 255, 160, 0.45);
}

.music-page-body .blog-footer {
   margin-top: 0;
}