/* Responsive Styles - Mobile First Approach */

/* ========================================
   MOBILE FIRST - Base styles (< 576px)
   Already defined in other CSS files
   ======================================== */

/* ========================================
   SMALL TABLETS (576px and up)
   ======================================== */
@media (min-width: 576px) {
  /* Typography adjustments */
  .hero__title {
    font-size: var(--font-size-5xl);
  }

  /* Hero CTAs side by side */
  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
  }

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

  /* Products grid - still 1 column on small tablets */

  /* Countdown bigger numbers */
  .countdown__number {
    width: 80px;
    font-size: var(--font-size-4xl);
  }

  /* Form fields */
  .quote-form {
    padding: var(--spacing-2xl);
  }
}

/* ========================================
   TABLETS (768px and up)
   ======================================== */
@media (min-width: 768px) {
  /* Navigation - Desktop style */
  .nav__toggle {
    display: none;
  }

  .nav__menu {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: none;
  }

  .nav__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
  }

  .header.is-scrolled .nav__link {
    color: var(--color-text);
  }

  .nav__link:hover {
    color: var(--color-accent);
  }

  /* Hero section */
  .hero__content {
    max-width: 700px;
  }

  .hero__trust-badges {
    gap: var(--spacing-lg);
  }

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

  /* Differentials - 2 columns */
  .differentials__wrapper {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Form section - 2 columns */
  .form-section__wrapper {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /* Location - 2 columns */
  .location__wrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer - improved layout */
  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--spacing-2xl);
  }

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

/* ========================================
   DESKTOPS (992px and up)
   ======================================== */
@media (min-width: 992px) {
  /* Benefits grid - 4 columns */
  .benefits__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Make middle product card (featured) slightly larger */
  .products__grid .product-card--featured {
    transform: scale(1.02);
  }

  .products__grid .product-card--featured:hover {
    transform: scale(1.05);
  }

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

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

  .footer__nav {
    display: contents;
  }
}

/* ========================================
   LARGE DESKTOPS (1200px and up)
   ======================================== */
@media (min-width: 1200px) {
  /* Hero title larger */
  .hero__title {
    font-size: var(--font-size-6xl);
  }

  /* Section titles larger */
  .section__title {
    font-size: var(--font-size-4xl);
  }

  /* Offer section */
  .offer__wrapper {
    padding: var(--spacing-4xl) var(--spacing-3xl);
  }

  .offer__title {
    font-size: var(--font-size-4xl);
  }
}

/* ========================================
   EXTRA LARGE DESKTOPS (1400px and up)
   ======================================== */
@media (min-width: 1400px) {
  /* Container max width adjustment */
  :root {
    --container-max: 1320px;
  }
}

/* ========================================
   HEIGHT-BASED ADJUSTMENTS
   ======================================== */

/* For shorter screens, reduce hero padding */
@media (max-height: 700px) {
  .hero {
    min-height: auto;
    padding: var(--spacing-4xl) 0;
  }

  .hero__scroll {
    display: none;
  }
}

/* ========================================
   TOUCH DEVICE ADJUSTMENTS
   ======================================== */
@media (hover: none) {
  /* Remove hover effects on touch devices */
  .card:hover,
  .product-card:hover,
  .benefit-card:hover {
    transform: none;
  }

  /* Keep shadow on featured product */
  .product-card--featured {
    box-shadow: var(--shadow-accent);
  }

  /* WhatsApp tooltip always hidden on touch */
  .whatsapp-float__tooltip {
    display: none;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  /* Hide non-essential elements */
  .header,
  .hero__scroll,
  .whatsapp-float,
  .offer,
  .countdown,
  .btn,
  .nav__toggle {
    display: none !important;
  }

  /* Remove backgrounds */
  .hero,
  .section--dark,
  .section--alt {
    background: white !important;
    color: black !important;
  }

  /* Full width for print */
  .container {
    max-width: 100%;
    padding: 0;
  }

  /* Remove shadows */
  * {
    box-shadow: none !important;
  }

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

  /* Page breaks */
  .section {
    page-break-inside: avoid;
  }

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

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--spacing-3xl) 0;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
  }

  .hero__scroll {
    display: none;
  }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Images will automatically use 2x if provided */
  /* Add specific adjustments if needed */
}

/* ========================================
   DARK MODE (Future Enhancement)
   ======================================== */
@media (prefers-color-scheme: dark) {
  /*
   * Uncomment and customize if you want to support dark mode:
   *
   * :root {
   *   --color-bg: #1a1a1a;
   *   --color-bg-alt: #2d2d2d;
   *   --color-text: #ffffff;
   *   --color-text-light: #cccccc;
   *   etc...
   * }
   */
}