/* ================================================================
   DAV STRAINS WORKROOM — music-page.css  v7.0  MOOD-FIRST
   Covers ONLY the Music listening room.
   Store grid overrides removed — live in woocommerce-store.css only.
   ================================================================ */

/* ── Page root ── */
.dav-music-room {
  background: #070B18;
  min-height: 100vh;
  padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  color: #fff;
}

/* ================================================================
   HERO
   ================================================================ */
.dav-music-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 8vw, 72px) clamp(20px, 5vw, 64px) clamp(28px, 6vw, 52px);
  background:
    linear-gradient(160deg, rgba(3,8,18,.96) 0%, rgba(5,14,26,.90) 50%, rgba(3,8,18,.94) 100%),
    url('https://davstrains.com/wp-content/uploads/2026/05/hero.jpg') center / cover no-repeat;
}
.dav-music-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(52,116,255,.12), transparent 46%),
    radial-gradient(ellipse at 78% 40%, rgba(201,147,58,.14), transparent 42%);
  pointer-events: none;
}
.dav-music-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.dav-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C9933A;
  margin-bottom: 12px;
  border: 1px solid rgba(201,147,58,.30);
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(201,147,58,.07);
}
.dav-music-hero-title {
  font-size: clamp(32px, 6vw, 62px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: .96 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.dav-music-hero-sub {
  font-size: clamp(14px, 2vw, 16px);
  color: rgba(255,255,255,.62);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 520px;
}
.dav-inline-link {
  color: #C9933A;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dav-music-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dav-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  backdrop-filter: blur(6px);
}
.dav-share-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.dav-music-store-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.42);
  text-decoration: none;
  transition: color .15s;
}
.dav-music-store-link:hover { color: #C9933A; }

/* ================================================================
   MOOD SECTION CONTAINER
   ================================================================ */
.dav-mood-section {
  padding: 28px clamp(14px, 4vw, 48px) 8px;
}
.dav-mood-section-header {
  margin-bottom: 16px;
}
.dav-mood-section-title {
  font-size: clamp(15px, 2.2vw, 20px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  letter-spacing: -.01em !important;
}
.dav-mood-section-sub {
  font-size: 12px;
  color: rgba(255,255,255,.34);
  margin: 0;
}

/* ================================================================
   MOOD GRID — CARD GRID
   ================================================================ */
.dav-mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .dav-mood-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .dav-mood-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 960px) { .dav-mood-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

/* ── Individual mood card ── */
.dav-mood-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .18s, border-color .18s, transform .15s;
  position: relative;
  overflow: hidden;
  min-height: 86px;
}
.dav-mood-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.03), transparent);
  pointer-events: none;
}
.dav-mood-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.dav-mood-card:active { transform: translateY(0); }
.dav-mood-card:focus-visible {
  outline: 2px solid #C9933A;
  outline-offset: 2px;
}

/* Active state */
.dav-mood-card--active,
.dav-mood-card[aria-pressed="true"] {
  background: rgba(201,147,58,.14) !important;
  border-color: rgba(201,147,58,.55) !important;
  box-shadow: 0 0 0 1px rgba(201,147,58,.25), 0 8px 24px rgba(201,147,58,.12) !important;
}
.dav-mood-card--active .dav-mood-icon,
.dav-mood-card[aria-pressed="true"] .dav-mood-icon { opacity: 1 !important; }
.dav-mood-card--active .dav-mood-label,
.dav-mood-card[aria-pressed="true"] .dav-mood-label { color: #f0c46c !important; }

/* "All Songs" card — slightly distinct */
.dav-mood-card--all {
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
}

.dav-mood-icon {
  font-size: 20px;
  opacity: .72;
  line-height: 1;
  flex-shrink: 0;
}
.dav-mood-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.90);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.dav-mood-desc {
  font-size: 10px;
  color: rgba(255,255,255,.36);
  line-height: 1.3;
  font-weight: 400;
}
@media (min-width: 700px) {
  .dav-mood-card { padding: 20px 18px 16px; min-height: 100px; }
  .dav-mood-icon { font-size: 24px; }
  .dav-mood-label { font-size: 14px; }
  .dav-mood-desc { font-size: 11px; }
}

/* ================================================================
   NOW PLAYING BAR
   ================================================================ */
