/* ===== MOBILE RESPONSIVE OVERHAUL ===== */
/* Centralized mobile-first overrides — loads AFTER all page/article stylesheets */
/* Created: 2026-05-24 — Fixes: iframe embeds, portrait crops, infographics, nav, forms */

/* ============================================ */
/* A) YouTube / Video Embeds — Full-width fix   */
/* ============================================ */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  background: #0a0e1f;
  border: 1px solid rgba(126,200,232,.12);
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .video-wrapper {
    padding-bottom: 56.25%;
    height: 0;
  }
}

/* Homepage hero iframe */
.hero-portrait iframe,
.hero-portrait .video-wrapper iframe {
  border-radius: 14px;
}

/* ============================================ */
/* B) Portrait Photos — Keep faces in frame     */
/* ============================================ */
/* Already handled in infographics.css but reinforce here for all contexts */
.ig-figure img,
.editorial-photo img,
figure img[src*="boss-rdr"],
figure img[src*="reymond"],
figure img[src*="keynote"],
figure img[src*="godfathers"],
figure img[src*="portrait"] {
  object-position: center 20%;
}

/* ============================================ */
/* C) Infographics — Responsive fixes           */
/* ============================================ */
@media (max-width: 768px) {
  /* Comparison cards: stack columns */
  .ig-compare-grid {
    grid-template-columns: 1fr;
  }
  .ig-compare-col:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* Stats row: 2-col on tablet */
  .ig-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Pull-quote narrower margins */
  .ig-pullquote {
    margin-left: -8px;
    margin-right: -8px;
    padding: 32px 16px;
  }

  /* Timeline tighter */
  .ig-timeline {
    padding-left: 20px;
  }
  .ig-tl-step {
    padding-left: 20px;
  }

  /* Video wrapper */
  .video-wrapper {
    margin: 1rem 0;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  /* Stats: single column on phone */
  .ig-stats {
    grid-template-columns: 1fr;
  }

  /* Pull-quote even tighter */
  .ig-pullquote .pq-text {
    font-size: clamp(18px, 5vw, 24px);
  }

  /* Cycle diagram compact */
  .ig-cycle-ring {
    gap: 4px;
  }
  .ig-cycle-step {
    padding: 6px 4px;
  }
  .ig-cycle-step .step-icon {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

/* ============================================ */
/* D) Article Body — Mobile typography + layout */
/* ============================================ */
@media (max-width: 768px) {
  /* Ensure body text is readable */
  .article-body p,
  .article-body li,
  .content p,
  .content li {
    font-size: 15px;
    line-height: 1.7;
  }

  /* Headings scale down */
  .article-body h2,
  .content h2 {
    font-size: clamp(22px, 5vw, 32px);
  }

  /* Tables scroll horizontally */
  .article-body table,
  .content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Summary box responsive */
  .summary-box {
    padding: 20px 16px;
  }

  /* Block quotes */
  .article-body blockquote,
  .content blockquote {
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* ============================================ */
/* E) Navigation — Hamburger + mobile overlay   */
/* ============================================ */
/* Ensure hamburger overlay is above everything */
.mob-menu {
  z-index: 1000;
}
.mob-backdrop {
  z-index: 999;
}

@media (max-width: 768px) {
  /* Ensure nav links have adequate tap targets */
  .mob-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 16px;
  }
}

/* ============================================ */
/* F) Featured Book Section — Mobile stack      */
/* ============================================ */
@media (max-width: 880px) {
  .book-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .book-cover--real {
    padding: 16px 10px;
    max-width: 300px;
    margin: 0 auto;
  }
  .book-3d {
    max-height: 360px;
  }
  .book .book-btns {
    justify-content: center;
  }
  .bk-subhead {
    font-size: 14px;
  }
}

/* ============================================ */
/* G) Cards Grid — Article cards responsive     */
/* ============================================ */
@media (max-width: 639px) {
  .art-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .art-cover {
    height: 160px;
  }
  .art-body h3 {
    font-size: 16px;
  }
}

/* ============================================ */
/* H) Forms — Tap targets + mobile layout       */
/* ============================================ */
@media (max-width: 639px) {
  .news .field {
    flex-direction: column;
  }
  .news input,
  .news textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  .btn-teal,
  .btn-tiktok,
  .btn-gold,
  .btn-line {
    min-height: 44px;
    font-size: 14px;
    padding: 14px 24px;
  }
}

/* ============================================ */
/* I) Footer — Stack on mobile                  */
/* ============================================ */
@media (max-width: 639px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================ */
/* J) General — Prevent horizontal overflow     */
/* ============================================ */
html, body {
  overflow-x: hidden;
}
img, video, iframe, embed, object {
  max-width: 100%;
}

/* ============================================ */
/* K) Exclusive page — Mobile specific          */
/* ============================================ */
@media (max-width: 639px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
  .ex-hero h1 {
    font-size: clamp(28px, 7vw, 48px);
  }
  .editorial-photo img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center top;
  }
}

/* ============================================ */
/* L) Platform stats — Mobile friendly          */
/* ============================================ */
@media (max-width: 768px) {
  .plat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .plat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================ */
/* M) Engagement pills — Mobile positioning     */
/* ============================================ */
@media (max-width: 768px) {
  .engagement-pills,
  .eng-pills {
    position: relative !important;
    top: auto !important;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
  }
}

/* ============================================ */
/* N) Hero banner — Mobile aspect ratio         */
/* ============================================ */
@media (max-width: 768px) {
  .hero-banner-img {
    aspect-ratio: 4/3;
    object-position: center 20%;
  }
}
@media (max-width: 480px) {
  .hero-banner-img {
    aspect-ratio: 1/1;
    object-position: center top;
  }
}