/* ============================================
   Responsive Styles
   Mobile-first approach
   ============================================ */

/* 320px - 374px (small phones) */
@media (min-width: 375px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 430px+ (large phones) */
@media (min-width: 430px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* 640px+ */
@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

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

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* 768px+ (tablets) */
@media (min-width: 768px) {
  :root {
    --text-3xl: 2.25rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
  }

  .section {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }

  .section-header {
    margin-bottom: var(--spacing-2xl);
  }

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

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

  .category-card:last-child:nth-child(odd) {
    grid-column: span 1;
  }

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

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

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

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

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

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  }

  .property-detail-grid {
    grid-template-columns: 1fr 360px;
  }

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

  .gallery-main {
    grid-column: span 2;
  }

  .sticky-mobile-cta {
    display: none;
  }

  body.has-sticky-cta {
    padding-bottom: 0;
  }
}

/* 1024px+ (small laptops) */
@media (min-width: 1024px) {
  :root {
    --text-4xl: 3rem;
    --text-5xl: 4rem;
    --text-6xl: 4.5rem;
    --header-height: 96px;
  }

  .desktop-nav {
    display: flex;
    justify-content: center;
  }

  .menu-toggle,
  .mobile-nav,
  .mobile-nav-backdrop {
    display: none;
  }

  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .site-header .logo {
    justify-self: start;
  }

  .site-header .desktop-nav {
    justify-self: center;
  }

  .site-header .header-tools {
    justify-self: end;
    margin-left: 0;
  }

  .site-header .logo-img {
    height: 84px;
    max-width: 240px;
  }

  .header-tools,
  .header-actions {
    gap: var(--spacing-sm);
  }

  .header-btn {
    width: auto;
    height: 36px;
    padding: 0 0.75rem;
  }

  .header-btn-label {
    display: inline;
  }

  .footer-grid {
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.4fr;
    align-items: start;
  }

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

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

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

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

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

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

  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
  }

  .filters-bar {
    flex-direction: row;
    align-items: flex-end;
  }

  .property-detail-grid {
    grid-template-columns: 1fr 360px;
  }

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

  .gallery-main {
    grid-column: span 2;
  }

  .location-grid {
    grid-template-columns: 2fr 1fr;
  }

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

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

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

  .results-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* 1280px+ (desktops) */
@media (min-width: 1280px) {
  .container {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }

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

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

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

  .gallery-main {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  body.has-sticky-cta {
    padding-bottom: 72px;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}