/* educator.in — shared mobile/responsive polish. Linked LAST in on every page so it refines the per-page styles. Keyed to the common class names used across the site. */ /* never allow the page to scroll sideways; keep media inside its box */ html,body{max-width:100%;overflow-x:hidden} img,canvas,iframe,video,svg{max-width:100%;height:auto} canvas{height:auto} pre,table{max-width:100%;overflow-x:auto} /* language picker: keep it compact so it never blows out the header */ .edu-lang-sel{max-width:38vw} @media(max-width:640px){ /* Compact single-row header: on phones the ☰ Menu holds the full site map, so hide the inline text links (they were wrapping into ~180px of header). Keep the language picker, sign-in/out and the menu button. */ .hd{flex-wrap:nowrap;gap:8px;padding:8px 14px;min-height:0} .brand{font-size:19px;flex-shrink:0} nav.top{gap:8px;flex-wrap:nowrap;margin-left:auto} nav.top>a{display:none} /* top-level nav links → ☰ menu */ .hd-right>.navlink{display:none} /* chat page's inline links → ☰ menu */ .auth{font-size:12px} .edu-lang-sel{max-width:34vw;font-size:12px;padding:6px 8px} /* HOME: make the quick-play card the hero — trim everything above it so the question + tap buttons sit in the first phone screenful. */ .hero{padding:12px 0 4px} .hero h1{font-size:24px;line-height:1.12;margin-bottom:6px;max-width:100%} .hero p.lede{display:none} /* "Tap an answer — no sign-up…" hidden on phones */ .qplay{margin-top:12px;padding:16px} .qp-q{font-size:19px;margin-bottom:12px} .qp-opts{grid-template-columns:1fr 1fr;gap:9px} .qp-opt{font-size:16px;padding:13px;min-height:50px} /* tighten big vertical rhythm on small screens */ section{padding:30px 0} section.blk{padding:22px 0 0} .band{padding:22px} .maker{padding:16px} .detail,.modalcard{padding:18px} /* forms: full-width, comfortable tap targets */ .sform,.explore-form,.maker .row,form{gap:10px} .maker .fld{min-width:100%} .btn{padding:12px 18px} /* certificate + course grids to single column */ .certgrid,.courses,.duo{grid-template-columns:1fr} /* explorer media grids breathe better */ .videos,.grid2{grid-template-columns:1fr} .imgs{grid-template-columns:repeat(2,1fr)} .books{grid-template-columns:repeat(3,1fr)} /* modal fills the small screen */ .modal{padding:8px} .modalcard{max-height:94dvh;border-radius:14px} /* floating tutor: slightly smaller, out of the way of content */ .edu-tw-fab{width:54px;height:54px;font-size:23px;right:16px;bottom:16px} } @media(max-width:400px){ .imgs,.books{grid-template-columns:repeat(2,1fr)} .facts{grid-template-columns:1fr} .brand{font-size:18px} nav.top a{font-size:12.5px} }