/* 飞溯网 - 响应式样式 */

/* 移动优先设计 - 基础样式已在style.css中定义 */

/* 小型移动设备 (>=360px) */
@media (min-width: 360px) {
  .container {
    max-width: 360px;
  }
  
  /* 显示移动端指示器（仅用于开发） */
  .system-type-indicator:after {
    content: "移动端";
  }
  
  /* 一行显示2个卡片 */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* 平板设备 (>=768px) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  /* 显示平板端指示器（仅用于开发） */
  .system-type-indicator:after {
    content: "平板端";
  }
  
  /* 导航栏在平板上的样式 */
  .navbar {
    padding: 1.25rem 2rem;
  }
  
  .navbar-title {
    font-size: 1.75rem;
  }
  
  /* 一行显示3个卡片 */
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  /* 内容区域增加内边距 */
  .content {
    padding: 1.5rem;
    padding-bottom: 5.5rem;
  }
  
  /* 卡片样式调整 */
  .card-body {
    padding: 1.25rem;
  }
  
  .card-title {
    font-size: 1.125rem;
  }
  
  /* 故事卡片调整 */
  .story-avatar {
    width: 5rem;
    height: 5rem;
  }
  
  .story-name {
    font-size: 0.875rem;
  }
}

/* 桌面设备 (>=1280px) */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
  
  /* 显示桌面端指示器（仅用于开发） */
  .system-type-indicator:after {
    content: "桌面端";
  }
  
  /* 导航栏在桌面上的样式 */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
  }
  
  /* 汉堡菜单隐藏，显示完整菜单 */
  .navbar-toggle {
    display: none;
  }
  
  .navbar-menu {
    display: flex !important; /* 覆盖可能的内联样式 */
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    flex-direction: row;
    padding: 0;
  }
  
  .navbar-menu-item {
    margin-left: 2rem;
  }
  
  /* 一行显示4个卡片 */
  .grid-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  
  /* 内容区域布局 */
  .content {
    padding: 2rem;
    padding-bottom: 2rem; /* 桌面端不需要为底部标签栏留空间 */
  }
  
  /* 底部标签栏在桌面上隐藏 */
  .tab-bar {
    display: none;
  }
  
  /* 桌面端特有的底部 */
  .desktop-footer {
    display: block;
    background-color: var(--gray-800);
    color: white;
    padding: 3rem 0;
  }
  
  /* 两列布局 */
  .two-column-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
  }
  
  /* 三列布局 */
  .three-column-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
  }
}

/* 大型桌面设备 (>=1536px) */
@media (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }
}

/* 打印样式 */
@media print {
  .navbar, .tab-bar, .desktop-footer, .no-print {
    display: none !important;
  }
  
  body {
    background-color: white;
  }
  
  .content {
    padding: 0;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid var(--gray-300);
  }
}