/* site-mobile-patch.css — additive mobile fixes (v2) */
/* Include this AFTER site.css on every page */

html,body{overflow-x:hidden}

/* Fluid type & spacing */
.h1{font-size:clamp(28px,6vw,44px)}
.h2{font-size:clamp(22px,4.5vw,32px)}
.lead{font-size:clamp(16px,2.6vw,18px)}
.hero{padding:clamp(28px,6vw,64px) 0}

/* Touch targets */
.btn{min-height:44px;padding:10px 14px}

/* Images scale down on small screens */
img{max-width:100%;height:auto}

/* Header/nav flex wrap on small screens */
.nav{gap:12px}
.navlinks{display:flex;gap:10px;flex-wrap:wrap}

/* App launcher: only stretch on small screens; desktop remains right-aligned */
@media (max-width:900px){
  .launcher{right:12px;left:12px;top:64px;max-height:min(70vh,520px);overflow:auto}
  .launcher-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}
}
@media (max-width:640px){
  .launcher-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
}

/* Generic service/feature grids */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr} }

/* FAQ grid if present */
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .faq-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .faq-grid{grid-template-columns:1fr} }

/* How we work (approach) grid */
.approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 30px}
@media (max-width:900px){ .approach-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .approach-grid{grid-template-columns:1fr} }

/* Card comfort on mobile */
.card{border-radius:14px;padding:16px}

/* Footer centred like service pages */
footer .container{display:flex;flex-direction:column;align-items:center;gap:8px}
footer .links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Modal width sanity */
.modal-card{width:min(520px,92vw)}

/* Secure Score self-check overrides (inline grid styles force 2 cols; collapse to 1 on phones) */
@media (max-width:640px){
  #self-check .grid{grid-template-columns:1fr !important}
  #self-check input,#self-check select,#self-check button{width:100%}
}

/* What is Microsoft 365? section on the homepage */
@media (max-width: 900px){
  #o365-overview .grid{grid-template-columns:1fr !important}
}
@media (max-width: 640px){
  #o365-overview .grid{grid-template-columns:1fr !important}
  #o365-overview .approach-item{align-items:flex-start}
  #o365-overview .approach-item p{margin:0}
}