/* ==========================================================================
   SUGOIX RESPONSIVE STYLESHEET (LIQUID GLASS EDITION)
   Optimizes the Glassmorphic UI for Tablets, Mobiles, and Landscape views.
   ========================================================================== */

/* --- TABLET & SMALL LAPTOPS (Max 1000px) --- */
@media (max-width: 1000px), (max-device-width: 1000px) and (pointer: coarse) {
  .desktop-nav { gap: 14px; }
  .search { width: 185px; }
  .hero { height: 450px; }
  .hero-content { padding: 30px; width: 80%; }
  .watch-layout { grid-template-columns: 1fr 280px; }
  .ae-details-content { max-width: 100%; }
}

/* --- MOBILE & TABLET PORTRAIT (Max 768px) --- */
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) {
  .container { width: min(100% - 30px, 1180px); }
  .nav { height: 70px; gap: 10px; }
  
  /* Hide desktop links, show mobile drawer trigger */
  .desktop-nav { display: none; }
  .mobile-only { display: grid; }
  .mobile-menu.open { display: block; }
  
  /* Glass Search Bar Scaling */
  .search { width: min(45vw, 200px); height: 36px; }
  .brand { font-size: 24px; gap: 5px; }
  
  /* Hero Section */
  .hero { height: 400px; border-radius: 16px; margin-bottom: 30px; }
  .hero-content { padding: 25px 20px; width: 100%; }
  .hero h1 { font-size: 32px; margin-bottom: 10px; }
  .hero p { font-size: 13px; -webkit-line-clamp: 2; margin-bottom: 15px; }
  .hero-overlay { background: linear-gradient(90deg, var(--bg) 0%, rgba(5,5,5,0.85) 60%, transparent 100%); }
  
  /* Grid & Cards */
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px 10px; }
  .card { flex-basis: 140px; }
  
  /* Watch Player Layout */
  .watch-layout { grid-template-columns: 1fr; gap: 20px; }
  .episode-panel { max-height: 400px; }
  .episodes { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); }
  .playback-control-list { flex-direction: column; }
  
  /* Details Page Refinements */
  .ae-details-content { padding: 25px 20px; }
  .ae-title-row h1 { font-size: 26px; }
  .ae-meta-line { font-size: 11px; }
  .ae-action-row { flex-wrap: wrap; }
  .ae-action { flex: 1; justify-content: center; }
  
  /* Footer */
  .footer { padding: 30px 0 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .social-wrap { width: 100%; align-items: flex-start; }
}

/* --- SMALL MOBILE PHONES (Max 480px) --- */
@media (max-width: 480px), (max-device-width: 480px) and (pointer: coarse) {
  /* Search & Nav */
  .search { width: 140px; }
  .search input { font-size: 12px; }
  .brand { font-size: 22px; }
  .brand span { display: inline; } /* Keep the X visible */
  
  /* Hero */
  .hero { height: 380px; }
  .hero h1 { font-size: 28px; }
  .hero-content { padding: 20px 15px; }
  .hero-dots { bottom: 15px; right: 15px; }
  
  /* Grid (2 Columns Forced) */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 10px; }
  .card { flex-basis: 130px; }
  .card-row-wide .card { flex-basis: 130px; }
  
  /* Details & Watch UI */
  .ae-details-page { border-radius: 16px; }
  .ae-details-content { padding: 20px 15px; }
  .ae-close { top: 15px; left: 15px; width: 36px; height: 36px; font-size: 20px; }
  .ae-bottom-actions { width: calc(100% - 30px); bottom: 15px; flex-direction: column; border-radius: 16px; }
  .ae-watch-primary, .ae-watch-secondary { border-radius: 12px; }
  
  /* Server Grid */
  .server-grid { grid-template-columns: 1fr; }
  .episodes { grid-template-columns: repeat(4, 1fr); }
  .player-controls { padding: 10px; flex-wrap: wrap; }
  .pc-status { order: 5; margin-left: auto; }
  .pc-seek { min-width: 100%; margin-top: 5px; order: 6; }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION (Phones & Small Tablets flipped sideways)
   Ensures the player, grid, and details stay usable without huge vertical scrolls.
   ========================================================================== */

html, body { overflow-x: hidden; max-width: 100%; }
* { min-width: 0; }

