/* ============================================================
   responsive.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */

/* ---- MOBILE RESPONSIVE — FULL BREAKPOINTS ---- */
/* Tablet (≤900px) */
@media (max-width: 900px) {
  .land-nav{padding:16px 24px;}
  .nav-ctas .btn:first-child{display:none;}
  .section{padding:56px 24px;}
  .portals-grid{grid-template-columns:1fr;gap:14px;}
  .pcard{padding:24px;}
  .pcard-num{font-size:36px;}
  .pcard-title{font-size:20px;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .hero-stats{gap:32px;}
  .hstat-num{font-size:28px;}
  .footer-land{flex-direction:column;gap:12px;text-align:center;padding:28px 24px;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .portal-layout{flex-direction:column;}
  .sidebar{width:100%;height:auto;flex-direction:row;padding:0;border-right:none;border-bottom:1px solid var(--border);}
  .sb-logo{display:none;}
  .sb-nav{display:flex;flex-direction:row;padding:8px 12px;overflow-x:auto;overflow-y:hidden;gap:4px;}
  .nb-section{display:flex;flex-direction:row;gap:4px;margin-bottom:0;}
  .nb-section-label{display:none;}
  .nb-item{white-space:nowrap;padding:8px 12px;font-size:13px;}
  .nb-icon{display:none;}
  .nb-badge{display:none;}
  .sb-user{display:none;}
  .main-area{height:calc(100vh - 54px);}
  .session-layout{grid-template-columns:1fr;height:auto;}
  .sess-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
}

/* Mobile (≤600px) — PRIMARY FIX */
@media (max-width: 600px) {
  /* Landing nav */
  .land-nav{padding:14px 16px;}
  .logo-name{font-size:17px;}
  .logo-mark{width:32px;height:32px;font-size:15px;}
  .nav-ctas .btn:first-child{display:none;}
  .nav-ctas .btn{padding:9px 16px;font-size:13px;}

  /* Hero */
  .land-hero{padding:48px 16px 40px;}
  .hero-pill{font-size:11px;padding:6px 14px;}
  .hero-h1{font-size:36px;letter-spacing:-1.5px;}
  .hero-sub{font-size:15px;}
  .hero-btns{flex-direction:column;width:100%;}
  .hero-btns .btn{width:100%;justify-content:center;}
  .hero-stats{gap:20px;margin-top:40px;}
  .hstat-num{font-size:26px;}
  .hstat-lbl{font-size:11px;}

  /* Sections */
  .section{padding:44px 16px;}
  .section-h{font-size:26px;letter-spacing:-0.8px;margin-bottom:28px;}

  /* Features grid */
  .features-grid{grid-template-columns:1fr;}
  .feat-card{padding:22px;}

  /* PORTAL CARDS — THE MAIN FIX */
  .portals-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pcard{
    padding: 22px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    border-radius: var(--r-lg);
  }
  .pcard-num{font-size:28px;top:10px;right:14px;}
  .pcard-icon{
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: 20px;
  }
  .pcard-body{flex:1;min-width:0;}
  .pcard-title{font-size:17px;letter-spacing:-.3px;margin-bottom:4px;}
  .pcard-desc{font-size:13px;line-height:1.6;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .pcard-arrow{font-size:13px;}

  /* Auth */
  .auth-wrap{padding:16px;}
  .auth-card{padding:28px 20px;}
  .auth-h{font-size:22px;}
  .form-row{grid-template-columns:1fr;}

  /* Portal sidebar on mobile */
  .top-bar{padding:12px 16px;}
  .top-bar-title{font-size:14px;}
  .content-area{padding:16px;}

  /* Dashboard grids */
  .grid-4{grid-template-columns:1fr 1fr;gap:10px;}
  .grid-3{grid-template-columns:1fr;gap:10px;}
  .grid-2{grid-template-columns:1fr;gap:10px;}
  .stat-val{font-size:24px;}

  /* Session layout */
  .session-layout{grid-template-columns:1fr;height:auto;gap:12px;}
  .camera-box{height:300px;}
  .sess-sidebar{display:flex;flex-direction:column;gap:10px;}

  /* Coach chat */
  .coach-layout{height:calc(100vh - 140px);}

  /* Trainer plan builder */
  .builder-row{grid-template-columns:1fr 1fr;gap:6px;}
  .builder-row input:nth-child(n+3){display:none;}

  /* Admin tables */
  .users-table{font-size:12px;}
  .users-table th:nth-child(n+4),.users-table td:nth-child(n+4){display:none;}

  /* Profile */
  .profile-header{flex-direction:column;text-align:center;gap:14px;}
  .profile-header .profile-av{margin:0 auto;}

  /* Footer */
  .footer-land{flex-direction:column;gap:10px;text-align:center;padding:24px 16px;font-size:12px;}
  .footer-land .logo{justify-content:center;}

  /* Invite */
  .invite-methods{grid-template-columns:1fr 1fr;}

  /* Analytics */
  .analytics-stat{padding:14px;}
  .analytics-num{font-size:28px;}
}

/* Small mobile (≤380px) */
@media (max-width: 380px) {
  .hero-h1{font-size:30px;}
  .grid-4{grid-template-columns:1fr;}
  .pcard{padding:18px 14px;}
  .pcard-title{font-size:16px;}
  .nb-item{font-size:11px;padding:7px 8px;}
}


/* ============================================================
   AUTH PAGE RESPONSIVE FIX
   Keeps the login/auth page fluid across desktop, laptop,
   tablet and mobile screens without changing other pages.
   ============================================================ */
#page-auth {
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

#page-auth .auth-wrap {
  width: min(100%, 560px);
  max-width: 560px;
  padding: clamp(16px, 3vw, 32px);
  margin: auto;
}

#page-auth .auth-card {
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
}

#page-auth .auth-logo .logo {
  max-width: 100%;
}

