/* V26 — mobile alignment system across the full Blythe Vermilion site
   Rule: loose page copy is centered; copy inside outlined/card containers stays left aligned. */
@media (max-width: 767px) {
  html { scroll-padding-top: 76px; }
  body { overflow-x: hidden; }

  /* Consistent mobile breathing room */
  .container { width: min(100% - 30px, var(--max)); }
  .section { padding-top: 56px; padding-bottom: 56px; }

  /* Loose copy = centered */
  .home-section-intro,
  .home-heading-row > div,
  .home-band-copy,
  .journal-copy,
  .tarot-whisper-grid > div,
  .support-band-grid > div:first-child,
  .newsletter > .container > .eyebrow,
  .newsletter > .container > h2,
  .newsletter > .container > p,
  .music-section-heading,
  .collaboration-copy,
  .release-feature-copy,
  .music-story-copy,
  .music-newsletter > .container > .eyebrow,
  .music-newsletter > .container > h2,
  .music-newsletter > .container > p,
  .mv-countdown-grid > div:first-child,
  .mv-heading-row > div,
  .mv-bundle-heading,
  .mv-addon-copy,
  .mv-archive-heading > div,
  .mv-archive-heading > p,
  .mv-early-access > .container > .eyebrow,
  .mv-early-access > .container > h2,
  .mv-early-access > .container > p,
  .journal-intro-grid,
  .journal-feature-copy,
  .journal-list-heading,
  .journal-letter-grid > div:first-child,
  .support-options-grid > div:first-child,
  .tarot-countdown-grid > div:first-child,
  .tarot-story-copy,
  .tarot-heading-row,
  .edition-heading,
  .tarot-add-on-copy,
  .reading-grid > div:first-child,
  .support-copy,
  .tarot-newsletter > .container > .eyebrow,
  .tarot-newsletter > .container > h2,
  .tarot-newsletter > .container > p {
    text-align: center !important;
  }

  /* Center loose paragraphs and links naturally */
  .home-section-intro p,
  .home-heading-row > div p,
  .home-band-copy p,
  .journal-copy p,
  .tarot-whisper-grid > div p,
  .support-band-grid > div:first-child p,
  .music-section-heading p,
  .collaboration-copy > p,
  .release-feature-copy > p,
  .music-story-copy > p,
  .mv-countdown-grid > div:first-child p,
  .mv-heading-row > div p,
  .mv-bundle-heading p,
  .mv-addon-copy > p,
  .journal-intro-grid p,
  .journal-feature-copy p,
  .journal-list-heading p,
  .journal-letter-grid > div:first-child p,
  .support-options-grid > div:first-child p,
  .tarot-countdown-grid > div:first-child p,
  .tarot-story-copy p,
  .tarot-heading-row p,
  .edition-heading p,
  .tarot-add-on-copy > p,
  .reading-grid > div:first-child p,
  .support-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Loose CTAs centered */
  .home-section-intro .actions,
  .home-band-copy .btn,
  .journal-copy .btn,
  .journal-feature-copy .text-link,
  .collaboration-copy .actions,
  .release-feature-copy .actions,
  .music-story-copy .btn,
  .tarot-story-copy .btn {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Outlined / contained components stay left aligned for readability */
  .drop-note,
  .product-preview,
  .video-card,
  .support-band-card,
  .signup-card,
  .track-list-card,
  .collaboration-grid,
  .mv-countdown-card,
  .mv-product-card,
  .mv-bundle-card,
  .mv-offer-box,
  .mv-archive-card,
  .journal-card,
  .support-box,
  .tarot-countdown-card,
  .tarot-preview-card,
  .edition-card,
  .tarot-offer-box,
  .reading-card,
  .support-list,
  .support-list > div {
    text-align: left !important;
  }

  /* Buttons and controls feel intentional on phones */
  .btn { min-height: 50px; }
  .signup input, .signup button { min-height: 50px; }

  /* Mobile heroes: keep text readable and faces/images visible */
  .hero-home .hero-content,
  .music-feature-content,
  .journal-hero-copy,
  .support-hero-copy {
    text-align: center !important;
  }
  .hero-home .hero-content p,
  .music-feature-content p,
  .journal-hero-copy p,
  .support-hero-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-home .actions,
  .music-feature-content .actions {
    justify-content: center !important;
  }

  /* Tarot hero remains lower so headline does not cover Blythe's face */
  .tarot-hero-content {
    text-align: center !important;
    padding-top: 50vh !important;
  }
  .tarot-hero-content h1,
  .tarot-hero-content > p:not(.eyebrow),
  .tarot-date-card,
  .tarot-hero-content .actions {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tarot-hero-content h1 { max-width: 92% !important; }
  .tarot-hero-content > p:not(.eyebrow) { max-width: 92% !important; }
  .tarot-date-card { max-width: 92% !important; text-align: left !important; }
  .tarot-hero-content .actions { width: min(92%, 360px) !important; }

  /* Footer is calmer and centered on mobile */
  .footer-row { text-align: center; align-items: center; }
  .socials { justify-content: center; }
}

@media (max-width: 390px) {
  .container { width: min(100% - 24px, var(--max)); }
  .tarot-hero-content h1 { font-size: clamp(2.75rem, 12vw, 3.8rem) !important; }
}

/* V27.3 — unified mobile navigation panel */
@media (max-width: 767px) {
  .site-header .nav-links {
    background: #ede5da !important;
    color: #17120f !important;
    border: 1px solid rgba(169, 104, 60, .42) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
  }
  .site-header .nav-links a {
    color: #17120f !important;
    opacity: .78 !important;
    width: 100%;
  }
  .site-header .nav-links a:hover,
  .site-header .nav-links a[aria-current="page"] {
    color: #a9683c !important;
    opacity: 1 !important;
    font-weight: 800 !important;
  }
}