/* ============================================================
   VTH — phone-in-landscape corrections
   ------------------------------------------------------------
   Linked once from layouts/app.blade.php, so it reaches every page using that layout —
   including the nine sector pages, which do not include reskin-common-head and so never
   receive vth-reskin.css.

   Every rule here sits inside (orientation: landscape) and (max-height: 500px). That is
   deliberate: this file loads site-wide, so it must be incapable of changing any page on
   desktop or in portrait. A phone held sideways is the only state it can affect, which is
   exactly the reported fault.

   Do NOT link vth-reskin.css from the layout instead. That file carries the whole `.vth`
   design system, and `.vth` is also used by globally-included partials
   (vth/switch-account/widget + modal) and by onboarding/index.blade.php — loading it
   site-wide restyles those. That was tried on 2026-09-09 and had to be reverted.
   ============================================================ */

/* ---------- Slide-out menu: items that could not be reached ---------------- */
/* style.css:1514 pins the panel at top:86px but still gives it height:100vh and sets no
   overflow, so it ends 86px below the fold. In landscape the viewport is 393px tall while
   the accordion runs several times longer, so everything past the first few items was
   unreachable — the panel is position:fixed, so scrolling the page does not move it
   either. Width bound matches the band where the theme makes this a slide-out panel. */
@media (max-width: 1199px) and (orientation: landscape) and (max-height: 500px) {
  .nav-navbar.sidemenu {
    height: auto;
    bottom: 0;
    overflow-y: auto;
    /* Stops a flick at the panel's end from scrolling the page behind it. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Course cards ---------------------------------------------------- */
/* Every mobile rule for this card is keyed to width alone — 600px in
   common_new_theme.css:1306, 767px in style.css:3320, 768px in the catalogue view. A
   phone in landscape reports ~851px wide (1080x2340 at dpr 2.75 = 851x393), so it clears
   all three and gets the desktop card: .course-full-info stays display:flex from
   common_new_theme.css:452 and the image keeps its fixed width, leaving the title column
   too narrow and pushing the card past the viewport. These are the same declarations the
   theme already applies at 600px — this widens WHEN they apply, never WHAT they do. */
@media (orientation: landscape) and (max-height: 500px) {
  .online-course-section .course-full-info { flex-direction: column; }
  .online-course-section .course-image { margin-right: 0; }
  .online-course-section .course-image > img {
    width: 100%;
    min-width: 100%;
    height: 260px;
  }
  /* Stacking puts the title directly under the image; the gap the theme adds for that
     (common_new_theme.css:1390) is inside its 600px block, so landscape never got it. */
  .online-course-section .online-course-item .course-info { margin-top: 15px; }
  /* Badge rows and card buttons overflow the same way once the card is narrow. */
  .online-course-section .online-course-item .course-tags,
  .online-course-section .online-course-item .course-lebel,
  .online-course-section .online-course-item .another_tags { flex-wrap: wrap; }
  .online-course-section .online-course-item .btn {
    width: 100%;
    justify-content: center;
  }
}