/* ============================================================
   mobile-polish.css  —  shared mobile UX + perf (v4, 2026-05-29)
   Smoother typography, motion, touch targets, spacing, and
   image rendering on phones and small tablets, plus CLS and
   content-visibility wins for long pages.
   Safe to include on every page.
   ============================================================ */

/* iOS / Safari rendering polish (all viewports) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

a, button, [role="button"], .btn, .support-option, .video-card, .sponsor-card, .pitch18-method, .tier-pick a, .service-card {
  -webkit-tap-highlight-color: rgba(200,133,42,.16);
  touch-action: manipulation;
}

img, video, picture, svg, iframe { max-width: 100%; height: auto; }
iframe { display: block; }

img[loading="lazy"] { opacity: 0; transition: opacity .35s ease; }
img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) { opacity: 1; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

/* ===== Mobile <=768px ===== */
@media (max-width: 768px) {
  body { font-size: clamp(15.5px, 4.2vw, 17px); line-height: 1.6; }
  h1, .h1 { font-size: clamp(1.9rem, 7.4vw, 2.6rem) !important; line-height: 1.15 !important; }
  h2, .h2, .section-title { font-size: clamp(1.55rem, 6vw, 2.15rem) !important; line-height: 1.22 !important; }
  h3, .h3 { font-size: clamp(1.2rem, 5vw, 1.55rem) !important; line-height: 1.3 !important; }
  h4, .h4 { font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important; }
  p { margin-bottom: .9em; }

  .support-option, .pitch18-method, .nav a, nav a, .top-bar a, .btn, .btn-outline,
  .tier-pick a, .service-card, .video-card, .sponsor-card { min-height: 44px !important; }
  .support-option, .pitch18-method { display: flex; align-items: center; }

  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"], input[type="date"],
  textarea, select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 11px 13px;
    box-sizing: border-box;
    border-radius: 6px;
  }
  textarea { min-height: 110px; line-height: 1.5; }
  select { padding-right: 32px; }

  button, .btn, .btn-outline, input[type="submit"], input[type="button"] {
    min-height: 46px;
    padding: 13px 18px;
    font-size: 16px;
    border-radius: 6px;
    transition: transform .12s ease, box-shadow .18s ease, background-color .15s ease;
  }
  button:active, .btn:active, .btn-outline:active,
  input[type="submit"]:active, input[type="button"]:active,
  .support-option:active, .tier-pick a:active { transform: scale(.97); }

  .support-options { gap: .6rem !important; }
  .support-option { padding: .9rem 1rem !important; border-radius: 6px !important; }
  .support-option-text strong { display: block; margin-bottom: .12rem; }

  .video-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .video-card { min-width: 0; border-radius: 8px; overflow: hidden; }
  .video-card iframe { border-radius: 8px 8px 0 0; }

  .sponsor-grid { grid-template-columns: 1fr !important; gap: .9rem !important; }
  .sponsor-card { padding: 1.05rem !important; border-radius: 8px !important; }

  .services-grid, .service-cards { grid-template-columns: 1fr !important; gap: 1rem !important; }

  section, .section, .tier { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .section-inner { padding-left: 0 !important; padding-right: 0 !important; }

  .hero { padding-top: 2.5rem !important; padding-bottom: 2rem !important; }
  .hero-cta, .hero-actions { gap: .65rem !important; flex-wrap: wrap !important; justify-content: center !important; }
  .hero-cta a, .hero-actions a, .hero .btn, .hero .btn-outline {
    width: 100%; max-width: 320px; text-align: center;
  }

  iframe[src*="youtube"], iframe[src*="spotify"], iframe[src*="soundcloud"],
  iframe[src*="vimeo"] { width: 100% !important; }
  iframe[src*="spotify"][height="80"], iframe[src*="spotify"][height="152"] { height: 152px !important; }

  .img-grid, .photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .55rem !important; }
  .img-grid img, .photo-grid img { border-radius: 6px; }

  .top-bar { padding: .7rem 1rem !important; gap: .8rem !important; }
  .top-bar-links { gap: .9rem !important; row-gap: .5rem !important; }
  .top-bar-links a { padding: .25rem .15rem; }

  footer { padding: 1.3rem 1rem !important; font-size: .85rem !important; line-height: 1.6; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  body { padding-top: env(safe-area-inset-top, 0); }
}

/* ===== <=480px ===== */
@media (max-width: 480px) {
  h1, .h1 { font-size: clamp(1.65rem, 8vw, 2.2rem) !important; }
  h2, .h2, .section-title { font-size: clamp(1.35rem, 6.4vw, 1.85rem) !important; }
  .tier-pick, .sponsor-grid, .photo-grid.tight, .services-grid { grid-template-columns: 1fr !important; }
  .scroll-hint, .scroll-indicator { display: none !important; }
  section, .section, .tier { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .cta-row a, .cta-group a, .hero-cta a, .hero-actions a { width: 100% !important; max-width: 320px; margin: 0 auto; }
}

/* ===== Landscape phones ===== */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: 60vh !important; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  h1, .h1 { font-size: clamp(1.65rem, 5vw, 2.2rem) !important; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible, .support-option:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #C8852A;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== CLS prevention ===== */
iframe[src*="youtube"], iframe[src*="vimeo"] { aspect-ratio: 16 / 9; width: 100%; }
iframe[src*="spotify"] { aspect-ratio: auto; }
iframe[src*="soundcloud"] { aspect-ratio: auto; min-height: 166px; }

.watch-thumb, .yt-thumb, .video-card iframe { aspect-ratio: 16 / 9; width: 100%; background: #0a0a0a; }
.watch-thumb img, .yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

img[src*="jeremy-bio"], img[src*="jeremy-hero"], img[src*="band1.jpg"], img[src*="band2.jpg"] {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

img { image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* ===== Print ===== */
@media print {
  .top-bar, nav, .bh-corner, .scroll-hint, button, .btn, .btn-outline { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  img, video, iframe { max-width: 100%; page-break-inside: avoid; }
}

/* ===== Content-visibility for long pages (v4) ===== */
.video-grid, .photo-strip, .sponsor-grid, .img-grid,
details, .lib-group, .photo-grid {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}
@media print {
  .video-grid, .photo-strip, .sponsor-grid, .img-grid,
  details, .lib-group, .photo-grid { content-visibility: visible !important; }
}

/* ===== Back-to-top button styling (injected by site-polish.js) ===== */
#siteBackToTop {
  -webkit-tap-highlight-color: rgba(255,255,255,.18);
  font-family: var(--sans, system-ui, sans-serif);
}
#siteBackToTop:hover {
  background: rgba(61,43,31,1) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}
#siteBackToTop:active { transform: scale(.94) !important; }
@media (max-width: 480px) {
  #siteBackToTop { right: 12px !important; bottom: 12px !important; }
}

#siteSkipLink:focus { outline: 2px solid #fff; outline-offset: 2px; }