/* ============================================================
   指路教育 — Responsive Media Queries
   Mobile-first: base styles are mobile. These add complexity.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TABLET: 768px+
   ════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ── Typography Scale Adjustment ── */
  h1, .h1 { font-size: var(--text-6xl); }

  /* ── Grids ── */
  .zl-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .zl-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .zl-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Split Layout ── */
  .zl-split {
    grid-template-columns: 1fr 1fr;
  }

  .zl-split--alt .zl-split__media {
    order: -1;
  }

  /* ── Navigation ── */
  .zl-nav {
    display: flex;
  }

  .zl-menu-toggle {
    display: none;
  }

  .zl-header-cta {
    display: inline-flex;
  }

  /* ── Trust Bar ── */
  .zl-trust-bar .container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Article Card ── */
  .zl-article-card {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }

  /* ── CTA Banner ── */
  .zl-cta-banner .container {
    grid-template-columns: 1fr auto;
    gap: var(--space-16);
  }

  /* ── Footer ── */
  .site-footer .container {
    grid-template-columns: 2fr 1fr 2fr;
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* ── Page Hero ── */
  .zl-page-hero {
    padding-block: var(--space-20);
  }

  /* ── Course Cards Grid ── */
  .zl-courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Teacher Cards Grid ── */
  .zl-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Section Spacing ── */
  .zl-section {
    padding-block: var(--space-24);
  }

  .zl-section--sm {
    padding-block: var(--space-16);
  }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP: 1024px+
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── Grids ── */
  .zl-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .zl-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Navigation spacing ── */
  .zl-nav__list {
    gap: var(--space-2);
  }

  .zl-nav__link {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
  }

  /* ── Hero ── */
  .zl-hero__title {
    font-size: var(--text-6xl);
  }

  /* ── Course Cards ── */
  .zl-courses-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Teacher Cards ── */
  .zl-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Contact Layout ── */
  .zl-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }

  /* ── News Layout ── */
  .zl-news-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-10);
    align-items: start;
  }

  /* ── Timeline ── */
  .zl-timeline {
    padding-left: 0;
    max-width: 800px;
    margin-inline: auto;
  }

  .zl-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .zl-timeline__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .zl-timeline__item:nth-child(odd) .zl-timeline__content {
    text-align: right;
    grid-column: 1;
    grid-row: 1;
  }

  .zl-timeline__item:nth-child(even) .zl-timeline__content {
    grid-column: 2;
    grid-row: 1;
  }

  .zl-timeline__dot {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ── Sidebar ── */
  .zl-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
  }

  /* Hover effects that are desktop-only */
  .zl-card:hover {
    transform: translateY(-4px);
  }
}

/* ════════════════════════════════════════════════════════════
   WIDE: 1280px+
   ════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

  .zl-section {
    padding-block: var(--space-24);
  }

  .zl-section--lg {
    padding-block: 8rem;
  }

  .zl-page-hero {
    padding-block: var(--space-24);
  }
}

/* ════════════════════════════════════════════════════════════
   WECHAT IN-APP BROWSER FIXES
   ════════════════════════════════════════════════════════════ */

/* Fix for WeChat's X5 Blink engine: position: sticky not always supported */
@supports not (position: sticky) {
  .site-header {
    position: fixed;
    width: 100%;
  }

  body {
    padding-top: var(--header-height);
  }
}