/* ================================================================
   KLiC Platform — mobile.css
   Full Mobile-Responsive Stylesheet
   Breakpoints: 768px (tablet), 480px (phone), 360px (small phone)
   ================================================================ */

/* ══════════════════════════════════════════════════════════
   GLOBAL / BASE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  * { box-sizing: border-box; }

  body { font-size: 14px; }

  .pane {
    padding-bottom: 2rem;
  }

  /* Prevent horizontal scroll */
  .pane, .pane > * {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════════
   TOPBAR & TABS NAVIGATION
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .brand-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .brand-img {
    height: 36px;
    width: auto !important;
    max-width: none;
    object-fit: contain;
  }

  .nav-pill { display: none; }

  .tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--navy);
    border-bottom: 2px solid rgba(255,255,255,.08);
    padding: 0 .25rem;
    gap: 0;
    flex-wrap: nowrap;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: .7rem;
    gap: 3px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-radius: 0;
  }

  .tab.active {
    border-bottom-color: var(--red);
    background: rgba(255,255,255,.06);
  }

  .tab span:not(.gem) {
    display: inline; /* Keep labels visible on tablet */
    font-size: .68rem;
  }

  .gem { font-size: .85rem; }
}

@media (max-width: 480px) {
  .tab span:not(.gem) { display: none; } /* Hide label, keep icon on small phones */
  .tab { padding: 8px 12px; }
  .gem { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   HOME PAGE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    padding: 1.5rem 1rem 0;
  }

  .hero-row {
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.2rem;
    align-items: flex-start;
  }

  .hero-text h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: .4rem;
  }

  .hero-text p {
    font-size: .82rem;
    max-width: 100%;
  }

  .hero-logo-img {
    height: clamp(38px, 9vw, 58px);
    width: auto !important;
    max-width: none;
    object-fit: contain;
  }

  .hero-logo-wrap { margin-bottom: .8rem; }

  .hero-img-wrap {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .stat-row {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .stat-item {
    flex: 1 0 calc(50% - .5rem);
    min-width: 0;
  }

  /* Track grid — 2 cols on tablet, 1 col on phone */
  .track-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    padding: 0 1rem 1rem;
  }

  .sec-hdr {
    padding: 1rem 1rem .5rem;
  }

  /* Track cards */
  .track-card {
    transform: none !important; /* disable hover lift on touch */
  }

  .tc-head { padding: .9rem .9rem .6rem; }

  .tc-body {
    padding: 0 .9rem;
  }

  .track-card.expanded .tc-body {
    padding: 0 .9rem .75rem;
  }

  /* Quick stats row on home */
  .qs-row {
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0 1rem .75rem;
  }

  .qs-item { flex: 1 0 calc(50% - .5rem); }
}

@media (max-width: 480px) {
  .track-grid {
    grid-template-columns: 1fr;
    padding: 0 .75rem 1rem;
  }

  .hero { padding: 1.2rem .75rem 0; }
}

