/* =========================================================
   KASDOL CLINIC — Responsive & Mobile Navigation
   ========================================================= */

/* ---- Large tablet ---- */
@media (max-width:1024px){
  .trust-grid,.spec-grid,.doc-grid,.doc-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .svc-grid,.fac-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}
  .hero-media{max-width:520px}
  .hero-media img{aspect-ratio:16/11}
  .form-layout{grid-template-columns:1fr}
}

/* ---- Show hamburger, hide desktop nav ---- */
@media (max-width:900px){
  .nav-cta{display:none}
  .nav-toggle{display:flex}

  .main-nav{
    position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);
    background:#fff;z-index:65;flex-direction:column;align-items:stretch;
    padding:1.4rem 1.3rem 2rem;gap:0;box-shadow:-20px 0 60px rgba(11,42,42,.18);
    overflow-y:auto;display:none;
  }
  .main-nav.open{display:flex;animation:drawerIn .32s var(--ease)}
  @keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

  .nav-close{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:10px;border:1px solid var(--border);
    background:#fff;align-self:flex-end;margin-bottom:1rem;color:var(--ink);
  }
  .nav-close svg{width:22px;height:22px}

  .nav-list{flex-direction:column;align-items:stretch;gap:.15rem;width:100%}
  .nav-list a{padding:.9rem 1rem;font-size:1.05rem;border-radius:11px}
  .nav-list a.active{background:var(--teal-50)}
  .nav-list a.active::after{display:none}

  .nav-cta-mobile{display:inline-flex;margin-top:1.3rem;width:100%}

  body.nav-open{overflow:hidden}
}

/* ---- Tablet portrait ---- */
@media (max-width:768px){
  .topbar-loc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1/-1}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
  .cta-band-actions{width:100%;flex-direction:row}
  .cta-band-actions .btn{flex:1}
  .svc-grid{grid-template-columns:repeat(2,1fr)}

  /* Mobile bottom bar */
  .mobile-bar{display:grid}
  body{padding-bottom:76px}
  .site-footer{margin-bottom:0}
}

/* ---- Phones ---- */
@media (max-width:600px){
  :root{--gap:1rem}
  .topbar{display:none}
  .trust-grid,.spec-grid,.doc-grid,.doc-grid.cols-3,
  .svc-grid,.fac-grid,.why-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:2rem}
  .split--rev .split-media{order:0}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.7rem}
  .hero-badge{left:8px;right:8px;bottom:10px;max-width:none}
  .hero-actions .btn{flex:1}
  .cta-band-actions{flex-direction:column}
  .filter-group{min-width:100%}

  /* Convert schedule table to cards */
  .table-scroll{overflow:visible}
  .sched-table{min-width:0}
  .sched-table thead{display:none}
  .sched-table,.sched-table tbody,.sched-table tr,.sched-table td{display:block;width:100%}
  .sched-table tr{
    border:1px solid var(--border);border-radius:12px;margin-bottom:.85rem;
    padding:.4rem .3rem;background:#fff;box-shadow:var(--shadow-sm);
  }
  .sched-table tr.today{border-color:var(--teal-600)}
  .sched-table td{border:none;padding:.5rem .95rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.9rem}
  .sched-table td::before{
    content:attr(data-label);font-family:var(--font-head);font-weight:700;
    font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  }
  .sched-table td[data-label="Day"]{background:var(--teal-50);border-radius:9px;margin:.15rem .3rem .4rem}
  .doc-photo{aspect-ratio:16/12}
}

/* ---- Small phones ---- */
@media (max-width:380px){
  body{font-size:15px}
  h1{font-size:2rem}
  .brand-text{font-size:1.08rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .btn{padding:.8rem 1.15rem}
  .mobile-bar a{font-size:.66rem}
}