/* ============================================================
   Green City Builders - Responsive Styles
   Tailwind-compatible breakpoints (mobile-first)
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ============================================================ */

/* ─── Container responsive ─── */
@media (min-width: 40rem) {
  .container { max-width: 40rem; }
}
@media (min-width: 48rem) {
  .container { max-width: 48rem; }
}
@media (min-width: 64rem) {
  .container { max-width: 64rem; }
}
@media (min-width: 80rem) {
  .container { max-width: 80rem; }
}
@media (min-width: 96rem) {
  .container { max-width: 96rem; }
}

/* ─── Safe area padding for mobile sticky CTA ─── */
@media (max-width: 1023px) {
  footer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
}

/* ─── Mobile text size tweaks (non-layout) ─── */
@media (max-width: 768px) {
  .hero-title { font-size: 1.75rem; }
  .hero-subtitle { font-size: 0.9375rem; }
  .section-title { font-size: 1.5rem; }
  .section-subtitle { font-size: 0.875rem; }
  .final-cta h2 { font-size: 1.375rem; }
  .final-cta p { font-size: 0.9375rem; }
  .phase-hero h1 { font-size: 1.75rem; }
  .pricing-amount { font-size: 1.75rem; }
  .legal-page h1 { font-size: 1.5rem; }
  .legal-page { padding: 40px 16px; }
  .pricing-card { padding: 24px; }
  .video-wrapper video,
  .video-wrapper iframe { height: 300px; }
  .video-play-btn { width: 60px; height: 60px; }
  .map-container { height: 300px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero-title { font-size: 1.5rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .section-title { font-size: 1.375rem; }
  .hero-cta-group { flex-direction: column; }
  .video-wrapper video,
  .video-wrapper iframe { height: 240px; }
  .map-container { height: 240px; }
  .breadcrumb { font-size: 0.75rem; }
  .toast { min-width: unset; width: calc(100vw - 32px); }
  .toast-container { right: 16px; left: 16px; }
  .modal-box { max-width: 100%; margin: 0 8px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.375rem; }
  .hero-subtitle { font-size: 0.875rem; }
  .section-title { font-size: 1.25rem; }
  .pricing-card { padding: 20px; }
  .pricing-amount { font-size: 1.5rem; }

  .layout-card-image { height: 180px; }
  .plot-card-image { height: 160px; }
  .phase-hero h1 { font-size: 1.5rem; }
  .final-cta h2 { font-size: 1.25rem; }
  .map-container { height: 200px; }
  .navbar-inner { height: 56px; }
  .navbar-logo { font-size: 1rem; }
  .navbar-logo img { height: 28px; }
  .mobile-drawer { width: 280px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .header-search { display: none; }
  .filters-bar .form-group { min-width: 100%; }
  .main-content { padding: 12px; }
  .card-body { padding: 14px; }
}

/* ─── Navbar overrides (only used by non-Tailwind elements) ─── */
@media (max-width: 768px) {
  .navbar-hamburger { display: flex; }
  .navbar-links { display: none; }
  .navbar-cta { display: none; }
  .site-nav { display: none; }
  .site-actions .btn { display: none; }
  .mobile-drawer { display: flex; }
  .sticky-cta { display: block; }
  .site-header-inner { padding: 10px 16px; }
}

/* ─── Layout Plans Carousel ─── */
.layout-carousel {
  position: relative;
}

.layout-carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 1rem 0.5rem;
  scrollbar-width: none;
}

.layout-carousel-track::-webkit-scrollbar { display: none; }

.layout-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media (min-width: 48rem) {
  .layout-card { flex: 0 0 calc(50% - 0.75rem); }
}

@media (min-width: 64rem) {
  .layout-card { flex: 0 0 calc(33.333% - 0.875rem); }
}

.layout-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: white;
  border: 1px solid rgba(212,168,67,0.3);
  color: #d4a843;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.25s;
  opacity: 0;
}

.layout-carousel:hover .layout-carousel-btn { opacity: 1; }

@media (max-width: 47.999rem) {
  .layout-carousel-btn { display: none; }
}

.layout-carousel-btn:hover {
  background: #d4a843;
  color: white;
  box-shadow: 0 6px 16px rgba(212,168,67,0.3);
}

.layout-carousel-prev { left: -0.25rem; }
.layout-carousel-next { right: -0.25rem; }

.layout-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.layout-carousel-dots button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.layout-carousel-dots button.active {
  width: 1.5rem;
  background: #d4a843;
}

/* ─── Custom utility additions (missing from Tailwind compile) ─── */
.text-gold-light { color: #e8c36a; }
.no-underline { text-decoration: none; }

.group\/card { }
.group\/card:hover .group-hover\/card\:scale-110 { transform: scale(1.1); }
.group\/card:hover .group-hover\/card\:shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.group\/card:hover .group-hover\/card\:shadow-gold\/20 { box-shadow: 0 20px 25px -5px rgba(212,168,67,0.2), 0 8px 10px -6px rgba(212,168,67,0.1); }

.group\/stat { }
.group\/stat:hover .group-hover\/stat\:text-gold { color: #d4a843; }
.group\/stat:hover .group-hover\/stat\:text-gold-light { color: #e8c36a; }

.group\/cta { }
.group\/cta:hover .group-hover\/cta\:scale-110 { transform: scale(1.1); }
.group\/cta:hover .group-hover\/cta\:translate-x-1 { transform: translateX(0.25rem); }

/* ─── Responsive display helpers ─── */
.d-none { display: none; }
.d-block { display: block; }
@media (min-width: 40rem) {
  .sm\:d-block { display: block; }
  .sm\:d-none { display: none; }
}
@media (min-width: 48rem) {
  .md\:d-block { display: block; }
  .md\:d-none { display: none; }
}
@media (min-width: 64rem) {
  .lg\:d-block { display: block; }
  .lg\:d-none { display: none; }
}

/* ═══ POPUP RESPONSIVE ═══ */
@media (max-width: 480px) {
  .gcb-popup-overlay { padding: 12px; align-items: flex-end; }
  .gcb-popup-card { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 85vh; }
  .gcb-popup-inner { padding: 24px 18px 20px; }
  .gcb-popup-heading { font-size: 1.25rem; }
  .gcb-popup-desc { font-size: 12.5px; }
  .gcb-popup-trust { gap: 8px; }
  .gcb-popup-trust-item { font-size: 10px; padding: 4px 10px; }
  .gcb-popup-input { padding: 11px 12px; font-size: 13px; }
  .gcb-popup-btn { padding: 13px; font-size: 14px; }
  .gcb-popup-close { top: 10px; right: 10px; width: 32px; height: 32px; }
}
@media (max-width: 430px) {
  .gcb-popup-inner { padding: 22px 16px 18px; }
  .gcb-popup-heading { font-size: 1.2rem; }
  .gcb-popup-trust-item { font-size: 10px; padding: 4px 9px; }
}
@media (max-width: 390px) {
  .gcb-popup-inner { padding: 20px 15px 16px; }
  .gcb-popup-heading { font-size: 1.15rem; }
  .gcb-popup-desc { font-size: 12px; }
  .gcb-popup-btn { padding: 12px; font-size: 13px; }
}
@media (max-width: 360px) {
  .gcb-popup-inner { padding: 18px 12px 14px; }
  .gcb-popup-heading { font-size: 1.1rem; }
  .gcb-popup-trust { flex-direction: column; align-items: center; gap: 6px; }
  .gcb-popup-input { padding: 10px 11px; font-size: 12.5px; }
}
@media (max-width: 320px) {
  .gcb-popup-overlay { padding: 8px; }
  .gcb-popup-inner { padding: 16px 10px 12px; }
  .gcb-popup-heading { font-size: 1rem; }
  .gcb-popup-desc { font-size: 11px; line-height: 1.5; }
  .gcb-popup-badge { font-size: 9px; padding: 5px 10px; }
  .gcb-popup-input { padding: 9px 10px; font-size: 12px; }
  .gcb-popup-btn { padding: 11px; font-size: 12.5px; }
  .gcb-popup-success-heading { font-size: 1.25rem; }
  .gcb-popup-success-msg { font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .gcb-popup-card { max-width: 460px; }
}
@media (min-width: 768px) {
  .gcb-popup-card { max-width: 480px; }
}