/* ══════════════════════════════════════════════════════════════
   South China Tours — Responsive Breakpoints
   ══════════════════════════════════════════════════════════════ */

/* ── 1440px+ — Full desktop layout (default) ── */

/* ── 1100px — Reduce column count ── */
@media (max-width: 1100px) {
  .hero-grid,
  .region-editorial-grid,
  .region-compact-row,
  .mode-layout,
  .home-split-feature,
  .split-feature,
  .guide-grid,
  .client-proof-grid,
  .intro-ribbon,
  .cta-band-inner,
  .destinations-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorer-search-panel,
  .explorer-filter-group {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region-note-panel {
    justify-self: start;
  }

  .client-proof-head {
    display: grid;
  }

  .region-feature {
    min-height: 400px;
  }

  .region-compact-card {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .article-layout-shell {
    grid-template-columns: 1fr;
  }

  .article-side-rail {
    position: static;
  }
}

/* ── 900px — Tablet adjustments ── */
@media (max-width: 900px) {
  .blog-region-grid {
    grid-template-columns: 1fr;
  }

  .blog-region-card {
    grid-template-columns: 1fr;
  }

  .blog-region-media img {
    height: 220px;
    width: 100%;
    object-fit: cover;
  }

  .itinerary-form-grid {
    grid-template-columns: 1fr;
  }

  .itinerary-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 760px — Mobile single column ── */
@media (max-width: 760px) {
  .section {
    padding: 40px 18px;
  }

  .explorer-toolbar {
    padding: 22px 18px 24px;
  }

  .explorer-chip-row {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .explorer-chip {
    flex: 0 1 auto !important;
    min-height: 42px !important;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .blog-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .blog-card-body {
    padding: 18px;
  }

  .client-proof-grid {
    grid-template-columns: 1fr;
  }

  .home-paths {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .region-compact-card {
    grid-template-columns: 1fr;
  }

  .region-compact-card img {
    height: 180px;
  }

  .region-feature {
    min-height: 340px;
  }

  .region-feature-copy,
  .region-side-copy {
    padding: 18px;
  }

  .hero-copy h1 {
    font-size: 3.25rem;
  }

  .home-route-panel {
    width: 100%;
    max-width: none;
  }
}

/* ── 560px — Small mobile ── */
@media (max-width: 560px) {
  .home-paths a {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .home-paths a span {
    text-align: center;
  }

  .itinerary-check-grid {
    grid-template-columns: 1fr;
  }

  .actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    text-align: center;
  }
}

/* ── 390px — Small screen optimization ── */
@media (max-width: 390px) {
  .nav-inner {
    padding: 0 12px;
    gap: 12px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .nav-search-desktop {
    display: none;
  }

  .section {
    padding: 28px 14px;
  }

  .hero-copy h1 {
    font-size: 2.5rem;
  }

  .guide-card-image {
    height: 160px;
  }
}

/* ── Mobile nav toggle ── */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-search-mobile,
  .nav-contact-mobile {
    display: block;
  }

  .nav-channel-desktop {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .navbar.is-open .nav-links {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
  }

  .nav-search-mobile form {
    display: flex;
    padding: 8px 0;
  }

  .nav-search-mobile input {
    width: 100%;
  }

  .nav-contact-mobile {
    display: flex;
    gap: 10px;
    padding: 8px 0;
  }
}