/* ===== Mobile Overrides ===== */
/* All responsive rules consolidated here. Loaded last to override defaults. */

/* ── ≤1024px: Tablet landscape ── */
@media (max-width: 1024px) {
  .carousel-slide a { height: 380px; }
  .carousel-overlay h2 { font-size: 22px; max-width: 90%; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ≤868px: Tablet portrait / home sidebar collapse ── */
@media (max-width: 868px) {
  .content-with-sidebar {
    grid-template-columns: 1fr;
  }
  .home-content { grid-template-columns: 1fr; }
  .post-list { order: -1; }
  .post-list .section-title { margin-bottom: 16px; }
  .blog-post-card { grid-template-columns: 1fr; }
  .blog-post-card .thumb img { height: 220px; }
  .carousel-overlay { padding: 60px 28px 28px; }
  .carousel-overlay h2 { font-size: 20px; }
}

/* ── ≤768px: Tablet portrait / large phone ── */
@media (max-width: 768px) {
  /* Header */
  .menu-toggle { display: flex; }
  .main-nav ul {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    flex-direction: column;
    padding: 8px 16px;
    gap: 0;
    box-shadow: var(--shadow-lg);
    z-index: 100;
  }
  .main-nav ul.open { display: flex; }
  .main-nav a {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }
  .main-nav li:last-child a { border-bottom: none; }

  /* Content */
  .post-grid { grid-template-columns: 1fr; }
  .entry-header h1 { font-size: 24px; }
  .entry-content { font-size: 16px; }
  .related-grid { grid-template-columns: 1fr; }
  .post-navigation { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; align-items: center; text-align: center; }
  .share-section { flex-wrap: wrap; }

  /* Carousel */
  .carousel-slide a { height: 260px; }
  .carousel-btn { display: none; }
  .carousel-overlay { padding: 50px 20px 20px; }
  .carousel-overlay h2 { font-size: 17px; max-width: 100%; }
  .carousel-overlay .carousel-meta span { margin-right: 10px; }

  /* Footer */
  .footer-links-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links-sep { display: none; }

  /* Ads */
  .ad-container { min-height: 60px; margin: 16px 0; }
  .ad-slot-carousel-banner { min-height: 60px; padding: 8px 16px; }
  .ad-slot-single-top, .ad-slot-single-middle, .ad-slot-single-bottom { min-height: 60px; }
  .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

/* ── ≤600px: Phone landscape ── */
@media (max-width: 600px) {
  /* Comments */
  .comment-text { margin-left: 0; }
  .comment-text::before { display: none; }
  .comment-reply { margin-left: 0; }
  .comment-list .children { margin-left: 20px; }
  .comment-respond { padding: 20px; }
  .comment-form .comment-form-author,
  .comment-form .comment-form-email,
  .comment-form .comment-form-url {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* ── ≤480px: Phone portrait ── */
@media (max-width: 480px) {
  .container, .header-inner,
  .home-content, .hero-carousel,
  .content-area, .content-wide,
  .breadcrumbs { padding-left: 16px; padding-right: 16px; }

  .carousel-slide a { height: 200px; }
  .carousel-overlay { padding: 40px 16px 16px; }
  .carousel-overlay h2 { font-size: 15px; }
  .carousel-overlay .carousel-cat { font-size: 10px; padding: 2px 10px; }

  .entry-header h1 { font-size: 20px; }

  .blog-post-card { padding: 16px; gap: 14px; }
  .blog-post-card .thumb img { height: 180px; }
  .blog-post-card .post-body h2 { font-size: 17px; }
  .blog-post-card .post-body .meta-row { flex-wrap: wrap; gap: 8px; }

  .grid-item .info { padding: 12px 14px 14px; }
  .grid-item .info h3 { font-size: 14px; }
  .grid-item .info .meta-row { gap: 8px; font-size: 11px; }

  .post-grid { gap: 14px; }

  .home-content { gap: 20px; margin: 20px auto; }

  .site-title { font-size: 18px; }
  .header-btn { width: 34px; height: 34px; font-size: 16px; }

  .entry-meta { font-size: 12px; gap: 8px; }
  .entry-tags { gap: 6px; }
  .entry-tags a { font-size: 12px; padding: 3px 10px; }

  .sidebar .widget { padding: 16px; }

  .auth-card, .submit-card { padding: 20px 16px; }
  .submit-card h3 { font-size: 18px; }

  .page-centered { padding: 40px 16px; }
  .page-centered h1 { font-size: 48px; }

  .carousel-wrapper { border-radius: 8px; }
  .carousel-dots { gap: 6px; padding: 12px 0 0; }
  .carousel-dots button { width: 6px; height: 6px; }
  .carousel-dots button.active { width: 20px; }
}