/* ============================================================
   SPIG INDUSTRY — Responsive Stylesheet
   Mobile-first: base styles in style.css target mobile.
   This file adds tablet + desktop overrides.
   ============================================================ */

/* ============================================================
   SMALL TABLET — 640px
   ============================================================ */
@media (min-width: 40rem) {

  /* Show fax number in top bar on small tablet+ */
  .top-bar__item--hide-sm {
    display: flex;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Certs */
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* State list */
  .state-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Form row */
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Products grid — 2 col */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (min-width: 48rem) {

  /* Hero */
  .hero-slide__body {
    font-size: 1.25rem;
  }

  /* Feature section */
  .feature-section {
    grid-template-columns: 1fr 1fr;
  }

  /* CTA banner */
  .cta-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cta-banner__text {
    flex: 1;
    padding-right: 2rem;
  }

  .cta-banner__actions {
    flex-shrink: 0;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Cert grid — 4 cols */
  .cert-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Map */
  .map-embed iframe {
    height: 320px;
  }

  /* Products — 2 col stays */

  /* State list */
  .state-list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Steps — single column, larger */
}

/* ============================================================
   DESKTOP — 1024px (navigation switch point)
   ============================================================ */
@media (min-width: 64rem) {

  /* Navigation switch */
  .nav-desktop {
    display: flex;
  }

  .nav-mobile-toggle {
    display: none;
  }

  .mobile-menu-overlay {
    display: none !important;
  }

  /* Hero — larger text already via clamp, just extra spacing */
  .hero-slide__content {
    padding-block: 5rem;
  }

  /* Products grid — 4 cols */
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Feature section */
  .feature-section {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Map */
  .map-embed iframe {
    height: 360px;
  }

  /* CTA banner - larger padding */
  .cta-banner {
    padding-block: 5rem;
  }
}

/* ============================================================
   LARGE DESKTOP — 1280px
   ============================================================ */
@media (min-width: 80rem) {

  /* Top bar — always show all items */
  .top-bar__info {
    gap: 2.5rem;
  }

  /* More breathing room on sections */
  .section {
    padding-block: 6rem;
  }

  .section--lg {
    padding-block: 7rem;
  }

  /* Hero */
  .hero-slider,
  .hero-slider__track {
    min-height: 90vh;
  }

  /* State list */
  .state-list {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .hero-slider,
  .hero-slider__controls,
  .nav-mobile-toggle,
  .mobile-menu-overlay,
  .cta-banner,
  .site-footer,
  .portfolio-filters,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .spec-table-wrap {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}