.dav-now-playing-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px clamp(14px, 4vw, 48px) 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(201,147,58,.10);
  border: 1px solid rgba(201,147,58,.28);
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.dav-now-playing-bar[hidden] { display: none; }
.dav-now-playing-icon { font-size: 16px; color: #C9933A; flex-shrink: 0; }
.dav-now-playing-text { flex: 1; line-height: 1.35; }
.dav-now-playing-clear {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  flex-shrink: 0;
  transition: color .15s;
}
.dav-now-playing-clear:hover { color: rgba(255,255,255,.75); }

/* ================================================================
   BUTTONS (used in upgrade + store strips)
   ================================================================ */
.dav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s, transform .12s;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.dav-btn:hover { opacity: .88; transform: translateY(-1px); }
.dav-btn--gold {
  background: linear-gradient(135deg, #f0c46c, #C9933A);
  color: #070B18;
  border-color: #C9933A;
}
.dav-btn--navy {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.dav-btn--outline {
  background: transparent;
  color: rgba(255,255,255,.62);
  border-color: rgba(255,255,255,.18);
}
.dav-btn--outline:hover { color: #fff; border-color: rgba(255,255,255,.38); }

/* ================================================================
   UPGRADE STRIP
   ================================================================ */
.dav-music-upgrade {
  margin: 24px clamp(14px, 4vw, 48px) 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(201,147,58,.08);
  border: 1px solid rgba(201,147,58,.22);
}
.dav-music-upgrade-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dav-music-upgrade-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dav-music-upgrade-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.dav-music-upgrade-copy span {
  font-size: 12px;
  color: rgba(255,255,255,.48);
}
.dav-music-upgrade-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 500px) {
  .dav-music-upgrade-inner { flex-direction: column; align-items: flex-start; }
  .dav-music-upgrade-btns { width: 100%; }
  .dav-music-upgrade-btns .dav-btn { flex: 1; }
}

/* ================================================================
   STORE STRIP
   ================================================================ */
.dav-music-store-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 24px clamp(14px, 4vw, 48px);
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 32px;
}
.dav-music-store-strip p {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  margin: 0;
}

/* ================================================================
   HIDE SONG LIST EVERYWHERE ON THE MUSIC PAGE
   Belt + braces — catches any version of the track grid
   ================================================================ */
body.page-template-page-music #musicGrid,
body.page-template-page-music .music-grid,
body.page-template-page-music #genreFilter,
body.page-template-page-music .genre-filter,
body.page-template-page-music .dav-track-list,
body.page-template-page-music .dav-song-list,
body.page-template-page-music .dav-music-list,
body.page-template-page-music .dav-track-row,
body.page-template-page-music .track-list,
body.page-template-page-music .track-row,
body.page-template-page-music .dav-tracks-table,
body.page-template-page-music .music-track-list,
body.page-template-page-music .music-list,
body.page-template-page-music .musicSkeleton,
body.page-template-page-music #musicSkeleton,
body.page-template-page-music .music-section,
body.page-template-page-music #musicSection { display: none !important; }

/* Page-ID fallback (Music page is post ID 44) */
body.page-id-44 #musicGrid,
body.page-id-44 .music-grid,
body.page-id-44 #genreFilter,
body.page-id-44 .genre-filter,
body.page-id-44 .dav-track-list,
body.page-id-44 .track-list,
body.page-id-44 .track-row,
body.page-id-44 .music-section,
body.page-id-44 #musicSection { display: none !important; }

/* ================================================================
   LEGACY genre-filter / music-grid CSS (kept for non-music pages)
   e.g. front-page.php section still shows track list
   ================================================================ */
.genre-filter,
#genreFilter {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 7px;
  padding: 14px 16px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: transparent;
}
.genre-filter::-webkit-scrollbar,
#genreFilter::-webkit-scrollbar { display: none; }
.genre-filter button,
#genreFilter button {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  line-height: 1;
}
.genre-filter button.active,
#genreFilter button.active,
.genre-filter button:hover,
#genreFilter button:hover {
  background: rgba(210,160,59,.18);
  color: #d2a03b;
  border-color: rgba(210,160,59,.45);
}

/* ================================================================
   STORE GRID OVERRIDES — minimal safety net (must match woocommerce-store.css)
   These exist only as a fallback if woocommerce-store.css loads late.
   Do NOT use these as the primary store rules.
   ================================================================ */
@media (max-width: 559px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (min-width: 1100px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
}