@media (orientation: landscape) and (max-height: 700px) {
  .container { width: min(1180px, calc(100% - 40px)); }
  .site-header .nav { height: 60px; gap: 16px; }
  .brand { font-size: 24px; }
  .search { height: 34px; }
  .page-space { padding: 15px 0 30px; }
  
  /* Hero Landscape */
  .hero { height: 350px; margin-bottom: 25px; }
  .hero-content { padding: 20px 30px; width: min(500px, 70%); }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 12px; -webkit-line-clamp: 2; }
  
  /* Details Page Landscape */
  .ae-details-page { min-height: 0; }
  .ae-details-content { padding: 30px 25px; }
  .ae-title-row h1 { font-size: 32px; }
  .ae-description { -webkit-line-clamp: 3; font-size: 13px; }
  .ae-tabs { gap: 15px; margin-top: 20px; }
  
  /* Bottom Sticky Action Bar */
  .ae-bottom-actions { position: relative; bottom: auto; left: auto; transform: none; width: 100%; flex-direction: row; background: transparent; backdrop-filter: none; padding: 0; margin-top: 20px; }
  
  /* Watch Layout Landscape */
  .watch-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 15px; }
  .player { max-height: calc(100vh - 120px); }
  .episode-panel { max-height: calc(100vh - 120px); padding: 15px; }
  .episodes { grid-template-columns: repeat(3, 1fr); }
  
  .stream-box { margin-top: 15px; padding: 15px; }
  .server-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer { padding: 20px 0; }
}

@media (orientation: landscape) and (max-height: 450px) {
  /* Extreme Landscape (Small Phones) */
  .site-header .nav { height: 50px; }
  .desktop-nav { display: flex; font-size: 12px; }
  .mobile-only { display: none !important; }
  .search { width: 160px; }
  
  .hero { height: 280px; }
  .hero-content { padding: 15px 25px; }
  .hero h1 { font-size: 28px; }
  
  .watch-layout { grid-template-columns: 1fr; }
  .player { max-height: 90vh; }
  .episode-panel { max-height: none; }
}

/* ===== Mobile search bar (was hidden on phones, so search + AI suggestions were unreachable) ===== */
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) {
  .site-header .container.nav { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 12px; }
  .site-header .nav-actions { display: contents; }
  .site-header .nav-theme-btn { margin-left: auto; }
  .site-header .search { display: flex; order: 3; flex: 0 0 100%; width: 100%; height: 40px; }
  .site-header .search .search-suggest { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; max-height: 70vh; overflow-y: auto; }
}
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) { .site-header .search .search-suggest { background: var(--bg) !important; } } /* opaque so hero text never bleeds through */

/* ===== Overflow guard: nothing (drawers, glows, off-canvas panels) may widen the page on phones ===== */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100vw; }

/* Legacy inline menu list is replaced by the slide-in drawer (app.js) - never show it as plain text */
.mobile-menu, .mobile-menu.open { display: none !important; }

/* Browse page on phones: language tabs become a swipeable chip row, filters share one row */
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) {
  .language-tabs { display: flex !important; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .language-tabs::-webkit-scrollbar { display: none; }
  .language-tabs a { flex: none; white-space: nowrap; width: auto !important; }
  .browse-filters { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .browse-filters select { flex: 1 1 28%; min-width: 0; padding: 10px 12px !important; }
}

/* Footer: keep brand, description and legal text on the same left edge (was centered under a left-aligned logo) */
.footer-brand, .footer-brand p, .footer-brand .disclaimer { text-align: left; }

/* Details page on phones: even spacing for My List / Share and Resume / Save */
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) {
  .ae-action-row { flex-direction: row !important; gap: 10px !important; }
  .ae-action-row .ae-action { flex: 1 1 0; justify-content: center; padding: 12px 10px !important; min-width: 0; }
  .ae-bottom-actions { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; width: 100% !important; flex-direction: row !important; align-items: stretch; gap: 10px !important; padding: 10px !important; }
  .ae-bottom-actions .ae-watch-primary { flex: 2 1 0 !important; min-width: 0; padding: 14px 12px !important; white-space: nowrap; }
  .ae-bottom-actions .ae-watch-secondary { flex: 1 1 0 !important; min-width: 0; padding: 14px 12px !important; }
}

/* Tab chips (Episodes / Featured Music / More Like This): never squash into each other, swipe instead */
.ae-tabs { scrollbar-width: none; }
.ae-tabs::-webkit-scrollbar { display: none; }
.ae-tabs button { flex: none; white-space: nowrap; }

/* Home hero on phones: room between meta line, buttons and the slide dots */
@media (max-width: 768px), (max-device-width: 768px) and (pointer: coarse) {
  .hero-content { padding-bottom: 54px !important; }
  .hero-meta { margin-bottom: 14px; line-height: 1.5; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
  .hero-dots { left: 20px; right: 20px; bottom: 18px; justify-content: center; }
}