/* =====================================================================
   Qapsol Template — Responsive
   Mobile-first overrides on top of the desktop defaults in style.css.
   Re-scoping --gutter per breakpoint also repositions the owl-nav
   arrows (they are anchored to calc(-1 * var(--gutter))).
   Breakpoints follow Bootstrap 5 (xl 1200 · lg 992 · md 768 · sm 576).
   ===================================================================== */

/* ---- ≤ 1199.98px (xl and below) ---- */
@media (max-width: 1199.98px) {
  :root { --gutter: 2rem; }
  .home-search { padding: 2rem 2rem 0; }
  .tab-content { padding: var(--sp-4) 2rem; }
}

/* ---- ≤ 991.98px (lg and below): header stacks, smaller hero ---- */
@media (max-width: 991.98px) {
  :root { --gutter: 1.5rem; }

  .home-featured { padding-top: 4rem; }
  .home-featured h1 { padding-top: 3rem; font-size: 1.6rem; }
  .home-featured h3 { font-size: 1.1rem; }

  .home-search { padding: 2rem 1.5rem 0; }
  .facets { gap: 14px; }
  .facet { flex: 1 1 30%; }
}

/* ---- ≤ 767.98px (md and below): tighter gutters, 2-up facets ---- */
@media (max-width: 767.98px) {
  :root { --gutter: 1rem; }

  /* ---- mobile header: logo + hamburger; nav collapses to a dropdown ---- */
  .header-inner { flex-wrap: wrap; gap: var(--sp-2); }
  .header-logo { margin-right: auto; }       /* logo left, toggle pushed right */
  .nav-toggle { display: inline-flex; align-items: center; }

  /* solid header while the dropdown is open so hero content can't show through */
  #siteHeader.menu-open {
    background-color: rgba(0, 0, 0, 0.96);
    background-image: none;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sticky);
  }

  .header-menu {
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  .header-menu.open {
    max-height: 360px;
    opacity: 1;
    margin-top: var(--sp-2);
  }

  .main-nav { flex-direction: column; margin: 0; width: 100%; }
  .main-nav li { width: 100%; }
  .main-nav .nav-link {
    display: block;
    padding: var(--sp-3) var(--sp-1);
    border-bottom: 1px solid var(--border-faint);
  }

  .right-nav {
    margin: var(--sp-2) 0 0 0;
    padding-top: var(--sp-2);
    justify-content: flex-start;
  }

  .home-search { padding: 1.5rem 1rem 0; }
  .tab-content { padding: var(--sp-4) var(--sp-4); }

  .home-featured h1 { font-size: 1.4rem; }
  .home-featured h3 { font-size: 1rem; }

  .facet { flex: 1 1 45%; }

  .section-categories li { min-width: auto; }
  .section-categories li a { padding: var(--sp-1) var(--sp-4); }

  .footer-top { flex-direction: column; align-items: flex-start; }

  /* ---- content modal on mobile ---- */
  .cm-details { margin-top: -56px; padding: 0 1.25rem 1.5rem; }
  .cm-title { font-size: 1.5rem; }
  .cm-platform { flex-wrap: wrap; }
  .cm-platform .btn-watch { flex-basis: 100%; justify-content: center; }
  .cm-episode { gap: var(--sp-3); }
  .cm-ep-thumb { flex-basis: 110px; width: 110px; }
  .cm-ep-head { flex-direction: column; gap: 0.1rem; }
}

/* ---- ≤ 575.98px (xs): stack facets, smallest type ---- */
@media (max-width: 575.98px) {
  :root { --gutter: 0.75rem; }

  .home-featured h1 { font-size: 1.25rem; }
  .home-featured h3 { font-size: 0.95rem; }

  .tab-content { padding: var(--sp-4) var(--sp-3); }
  .search-bar { margin-top: var(--sp-4); }

  .facets { gap: 10px; }
  .facet { flex: 1 1 100%; }
  .facet-panel { width: 100%; }

  .platform-item { width: 84px; }
  .platform-hotlink li { min-width: 84px; }

  /* arrows sit flush to the screen edge on phones */
  .content-carousel .owl-nav span { font-size: 2.25rem; }
}