/* ═══ TESS Group Mobile Styles ═══ */

/* Safe-area support for notch devices */
@supports(padding: env(safe-area-inset-bottom)) {
  .floating-cta { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .site-nav { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
}

/* Scroll margin so anchors don't hide behind fixed nav */
section[id], div[id], [id] { scroll-margin-top: 64px !important; }

/* Ensure body has space for floating CTA — enough clearance so it
   doesn't overlap the last section of content on any page */
body { padding-bottom: 90px !important; }

@media(max-width:1024px){
  .cover,.hero{padding:110px 24px 40px!important}
  .cta-left,.cta-right{max-width:100%!important;width:100%!important}
}

@media(max-width:768px){
  /* Typography - responsive sizing */
  .cover h1,.page h1,.hero h1{font-size:clamp(22px,6vw,28px)!important;line-height:1.2!important;letter-spacing:-0.5px!important}
  h2,.section-title{font-size:clamp(19px,5vw,24px)!important;line-height:1.3!important}
  h3{font-size:17px!important}
  p,li,td{font-size:14px!important;line-height:1.65!important}

  /* Layout */
  .page,.brochure,.content{padding:0!important}
  .cover,.hero{padding:110px 18px 30px!important;min-height:auto!important}
  .hero-learner,.employers-hero,.cs-hero{padding:110px 18px 30px!important;min-height:auto!important}
  .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-col,.cta-section>div,.why-choose,[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 scroll horizontally */
  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 buttons - full width, good tap targets */
  .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;min-height:48px!important}
  .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}
  
  /* Cards */
  .module-card,.qual-card,[class*="module"],[class*="card"]{padding:14px!important}
  
  /* USP layout */
  .usp-list li{flex-direction:column!important;text-align:center!important;gap:8px!important}
  .usp-icon{font-size:28px!important}
  
  /* Images responsive */
  img{max-width:100%!important;height:auto!important}
  
  /* Related programmes */
  .related-programmes{padding:24px 18px!important}
  .related-grid{grid-template-columns:1fr!important}
  
  /* Hide decorative elements that cause overflow */
  .nav-links{display:none!important}
  .hero::before,.hero::after,.hero-circles,.hero-dot,.cover::before,.cover::after,.cover-circles{display:none!important}
  
  /* Prevent horizontal overflow */
  body,html{overflow-x:hidden}
  .hero-container,.section-container,[class*="container"]{overflow:hidden}
}

@media(max-width:480px){
  .cover h1,.page h1,.hero h1{font-size:clamp(20px,5.5vw,24px)!important}
  h2,.section-title{font-size:20px!important}
  .cover,.hero{padding:105px 14px 24px!important}
  .hero-learner,.employers-hero,.cs-hero{padding:105px 14px 24px!important}
  .page>div,.page>section,.brochure>div,.brochure>section{padding-left:14px!important;padding-right:14px!important}

  /* Even tighter on small phones */
  .module-card,.qual-card,[class*="card"]{padding:12px!important}
  .cta-box,.cta-section{padding:20px 14px!important}
}

/* Landscape phones */
@media(max-height:500px) and (orientation:landscape){
  .cover,.hero{padding:30px 24px 20px!important;min-height:auto!important}
  .floating-cta{bottom:8px;padding:8px 14px;font-size:12px}
}