/* ============================================================
   Breakpoints
   mobile  : <600px  (360 / 375 / 390 / 412 / 430)
   tablet  : 600–1024px
   desktop : >1024px
   ============================================================ */

/* ---------- Tablet ---------- */
@media(max-width:1024px){
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-grid{
    grid-template-columns:1.3fr 1fr;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:599px){
  #app{
    width:min(calc(100% - 22px),var(--content));
    padding-top:18px;
    padding-bottom:124px;
  }

  .header-inner{
    width:min(calc(100% - 22px),var(--content));
    min-height:60px;
  }

  .hero{
    padding-top:30px;
  }

  .hero h1{
    font-size:2.4rem;
  }

  .hero p{
    font-size:.97rem;
  }

  .section{
    margin-top:26px;
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .subjects-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .tools-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .tools-grid .subject-card{
    min-height:0;
    padding:14px 8px;
    text-align:center;
    align-items:center;
  }

  .tools-grid .subject-card p{
    display:none;
  }

  .tools-grid .card-link{
    margin-top:10px;
    font-size:.8rem;
    justify-content:center;
  }

  .subject-card{
    min-height:152px;
    padding:16px;
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .stat-grid{
    grid-template-columns:1fr 1fr;
  }

  .continue-card{
    padding:20px;
  }

  .flashcard{
    min-height:250px;
    padding:20px;
  }

  .bottom-nav{
    bottom:calc(9px + env(safe-area-inset-bottom,0px));
    width:calc(100% - 18px);
    gap:3px;
    padding:6px;
  }

  .bottom-nav button{
    min-height:48px;
    font-size:.8rem;
  }
}

/* ---------- Small mobile ---------- */
@media(max-width:390px){
  .bottom-nav button{
    font-size:.72rem;
  }

  .brand span:last-child{
    font-size:.9rem;
  }

  .hero h1{
    font-size:2.15rem;
  }
}