/* Sthonet Academy — professional responsive layer (v4.19.1)
   Loads last. Breakpoints: mobile <=740px, tablet 741-1100px, desktop >=1101px, wide >=1600px.
   Mobile keeps the existing 20px page gutter so the full-width contact panel lines up. */

/* ---------- Shared foundations ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.sthonet-company-site img,.sthonet-company-site video,.sm-dashboard img,.sm-access img{max-width:100%;height:auto}
.sthonet-company-site,.sm-dashboard,.sm-access{overflow-wrap:break-word}
.sthonet-company-site a:focus-visible,.sthonet-company-site button:focus-visible,.sm-dashboard a:focus-visible,.sm-dashboard button:focus-visible,.sm-access button:focus-visible{outline:3px solid var(--sa-cyan,#28c2f3);outline-offset:3px}
.sm-profile-save,.sm-learning-save{min-height:48px}
.sm-dashboard input,.sm-dashboard select,.sm-dashboard textarea,.sm-access input,.sm-access select,.sm-access textarea{max-width:100%}

/* ---------- Learning interests (15 options) ---------- */
.sm-learning-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}
.sm-learning-tile{min-height:64px}
.sm-learning-tile b{overflow-wrap:break-word;min-width:0}
.sm-learning-save{width:100%}

/* ---------- Desktop >= 1101px ---------- */
@media (min-width:1101px){
  .sa-hero,.sa-about,.sa-programmes,.sa-services,.sa-impact,.sm-dashboard,.sm-access{padding-left:max(clamp(24px,6vw,96px),calc((100% - 1320px)/2));padding-right:max(clamp(24px,6vw,96px),calc((100% - 1320px)/2))}
  .sa-programme-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sa-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-dashboard-grid{align-items:start}
}
@media (min-width:1600px){
  .sa-hero h1{font-size:96px}
  .sa-programme-grid{gap:18px}
}

/* ---------- Tablet 741-1100px ---------- */
@media (min-width:741px) and (max-width:1100px){
  .sa-header{min-height:74px;padding:0 28px}
  .sa-header nav{gap:18px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
  .sa-hero{min-height:auto;padding:80px 36px}
  .sa-hero h1{font-size:clamp(52px,8vw,76px)}
  .sa-hero-actions .sa-button{flex:0 1 auto;min-width:200px}
  .sa-about,.sa-programmes,.sa-services,.sa-impact{padding-left:36px;padding-right:36px}
  .sa-section-intro{grid-template-columns:1fr;gap:16px}
  .sa-programme-grid,.sa-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .sa-programme-card,.sa-service-card{min-height:280px}
  .sa-page-story{grid-template-columns:1fr;padding:48px 36px}
  .sa-footer{padding:26px 36px}
  .sm-access,.sm-dashboard{padding-left:36px;padding-right:36px}
  .sm-dashboard-grid{gap:16px}
  .sm-dashboard-grid>article{padding:26px}
}
/* Dashboard cards stack on tablet (matches the existing 1000px rule) so forms get room */
@media (max-width:1000px){
  .sm-dashboard-grid{grid-template-columns:1fr}
}

/* ---------- Mobile <= 740px ---------- */
@media (max-width:740px){
  .sa-hero{padding-left:20px;padding-right:20px}
  .sa-hero-copy>p{line-height:1.65}
  .sa-programme-card,.sa-service-card{min-height:0;padding:22px}
  .sa-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:-20px;margin-right:-20px;padding:2px 20px 8px;scrollbar-width:none}
  .sa-filters::-webkit-scrollbar{display:none}
  .sa-filters button{flex:0 0 auto;min-height:40px}
  .sa-testimonial-card,.sa-proof-panel{padding:24px}
  .sa-service-bot-card,.sa-need-help-card{padding:22px 18px;border-radius:16px;max-height:90vh}
  .sa-button{min-height:48px}
  /* 16px inputs stop iOS Safari zooming in on focus */
  .sm-dashboard input,.sm-dashboard select,.sm-dashboard textarea,.sm-access input,.sm-access select,.sm-access textarea{font-size:16px}
  .sm-dashboard table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sm-dashboard-grid>article{padding:20px}
  .sm-dashboard-grid h3{font-size:22px}
  /* Learning interests: two compact columns, odd last tile centred full-width */
  .sm-learning-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sm-learning-tile{min-height:72px;padding:10px 28px 10px 9px;gap:8px}
  .sm-learning-tile i{flex:0 0 28px;width:28px;height:28px}
  .sm-learning-tile b{font-size:12.5px}
  .sm-learning-tile em{right:5px}
  .sm-learning-option:last-child:nth-child(odd){grid-column:1/-1}
  .sa-floating-whatsapp,.sa-need-help-trigger{max-width:calc(100vw - 24px)}
}

/* Very small phones */
@media (max-width:360px){
  .sm-learning-tile b{font-size:12px}
  .sm-learning-tile i{display:none}
  .sm-learning-tile{padding-left:12px}
}

/* Landscape phones / short viewports: keep modals scrollable */
@media (max-height:520px){
  .sa-service-bot-card,.sa-need-help-card{max-height:94vh}
  .sa-hero{min-height:auto}
}

/* Touch devices: no hover lift */
@media (hover:none){
  .sa-programme-card:hover,.sa-service-card:hover,.sa-button:hover{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .sthonet-company-site *,.sm-dashboard *,.sth-faq-bot *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}