/* ══════════════════════════════════════════════════════════
   COURSES TAB
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .crs-layout {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: .75rem 1rem;
    padding-right: 1rem;
  }

  /* Sidebar filters horizontal scroll on mobile */
  .sidebar .pills,
  .sidebar .dur-pills {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: .4rem;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .sidebar .pills::-webkit-scrollbar,
  .sidebar .dur-pills::-webkit-scrollbar { display: none; }

  .sidebar .pill,
  .sidebar .dc,
  .sidebar .lc {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .cmain { padding-left: 0; padding: .75rem; }

  .ctop {
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
  }

  .srch { width: 100%; }
  .srch input { width: 100%; }

  .sort-s { width: 100%; }

  /* Course cards — 1 column on phone */
  .cgrid {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .ccard {
    padding: .85rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .cgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   COUNSELLING TAB
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .q-wrap {
    padding: .75rem;
  }

  .q-hero {
    padding: 1.2rem .75rem .6rem;
  }

  .q-hero h2 {
    font-size: 1.3rem;
  }

  .qcard {
    padding: 1rem .75rem;
    border-radius: 12px;
  }

  .qopts {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .qopt {
    padding: .65rem .85rem;
    font-size: .84rem;
  }

  .qopt-ico { font-size: 1.2rem; }

  .q-nav {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .qnx, .qbk {
    flex: 1;
    text-align: center;
    padding: .6rem 1rem;
    font-size: .85rem;
  }

  /* Results */
  .rswrap .qcard {
    padding: .85rem .75rem;
  }

  .rs-head {
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
  }

  .rs-tags { flex-wrap: wrap; gap: .3rem; }

  .rc {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .85rem;
  }

  .rc-rank {
    width: 26px;
    height: 26px;
    font-size: .78rem;
  }

  .rc-act {
    width: 100%;
    text-align: center;
    padding: .45rem;
    font-size: .72rem;
  }

  .rc-meta { flex-wrap: wrap; gap: .3rem; }
  .rc-name { font-size: .84rem; }

  .rs-section-lbl {
    font-size: .66rem;
    padding: .3rem .65rem;
  }
}

/* ══════════════════════════════════════════════════════════
   FIND YOUR COURSE TAB
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .prof-finder-hero {
    padding: 1.5rem 1rem 1.2rem;
  }

  .prof-hero-title { font-size: 1.5rem; }
  .prof-hero-sub   { font-size: .82rem; }

  .prof-hero-steps {
    gap: .4rem;
    margin-top: .85rem;
  }

  .phs { padding: .25rem .65rem; }
  .phs-l { font-size: .65rem; }
  .phs-arrow { font-size: .75rem; }

  .prof-dropdowns-card {
    padding: 1.2rem .85rem 1.8rem;
  }

  .prof-dd-row,
  .prof-dd-row2 {
    flex-direction: column;
    gap: .75rem;
  }

  .prof-dd-group,
  .prof-dd-btn-group {
    width: 100%;
    min-width: 0;
  }

  .prof-find-btn {
    padding: .75rem;
    font-size: 1rem;
  }

  .prof-res-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .prof-res-count-badge { align-self: flex-start; }

  .prof-track-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .35rem;
    scrollbar-width: none;
  }
  .prof-track-filters::-webkit-scrollbar { display: none; }
  .prof-track-chip { flex-shrink: 0; white-space: nowrap; }

  .prof-courses-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .prof-course-card { padding: .85rem; }

  .prof-cta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }
  .prof-cta-btn { width: 100%; text-align: center; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .prof-courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   CAREER GAME TAB
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .game-hero {
    padding: 1.5rem 1rem 1.2rem;
  }

  .gh-in {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .gh-title { font-size: 1.6rem; }
  .gh-desc  { font-size: .8rem; }

  /* Game vs bar */
  .game-vs-bar {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }
  .gvb-game  { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .gvb-vs    { padding: .5rem; text-align: center; }
  .gvb-col   { padding: 1rem; }

  /* Welcome grid — 2 cols */
  .welcome-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
  }
  .wcard { padding: .85rem; }

  /* Choice grid — 2 cols, 1 on small phone */
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }

  /* Wheel */
  .wheel-wrap {
    width: 220px;
    height: 220px;
  }

  /* Career result sections */
  .market-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .prob-row {
    grid-template-columns: 110px 1fr 36px;
    gap: .5rem;
  }
  .prob-label { font-size: .72rem; }

  .grec-grid {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .res-profile-left {
    flex-direction: column;
    gap: .5rem;
  }

  .res-profile-cta {
    flex-direction: column;
  }
  .res-profile-cta button { width: 100%; }

  .action-row {
    flex-direction: column;
    gap: .6rem;
  }
  .action-row button { width: 100%; justify-content: center; }

  /* Skill gap */
  .skill-gap-item {
    grid-template-columns: 1fr auto;
    gap: .5rem;
  }
}

@media (max-width: 480px) {
  .welcome-grid  { grid-template-columns: 1fr; }
  .choice-grid   { grid-template-columns: 1fr; }
  .wheel-wrap    { width: 200px; height: 200px; }
  .game-hero     { padding: 1.2rem .75rem 1rem; }

  .prob-row {
    grid-template-columns: 90px 1fr 32px;
  }
}

/* ══════════════════════════════════════════════════════════
   COMPARE TAB
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cmp-wrap {
    padding: .85rem .75rem 2rem;
  }

  .cmp-hero {
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
  }

  .cslots {
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .cslot {
    flex: 1 0 calc(50% - .5rem);
    min-width: 0;
  }

  .cctrl {
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
  }

  .csrch { width: 100%; }
  .csrch input { width: 100%; }

  /* Picker grid */
  .pgrid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  /* Compare table — horizontally scrollable */
  .cmp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  .cmp-row {
    min-width: 420px; /* prevent collapse, allow scroll */
  }

  .cmp-lbl-cell {
    min-width: 80px;
    max-width: 90px;
    font-size: .62rem;
  }

  .cmp-cell {
    font-size: .75rem;
    padding: .6rem .65rem;
  }
}

@media (max-width: 480px) {
  .cslot { flex: 1 0 100%; }
}

/* ══════════════════════════════════════════════════════════
   SYLLABUS / MODAL
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .syl-modal {
    padding: .75rem;
    border-radius: 14px;
    margin: .5rem;
    max-height: 92vh;
    overflow-y: auto;
  }

  .syl-hdr { flex-direction: column; gap: .5rem; }
  .syl-close { align-self: flex-end; }

  .syl-body { font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-footer { padding: 1.2rem .85rem 1rem; }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: .85rem;
    text-align: center;
  }

  .footer-brand { justify-content: center; }
  .footer-right { text-align: center; }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ══════════════════════════════════════════════════════════
   SMALL PHONE — 360px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .prof-hero-title { font-size: 1.25rem; }
  .gh-title        { font-size: 1.3rem; }
  .hero-text h1    { font-size: 1.4rem; }

  .tab { padding: 7px 9px; }

  .qcard  { padding: .85rem .6rem; }
  .qopt   { font-size: .8rem; padding: .55rem .7rem; }

  .rc     { padding: .75rem .6rem; }

  .prof-dropdowns-card { padding: 1rem .65rem 1.5rem; }

  .cmp-wrap { padding: .65rem .5rem 1.5rem; }

  .wheel-wrap { width: 180px; height: 180px; }
}

/* ══════════════════════════════════════════════════════════
   TOUCH-FRIENDLY INTERACTION IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Larger tap targets */
  .qopt, .prof-find-btn, .rc-act, .tab,
  .gvb-cta, .see-all, .qnx, .qbk, .qrestart,
  .prof-track-chip, .dc, .lc, .tc-explore {
    min-height: 40px;
  }

  /* Disable hover transforms that feel odd on touch */
  .track-card:hover { transform: none; box-shadow: none; }
  .prof-course-card:hover { transform: none; }
  .rc:hover { transform: none; }
  .ccard:hover { transform: none; }

  /* Smooth scrolling */
  html { scroll-behavior: smooth; }

  /* Better input sizing on iOS */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  .prof-select { font-size: 16px !important; }
}