/* ============================================================
   CourserTech — Mobile Polish
   Extra mobile refinements (touch targets, spacing, nav feel)
   ============================================================ */

@media (max-width: 992px) {
  /* Room for top bar + header inside the nav sheet */
  .main-nav { top: 0; }
  .main-nav .nav-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    margin: -24px -24px 14px;
    padding: 0 24px;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-white);
  }

  .nav-link { min-height: 48px; }
  .dropdown a { min-height: 44px; }
  .mobile-cta .btn { min-height: 48px; }

  /* Larger touch targets for forms */
  .field input,
  .field select,
  .field textarea { font-size: 16px; /* prevents iOS zoom */ }

  .filter-btn { padding: 10px 16px; min-height: 42px; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }

  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; }
}

@media (max-width: 640px) {
  .hero-dots { bottom: 18px; }
  .hero-dots button { width: 24px; }

  .card,
  .why-item,
  .partner-block,
  .doc-card { border-radius: var(--radius); }

  .section-head { margin-bottom: 28px; }

  /* Keep content readable on very small screens */
  .img-frame .img-badge { left: 10px; bottom: 10px; }

  .stat .stat-num { font-size: 1.9rem; }
}

/* Landscape phones: prevent cramped hero */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 420px; }
  .page-hero { padding: 40px 0; }
}