/* Sarvins Academy — mobile & tablet layout fixes for the public site and learner portal (loads last) */
html{-webkit-text-size-adjust:100%}
img,video,iframe,svg{max-width:100%}
table{max-width:100%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
:where(h1,h2,h3,p,li,td,th){overflow-wrap:break-word}

/* Service cards: opening one accordion must not stretch its neighbours */
.service-grid,.service-grid-page,.service-grid-featured{align-items:start}
.service-grid article{align-self:start;min-height:0}
.service-grid details{margin-top:8px}

@media(max-width:1000px){
  .content-layout{grid-template-columns:1fr!important}
  .side-card{position:static!important}
  .footer-grid,.footer-links{gap:20px}
}
@media(max-width:760px){
  body{font-size:15px}
  .wrap{width:min(100% - 28px,640px)}
  .section{padding:44px 0}
  .page-hero{padding:38px 0 30px}
  .page-hero h1{font-size:clamp(30px,9vw,42px);line-height:1.08}
  .page-hero p{font-size:15px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .form-grid,.form-card .form-grid{grid-template-columns:1fr!important}
  .form-card,.content-card,.side-card{padding:18px!important}
  .btn{min-height:44px}
  input,select,textarea{font-size:16px!important}           /* stops iOS zooming into fields */
  .footer-grid{grid-template-columns:1fr!important}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-bottom{flex-direction:column;gap:6px;text-align:left}
  .service-grid-page,.service-grid-featured,.interest-grid,.service-grid{grid-template-columns:1fr!important}
  .announcement-card{grid-template-columns:1fr!important;gap:8px}
  .course-outline li{grid-template-columns:30px minmax(0,1fr)}
  .course-outline li .text-link,.course-outline li .lock{grid-column:2}
}
@media(max-width:420px){
  .footer-links{grid-template-columns:1fr!important}
  .brand img{width:124px}
}

/* ---------- Learner portal ---------- */
@media(max-width:900px){
  .portal-shell{grid-template-columns:1fr!important;gap:14px!important}
  .portal-sidebar{position:static!important;padding:10px!important}
  .portal-student{padding:8px 6px}
  .portal-nav-label{display:none}
  .portal-side-bottom{display:flex;gap:16px;padding:8px 6px 0;border-top:1px solid var(--line);margin-top:6px}
  .portal-dashboard-grid{grid-template-columns:1fr!important}
  .portal-page-head{flex-direction:column;align-items:flex-start;gap:10px}
  .portal-page-head .btn{width:100%;justify-content:center}
}
@media(max-width:520px){
  .portal-nav{margin:0 -4px}
  .portal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .portal-stat{padding:12px!important}
  .portal-stat b{font-size:22px!important}
  .portal-workshop-grid{grid-template-columns:1fr!important}
  .lesson-nav .btn{flex:1 1 100%;justify-content:center}
}


/* portal: the horizontal menu must scroll inside its own box, never widen the page */
.portal-shell>*,.portal-main>*,.portal-dashboard-grid>*{min-width:0}
@media(max-width:900px){
  .portal-shell{grid-template-columns:minmax(0,1fr)!important}
  .portal-nav{display:flex!important;flex-direction:row!important;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .portal-nav::-webkit-scrollbar{display:none}
  .portal-nav-link{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);padding:8px 12px}
  .portal-nav-link.active{border-color:var(--forest)}
}
.sg-row .btn,.portal-session-group .btn{white-space:nowrap;flex:0 0 auto}

/* ---------- Mobile / tablet menu (full-height drawer) ---------- */
.nav-mobile-ctas{display:none}
.nav-backdrop{position:fixed;inset:0;background:#10201a66;z-index:48;backdrop-filter:blur(2px)}
.nav-backdrop[hidden]{display:none}
@media(max-width:1024px){
  .site-header{--hdr-h:64px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#f8f7f2}   /* backdrop-filter would trap the fixed menu inside the header */
  .brand{min-width:0;max-width:58%}.brand img{max-width:100%}
  .nav-shell{height:var(--hdr-h);gap:10px;display:flex;align-items:center}
  .brand{order:1;flex:0 0 auto}.brand img{height:42px;width:auto}
  .nav-ctas{order:2;margin-left:auto}
  .nav-ctas--user{display:none}
  .nav-ctas .login-link,.nav-ctas .btn-outline{display:none}
  .nav-ctas .btn{padding:10px 16px;font-size:13px;min-height:42px}
  .menu-toggle{order:3;display:grid;place-items:center;width:46px;height:46px;margin:0;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
  .menu-toggle[aria-expanded="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
  .primary-nav{display:none;position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;margin:0;padding:6px 18px 28px;border:0;border-radius:0;background:#fff;box-shadow:none;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;overscroll-behavior:contain;z-index:49}
  .primary-nav.open{display:flex}
  .primary-nav>a,.nav-group>summary{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:18px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);white-space:normal}
  .primary-nav>a.current{color:var(--orange-dark,#b56831)}
  .nav-group>summary::after{content:'⌄';padding:0 6px;font-size:18px;color:#b36831;transition:transform .2s}
  .nav-group[open]>summary::after{transform:rotate(180deg)}
  .nav-group[open]>summary{color:var(--ink);border-bottom-color:transparent}
  .nav-dropdown{position:static;display:grid;gap:2px;width:auto;margin:0 0 8px;padding:0 0 8px 12px;border:0;border-left:3px solid var(--green-light,#dcebe3);border-radius:0;box-shadow:none;background:transparent}
  .nav-dropdown a{display:block;padding:12px 10px;font-size:16px;font-weight:600;color:var(--ink2,#3f5148);border-radius:10px}
  .nav-dropdown a:active,.nav-dropdown a.current{background:#f1f6f2;color:var(--orange-dark,#b56831)}
  .nav-mobile-ctas{display:grid;gap:10px;margin-top:20px}
  .nav-mobile-ctas .btn{width:100%;justify-content:center;min-height:50px;font-size:16px}
  .nav-help{text-align:center;font-weight:700;color:var(--orange-dark,#b56831);padding:10px}
  body.nav-open{overflow:hidden}
}
@media(max-width:380px){.brand img{height:36px}.nav-ctas .btn{padding:9px 12px}}