/* ==========================================================
   RESPONSIVE OVERRIDES — asksatishrao.com
   Supplements Bootstrap 5.3 breakpoints
   ========================================================== */

/* --- Mobile first: < 576px ------------------------------- */
@media (max-width: 575.98px) {
  :root { --section-py: 3rem; }

  .hero { padding: 3.5rem 0 3rem; }

  .hero h1 { font-size: 1.875rem; }

  .hero .d-flex.gap-3 {
    flex-direction: column;
    gap: 0.75rem !important;
  }

  .hero .btn { width: 100%; justify-content: center; }

  .gold-rule { margin-left: auto; margin-right: auto; }

  .stat-block { padding: 1rem 0.5rem; }

  .testimonial-card { padding: 1.5rem; }

  .page-hero { padding: 3rem 0 2.5rem; }

  .page-hero h1 { font-size: 1.75rem; }

  /* Stack book-card image+text layouts vertically on mobile */
  .card-body .d-flex.gap-4,
  .d-flex.gap-4.align-items-start,
  .d-flex.gap-4.align-items-center {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Ensure images inside stacked flex cards don't overflow */
  .card-body .d-flex img.flex-shrink-0,
  .d-flex.gap-4 img.flex-shrink-0 {
    width: auto !important;
    max-width: 100px;
  }

  /* CTA button groups: stack on very small screens */
  .d-flex.flex-sm-row.gap-3 {
    flex-direction: column !important;
  }

  .d-flex.flex-sm-row.gap-3 .btn {
    width: 100%;
    text-align: center;
  }
}

/* --- Small: 576px – 767px -------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root { --section-py: 3.5rem; }
  .hero { padding: 4.5rem 0 3.5rem; }
}

/* --- Tablet: 768px – 991px ------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root { --section-py: 4rem; }
  .hero { padding: 5rem 0 4rem; }
}

/* --- Navbar: collapsed (< 992px) ------------------------- */
@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    background-color: var(--sr-white);
    padding: 0.75rem 0 1rem;
    border-top: 1px solid rgba(15,39,68,0.06);
    margin-top: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid rgba(15,39,68,0.05);
  }

  .navbar-nav .nav-link:last-child { border-bottom: none; }

  .nav-cta {
    display: inline-block;
    margin-top: 0.75rem;
    border-radius: 6px;
  }

  .dropdown-menu {
    border: none;
    box-shadow: none;
    padding-left: 1rem;
    background-color: var(--sr-light-bg);
    border-radius: 6px !important;
    margin-top: 0.25rem;
  }
}

/* --- Container: fluid on lg and below, fixed on xl+ ------ */
@media (max-width: 1199.98px) {
  .container {
    max-width: 100%;
  }
}

/* --- Desktop: ≥ 992px ------------------------------------ */
@media (min-width: 992px) {
  .hero { padding: 7rem 0 6rem; }
  .page-hero { padding: 5rem 0 4.5rem; }

  .navbar-nav .nav-item + .nav-item { margin-left: 0.125rem; }
}

/* --- Large: ≥ 1200px ------------------------------------- */
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

/* --- Extra large: ≥ 1400px ------------------------------- */
@media (min-width: 1400px) {
  .container { max-width: 1200px; }
}

/* --- YouTube Playlist viewer ----------------------------- */

/* On mobile: sidebar stacks below player, fixed scroll height */
@media (max-width: 991.98px) {
  .yt-playlist-wrap .col-lg-4 {
    max-height: 280px;
    overflow-y: auto;
  }
  /* Round bottom corners when sidebar is below player */
  .yt-playlist-wrap {
    border-radius: 0.5rem;
    overflow: hidden;
  }
}

/* Playlist cards on resources page: 1 column on xs */
@media (max-width: 575.98px) {
  .yt-item img { width: 100px !important; height: 56px !important; }
}

/* Resources page: book card image area scales on mobile */
@media (max-width: 575.98px) {
  .resources-book-img-wrap { height: 200px !important; }
}

/* Playlist card grid: 1 per row on xs */
@media (max-width: 575.98px) {
  .playlist-card { width: 100%; }
}

/* --- Reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html { scroll-behavior: auto; }

  .btn,
  .card,
  .book-card,
  .feature-card { transition: none; }
}