/* ============================================================
   Dual Skin Demo — responsive.css
   Desktop-first responsive breakpoints.
   1024px — large tablets / small laptops
   768px  — tablets / mobile landscape
   480px  — mobile portrait
   ============================================================ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  /* 4-col grid → 2-col */
  .cards-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2x2 grid */
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reduce hero padding slightly */
  .site-hero {
    padding-top: 160px;
  }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Header: hide nav links, show burger */
  .nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  /* Theme toggle stays visible in header */
  .nav-theme-toggle {
    display: block;
  }

  /* All grids → 1 column */
  .cards-grid,
  .cards-grid-3,
  .cards-grid-4 {
    grid-template-columns: 1fr;
  }

  /* Mission/Vision → 1 column */
  .mission-vision {
    grid-template-columns: 1fr;
  }

  /* Hero stats: reduce gap */
  .hero-stats {
    gap: 1.5rem;
  }

  /* Hero heading: fluid mid-range */
  .site-hero h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
  }

  /* Footer → 1 column */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Footer bottom: stack */
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    margin-top: 2rem;
  }

  /* Newsletter: stack */
  .newsletter-form {
    flex-direction: column;
    gap: 0.75rem;
  }

  .newsletter-form input {
    border-right: var(--border);
    border-radius: var(--radius);
  }

  .newsletter-form button {
    border-radius: var(--radius);
  }

  /* Section padding reduction */
  .site-section {
    padding: 60px 0;
  }

  .newsletter-section,
  .cta-section {
    padding: 60px 0;
  }

  /* Header padding reduction */
  .site-header {
    padding: 16px 24px;
  }

  /* Fix: position:fixed inside a transformed parent is relative to that
     parent, not the viewport. When header hides via translateY(-100%),
     the fixed nav overlay shifts with it. Reset transform when nav open. */
  body.nav-open .site-header {
    transform: none !important;
  }
}

/* ── 480px ── */
@media (max-width: 480px) {
  /* Hero heading: smaller clamp */
  .site-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .page-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  /* Hero stats: column layout */
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Hero: reduce top padding */
  .site-hero {
    padding-top: 120px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .page-hero {
    padding-top: 100px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Container: tighter padding */
  .container {
    padding: 0 1.25rem;
  }

  /* Section padding: tighter */
  .site-section {
    padding: 48px 0;
  }

  /* Footer */
  .site-footer {
    padding: 40px 0 16px;
  }

  .footer-inner {
    padding: 0 1.25rem;
  }

  .footer-bottom {
    padding: 16px 1.25rem 0;
  }

  /* Skin switcher: stack vertically on small screens */
  .footer-skin-switcher {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
}

/* ── Touch-hover: mirrors :hover states for tap-to-hover pattern ── */
@media (max-width: 768px) {
  .service-card.touch-hover,
  .sector-card.touch-hover,
  .value-card.touch-hover,
  .team-card.touch-hover,
  .article-card.touch-hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}