/* ============================================
   Site-wide mobile fixes
   ──────────────────────────────────────────────
   Pragmatic patch file — overrides the worst mobile UX issues
   from the desktop-first base CSS without a risky full refactor.
   Load AFTER tokens/base/components/pages/polish.
   ============================================ */

/* ─── Tighter container gutters on small phones ─── */
@media (max-width: 480px) {
  :root {
    --gutter: 1rem !important;
  }
}

/* ─── HEADER — keep compact on mobile ─── */
@media (max-width: 768px) {
  .site-header {
    padding-block: 0;
  }
  .site-header .container { padding-block: .55rem; }
  .site-header .nav-logo img { height: 30px; }
  .nav-toggle { width: 44px; height: 44px; min-width: 44px; }
}

/* ─── BODY: reserve space for the fixed site-header on inner pages ─── */
/* The .hero pages already reserve their own padding-top. For pages that
   inject <div id="site-header"></div> and put content directly under it
   (course-player, assessment-take, etc.), we need to clear the fixed
   header height on mobile or the content slides under it. */
@media (max-width: 768px) {
  body[data-page="courses"],
  body[data-page="assessment"],
  body[data-page="assessment-take"],
  body[data-page="assessment-result"],
  body[data-page="profile"],
  body[data-page="dashboard"],
  body[data-page="login"],
  body[data-page="signup"],
  body[data-page="consultations"],
  body[data-page="instructors"],
  body[data-page="contact"],
  body[data-page="blog"],
  body[data-page="paths"],
  body[data-page="about"] {
    padding-top: 64px !important;
  }
  /* Assessment-take's sticky progress strip sat under a 64px desktop
     header — match the new mobile header height so it doesn't get hidden */
  .take-progress { top: 56px !important; }
}

/* ─── COURSE-PLAYER MOBILE LAYOUT FIX ─────────────────────────────
   Problems on mobile:
   1. .player-stage uses `display: grid; place-items: center;` — child
      .player-iframe-wrap collapses to content-width instead of stretching,
      so the Bunny iframe appears narrower / offset and looks "truncated".
   2. .player-meta has position:absolute (designed as caption over custom
      video), but the Bunny iframe doesn't host it — so it floats over the
      activity panel header and overlaps "📖 أسئلة الحلقة".
   3. .container-wide (1440px max) inherits desktop padding, leaving the
      video looking off-center.
   Force everything into the normal flow at ≤900px. */
@media (max-width: 900px) {
  /* Container: full width with safe-area-aware symmetric padding.
     iPhone notch insets (safe-area-inset-left/right) can cause the visual
     content to drift toward one side when the page uses logical padding +
     RTL. We explicitly balance both sides and respect the safe area so the
     player-shell sits visually centered. */
  body[data-page="courses"] .container-wide,
  .container-wide {
    max-width: 100% !important;
    padding-inline-start: max(1rem, env(safe-area-inset-right)) !important;
    padding-inline-end: max(1rem, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  /* Shell: single column, full width, no leftover inline padding from desktop */
  .player-shell {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }
  /* Direct children of player-shell should fill the row */
  .player-shell > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Stage: must fully contain the iframe — block layout, no grid centering */
  .player-stage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-radius: .75rem !important;
    background: #000 !important;
    margin: 0 !important;
  }
  /* Kill the green radial overlay on the iframe — we don't need a "press play"
     glow once Bunny's own poster/play UI is showing. */
  .player-stage::before { display: none !important; }

  /* Iframe wrap + iframe: fill the stage exactly */
  .player-iframe-wrap {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    inset: 0 !important;
  }
  #mau-video-iframe,
  .player-iframe-wrap iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    display: block !important;
  }

  /* Meta caption: take it out of absolute positioning and put it under the
     video as a normal block card, with strong specificity to win over
     pages.css `.player-meta { position:absolute; bottom; inset-inline-start }` */
  .player-shell .player-meta,
  .player-meta {
    position: static !important;
    inset: auto !important;
    inset-inline-start: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    margin: 1rem 0 1.25rem !important;
    padding: 1rem 1.1rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: .85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .player-meta h2 {
    font-size: 1.05rem !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
  }
  .player-meta span { color: var(--text-tertiary) !important; }

  /* Hide the desktop "play-btn" overlay if any code left it visible —
     Bunny iframe owns play UX now. */
  .player-stage .play-btn { display: none !important; }

  /* Tabs: let them scroll horizontally instead of wrapping awkwardly */
  .player-shell .filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .65rem !important;
    gap: .4rem !important;
  }
  .player-shell .filters::-webkit-scrollbar { display: none; }
  .player-shell .filter-chip {
    flex-shrink: 0;
    padding: .55rem .85rem !important;
    font-size: .85rem !important;
    min-height: 40px;
    white-space: nowrap;
  }

  /* Watermark: smaller on mobile so it doesn't dominate the frame */
  .player-watermark {
    font-size: .7rem !important;
    padding: .25rem .55rem !important;
    inset-block-start: .5rem !important;
    inset-inline-end: .5rem !important;
  }
}

