/* =====================================================================
   Ria Academy — Global Mobile Responsive Safety Net
   ---------------------------------------------------------------------
   Loaded LAST on every page so it has the final say on mobile layout.
   Goal: eliminate horizontal overflow, fluid media, consistent spacing,
   readable typography and comfortable touch targets across all screens,
   without altering the desktop design.
   Breakpoints follow the rest of the codebase: 991 / 768 / 480 / 374.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Box model + horizontal-overflow guard (all viewports)
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

/* `body` must NOT become its own scroll container. `overflow-x: hidden` forces
   `overflow-y` to compute to `auto`, turning body into a second scroller — in
   RTL this rendered an extra scrollbar on the opposite side that blocked page
   scrolling. `overflow-x: clip` clips the same horizontal overflow WITHOUT
   creating a scroll container. `hidden` is kept first as a fallback for old
   browsers that don't support `clip`. */
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

/* Flex/grid children refuse to shrink below content by default, which is the
   #1 cause of horizontal overflow. Allowing them to shrink fixes it safely. */
img,
svg,
video,
canvas,
iframe,
embed,
object,
table,
pre,
code,
blockquote {
  max-width: 100%;
}

/* Content images scale with their box. Element-level selector (low
   specificity) so any class-based sizing in other files still wins. */
img {
  height: auto;
}

/* Long words / URLs / unbroken strings should wrap instead of pushing width. */
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Media that should never exceed the viewport even with negative margins. */
iframe,
video {
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------
   2. Tablet & below (<= 991px)
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Let common flex/grid items shrink so siblings don't get pushed off-screen */
  .container,
  section,
  main,
  header,
  footer {
    min-width: 0;
  }

  /* Two-column "split" layouts -> stack */
  .instructors-header {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 3-column stat/community grids -> 2 columns at tablet */
  .about-stats-modern,
  .community-grid-pro {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------------------------------------------------------------------
   3. Phones (<= 768px)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 18px;
  }

  /* Horizontal rhythm: consistent gutters for every section/container */
  .container,
  .container-fluid,
  section,
  .section {
    padding-left: var(--mobile-padding, 18px) !important;
    padding-right: var(--mobile-padding, 18px) !important;
  }

  /* Collapse ALL remaining multi-column grids to a single column.
     auto-fit/minmax grids already reflow; these are the fixed-column ones. */
  .courses-grid,
  .courses-grid-pro,
  .free-courses-grid,
  .instructors-header,
  .about-stats-modern,
  .community-grid-pro,
  .contributors-modern-grid,
  .stats-grid,
  .features-grid,
  .programs-grid,
  .offers-grid,
  .feed-grid,
  .testimonials-grid,
  .footer-content {
    grid-template-columns: 1fr !important;
  }

  /* Cards never exceed their column width */
  .course-card,
  .free-card,
  .program-card-pro,
  .offer-card-modern,
  .kpi-card,
  .stat-item,
  .stat-item-pro,
  .spotlight-item,
  .feed-content,
  .testimonial-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fluid, readable headings (don't override if a more specific rule exists) */
  h1 {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    line-height: 1.2;
  }

  h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.25;
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    line-height: 1.3;
  }

  /* Body copy stays comfortably readable (only nudges the default, never
     shrinks intentionally-small UI text like pills/badges). */
  p {
    font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    line-height: 1.6;
  }

  /* Button / interactive groups stack and go full width for easy tapping */
  .hero-actions,
  .btn-group,
  .cta-buttons,
  .action-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .hero-actions .btn,
  .cta-buttons .btn,
  .hero-cta-button {
    width: 100% !important;
    max-width: 360px;
    margin-inline: auto;
  }

  /* Comfortable touch targets (WCAG ~44px) */
  button,
  .btn,
  a.btn,
  .nav-link,
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px;
  }

  /* Prevent iOS zoom-on-focus by keeping form fields >= 16px */
  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Tables scroll horizontally inside their own box instead of the page */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals / popups never spill past the screen (keep their own width) */
  .modal,
  .modal-content,
  .popup,
  .dialog {
    max-width: 95vw !important;
  }
}

/* ---------------------------------------------------------------------
   4. Small phones (<= 480px)
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --mobile-padding: 14px;
  }

  /* Tighten remaining 2-up grids that were left at tablet */
  .about-stats-modern,
  .community-grid-pro {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Partner logos: 2 per row, centered, never overflow */
  .partners-grid,
  .partner-logos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    align-items: center;
    justify-items: center;
  }

  .partner-logo {
    max-width: 100%;
    height: auto;
  }

  h1 {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
  }
}

/* ---------------------------------------------------------------------
   5. Very small phones (<= 374px) — last-resort safety
   --------------------------------------------------------------------- */
@media (max-width: 374px) {
  :root {
    --mobile-padding: 12px;
  }

  .partners-grid,
  .partner-logos {
    grid-template-columns: 1fr !important;
  }
}