/* =====================================================
   MOORE'S DOORS AND TRIM - RESPONSIVE STYLES
   Mobile-First Approach
   ===================================================== */

/* =====================================================
   BASE (Mobile: 0-639px)
   ===================================================== */

/* Mobile navigation adjustments are in main style.css */

/* Mobile hero */
.hero {
  min-height: auto;
  padding: 120px 0 60px;
}

.hero-title {
  font-size: 2rem;
}

.hero-subtitle {
  font-size: 1rem;
}

.hero-cta {
  flex-direction: column;
}

.hero-cta .btn {
  width: 100%;
  text-align: center;
}

/* Mobile sections */
.section {
  padding: 3rem 0;
}

.section-lg {
  padding: 4rem 0;
}

/* Mobile grids */
.products-grid,
.features-grid,
.gallery-grid {
  grid-template-columns: 1fr;
}

/* Mobile about preview */
.about-preview {
  grid-template-columns: 1fr;
}

.about-preview-badge {
  position: relative;
  bottom: auto;
  left: auto;
  margin-top: 1rem;
  display: inline-block;
}

/* Mobile service area */
.service-area-content {
  grid-template-columns: 1fr;
}

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

/* Mobile footer */
.footer-grid {
  grid-template-columns: 1fr;
  text-align: center;
}

.footer-contact-item {
  justify-content: center;
}

.footer-bottom {
  flex-direction: column;
  text-align: center;
}

/* =====================================================
   SMALL TABLETS (640px and up)
   ===================================================== */
@media (min-width: 640px) {
  .hero {
    min-height: 70vh;
    padding: 140px 0 80px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }

  .hero-cta {
    flex-direction: row;
  }

  .hero-cta .btn {
    width: auto;
  }

  /* Two column grids */
  .products-grid,
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Service area cities */
  .service-area-cities {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-contact-item {
    justify-content: flex-start;
  }
}

/* =====================================================
   TABLETS (768px and up)
   ===================================================== */
@media (min-width: 768px) {
  .hero {
    min-height: 80vh;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-trust {
    flex-direction: row;
  }

  /* Section spacing */
  .section {
    padding: 4rem 0;
  }

  .section-lg {
    padding: 5rem 0;
  }

  /* Three column grids */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

  /* Page hero */
  .page-hero {
    padding: 180px 0 100px;
  }
}

/* =====================================================
   SMALL LAPTOPS (1024px and up)
   ===================================================== */
@media (min-width: 1024px) {
  /* Navigation - desktop layout */
  .nav-links {
    position: static;
    flex-direction: row;
    padding: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
  }

  .nav-toggle {
    display: none;
  }

  .nav-actions .btn {
    display: inline-flex;
  }

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

  .hero-title {
    font-size: 3.5rem;
  }

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

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

  /* About preview */
  .about-preview {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .about-preview-badge {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
  }

  /* Service area */
  .service-area-content {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .footer-bottom {
    flex-direction: row;
  }

  /* Section spacing */
  .section {
    padding: 5rem 0;
  }

  .section-lg {
    padding: 6rem 0;
  }
}

/* =====================================================
   DESKTOPS (1280px and up)
   ===================================================== */
@media (min-width: 1280px) {
  /* Hero */
  .hero-title {
    font-size: 4rem;
  }

  .hero-content {
    max-width: 750px;
  }

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

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

  /* Larger container padding */
  :root {
    --container-padding: 2rem;
  }
}

/* =====================================================
   LARGE SCREENS (1536px and up)
   ===================================================== */
@media (min-width: 1536px) {
  :root {
    --container-max: 1400px;
  }

  .hero-title {
    font-size: 4.5rem;
  }
}

/* =====================================================
   SPECIFIC COMPONENT RESPONSIVE FIXES
   ===================================================== */

/* Product cards on mobile */
@media (max-width: 639px) {
  .product-card-content {
    padding: 1rem;
  }

  .product-card-title {
    font-size: 1.125rem;
  }
}

/* CTA banner on mobile */
@media (max-width: 639px) {
  .cta-banner {
    padding: 3rem 0;
  }

  .cta-banner h2 {
    font-size: 1.75rem;
  }

  .cta-banner-buttons {
    flex-direction: column;
  }

  .cta-banner-buttons .btn {
    width: 100%;
  }
}

/* Vendor grid on mobile */
@media (max-width: 639px) {
  .vendor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .vendor-logo {
    padding: 1rem;
    min-height: 60px;
  }
}

/* Form responsive */
@media (max-width: 639px) {
  .contact-form-wrapper {
    padding: 1.5rem;
  }
}

/* Service area map */
@media (max-width: 767px) {
  .service-area-map {
    min-height: 300px;
    padding: 1.5rem;
  }

  .service-area-map svg {
    width: 60px;
    height: 60px;
  }
}

/* Feature cards on mobile */
@media (max-width: 639px) {
  .feature-card {
    padding: 1.5rem;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
  }

  .feature-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
  .header,
  .nav,
  .cta-banner,
  .footer,
  .btn {
    display: none !important;
  }

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

  .hero {
    min-height: auto;
    padding: 2rem 0;
    background: none !important;
  }

  .hero-title,
  .hero-subtitle {
    color: #000 !important;
  }

  .section {
    padding: 1.5rem 0;
    page-break-inside: avoid;
  }

  a {
    text-decoration: underline;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* =====================================================
   LANDSCAPE ORIENTATION FIXES
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 100px 0 40px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-trust {
    display: none;
  }
}

/* =====================================================
   HIGH DPI / RETINA DISPLAYS
   ===================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders on high DPI displays */
  .product-card,
  .feature-card,
  .contact-form-wrapper {
    border: 0.5px solid var(--color-gray-300);
  }
}

/* =====================================================
   TOUCH DEVICE OPTIMIZATIONS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
  }

  .nav-link {
    padding: 0.75rem 0;
  }

  /* Disable hover effects that can be sticky on touch */
  .product-card:hover,
  .feature-card:hover,
  .hover-lift:hover {
    transform: none;
  }

  /* Keep functional hover states but simplify */
  .product-card:active,
  .feature-card:active {
    transform: scale(0.98);
  }
}