/* mobile.css — comprehensive mobile-first overrides for all themes */
/* Applied when viewport <= 760px, enhanced at <= 430px */

/* ── bottom tab bar ── */
.mob-tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;height:56px;background:var(--surface);border-top:1px solid var(--edge);box-shadow:0 -4px 18px rgba(0,0,0,.06);padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.mob-tabbar nav{display:flex;height:100%}
.mob-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);text-decoration:none;font-size:10px;-webkit-tap-highlight-color:transparent}
.mob-tabbar a .sy-icon{width:22px;height:22px}
.mob-tabbar a.on{color:var(--accent)}
body[data-theme="d"] .mob-tabbar,body[data-theme="e"] .mob-tabbar,body[data-theme="f"] .mob-tabbar{box-shadow:0 -2px 12px rgba(0,0,0,.04)}
body[data-theme="h"] .mob-tabbar{border-top:1px solid var(--edge)}

/* ── 760px: tablet / large phone ── */
@media(max-width:760px){
  .mob-tabbar{display:block}
  body{padding-bottom:56px}

  /* review bar: compact */
  .review{height:44px;padding:0 10px}
  .review>b,.review>span{display:none}
  .review>div{position:relative;left:auto;transform:none;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .review a{flex:0 0 auto;padding:8px 10px;white-space:nowrap}

  /* nav: hamburger mode */
  .nav{height:56px;padding:0 14px}
  .nav>nav{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--surface);z-index:65;padding:20px;flex-direction:column;gap:0;overflow-y:auto}
  .nav>nav.open{display:flex}
  .nav>nav a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--edge);opacity:1}
  .nav>nav a.active{color:var(--accent)}
  .account{display:none}
  .menu{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--edge);background:transparent;color:inherit;border-radius:8px;flex:0 0 42px}

  /* hero slider */
  .hero-slider{height:320px!important;min-height:320px!important}
  .hero-slide{padding:40px 18px 60px;align-items:start}
  .hero-slide .welcome{margin-top:12px}
  .hero-slide .welcome h1{font-size:clamp(28px,6vw,42px)!important}
  .hero-slide .welcome>span{font-size:13px}
  .slide-today{width:180px;padding:12px 14px;right:12px;bottom:50%;transform:translateY(50%)}
  .slide-today b{font-size:18px!important}
  .slider-ui{left:14px;bottom:8px}
  .slider-ui .dots{display:none}

  /* notice */
  .notice{padding:30px 16px 50px}
  .notice h2{font-size:24px}
  .notice-list button,.notice-rich{min-height:68px}
  .notice-list b,.notice-rich b{font-size:15px}
  .notice-rich{grid-template-columns:50px 1fr;gap:10px}
  .notice-rich>i,.notice-rich>strong{display:none}

  /* dashboard / task-grid */
  .dashboard{padding:40px 16px 70px}
  .section-title{display:block;margin-bottom:28px}
  .section-title h2{font-size:clamp(24px,5vw,36px)}
  .task-grid{grid-template-columns:1fr;gap:10px}
  .task-grid article{min-height:auto;padding:20px}
  .task-grid h3{font-size:36px}
  .progress{height:120px}
  .progress b{font-size:38px}

  /* subject strip */
  .subject-strip{grid-template-columns:1fr 1fr;padding:20px 16px 60px;gap:10px}
  .subject-strip>p{grid-column:1/-1}

  /* course layout */
  .course-layout{grid-template-columns:1fr}
  .course-layout>aside{position:static}
  .course-row{grid-template-columns:64px 1fr;gap:12px}
  .course-row>em,.course-row>button{grid-column:2}

  /* clock / homework */
  .clock-summary{grid-template-columns:1fr}
  .clock-grid{grid-template-columns:1fr}
  .clock-card{min-height:auto;padding:18px}
  .ring{position:relative;left:auto;bottom:auto;width:60px;height:60px;margin:12px auto}
  .month-focus{grid-template-columns:1fr}
  .month-story,.month-calendar{padding:16px}
  .calendar-days>button,.calendar-days>span{min-height:42px}
  .calendar-days small{display:none}

  /* exam */
  .exam-layout{grid-template-columns:1fr}
  .exam-rules{position:static}
  .exam-row{grid-template-columns:35px 1fr}
  .exam-row>em,.exam-row>button{grid-column:2}

  /* faculty */
  .faculty-grid{columns:1}
  .faculty-card{grid-template-columns:100px 1fr;min-height:auto;padding:16px}
  .portrait{height:160px}
  .faculty-copy strong{font-size:22px}

  /* page hero */
  .page-hero{min-height:280px;padding:40px 18px}
  .page-copy h1{font-size:clamp(32px,8vw,52px)}
  .page-stat{display:none}

  /* listing */
  .listing{padding:40px 16px 70px}
  .listing-head{flex-direction:column;gap:14px;align-items:flex-start}
  .listing-head h2{font-size:26px}
  .filters{flex-wrap:wrap}
  .filters button{padding:8px 12px;font-size:13px}

  /* waterfall / lesson cards */
  .waterfall{columns:1}
  .lesson-art{height:120px!important}
  .lesson h3{font-size:17px}

  /* catalog layout */
  .catalog-layout{grid-template-columns:1fr}
  .catalog-nav{position:static}
  .course-heading{flex-direction:column;gap:16px;align-items:flex-start}
  .course-heading input{width:100%}
  .actual-course-list>header{display:none}
  .actual-course-row{grid-template-columns:1fr}
  .actual-course-row nav{justify-content:flex-start}

  /* utility */
  .utility{padding:40px 16px 70px}
  .utility-bar{flex-direction:column;gap:12px;align-items:flex-start}
  .utility-bar h2{font-size:26px}

  /* section tabs */
  .section-tabs{top:56px;overflow-x:auto;padding:8px 14px;-webkit-overflow-scrolling:touch}
  .section-tabs button{white-space:nowrap;padding:8px 12px}
  .section-tabs label{display:none}

  /* video grid */
  .video-grid{grid-template-columns:repeat(2,1fr);gap:14px 12px}

  /* learning center (G) */
  .learning-shell{padding:40px 16px 70px}
  .learning-shell>header{flex-direction:column;align-items:flex-start}
  .learning-shell>header label{width:100%}
  .learning-modules{grid-template-columns:1fr}
  .learning-now{grid-template-columns:1fr}
  .learning-now article:first-child{grid-column:auto}

  /* H theme: YouTube-like */
  .yt-top{top:44px;height:52px;padding:0 12px}
  .yt-top .brand span,.yt-top .account{display:none}
  .yt-top .global-search{width:auto;flex:1}
  .yt-side{top:100px;transform:translateX(-100%);width:260px}
  body[data-theme="h"].sidebar-collapsed .yt-side{transform:translateX(0)!important;width:260px!important}
  body[data-theme="h"] #content,body[data-theme="h"]>footer,
  body[data-theme="h"].sidebar-collapsed #content,body[data-theme="h"].sidebar-collapsed>footer{margin-left:0}

  /* notice page */
  .notice-brief{flex-direction:column;align-items:flex-start;gap:16px;padding:30px 16px}
  .notice-brief h1{font-size:28px}
  .notice-brief aside b{font-size:32px}

  /* footer */
  footer{flex-direction:column;gap:14px;padding:30px 16px;align-items:flex-start}

  /* dialog */
  dialog{width:calc(100% - 24px);padding:24px}
  dialog h2{font-size:24px}

  /* D/E/F overrides on mobile */
  body:is([data-theme="d"],[data-theme="e"],[data-theme="f"])[data-page="home"] .hero-slider{height:320px!important;min-height:320px!important}
  body:is([data-theme="d"],[data-theme="e"],[data-theme="f"])[data-page="home"] .hero-slide{padding:30px 18px 60px}
}

/* ── 430px: small phone ── */
@media(max-width:430px){
  .hero-slider{height:280px!important;min-height:280px!important}
  .hero-slide .welcome h1{font-size:26px!important}
  .slide-today{width:160px;padding:10px 12px}
  .slide-today b{font-size:16px!important}
  .slide-today button,.slide-today a{padding:6px 10px;font-size:8px}

  .task-grid h3{font-size:28px}
  .progress b{font-size:30px}

  .faculty-card{grid-template-columns:1fr}
  .portrait{height:140px}

  .subject-strip{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}

  .review a{font-size:8px;padding:6px 6px}

  body:is([data-theme="d"],[data-theme="e"],[data-theme="f"])[data-page="home"] .hero-slider{height:280px!important;min-height:280px!important}
}

/* ── dark theme mobile tweaks ── */
body:is([data-theme="a"],[data-theme="b"],[data-theme="c"]) .mob-tabbar{background:var(--surface);border-color:var(--edge)}

/* ── overlay backdrop for open nav ── */
.mob-overlay{display:none;position:fixed;inset:0;z-index:64;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.mob-overlay.open{display:block}