/* ═══════════════════════════════════════════════════════════
   SHAMBHU MUSIC — RESPONSIVE & READABILITY STYLESHEET
   ═══════════════════════════════════════════════════════════ */

/* ── FOOTER LOGO LINK ───────────────────────────────────── */
a.footer-logo { text-decoration: none; cursor: pointer; }

/* ── PREVENT HORIZONTAL OVERFLOW EVERYWHERE ─────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── BADGES ABOVE ART ───────────────────────────────────── */

/* Album grid — top-align so badge/no-badge cards don't stretch unevenly */
.album-grid {
  align-items: start !important;
}

/* Album cards — flex column so tag strip sits above art */
.album-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Tag strip row above the art */
.album-tag-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin-bottom: 6px;
  padding: 0 2px;
}

/* Badges become inline, not absolute */
.album-atmos-tag {
  position: static !important;
  display: inline-block;
}
.album-new-tag {
  position: static !important;
  display: inline-block;
  margin-left: auto;
}

/* Art wrap no longer needs overflow or aspect-ratio — inner handles it */
.album-art-wrap {
  overflow: visible !important;
  aspect-ratio: unset !important;
  margin-bottom: 0 !important;
  position: static !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Inner wrapper clips the hover-scale and carries the visual styles */
.album-art-inner {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(44,74,53,0.08);
  aspect-ratio: 1;
  margin-bottom: 14px;
}

/* Related grid — top-align same as album grid */
.related-grid {
  align-items: start !important;
}

/* Related cards */
.related-tag-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.related-atmos-tag {
  position: static !important;
  display: inline-block;
}
.related-art-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 12px;
}
.related-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Featured hero card (music page) */
.featured-tag-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 0;
}
.featured-atmos-tag {
  position: static !important;
  display: inline-block;
}
.featured-new-tag {
  position: static !important;
  display: inline-block;
}
.featured-art-wrap {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
.featured-art-inner {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 240px;
}
.featured-art-inner .featured-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── GLOBAL FONT SIZE INCREASES ─────────────────────────── */
.story-text               { font-size: 21px !important; line-height: 1.85 !important; }
.intro-body p             { font-size: 17px !important; line-height: 1.85 !important; }
.philosophy-body p        { font-size: 17px !important; line-height: 1.85 !important; }
.pillar-text              { font-size: 16px !important; line-height: 1.75 !important; }
.quote-text               { font-size: 22px !important; line-height: 1.65 !important; }
.press-quote-text         { font-size: 17px !important; line-height: 1.75 !important; }
.featured-desc            { font-size: 15px !important; line-height: 1.75 !important; }
.listen-featured-desc     { font-size: 32px !important; line-height: 1.55 !important; }
.latest-desc              { font-size: 16px !important; line-height: 1.75 !important; }
.track-name-cell          { font-size: 20px !important; }
.track-desc-cell          { font-size: 14px !important; }
.track-time-cell          { font-size: 14px !important; }
.release-subtitle         { font-size: 22px !important; }
.meta-val                 { font-size: 19px !important; }
.atmos-badge-sub          { font-size: 17px !important; }
.stream-name              { font-size: 15px !important; }
.section-title            { font-size: 36px !important; }
.related-name             { font-size: 17px !important; }
.related-year             { font-size: 13px !important; }
.album-name               { font-size: 18px !important; }
.album-year               { font-size: 13px !important; }
.nav-links a              { font-size: 12px !important; }

/* ── HAMBURGER BUTTON ───────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--forest, #2C4A35);
  border-radius: 2px;
  transition: all 0.3s;
}
nav.nav-mobile-open .nav-hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
nav.nav-mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.nav-mobile-open .nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ══════════════════════════════════════════════════════════
   TABLET  ≤ 900px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Nav */
  nav                       { padding: 0 28px !important; position: relative; }
  .nav-hamburger            { display: flex !important; }
  .nav-btn                  { display: none !important; }
  .nav-links                {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FAFAF7;
    border-bottom: 2px solid #e8e2d6;
    flex-direction: column !important;
    padding: 8px 0 20px;
    gap: 0 !important;
    box-shadow: 0 8px 24px rgba(44,74,53,0.1);
    z-index: 999;
    list-style: none;
  }
  nav.nav-mobile-open .nav-links { display: flex !important; }
  .nav-links li             { border-bottom: 1px solid #f0ebe1; }
  .nav-links a              { display: block !important; padding: 13px 28px !important;
                              font-size: 12px !important; letter-spacing: 0.18em; }

  /* Hero (index) */
  .hero                     { grid-template-columns: 1fr !important;
                              padding: 48px 32px !important; gap: 40px !important;
                              min-height: auto !important; }

  /* Release hero */
  .album-hero               { grid-template-columns: 1fr !important;
                              padding: 40px 32px !important; gap: 36px !important; }

  /* Atmos strip */
  .atmos-strip              { flex-wrap: wrap !important; padding: 24px 28px !important;
                              gap: 20px !important; }

  /* Cred strip */
  .cred-strip               { flex-wrap: wrap !important; padding: 28px 28px !important;
                              gap: 24px !important; justify-content: center !important; }
  .cred-divider             { display: none !important; }

  /* Section wraps */
  .section-wrap             { padding: 56px 32px !important; }

  /* Album grid */
  .album-grid               { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
  .album-grid.five-col      { grid-template-columns: repeat(3, 1fr) !important; }

  /* Release related */
  .related-grid             { grid-template-columns: repeat(2, 1fr) !important; }

  /* Email / community section */
  .email-section            { grid-template-columns: 1fr !important;
                              padding: 56px 32px !important; gap: 40px !important; }

  /* Bottom section (release pages) */
  .bottom-section           { grid-template-columns: 1fr !important;
                              padding: 0 32px 60px !important; gap: 40px !important; }

  /* Journey */
  .intro-section            { grid-template-columns: 1fr !important; gap: 36px !important;
                              padding: 48px 32px !important; }
  .philosophy-section       { padding: 48px 32px !important; }
  .philosophy-grid          { grid-template-columns: 1fr !important; gap: 36px !important; }
  .press-grid               { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Music page */
  .latest-release           { grid-template-columns: 1fr !important; }
  .filters-bar,
  .era-section              { padding-left: 28px !important; padding-right: 28px !important; }

  /* Breadcrumb */
  .breadcrumb               { padding: 12px 28px !important; }

  /* Release section paddings */
  .release-section,
  .quote-section,
  .related-section          { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  ≤ 600px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Root */
  html, body                { overflow-x: hidden !important; }

  /* Nav */
  nav                       { padding: 0 20px !important; height: auto !important; min-height: 60px; }
  .nav-logo                 { font-size: 20px !important; }

  /* Hero */
  .hero                     { padding: 36px 20px 48px !important; gap: 32px !important; }
  .hero-title               { font-size: clamp(32px, 9vw, 52px) !important; line-height: 1.1 !important; }
  .hero-text                { max-width: 100% !important; }
  .hero-album-art,
  .hero-album-art-fallback  { max-width: 100% !important; }
  .hero-badge               { left: 0 !important; right: 0 !important; bottom: -12px !important; }

  /* Atmos strip */
  .atmos-strip              { flex-direction: column !important; padding: 24px 20px !important;
                              align-items: flex-start !important; gap: 16px !important; }
  .atmos-divider            { display: none !important; }
  .atmos-banner-platforms   { flex-wrap: wrap !important; gap: 8px !important; }

  /* Cred strip */
  .cred-strip               { padding: 24px 20px !important; gap: 20px !important; }
  .cred-num                 { font-size: 28px !important; }

  /* Section wraps */
  .section-wrap             { padding: 48px 20px !important; }

  /* Album grids → 2 col */
  .album-grid               { grid-template-columns: repeat(2, 1fr) !important;
                              gap: 12px !important;
                              padding-left: 0 !important; padding-right: 0 !important; }
  .album-grid.five-col      { grid-template-columns: repeat(2, 1fr) !important; }
  .featured-card            { grid-column: span 2 !important;
                              display: grid !important;
                              grid-template-columns: 1fr !important;
                              grid-template-rows: auto auto auto auto !important;
                              gap: 0 !important; }
  /* Pull title above image, push desc/actions below — display:contents dissolves the wrapper */
  .featured-info            { display: contents !important; }
  .featured-title-block     { grid-row: 1 !important; padding: 20px 20px 12px !important; }
  .featured-art-wrap        { grid-row: 2 !important; width: 100% !important;
                              aspect-ratio: 1 !important; }
  .featured-art             { width: 100% !important; height: 100% !important;
                              min-height: unset !important; }
  .featured-desc            { grid-row: 3 !important; padding: 16px 20px 0 !important;
                              margin: 0 !important; }
  .featured-actions         { grid-row: 4 !important; padding: 16px 20px 20px !important; }
  .album-name               { font-size: 14px !important; }
  .album-year               { font-size: 11px !important; }

  /* Music page sections */
  .era-section              { padding: 0 20px 32px !important; }
  .filters-bar              { padding: 16px 20px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .filter-btn               { font-size: 11px !important; padding: 6px 12px !important; }
  .latest-release           { grid-template-columns: 1fr !important; }
  .latest-art-col           { aspect-ratio: 1 !important; height: auto !important; overflow: hidden !important; }
  .latest-info-col          { padding: 28px 20px !important; }
  .latest-title             { font-size: clamp(28px, 8vw, 44px) !important; }

  /* Release hero */
  .album-hero               { padding: 28px 20px !important; gap: 24px !important; }
  .release-title            { font-size: clamp(30px, 8vw, 48px) !important; }
  .release-subtitle         { font-size: 18px !important; }
  .streaming-row            { flex-wrap: wrap !important; gap: 8px !important; }
  /* Compact streaming buttons — 2×2 grid on mobile */
  .streaming-links          { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stream-btn               { padding: 9px 10px !important; gap: 8px !important; flex: unset !important; }
  .stream-icon              { width: 22px !important; height: 22px !important; font-size: 11px !important; flex-shrink: 0 !important; }
  .stream-name              { font-size: 11px !important; font-weight: 600 !important; }
  .stream-note              { display: none !important; }

  /* Track table — mobile: kill the invisible play column, align remaining cells */
  .track-table-wrap         { overflow-x: auto !important; }
  .track-desc-cell          { display: none !important; }
  .track-desc-head          { display: none !important; }
  .track-play-cell          { display: none !important; }
  .track-play-head          { display: none !important; }
  .track-num-cell           { width: 36px !important; text-align: center !important; vertical-align: middle !important; }
  .track-time-cell          { width: 52px !important; white-space: nowrap !important; vertical-align: middle !important; text-align: right !important; }
  .track-name-cell          { font-size: 16px !important; vertical-align: middle !important; }
  .track-row td             { vertical-align: middle !important; }

  /* Studio photo section */
  .studio-section           { padding: 40px 20px !important; }
  .studio-photo             { max-height: 320px !important; }
  .studio-caption           { font-size: 14px !important; }
  .studio-secondary-grid    { grid-template-columns: 1fr !important; }
  .studio-secondary-photo   { max-height: 260px !important; }

  /* Release section padding */
  .release-section          { padding: 48px 20px !important; }
  .quote-section            { padding: 40px 20px !important; }
  .related-section          { padding: 48px 20px !important; }
  .bottom-section           { padding: 0 20px 48px !important; gap: 24px !important; }

  /* Related → 2 col */
  .related-grid             { grid-template-columns: repeat(2, 1fr) !important;
                              gap: 14px !important; }
  .related-name             { font-size: 14px !important; }

  /* Email section */
  .email-section            { grid-template-columns: 1fr !important;
                              padding: 48px 20px !important; gap: 32px !important; }
  .email-title              { font-size: 32px !important; }
  .email-form-wrap          { min-width: 0 !important; }
  .email-row                { flex-direction: column !important; gap: 10px !important; }
  .email-input              { width: 100% !important; }
  .email-submit             { width: 100% !important; }

  /* Mood grid */
  .mood-teaser-grid         { grid-template-columns: repeat(2, 1fr) !important;
                              gap: 10px !important; }
  .mood-tile                { padding: 20px 12px !important; font-size: 12px !important; }
  .mood-grid                { grid-template-columns: repeat(2, 1fr) !important; }

  /* Journey */
  .intro-section            { padding: 36px 20px !important; }
  .philosophy-section       { padding: 36px 20px !important; }
  .philosophy-pillars       { gap: 16px !important; }
  .pillar-card              { padding: 20px !important; }
  .sirius-section           { flex-direction: column !important; padding: 40px 20px !important;
                              gap: 24px !important; }
  .atmos-journey-inner      { padding: 48px 20px !important; }
  .atmos-timeline           { flex-wrap: wrap !important; gap: 12px !important; }
  .timeline-node            { min-width: 80px !important; }
  .press-section            { padding: 48px 20px !important; }
  .press-grid               { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Breadcrumb */
  .breadcrumb               { padding: 10px 20px !important; overflow: hidden; white-space: nowrap; }

  /* Spotify */
  .spotify-embed-wrap       { margin: 0 0 36px 0 !important; }
  .release-story            { margin-top: 8px !important; }

  /* Footer */
  footer                    { padding: 40px 20px 32px !important; }
  .footer-links             { flex-wrap: wrap !important; gap: 10px !important;
                              justify-content: center !important; }

  /* Collab banner */
  .collab-banner            { flex-wrap: wrap !important; padding: 24px 20px !important; gap: 12px !important; }

  /* Section title */
  .section-title            { font-size: 26px !important; }
  .intro-heading            { font-size: clamp(26px, 7vw, 38px) !important; }
  .philosophy-title         { font-size: clamp(24px, 6vw, 34px) !important; }
  .story-text               { font-size: 18px !important; line-height: 1.8 !important; }
  .quote-text               { font-size: 19px !important; }

  /* Portrait */
  .portrait-wrap            { max-width: 300px !important; margin: 0 auto !important; }
  .portrait-img             { width: 100% !important; }
}

/* ── NEW EMAIL SECTION (centered design) ────────────────── */
@media (max-width: 600px) {
  .email-section            { padding: 64px 24px !important; }
  .email-title              { font-size: 36px !important; }
  .email-desc               { font-size: 15px !important; }
  .email-input-row          { flex-direction: column !important;
                              border-radius: 3px !important;
                              box-shadow: none !important;
                              max-width: 100% !important; }
  .email-input              { border-right: 1px solid rgba(255,255,255,0.18) !important;
                              border-radius: 3px 3px 0 0 !important;
                              border-bottom: none !important; }
  .email-submit             { border-radius: 0 0 3px 3px !important;
                              padding: 16px !important; }
}