/* ==========================================================================
   ETC-MEDMED Responsive Styles
   Media Queries for Mobile, Tablet, Desktop
   ========================================================================== */

/* ========================================
   Mobile First Base (< 576px)
   Default styles are mobile
   ======================================== */

/* Grid - Single column on mobile */
.grid-2,
.grid-3,
.grid-4,
.grid-6 {
  grid-template-columns: 1fr;
}

/* ========================================
   Small Devices (576px and up)
   ======================================== */

@media (min-width: 576px) {
  /* Grid */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* ========================================
   Medium Devices / Tablets (768px and up)
   ======================================== */

@media (min-width: 768px) {
  /* Container */
  .container {
    padding-left: var(--container-padding-md);
    padding-right: var(--container-padding-md);
  }

  /* Section */
  .section {
    padding-top: var(--section-padding-md);
    padding-bottom: var(--section-padding-md);
  }

  /* Typography */
  h1 {
    font-size: 2.5rem; /* 40px */
  }

  h2 {
    font-size: 2rem; /* 32px */
  }

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

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

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

  /* Two Column Layout */
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Header */
  .header__nav {
    display: block;
  }

  .header__menu-toggle {
    display: none;
  }

  .header__phone {
    display: flex;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Hero */
  .hero {
    min-height: 550px;
  }

  .hero__headline {
    font-size: 2.75rem; /* 44px */
  }

  /* Partner Strip */
  .partner-strip__logo {
    max-height: 60px;
  }
}

/* ========================================
   Large Devices / Desktops (992px and up)
   ======================================== */

@media (min-width: 992px) {
  /* Container */
  .container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
  }

  /* Section */
  .section {
    padding-top: var(--section-padding-lg);
    padding-bottom: var(--section-padding-lg);
  }

  /* Typography */
  h1 {
    font-size: var(--text-5xl); /* 48px */
  }

  h2 {
    font-size: var(--text-4xl); /* 36px */
  }

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

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

  .grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Header */
  .header__cta {
    display: inline-flex;
  }

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

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

  /* Hero */
  .hero {
    min-height: 600px;
  }

  .hero__headline {
    font-size: var(--text-5xl);
  }

  .hero__content {
    max-width: 650px;
  }

  /* CTA Strip */
  .cta-strip__headline {
    font-size: var(--text-4xl);
  }
}

/* ========================================
   Extra Large Devices (1200px and up)
   ======================================== */

@media (min-width: 1200px) {
  /* Hero */
  .hero {
    min-height: 650px;
  }

  /* Product Grid - more columns */
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .header,
  .footer,
  .cta-strip,
  .mobile-nav,
  .btn {
    display: none !important;
  }

  .main {
    padding-top: 0;
  }

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

  a {
    text-decoration: underline;
    color: #000;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   High Contrast Mode
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --border: #000;
    --muted: #333;
  }

  .btn-primary {
    border: 2px solid #000;
  }

  .card {
    border-width: 2px;
  }
}

/* ========================================
   Dark Mode Support (Future)
   ======================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1a1a1a;
    --bg-ice: #2a2a2a;
    --text: #ffffff;
    --text-muted: #a0a0a0;
    --border: #3a3a3a;
  }
}
*/