/* ============================================================
   pobo — Mobile Responsive Styles
   ============================================================ */

/* 平板及以下（≤768px） */
@media screen and (max-width: 768px) {
  .site-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  .site-nav ul {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    min-height: 50vh;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-logo {
    width: min(260px, 70vw);
  }

  .hero-subtitle {
    font-size: 1rem;
    padding: 0 var(--spacing-sm);
  }

  .section {
    padding: var(--spacing-md) var(--spacing-sm);
  }

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

/* 手机（≤480px） */
@media screen and (max-width: 480px) {
  .site-nav ul {
    gap: var(--spacing-xs);
  }

  .site-nav a {
    font-size: 0.85rem;
  }

  .hero {
    min-height: 45vh;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .card {
    padding: var(--spacing-sm);
  }

  .link-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
  }
}