/* ============================================
   TESS GROUP — Mobile Enhancement Stylesheet
   Improves readability and usability on phones
   and tablets. Does NOT override desktop layout.
   ============================================ */

/* ── TABLETS (max-width: 1024px) ─────────────── */
@media (max-width: 1024px) {
  /* Programme page covers/heroes */
  .cover,
  .hero {
    padding: 60px 24px 40px !important;
  }

  /* Two-column CTA sections → stack */
  .cta-left,
  .cta-right {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── PHONES (max-width: 768px) ────────────────── */
@media (max-width: 768px) {

  /* === TYPOGRAPHY === */
  .cover h1,
  .page h1,
  .hero h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
  }

  h2, .section-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 17px !important;
  }

  p, li, td {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* === LAYOUT — PROGRAMME PAGES === */
  .page,
  .brochure,
  .content {
    padding: 0 !important;
  }

  .cover,
  .hero {
    padding: 50px 18px 30px !important;
    min-height: auto !important;
  }

  /* Sections inside programme pages */
  .page > div,
  .page > section,
  .brochure > div,
  .brochure > section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* === GRIDS → SINGLE COLUMN === */
  .modules-grid,
  .module-grid,
  .qual-grid,
  .dept-grid,
  .usp-grid,
  .stat-grid,
  .timeline-grid,
  .grid,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Two-column layouts → stack */
  .two-col,
  .cta-section > div,
  .why-choose,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex wrapping */
  .hero-stats,
  .badge-row,
  .trust-badges,
  .cta-bottom-left,
  [class*="badges"],
  [class*="stats"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* === TABLES === */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }

  th, td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* === CTA SECTIONS === */
  .cta-box,
  .cta-section {
    padding: 24px 18px !important;
  }

  .cta-box h2,
  .cta-box h3 {
    font-size: 22px !important;
  }

  .cta-button,
  .cta-btn,
  [class*="cta-btn"],
  [class*="cta-button"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  /* === TRUST BADGES AT BOTTOM === */
  .cta-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .cta-bottom-left {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .trust-badge {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  /* === MODULE CARDS === */
  .module-card,
  .qual-card,
  [class*="module"],
  [class*="card"] {
    padding: 14px !important;
  }

  /* === USP LISTS === */
  .usp-list li {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .usp-icon {
    font-size: 28px !important;
  }

  /* === IMAGES === */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === RELATED PROGRAMMES === */
  .related-programmes {
    padding: 24px 18px !important;
  }

  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* === NAVIGATION (if visible on mobile) === */
  .nav-links {
    display: none !important;
  }

  /* === HERO DECORATIVE ELEMENTS === */
  .hero::before,
  .hero::after,
  .hero-circles,
  .hero-dot,
  .cover::before,
  .cover::after,
  .cover-circles {
    display: none !important;
  }
}

/* ── SMALL PHONES (max-width: 480px) ──────────── */
@media (max-width: 480px) {
  .cover h1,
  .page h1,
  .hero h1 {
    font-size: 22px !important;
  }

  h2, .section-title {
    font-size: 20px !important;
  }

  .cover,
  .hero {
    padding: 40px 14px 24px !important;
  }

  .page > div,
  .page > section,
  .brochure > div,
  .brochure > section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}