/* ===================================
   RESPONSIVE ADJUSTMENTS
   Mobile-first approach with progressive enhancement
   =================================== */

/* ===================================
   MOBILE (Base styles - already mobile-first)
   0px - 767px
   =================================== */

/* ===================================
   TABLET
   768px and up
   =================================== */

@media (min-width: 768px) {
  /* Typography adjustments */
  body {
    font-size: 1.0625rem; /* Slightly larger on tablet */
  }

  /* Navigation */
  /* .nav__container {
    padding: var(--space-md) var(--space-lg);
  } */

  /* Hero */
  .hero__content {
    max-width: 100%;
  }

  /* Forms */
  .contact-form {
    padding: var(--space-2xl) var(--space-3xl);
  }
}

/* ===================================
   DESKTOP
   1024px and up
   =================================== */

@media (min-width: 1024px) {
  /* Footer - 3 columns */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ===================================
   LARGE DESKTOP
   1280px and up
   =================================== */

@media (min-width: 1280px) {
  /* Container breathing room */
  :root {
    --container-padding: var(--space-2xl);
  }
}

/* ===================================
   EXTRA LARGE SCREENS
   1536px and up
   =================================== */

@media (min-width: 1536px) {
}

/* ===================================
  PRINT STYLES
  =================================== */

@media print {
  .nav,
  .nav__toggle {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: var(--space-lg) 0;
  }

  body {
    font-size: 12pt;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .btn {
    border: 1px solid black;
  }
}

/* ===================================
   LANDSCAPE MOBILE
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--space-xl) 0;
  }
}

/* ===================================
   HIGH DPI DISPLAYS
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure images look crisp on retina displays */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}