/* ==========================================================================
   responsive.css —— 响应式适配（媒体查询）
   断点：≤1200px 平板过渡；≤900px 移动端
   ========================================================================== */

/* ---------- 平板过渡：作品栅格降为 4 列 ---------- */
@media (max-width: 1200px) {
  .work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
  }

  .search {
    width: 240px;
  }
}

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .container {
    padding: 0 16px;
  }

  /* 显示控制互换：PC 专属隐藏，移动专属显示 */
  .only-pc {
    display: none !important;
  }

  .only-mobile {
    display: flex !important;
  }

  /* 页头：Logo / 搜索 / 导航 三行堆叠 */
  .header-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 12px;
  }

  .logo {
    order: 1;
  }

  .logo img {
    width: 32px;
    height: 32px;
  }

  .logo__text {
    font-size: 21px;
  }

  .search {
    order: 2;
    flex: 1 1 100%;
    width: auto;
    margin-left: 0;
  }

  .main-nav {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 0;
  }

  .main-nav a {
    padding: 0 2px;
    line-height: 44px;
    font-size: 14px;
  }

  /* 主体单栏：侧栏内容（最新短评）自然落到主内容之后 */
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 16px;
  }

  .page-aside {
    gap: 20px;
  }

  /* 广告位：移动端顶部横幅更紧凑 */
  .ad-top {
    margin-bottom: 22px;
  }

  .ad--leaderboard,
  .ad--banner {
    width: 100%;
  }

  /* 栏目与卡片 */
  .section-head {
    margin: 26px 0 14px;
  }

  .section-title {
    font-size: 20px;
  }

  .section-title::before {
    height: 20px;
  }

  .work-grid,
  .work-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .work-card__body {
    padding: 10px 12px 12px;
  }

  .work-card__title {
    font-size: 15px;
  }

  .work-card__meta {
    margin-top: 4px;
    font-size: 12px;
  }

  /* 分类页 */
  .category-head {
    margin: 2px 0 16px;
  }

  .category-head h1 {
    font-size: 24px;
  }

  .pagination {
    margin: 28px 0 4px;
  }

  .pagination button {
    min-width: 56px;
    height: 36px;
    padding: 0 14px;
  }

  /* 详情页 */
  .detail-card {
    padding: 18px;
  }

  .detail-card + .detail-card,
  .detail-card + .section-head,
  .section-head + .detail-card {
    margin-top: 16px;
  }

  .hero {
    gap: 16px;
  }

  .hero__poster {
    width: 118px;
    border-radius: 6px;
  }

  .hero__info {
    padding-top: 0;
  }

  .hero__title {
    font-size: 22px;
  }

  .hero__meta {
    margin-top: 8px;
    font-size: 12px;
  }

  .hero__crew {
    margin-top: 10px;
    font-size: 13px;
  }

  .hero__rating {
    margin-top: 16px;
    gap: 10px;
  }

  .hero__score {
    font-size: 30px;
  }

  .rate-buttons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .rate-buttons button {
    height: 38px;
  }

  .form-input--nick {
    max-width: 100%;
  }

  .side-card {
    padding: 16px;
  }

  .breadcrumb {
    margin: 0 0 12px;
    font-size: 12px;
  }

  .site-footer {
    margin-top: 36px;
    padding: 22px 0 30px;
  }
}

/* 移动端：登录区与 Logo 同一行，靠右显示 */
@media (max-width: 900px) {
  .header-user {
    order: 1;
    margin-left: auto;
    gap: 10px;
  }
}