/* =========================================
   Mobile Optimizations for Blog Pages
   Target: blog/post.html, blog/index*.html, 
           blog/channel-template*.html
   ========================================= */

/* ==================== BASE MOBILE STYLES ==================== */
@media (max-width: 768px) {
  
  /* -------------------- Typography -------------------- */
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 1.75rem !important; /* 28px instead of 40px */
    line-height: 1.25 !important;
  }
  
  h2 {
    font-size: 1.5rem !important; /* 24px instead of 32px */
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important; /* 20px instead of 26px */
    line-height: 1.35 !important;
  }
  
  h4 {
    font-size: 1.1rem !important;
  }
  
  /* -------------------- Containers & Spacing -------------------- */
  .container,
  .blog-container,
  .header-container,
  .nav-container,
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* -------------------- Blog Post Page (post.html) -------------------- */
  
  /* 问题1: 隐藏全局导航栏（仅在博客页面，通过body class区分） */
  body.blog-page .global-header,
  .blog-layout .global-header {
    display: none !important;
  }
  
  /* 显示汉堡菜单按钮（仅在博客页面） */
  body.blog-page .mobile-nav-toggle,
  .blog-layout .mobile-nav-toggle {
    display: flex !important;
  }
  
  /* 面包屑保持可见 */
  .breadcrumb-nav {
    display: block !important;
    padding: 0.75rem 1rem !important;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
  }
  
  /* 面包屑移动端简化 */
  .breadcrumb-nav {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    background: transparent !important;
    border-bottom: none !important;
    margin-bottom: 0.5rem !important;
  }
  
  .breadcrumb-item {
    font-size: 0.8rem !important;
  }
  
  .breadcrumb {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  
  /* 问题2: Hero 图片大幅缩小 */
  .post-hero,
  .blog-hero {
    height: 160px !important; /* 从 220px 降到 160px */
    margin-bottom: 1rem !important;
    border-radius: 6px !important;
  }
  
  .post-hero img,
  .blog-hero img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  /* Post Layout - Switch to Flexbox for better control */
  .post-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem !important; /* 减少内边距 */
  }

  .post-toc {
    padding: 12px 14px !important;
    margin-bottom: 20px !important;
  }

  .post-toc__summary {
    font-size: 0.95rem !important;
  }

  .post-toc__list {
    padding-left: 1rem !important;
  }
  
  /* Hero 图片第一位 */
  .post-hero {
    order: 1 !important;
  }
  
  /* 搜索栏第二位（紧跟 Hero 图片） */
  .post-sidebar {
    order: 2 !important;
    width: 100% !important;
    margin: 1rem 0 !important; /* 上下间距 */
    padding: 0.75rem !important;
    border-left: none !important;
    border-bottom: 2px solid #e5e7eb; /* 底部分隔线 */
  }
  
  /* 主内容第三位 */
  .post-main {
    order: 3 !important;
    padding: 0.75rem !important; /* 减少内边距 */
    max-width: 100% !important;
  }
  
  /* 搜索框样式优化 */
  .search-widget {
    margin-bottom: 1rem !important;
  }
  
  /* 隐藏其他 sidebar 小部件（移动端只显示搜索） */
  .post-sidebar .sidebar-widget {
    display: none !important;
  }
  
  /* Blog Title - 字体进一步缩小 */
  .blog-title {
    font-size: 1.5rem !important; /* 从 1.75rem 降到 1.5rem (24px) */
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }
  
  /* Blog Subtitle */
  .blog-subtitle {
    font-size: 0.95rem !important; /* 从 1rem 降到 0.95rem */
    margin-bottom: 0.75rem !important;
  }
  
  /* Blog Meta */
  .blog-meta {
    font-size: 0.8rem !important; /* 从 0.875rem 降到 0.8rem */
    margin-bottom: 1rem !important;
  }
  
  /* Channel Pills */
  .channel-pill-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .channel-pill {
    font-size: 0.875rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Blog Content */
  .blog-content {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  
  .blog-content h2 {
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .blog-content h3 {
    font-size: 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .blog-content p {
    margin-bottom: 1rem !important;
  }
  
  .blog-content img {
    margin: 1.5rem 0 !important;
    border-radius: 8px !important;
  }
  
  .blog-content ul,
  .blog-content ol {
    margin-left: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  .blog-content li {
    margin-bottom: 0.5rem !important;
  }
  
  /* Code Blocks - Prevent Overflow */
  .blog-content pre {
    overflow-x: auto !important;
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
    border-radius: 6px !important;
  }
  
  .blog-content code {
    font-size: 0.875rem !important;
    word-wrap: break-word !important;
  }
  
  /* Tables - Responsive */
  .blog-content table {
    display: block !important;
    overflow-x: auto !important;
    font-size: 0.875rem !important;
  }
  
  /* Callout Boxes */
  .callout-box {
    padding: 1rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 8px !important;
  }
  
  /* Related Posts */
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Post Navigation */
  .post-nav-rail {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .post-nav-col {
    text-align: left !important;
  }
  
  .post-nav-col.align-right {
    text-align: left !important;
  }
  
  /* Channel Resources */
  .channel-rec-links-wrap h3 {
    font-size: 1.25rem !important;
  }
  
  .channel-rec-links {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* -------------------- Blog Index Pages (index*.html) -------------------- */
  
  /* Search & Filter Section */
  .blog-controls {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .search-input-wrap {
    width: 100% !important;
  }
  
  .search-input-wrap input {
    font-size: 15px !important;
    padding: 0.75rem !important;
  }
  
  .filter-pills {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .filter-pill {
    font-size: 0.875rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Blog Grid - Single Column */
  .blog-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Blog Cards */
  .blog-card {
    padding: 1.25rem !important;
  }
  
  .blog-card h3 {
    font-size: 1.25rem !important;
  }
  
  .blog-card-meta {
    font-size: 0.875rem !important;
  }
  
  /* -------------------- Channel Pages (channel-template*.html) -------------------- */
  
  /* Breadcrumb */
  .breadcrumb-nav {
    padding: 0.5rem 1rem !important; /* 进一步压缩 */
    font-size: 0.8rem !important; /* 字体更小 */
    background: transparent !important; /* 移除背景色 */
    border-bottom: none !important; /* 移除边框 */
    margin-bottom: 0.5rem !important;
  }
  
  .breadcrumb {
    flex-wrap: wrap !important;
    gap: 0.25rem !important; /* 减少间距 */
  }
  
  .breadcrumb-item {
    font-size: 0.8rem !important; /* 字体更小 */
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.35rem !important; /* 减少箭头间距 */
  }
  
  /* Channel Header */
  .channel-header {
    padding: 1.5rem 1rem !important;
  }
  
  .channel-title {
    font-size: 1.75rem !important;
  }
  
  .channel-description {
    font-size: 1rem !important;
  }
  
  /* -------------------- Sidebar Widgets -------------------- */
  
  .sidebar-widget {
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .sidebar-widget h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .recent-list {
    gap: 0.75rem !important;
  }
  
  .recent-item {
    font-size: 0.875rem !important;
  }

  .recent-excerpt {
    font-size: 0.82rem !important;
  }
  
  /* -------------------- Navigation Enhancements -------------------- */
  
  /* Mobile-only Navigation Toggle (独立汉堡菜单按钮) */
  .mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #1e3a8a;
    cursor: pointer;
    position: fixed;
    top: 60px; /* phone-bar 下方 */
    left: 1rem;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
    transition: all 0.2s ease;
  }
  
  .mobile-nav-toggle:hover {
    background: #1e40af;
    transform: scale(1.05);
  }
  
  .mobile-nav-toggle span {
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #ffffff;
    transition: all 0.2s ease;
  }
  
  .mobile-nav-toggle span:nth-child(1) { top: 14px; }
  .mobile-nav-toggle span:nth-child(2) { top: 21px; }
  .mobile-nav-toggle span:nth-child(3) { top: 28px; }
  
  /* Animated hamburger to close icon */
  .mobile-nav-toggle.open span:nth-child(1) { 
    top: 21px; 
    transform: rotate(45deg); 
  }
  .mobile-nav-toggle.open span:nth-child(2) { 
    opacity: 0; 
  }
  .mobile-nav-toggle.open span:nth-child(3) { 
    top: 21px; 
    transform: rotate(-45deg); 
  }
  
  /* Hamburger Menu (桌面端使用) */
  .nav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
  }
  
  .nav-toggle span {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #1e3a8a;
    transition: all 0.2s ease;
  }
  
  .nav-toggle span:nth-child(1) { top: 12px; }
  .nav-toggle span:nth-child(2) { top: 19px; }
  .nav-toggle span:nth-child(3) { top: 26px; }
  
  /* Animated hamburger to close icon */
  .nav-toggle.open span:nth-child(1) { 
    top: 19px; 
    transform: rotate(45deg); 
  }
  .nav-toggle.open span:nth-child(2) { 
    opacity: 0; 
  }
  .nav-toggle.open span:nth-child(3) { 
    top: 19px; 
    transform: rotate(-45deg); 
  }
  
  /* Global Navigation Links (移动端弹出菜单) */
  .global-nav-links {
    display: none;
    position: fixed !important; /* 改为固定定位 */
    left: 0;
    right: 0;
    top: 50px !important; /* phone-bar 下方 */
    bottom: 0;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    padding: 1.5rem 1rem;
    z-index: 1050;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow-y: auto;
  }
  
  .global-nav-links.open {
    display: flex !important;
  }
  
  .global-nav-links a {
    padding: 1rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
    color: #1e3a8a;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  
  .global-nav-links a:hover,
  .global-nav-links a:active {
    background: #f8fafc;
  }
  
  .global-nav-links a:last-of-type {
    border-bottom: none;
  }
  
  /* Language Switch */
  .global-language-switch {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* Header */
  .global-header__inner {
    padding: 1rem !important;
    position: relative;
  }
  
  .global-logo {
    font-size: 1.1rem !important;
  }
  
  /* -------------------- Phone Bar -------------------- */
  
  .phone-bar {
    font-size: 0.8rem !important; /* 从 0.875rem 减小 */
    padding: 0.5rem 1rem !important; /* 从 0.65rem 减小 */
    text-align: center !important;
  }
  
  .phone-bar a {
    word-break: break-word;
    display: inline-block;
  }
  
  /* -------------------- Pagination -------------------- */
  
  .pagination {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }
  
  .pagination-btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* -------------------- Footer -------------------- */
  
  footer {
    padding: 2rem 1rem !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .footer-column h4 {
    font-size: 1.1rem !important;
  }
  
  /* -------------------- Images & Media -------------------- */
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  iframe {
    max-width: 100% !important;
  }
  
  /* -------------------- Forms -------------------- */
  
  input[type="text"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  
  /* -------------------- Utility Classes -------------------- */
  
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
  
  /* No Scroll when menu open */
  body.no-scroll {
    overflow: hidden !important;
  }
  
  /* Nav Overlay */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 1040; /* 低于菜单但高于内容 */
  }
  
  .nav-overlay.open {
    opacity: 1;
    visibility: visible;
  }
}

/* ==================== TABLET BREAKPOINT (768px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
  
  .container,
  .blog-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }
  
  /* Blog Grid - 2 Columns on Tablet */
  .blog-grid,
  .content-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  /* Post Layout - Still show sidebar on tablet */
  .post-layout {
    grid-template-columns: 1fr 300px !important;
  }
  
  /* News Grid - 2 Columns on Tablet */
  .news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  /* Side Effects Grid - 2 Columns on Tablet */
  .side-effects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* ==================== NEWS & SIDE EFFECTS PAGES ==================== */
@media (max-width: 768px) {
  
  /* News Grid - Single Column on Mobile */
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    margin-top: 1.5rem !important;
  }
  
  .news-card {
    padding: 1.25rem !important;
  }
  
  .news-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .news-card p {
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .news-source {
    font-size: 0.85rem !important;
  }
  
  /* Side Effects Grid - Single Column on Mobile */
  .side-effects-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  .side-effects-grid .card {
    padding: 1.5rem !important;
  }
  
  .side-effects-grid .card h2 {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .side-effects-grid .card p {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Page Intro Section */
  .page-intro {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .page-intro h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .page-intro p,
  .page-intro .lead {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .section-intro {
    font-size: 1rem !important;
  }
  
  /* Hero Section */
  .hero {
    padding: 2rem 1rem !important;
  }
  
  .hero h1 {
    font-size: 1.75rem !important;
  }
  
  .hero .lead,
  .hero p {
    font-size: 1rem !important;
  }
  
  /* Container Adjustments */
  .container {
    padding: 1.5rem 1rem !important;
  }
  
  main.container {
    padding: 1.5rem 1rem 2rem !important;
  }
}

/* ==================== SMALL MOBILE (<400px) ==================== */
@media (max-width: 400px) {
  
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.35rem !important; /* 从 1.5rem 进一步缩小 */
  }
  
  h2 {
    font-size: 1.2rem !important;
  }
  
  h3 {
    font-size: 1.05rem !important;
  }
  
  .container,
  .blog-container,
  main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .blog-card {
    padding: 1rem !important;
  }
  
  .post-hero,
  .blog-hero {
    height: 140px !important; /* 从 160px 进一步缩小 */
  }
  
  .blog-title {
    font-size: 1.25rem !important; /* 从 1.5rem 缩小 */
  }
  
  .phone-bar {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.5rem !important;
  }
  
  .mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    top: 45px !important;
    left: 0.5rem !important;
  }
}