/* ============================================
   MISSION TOPPER - RESPONSIVE CSS
   ============================================ */

* { box-sizing: border-box; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .premium-nav > div {
    padding: 0 16px !important;
  }

  /* Auth buttons compact */
  #authButtons a, #authButtons button {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  /* Course grid - single column */
  #coursesGrid, #batchesList, #batchesGrid {
    grid-template-columns: 1fr !important;
  }

  /* Course actions always visible on mobile */
  .course-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
    flex-direction: column;
    gap: 8px;
  }

  .course-actions a,
  .course-actions button {
    width: 100% !important;
    justify-content: center;
  }

  /* Filters */
  .filter-btn {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }

  /* Page top padding */
  [style*="padding:120px"] {
    padding-top: 90px !important;
    padding-bottom: 30px !important;
  }

  /* General container padding */
  [style*="max-width:1280px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer grid */
  .premium-footer [style*="grid-template-columns:2fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Leaderboard podium */
  #podium {
    grid-template-columns: 1fr !important;
  }
}

/* ── TABLET ── */
@media (min-width: 769px) and (max-width: 1023px) {
  .desktop-nav {
    gap: 16px !important;
  }
  .nav-link {
    font-size: 13px !important;
  }
  #coursesGrid, #batchesList, #batchesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── RESPONSIVE IMAGES ── */
img { max-width: 100%; height: auto; }

/* ── RESPONSIVE VIDEO ── */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ── TOUCH FRIENDLY ── */
@media (hover: none) and (pointer: coarse) {
  button, a { min-height: 44px; }

  /* Always show course actions on touch */
  .course-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}