#page-auth .auth-tabs,
#page-auth .role-select,
#page-auth .form-row,
#page-auth .form-group,
#page-auth .form-input,
#page-auth .form-select,
#page-auth .sbtn {
  max-width: 100%;
}

/* Laptop / tablet */
@media (max-width: 900px) {
  #page-auth .auth-wrap {
    width: min(100%, 520px);
    padding: 24px;
  }

  #page-auth .auth-card {
    padding: 32px 24px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  #page-auth {
    align-items: stretch;
    justify-content: flex-start;
  }

  #page-auth .auth-wrap {
    width: 100%;
    max-width: none;
    padding: 14px;
  }

  #page-auth .auth-back {
    margin-bottom: 16px;
    padding: 4px 0;
  }

  #page-auth .auth-card {
    width: 100%;
    padding: 24px 18px;
    border-radius: var(--r-lg);
  }

  #page-auth .auth-header {
    margin-bottom: 20px;
  }

  #page-auth .auth-h {
    font-size: clamp(20px, 6vw, 22px);
  }

  #page-auth .auth-sub {
    font-size: 13px;
    line-height: 1.5;
  }

  #page-auth .auth-tabs {
    margin-bottom: 18px;
  }

  #page-auth .auth-tab {
    padding: 10px 6px;
    font-size: 13px;
  }

  #page-auth .role-select {
    gap: 6px;
  }

  #page-auth .role-btn {
    min-width: 0;
    padding: 9px 4px;
    font-size: 11px;
  }

  #page-auth .form-label {
    font-size: 11px;
  }

  #page-auth .form-input,
  #page-auth .form-select {
    min-height: 42px;
    font-size: 14px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  #page-auth .auth-wrap {
    padding: 10px;
  }

  #page-auth .auth-card {
    padding: 20px 14px;
  }

  #page-auth .role-btn {
    font-size: 10px;
  }

  #page-auth .role-btn i {
    font-size: 13px;
  }

  #page-auth .auth-sub {
    font-size: 12px;
  }
}

/* Short screens / mobile landscape: allow natural scrolling. */
@media (max-height: 700px) {
  #page-auth {
    align-items: flex-start;
  }

  #page-auth .auth-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
}