/* =========================================================================
   Ric Steel — Responsive Styles
   Mobile-first: one-column cards on small screens, generous touch targets
   ========================================================================= */

/* Desktop defaults are in components.css; here we refine per breakpoint */

/* -------------------------------------------------------------------------
   ≤ 1024px — Tablets
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .talk-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
  .finder-results {
    grid-template-columns: repeat(2, 1fr);
  }
  .book-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

/* -------------------------------------------------------------------------
   ≤ 860px — Small tablets & large phones
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    background: rgba(7, 15, 28, 0.98);
    border-bottom: 1px solid var(--c-navy-border);
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-4) var(--s-6) var(--s-6);
    gap: 0;
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-base), opacity var(--t-base), visibility var(--t-base);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .site-nav a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--c-navy-border);
    font-size: var(--fs-base);
  }
  .site-nav a::after { display: none; }
  .site-header .btn--primary {
    display: none;
  }
  .site-nav .btn--primary {
    display: inline-flex;
    margin-top: var(--s-4);
  }
  .talk-hero__grid {
    grid-template-columns: 1fr;
  }
  .talk-hero__poster {
    max-width: 380px;
    margin: 0 auto;
  }
  .feature-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .feature-cols > * { min-width: 0; max-width: 100%; }
  .meta-panel { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   ≤ 768px — Phones
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body {
    padding-bottom: 74px; /* clearance for sticky mobile strip */
  }
  .hero {
    padding: var(--s-12) 0 var(--s-10);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  .hero__content { order: 1; min-width: 0; max-width: 100%; }
  .hero__portrait {
    order: 2;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
  }
  .hero__portrait-frame {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }
  .hero__portrait-badge {
    position: static;
    margin-top: var(--s-3);
    width: 100%;
    box-sizing: border-box;
  }
  .hero h1 { font-size: clamp(2rem, 7.5vw, 2.7rem); }
  .hero__intro { font-size: 1.05rem; }
  .section { padding: var(--s-12) 0; }

  /* One-column cards on mobile */
  .talk-grid,
  .finder-results,
  .book-grid {
    grid-template-columns: 1fr;
  }
  .talk-card__poster img {
    max-height: 440px;
  }
  .hero__portrait-frame img {
    max-height: 420px;
  }
  .talk-hero__poster img {
    max-height: 460px;
  }
  .book-card__cover img {
    max-height: 380px;
  }
  .exp-strip__inner {
    flex-direction: column;
    gap: var(--s-3);
  }
  .exp-strip__sep { display: none; }
  .exp-strip__item strong { display: inline; margin-right: 6px; }

  .finder-panel { padding: var(--s-8) var(--s-5); }
  .finder-choices { gap: var(--s-2); }
  .choice-btn {
    width: 100%;
    text-align: center;
  }
  .finder-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .urgent-panel { padding: var(--s-8) var(--s-5); }
  .urgent-panel__phone { font-size: 1.3rem; }

  .inquiry-form { padding: var(--s-6) var(--s-5); overflow: hidden; }
  .form-grid { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; }
  .form-grid > * { min-width: 0; max-width: 100%; width: 100%; }
  .form-field { min-width: 0; width: 100%; max-width: 100%; }
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem; /* prevents iOS zoom on focus */
    padding: 0.95rem 1rem;
  }
  .btn {
    min-height: 48px; /* generous touch target */
  }
  .choice-group label {
    padding: 6px 0;
  }
  .music-player {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: var(--s-3);
    padding: var(--s-4);
  }
  .music-player__meta { grid-column: 2; }
  .music-player__controls {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .music-player__progress { min-width: 120px; }
  .music-player__volwrap { width: 100%; justify-content: flex-end; }
  .charity-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--s-6) var(--s-4);
  }
  .charity-card__artworks {
    grid-template-columns: 1fr;
  }
  .charity-card__art {
    max-width: 260px;
    margin: 0 auto;
  }

  .site-footer .container {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  .mobile-strip { display: block; }

  .lightbox__close {
    top: var(--s-3);
    right: var(--s-3);
  }
}

/* -------------------------------------------------------------------------
   ≤ 480px — Small phones
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 var(--s-4); }
  .btn-group { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .btn-group .btn { width: 100%; }
  .btn { padding: 0.8rem 1.15rem; font-size: 0.82rem; }
  .btn--lg { font-size: 0.88rem; padding: 0.85rem 1.25rem; }
  .hero::before { display: none; }
  .hero { padding: var(--s-14) 0 var(--s-10); }
  .hero h1 { font-size: clamp(1.85rem, 5.5vw, 2.5rem); }
  .hero__intro { font-size: 1.02rem; }
  .hero__portrait { max-width: 100%; overflow: hidden; }
  .hero__portrait-frame {
    max-width: 360px;
    margin: 0 auto;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 151, 54, 0.35);
  }
  .hero__portrait-badge { padding: var(--s-3) var(--s-3); font-size: 0.8rem; }
  .hero__portrait-badge strong { font-size: 1rem; }
  .about-portrait { max-width: 100%; }
  .finder-panel { padding: var(--s-6) var(--s-4); }
  .urgent-panel { padding: var(--s-6) var(--s-4); }
  .urgent-panel h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); }
  .urgent-panel__sub { font-size: 1rem; }
  .urgent-panel__phone { font-size: 1.25rem; }
  .inquiry-form { padding: var(--s-6) var(--s-3); overflow: hidden; }
  .brand__name { font-size: 1.3rem; }
  .brand__subtitle { font-size: 0.6rem; letter-spacing: 0.16em; }
}