/* ==========================================================================
   RESPONSIVE.CSS
   Breakpoints for shared/global elements (header, footer, grids, forms).
   Page-specific responsive tweaks live in css/pages/*.css.

   Breakpoints:
     1180px  large desktop / laptop
     980px   laptop -> tablet (nav collapses)
     700px   tablet -> mobile
     460px   small mobile phones
   ========================================================================== */

/* ---- Laptop / tablet ---- */
@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 20px 24px;
    border-top: 1px solid var(--color-border);
    background: #080808;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a:not(.nav-cta) {
    padding: 15px 0;
  }

  .main-nav a:not(.nav-cta)::after {
    display: none;
  }

  .nav-cta {
    margin-top: 8px;
    text-align: center;
  }

  .menu-toggle {
    display: block;
  }

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

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

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

  .footer-brand {
    grid-column: 1 / -1;
  }

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

/* ---- Tablet / mobile ---- */
@media (max-width: 700px) {
  .container,
  .container-narrow {
    width: min(var(--container-max), calc(100% - 28px));
  }

  .header-inner {
    min-height: var(--header-height-sm);
  }

  .main-nav {
    top: var(--header-height-sm);
  }

  .logo img {
    width: 175px;
  }

  .page-hero {
    padding: calc(var(--header-height-sm) + 40px) 0 44px;
  }

  .grid-3,
  .grid-4,
  .portfolio-grid,
  .tag-grid {
    grid-template-columns: 1fr;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .cta-band-inner {
    display: block;
  }

  .cta-band .btn {
    margin-top: 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom-inner {
    min-height: auto;
    display: block;
    padding: 24px 0;
    text-align: center;
  }

  .social-links {
    justify-content: center;
    margin-top: 14px;
  }

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

  .form-field.span-2 {
    grid-column: auto;
  }
}

/* ---- Small mobile phones ---- */
@media (max-width: 460px) {
  .btn {
    width: 100%;
  }

  .logo img {
    width: 148px;
  }

  .card,
  .accordion-trigger {
    padding-left: 4px;
    padding-right: 4px;
  }

  .card {
    padding: 26px 20px;
  }

  .filters {
    gap: 14px;
  }
}