/* ═══════════════════════════════════════════════
   QUELARK — Responsive (Mobile-First Overrides)
   ═══════════════════════════════════════════════ */

/* ── SM: 480px+ (Large Phones) ── */
@media (min-width: 480px) {
  .quelark-form--inline {
    flex-direction: row;
  }
}

/* ── MD: 768px+ (Tablets) ── */
@media (min-width: 768px) {
  .quelark-trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

  .quelark-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  .quelark-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .quelark-gallery {
    grid-template-columns: 1fr;
  }

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

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

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Hide mobile CTA bar on tablet+ */
  .quelark-mobile-cta {
    display: none;
  }

  /* Add padding to body so mobile CTA doesn't overlap */
  body {
    padding-bottom: 0;
  }
}

/* Mobile body needs bottom padding for sticky CTA */
@media (max-width: 767px) {
  body {
    padding-bottom: 56px;
  }
}

/* ── LG: 1024px+ (Small Desktops) ── */
@media (min-width: 1024px) {
  /* Show desktop nav, hide hamburger */
  .site-header__nav {
    display: block;
  }
  .site-header__cta {
    display: inline-flex;
  }
  .site-header__toggle {
    display: none;
  }

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

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

  .quelark-two-col {
    grid-template-columns: 65fr 35fr;
  }

  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.25fr;
  }
}

/* ── XL: 1280px+ (Standard Desktops) ── */
@media (min-width: 1280px) {
  .quelark-hero__content {
    padding: var(--space-3xl) var(--space-md);
  }
}

/* ── 2XL: 1536px+ (Large Screens) ── */
@media (min-width: 1536px) {
  .quelark-container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* ── Mobile-Specific: Forms ── */
@media (max-width: 767px) {
  .quelark-form--inline {
    flex-direction: column;
  }
  .quelark-form--inline .quelark-btn {
    width: 100%;
  }
  .quelark-btn--block-mobile {
    width: 100%;
  }

  /* Ensure touch targets are at least 44px */
  .quelark-form__input,
  .quelark-form__select,
  .quelark-form__textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .quelark-filters {
    flex-direction: column;
  }

  /* Stack hero CTAs */
  .quelark-hero__actions {
    flex-direction: column;
  }
  .quelark-hero__actions .quelark-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Print ── */
@media print {
  .site-header,
  .site-footer,
  .quelark-mobile-cta,
  .quelark-form--sidebar,
  .quelark-cta-band {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
    padding-bottom: 0;
  }
  a {
    color: #000;
  }
  .quelark-container {
    max-width: 100%;
  }
}