/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  nav { padding: 0 24px; grid-template-columns: auto 1fr auto; }
  .nav-left .nav-link:nth-child(n+3) { display: none; }
  .nav-right .btn-nav-sub { display: none; }
  .nav-hamburger { display: flex; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { display: none; }
  .hero-left { padding: 60px 24px; }

  .section { padding: 56px 24px; }

  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-asymm { grid-template-columns: 1fr; }

  .featured-look { grid-column: span 1; grid-template-columns: 1fr; }
  .featured-look .look-thumb { aspect-ratio: 16/9; }
  .featured-look-content { padding: 28px 24px; }

  .celeb-grid { grid-template-columns: repeat(2, 1fr); }

  .nl-section { grid-template-columns: 1fr; padding: 56px 24px; }

  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left,
  .contact-right { padding: 56px 24px; }

  .about-hero { grid-template-columns: 1fr; gap: 32px; padding: 56px 24px; }

  .team-grid { grid-template-columns: 1fr 1fr; }

  .footer-top { grid-template-columns: 1fr 1fr; }

  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-content { padding: 24px; }
  .admin-form-row { grid-template-columns: 1fr; }
  .admin-form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  nav { grid-template-columns: 1fr auto; }
  .nav-logo { text-align: left; font-size: 20px; }
  .nav-left { display: none; }
  .nav-right { gap: 0; }

  .hero-h1 { font-size: 44px; }
  .hero-left { padding: 40px 20px 48px; }

  .section { padding: 48px 20px; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .celeb-grid { grid-template-columns: repeat(2, 1fr); }

  .shop-grid { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  .search-overlay { padding: 80px 24px 40px; }
  .search-close { right: 24px; top: 24px; }

  .about-hero { grid-template-columns: 1fr; }

  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-header { padding: 0 20px; }
  .admin-content { padding: 20px; }

  .article-wrap { padding: 40px 20px; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 36px; }
  .hero-actions { flex-direction: column; }

  .celeb-grid { grid-template-columns: 1fr; }

  .grid-4 { grid-template-columns: 1fr; }
  .quiz-card-row { gap: 8px; }
  .quiz-card { width: 140px; }

  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-search-input { min-width: auto; }

  .nl-section { padding: 48px 20px; gap: 40px; }
}

/* ============================================================
   Phase 19: Mobile polish — phones (<= 600px) and small phones (<= 400px).
   Industry-standard mobile editorial: stacked layouts, tighter padding,
   larger tap targets, no horizontal scroll, smaller hero blocks.
   ============================================================ */

@media (max-width: 600px) {
  /* Container — tighter side padding */
  .container { padding: 0 16px; }

  /* HOMEPAGE HERO — smaller, leaner */
  .hero { padding: 32px 0 24px; }
  .hero-left { padding: 32px 16px 32px; }
  .hero-h1 { font-size: 38px; line-height: 1.05; }
  .hero-sub { font-size: 14px; line-height: 1.55; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions a { width: 100%; text-align: center; }
  .hero-issue { font-size: 10px; }
  .hero-number { font-size: 60px; }
  .hero-img-main { font-size: 80px; }

  /* SECTIONS — tighter */
  .section { padding: 40px 16px; }
  .section-title { font-size: 26px; }
  .section-label { font-size: 10px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .see-all-link { font-size: 12px; }

  /* GRIDS — single column on phones */
  .grid-3, .grid-2, .grid-4, .grid-asymm { grid-template-columns: 1fr !important; gap: 16px; }
  .related-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .celeb-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

  /* FEATURED CARD — stack and trim padding */
  .featured-look { grid-template-columns: 1fr !important; }
  .featured-look .look-thumb { aspect-ratio: 4/5; max-height: 380px; }
  .featured-look-content { padding: 24px 16px; }
  .featured-h { font-size: 26px; line-height: 1.1; }
  .featured-sub { font-size: 14px; }

  /* LOOK CARDS — taller portrait but capped */
  .look-thumb { max-height: 360px; }
  .look-card .look-body { padding: 14px 16px 18px; }
  .look-title { font-size: 16px; }
  .look-celeb { font-size: 9px; }

  /* GUIDE CARDS */
  .guide-title { font-size: 17px; }
  .guide-body { padding: 14px 16px; }

  /* CELEB DIRECTORY CARDS — 2 cols, tighter */
  .celeb-img { aspect-ratio: 1/1; }
  .celeb-img-inner { aspect-ratio: 1/1; }
  .celeb-body { padding: 10px 12px; }
  .celeb-name { font-size: 14px; }
  .celeb-looks { font-size: 11px; }

  /* MARQUEE — smaller text */
  .marquee-bar { font-size: 10px !important; padding: 8px 0 !important; }
  .marquee-track span { font-size: 10px !important; }

  /* TMDB TRENDING STRIP — keep round avatars compact */
  .tmdb-trending { padding: 40px 0; }
  .tmdb-trending__inner { padding: 0 16px; }
  .tmdb-trending__title { font-size: 22px; }
  .tmdb-trending__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tmdb-trending__name { font-size: 12px; }

  /* ACROSS THE WEB STRIP */
  .across-web { padding: 40px 0; }
  .across-web__inner { padding: 0 16px; }
  .across-web__title { font-size: 22px; }
  .across-web__grid { grid-template-columns: 1fr; }
  .across-web__h { font-size: 14px; }

  /* NEWSLETTER STRIP */
  .nl-section { padding: 40px 16px; gap: 24px; }
  .nl-h { font-size: 34px !important; line-height: 1.05; }
  .nl-sub { font-size: 14px; }

  /* ARTICLE PAGE */
  .article-wrap { padding: 32px 16px 48px !important; }
  .art-h1 { font-size: 32px !important; line-height: 1.1; }
  .art-meta { flex-wrap: wrap; gap: 12px; }
  .art-date { margin-left: 0; }
  .art-body { font-size: 16px; line-height: 1.7; }
  .art-body h2 { font-size: 22px !important; margin: 28px 0 10px !important; }
  .editor-take { padding: 18px 18px; margin: 24px 0; }
  .editor-take p { font-size: 16px; }
  .style-notes { padding: 18px 18px; }
  .style-notes li { font-size: 14px; }

  /* CELEBRITY PROFILE PAGE */
  .celeb-page { padding: 32px 16px 48px; }
  .celeb-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  .celeb-hero__img { width: 160px; height: 160px; margin: 0 auto; }
  .celeb-hero__info { text-align: center; }
  .celeb-hero__name { font-size: 32px !important; }
  .celeb-hero__role { font-size: 12px; }
  .celeb-hero__bio { font-size: 15px; line-height: 1.6; max-width: 100%; }
  .celeb-hero__facts { font-size: 11px; }
  .celeb-articles__heading, .celeb-films__heading { font-size: 22px; }
  .celeb-films__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .celeb-film__title { font-size: 13px; }
  .celeb-film__meta { font-size: 11px; }

  /* CATEGORY PAGE */
  #category-hero { padding: 8px 0 0 !important; }
  #category-title { font-size: 36px !important; }
  #category-sub { font-size: 14px !important; }

  /* FOOTER */
  .footer-top, .footer-cols { grid-template-columns: 1fr !important; gap: 24px; }
  .footer-tagline { font-size: 13px; text-align: center; }
  .tmdb-attribution { font-size: 9px; padding: 12px 16px 16px; }

  /* AD SLOTS — hide sidebar (no room), keep header/footer */
  .ad-slot--sidebar, .ad-slot--sidebar-left { display: none !important; }
  .ad-slot--header, .ad-slot--footer { max-width: 100%; }

  /* ABOUT PAGE */
  .about-h { font-size: 40px !important; line-height: 1.05; }

  /* CONTACT */
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-h { font-size: 40px !important; }
}

/* Small phones */
@media (max-width: 400px) {
  .hero-h1 { font-size: 32px; }
  .art-h1 { font-size: 26px !important; }
  .celeb-hero__name { font-size: 28px !important; }
  .tmdb-trending__grid { grid-template-columns: repeat(2, 1fr); }
  .nav-logo { font-size: 18px !important; }
}

/* Touch-target safety — every clickable thing ≥ 40px tall on mobile */
@media (max-width: 768px) {
  .nav-link, .btn-nav-sub, .btn-primary, .btn-primary-wh, .btn-ghost-wh,
  .btn-dark, .newsletter__btn, .contact__btn, .a-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .look-overlay-btn, .guide-read { padding: 10px 16px !important; }
}