/* ─── HERO — homepage and similar full-bleed heroes ─── */
@media (max-width: 768px) {
  .hero {
    /* Stop reserving 120px for nav + 100vh height; let it size naturally */
    padding-top: 72px;
    padding-bottom: 2.5rem;
    min-height: auto;
  }
  .hero-grid { gap: 1.75rem; }
  .hero-content { max-width: 100%; }
  .hero-title { font-size: clamp(1.85rem, 8vw, 2.5rem); margin-bottom: 1rem; }
  .hero-quote { font-size: 1rem; margin-bottom: 1.25rem; }
  .hero-cta { gap: .65rem; margin-bottom: 1.75rem; }
  .hero-cta .btn { flex: 1 1 auto; min-height: 48px; justify-content: center; }
  .hero-stats {
    /* Was 3 columns — too cramped on small screens */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.25rem;
  }
  .hero-stats .num { font-size: 1.35rem; }
  .hero-stats .label { font-size: .7rem; }
  .hero-visual {
    min-height: 280px;
    max-height: 360px;
  }
  .hero-orbit { transform: scale(.7); }
  .hero-orbit-2 { transform: scale(.7); }
  .pyramid-wrap { max-width: 220px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-stats > div:nth-child(3) { grid-column: 1 / -1; }
}

/* ─── SECTIONS — tighter padding on mobile ─── */
@media (max-width: 640px) {
  .section { padding-block: 2.5rem; }
  .section-sm { padding-block: 1.75rem; }
  .section-title { font-size: clamp(1.4rem, 5.5vw, 1.85rem); }
  .section-lead { font-size: .95rem; }
}

/* ─── FEATURED COURSE (homepage main block) ─── */
@media (max-width: 768px) {
  .featured-course { padding: 0 !important; border-radius: 1rem; }
  .featured-course-grid { padding: 1.25rem 1rem !important; gap: 1.5rem; }
  .featured-course h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .course-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
    padding: 1rem 0; border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.25rem;
  }
  .course-stats .num { font-size: 1.25rem; }
  .course-stats .lbl { font-size: .7rem; }
  .course-poster {
    aspect-ratio: 16/10 !important;
    max-height: 280px !important;
    min-height: auto !important;
  }
  .course-poster .instructor-photo {
    object-position: center 20% !important;
  }
}

/* ─── COURSE / CARDS GRID ─── */
@media (max-width: 640px) {
  .grid, .grid-2, .grid-3, .grid-4 {
    gap: .85rem;
  }
  .course-card, .path-card, .mentor-card {
    padding: 1rem !important;
  }
  .course-title { font-size: 1.05rem; }
  .course-meta { font-size: .8rem; flex-wrap: wrap; gap: .65rem; }
  .course-footer { gap: .65rem; }
  .course-footer .btn { min-height: 44px; }
}

/* ─── INSTRUCTORS / MENTORS ─── */
@media (max-width: 640px) {
  .mentor-card { text-align: center; }
  .mentor-card.with-photo .avatar { width: 96px !important; height: 96px !important; margin-inline: auto !important; }
  .mentor-card h3 { font-size: 1.1rem; }
  .mentor-card .role { font-size: .85rem; }
  .mentor-card .bio { font-size: .9rem; line-height: 1.65; }
  .mentor-tags { justify-content: center; }
}

/* ─── CONSULTATIONS / BOOKING ─── */
@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .calendar-card { padding: 1rem !important; }
  .calendar { gap: .35rem; }
  .calendar-day { font-size: .78rem; padding: .5rem 0; }
}

/* ─── DASHBOARD ─── */
@media (max-width: 768px) {
  .dashboard-shell { padding: 1rem .85rem !important; }
  .dashboard-side {
    position: static !important;
    height: auto !important;
    border-inline-end: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  .dashboard-side nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  .dashboard-main { padding: 0; }
  .metric-card { padding: 1rem .85rem; }
  .metric-card .metric-value { font-size: 1.5rem; }
  .metric-card .metric-label { font-size: .8rem; }
}

/* ─── COURSE DETAIL HERO ─── */
@media (max-width: 1023px) {
  .course-hero { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .course-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.25rem); }
}

/* ─── COURSE PLAYER ─── */
@media (max-width: 900px) {
  .player-shell { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .episode-list {
    /* Sidebar moves below player on mobile — make it more compact */
    max-height: none !important;
    overflow: visible !important;
  }
  .episode-list-head { padding: 1rem !important; }
}

/* ─── FOOTER ─── */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .footer-brand { grid-column: auto !important; text-align: center; }
  .footer-brand .social-row { justify-content: center; }
  .footer-col { text-align: center; }
  .footer-col h4 { font-size: .82rem; }
  .footer-col ul { align-items: center; }
}

/* ─── TYPOGRAPHY scale on tiny phones ─── */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .hero-title { font-size: 1.75rem !important; }
  .section-title { font-size: 1.35rem; }
}

/* ─── TOUCH TARGETS site-wide ─── */
@media (max-width: 768px) {
  .btn, .filter-chip, .nav-link, .footer-col a, summary {
    min-height: 44px;
  }
  .btn-sm { min-height: 38px; }
}

/* ─── Forms — full-width inputs on mobile ─── */
@media (max-width: 640px) {
  .input, .textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  .field { margin-bottom: 1rem; }
}

/* ─── BLOG ─── */
@media (max-width: 768px) {
  .article-hero { padding: 1.5rem 0 !important; }
  .article-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important; }
  .blog-meta { flex-wrap: wrap; gap: .5rem; font-size: .82rem; }
  article.blog-card, .blog-card { padding: 1rem !important; }
}

/* ─── PRICING ─── */
@media (max-width: 640px) {
  .price-amount { font-size: clamp(2rem, 8vw, 3rem); }
  .price-currency { font-size: 1rem; }
  .price-period { font-size: .85rem; }
}

/* ─── Prevent horizontal scroll universally ─── */
html, body { overflow-x: hidden; }

/* ─── iOS safe area on body bottom for sites with sticky CTAs ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .lp-mobile-cta { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}