/* ============================================================
  InVaal [016] — Responsive Overrides
  File: css/responsive.css

  Purpose:
  - Small overrides that adapt layout to tablets + phones
  - Keeps "news site" spacing and grids readable on small screens

  Note:
  - Core responsiveness is already handled in root.css and mobile_nav.css
  - This file should stay lightweight and conflict-free
============================================================ */

/* =========================
  Tablet and below
========================= */
@media (max-width: 980px) {
  /* Filters stack vertically */
  .filter-controls {
    flex-direction: column;
  }

  /* About section becomes one column */
  .about-us {
    grid-template-columns: 1fr;
  }

  /* Team / job grids fall back nicely */
  .team-grid,
  .job-listings {
    grid-template-columns: 1fr;
  }

  /* Application steps stack if needed */
  .application-steps {
    gap: 16px;
  }

  /* Footer columns stack */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  /* Footer nav stays readable */
  #site-footer nav ul {
    justify-content: center;
  }

  /* Social links centered */
  .social-links {
    justify-content: center;
  }
}

/* =========================
  Phones
========================= */
@media (max-width: 560px) {
  /* Reduce large header typography on location pages */
  .location-header h1 {
    font-size: 1.5rem; /* controlled and readable */
  }

  /* Ensure single-column story cards */
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* If your loader uses lead story sizing, neutralize on small screens */
  .news-card.is-lead {
    grid-column: auto;
  }

  /* Footer padding slightly reduced */
  #site-footer {
    padding: 22px 0;
  }

  .footer-socials {
    width: 36px;
    height: 36px;
  }

  .copyright {
    font-size: 0.85rem;
  }
}