/* ===== Responsive Breakpoints ===== */

/* Tablet and below — single column */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 200px;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .site-hero {
    padding: 4rem 2rem 3.5rem;
  }

  .hero-subtitle {
    font-size: 0.75rem;
  }

  .essay-title {
    font-size: 2rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .card {
    min-height: 160px;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .card-sub {
    font-size: 0.8125rem;
  }

  .site-hero {
    padding: 3rem 1.5rem 2.5rem;
  }

  .hero-subtitle {
    font-size: 0.6875rem;
  }
}