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

/* Tablet & below: collapse to single column */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
    gap: 0;
  }

  .intro {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 5rem 0 2rem;
    justify-content: flex-start;
    gap: 2.5rem;
  }

  /* Hide the scroll-spy nav on mobile — sections show their own headings */
  .nav {
    display: none;
  }

  .intro-tagline {
    max-width: 540px;
  }

  .content {
    max-width: 100%;
    padding: 1rem 0 4rem;
  }

  .section-heading-mobile {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 1rem 0;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .section {
    margin-bottom: 4rem;
  }
}

/* Phone */
@media (max-width: 560px) {
  .layout {
    padding: 0 1.25rem;
  }

  .intro {
    padding-top: 4rem;
  }

  .timeline-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.25rem;
    margin: 0 -1.25rem;
  }

  .project-link {
    padding: 1.25rem;
    margin: 0 -1.25rem;
  }

  .form-row {
    flex-direction: column;
  }

  .intro-controls {
    flex-wrap: wrap;
  }

  .btn-primary {
    align-self: stretch;
    text-align: center;
  }
}

/* Large screens: a touch more breathing room */
@media (min-width: 1400px) {
  .layout {
    max-width: 1280px;
  }
}