/* ============================================================
   观潮海报网 · 响应式 (Responsive)
   themes/default/assets/css/responsive.css
   ------------------------------------------------------------
   断点：992px（平板）/ 768px（移动，隐藏侧栏与轮播）/ 480px（小屏）
   ============================================================ */

@media (max-width: 992px) {
  .poster-grid { grid-template-columns: repeat(3, 1fr); }
  .sidebar { width: 180px; }
  .carousel { height: 220px; }

  .skeleton-sidebar { width: 180px; }
  .skeleton-poster-grid { grid-template-columns: repeat(3, 1fr); }
  .skeleton-carousel { height: 220px; }
}

@media (max-width: 768px) {
  body { padding: 10px; }

  .container {
    flex-direction: column;
    width: 100%;
    border-radius: var(--hb-r-xl);
  }

  /* 移动端隐藏侧边栏与轮播 */
  .sidebar { display: none !important; }
  .carousel-section { display: none !important; }

  .main { padding: 15px; }

  .top-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .top-nav .links {
    flex-wrap: nowrap;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .top-nav .links a {
    padding: 6px 12px;
    font-size: .8rem;
    white-space: nowrap;
  }

  .search-bar { width: 100%; }

  .search-input {
    flex: 1;
    width: auto;
  }

  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .poster-grid .item { padding: 8px; }
  .poster-grid .item .name { font-size: .85rem; }

  .section-header h2 { font-size: 1rem; }

  .modal-content {
    width: 95%;
    padding: 20px;
  }

  .modal-poster-container { max-height: 220px; }
  .modal-title { font-size: 1.1rem; }

  /* 骨架屏 */
  .skeleton-container {
    flex-direction: column;
    width: 100%;
    margin: 10px auto;
    border-radius: var(--hb-r-xl);
  }

  .skeleton-sidebar { display: none; }
  .skeleton-main { padding: 15px; }
  .skeleton-carousel { display: none; }

  .skeleton-poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .skeleton-top-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .skeleton-search {
    width: 100%;
    margin-left: 0;
  }

  .skeleton-nav-link {
    width: 60px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .poster-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .poster-grid .item { padding: 6px; }
  .poster-grid .item .name { font-size: .8rem; }

  .pagination { gap: 6px; }
  .pagination .page-btn {
    padding: 8px 14px;
    font-size: .8rem;
  }

  .modal-content { padding: 15px; }
  .modal-poster-container { max-height: 180px; }

  .skeleton-poster-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .skeleton-poster-item { padding: 6px; }
}