/* ==========================================================================
   responsive.css — Prestige Mysore Road
   Mobile-first responsive stylesheet
   All breakpoints are min-width (mobile-first) unless noted
   ========================================================================== */

/* ==========================================================================
   BASE — Mobile default (320px+)
   ========================================================================== */

/* Tap targets */
a, button, input[type="button"], input[type="submit"],
input[type="checkbox"], input[type="radio"],
select, [role="button"], [tabindex="0"] {
  min-height: 44px;
}

/* Typography — smallest screens */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

.hero-title     { font-size: 1.65rem; }
.hero-subtitle  { font-size: 0.95rem; }
.hero-stat-value { font-size: 1.25rem; }

/* Section spacing */
.section-padding    { padding: 52px 0; }
.section-padding-sm { padding: 32px 0; }

.container { padding: 0 16px; }

/* Hero */
.hero-slider {
  height: 62vh;
  min-height: 420px;
  margin-top: 72px; /* header height */
}

.hero-content {
  left: 5%;
  right: 5%;
  top: auto;
  bottom: 100px;
  transform: none;
  max-width: 100%;
}

.hero-cta-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hero-cta-group .btn {
  width: 100%;
  max-width: 260px;
}

.hero-prev, .hero-next {
  width: 38px;
  height: 38px;
  font-size: 0.85rem;
}

.hero-prev { left: 10px; }
.hero-next { right: 10px; }

/* Stats bar — scrollable on mobile */
.hero-stats-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: 0 16px;
  gap: 0;
}

.hero-stat-item {
  min-width: 110px;
  padding: 14px 10px;
}

.hero-stat-value { font-size: 1.3rem; }
.hero-stat-label { font-size: 0.65rem; }

/* Highlights grid — 1 col mobile */
.highlights-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.highlight-value { font-size: 1.6rem; }

/* Price cards — 1 col */
.price-cards-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Amenity grid — 1 col */
.amenity-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Gallery grid — 2 col */
.gallery-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Footer — stacked */
.footer-grid {
  grid-template-columns: 1fr;
  gap: 28px;
}

.footer-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-bottom-right {
  flex-wrap: wrap;
  gap: 14px;
}

/* Header — hide desktop nav, show hamburger */
.site-nav { display: none; }
.nav-cta  { display: none; }

.hamburger {
  display: flex;
}

/* Form — single column */
.form-row-2 {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Page hero inner pages */
.page-hero {
  padding: 70px 0 36px;
}

.page-hero h1 { font-size: 1.6rem; }

/* Pricing table scroll */
.pricing-table-wrap {
  border-radius: 0;
  box-shadow: none;
}

/* Spec table scroll */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Connectivity table */
.connectivity-wrap {
  border-radius: 0;
}

/* Back to top */
.back-to-top {
  bottom: 70px;
  right: 14px;
  width: 38px;
  height: 38px;
  font-size: 0.8rem;
}

/* ==========================================================================
   SM — 576px+
   ========================================================================== */
@media (min-width: 576px) {
  h1              { font-size: 2rem; }
  h2              { font-size: 1.6rem; }
  .hero-title     { font-size: 2rem; }

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

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

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

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

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

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

/* ==========================================================================
   MD — 768px+
   ========================================================================== */
@media (min-width: 768px) {
  h1              { font-size: 2.2rem; }
  h2              { font-size: 1.75rem; }
  .hero-title     { font-size: 2.4rem; }
  .hero-subtitle  { font-size: 1.05rem; }

  .section-padding    { padding: 70px 0; }
  .section-padding-sm { padding: 42px 0; }

  .container { padding: 0 24px; }

  .hero-slider {
    height: 74vh;
    min-height: 480px;
  }

  .hero-content {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: 520px;
    left: 6%;
    right: auto;
  }

  .hero-stats-inner {
    overflow-x: visible;
    justify-content: space-between;
    padding: 0 24px;
  }

  .hero-stat-value { font-size: 1.55rem; }
  .hero-stat-label { font-size: 0.7rem; }

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

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

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

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
  }

  .form-row-2 {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .page-hero {
    padding: 88px 0 48px;
  }

  .page-hero h1 { font-size: 2rem; }
}

/* ==========================================================================
   LG — 992px+
   ========================================================================== */
@media (min-width: 992px) {
  h1              { font-size: 2.4rem; }
  h2              { font-size: 1.9rem; }
  .hero-title     { font-size: 3rem; }
  .hero-subtitle  { font-size: 1.15rem; }

  .section-padding    { padding: 88px 0; }
  .section-padding-sm { padding: 52px 0; }

  .container { padding: 0 28px; }

  /* Show desktop nav, hide hamburger */
  .site-nav   { display: flex; }
  .nav-cta    { display: flex; }
  .hamburger  { display: none; }

  .hero-slider {
    height: 88vh;
    min-height: 520px;
    margin-top: 0;
  }

  .hero-content {
    left: 8%;
    max-width: 560px;
  }

  .hero-stat-value { font-size: 1.7rem; }
  .hero-stat-label { font-size: 0.72rem; }

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

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

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .footer-grid {
    grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
    gap: 44px;
  }

  .back-to-top {
    bottom: 28px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  /* Popup */
  .popup-box {
    padding: 40px 36px;
  }
}

/* ==========================================================================
   XL — 1200px+
   ========================================================================== */
@media (min-width: 1200px) {
  .hero-title  { font-size: 3.2rem; }
  .hero-slider { max-height: 860px; }
  .container   { max-width: 1280px; }

  .hero-stat-value { font-size: 1.75rem; }

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

/* ==========================================================================
   XXL — 1400px+
   ========================================================================== */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }

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

/* ==========================================================================
   NAVBAR collapse — Bootstrap override for dark header
   ========================================================================== */
.navbar.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,0.82);
}

.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar.navbar-dark .navbar-collapse {
  background-color: #0a1728;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2px;
}

@media (min-width: 992px) {
  .navbar.navbar-dark .navbar-collapse {
    background-color: transparent;
    padding: 0;
    border-top: none;
    margin-top: 0;
  }
}

.navbar.navbar-dark .nav-link {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.9rem;
}

@media (min-width: 992px) {
  .navbar.navbar-dark .nav-link {
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    font-size: 0.83rem;
  }

  .navbar.navbar-dark .nav-link:hover,
  .navbar.navbar-dark .nav-link.active {
    border-bottom-color: var(--color-accent, #c4933f);
  }
}

/* ==========================================================================
   IMAGE PLACEHOLDERS
   ========================================================================== */
.img-placeholder {
  background: linear-gradient(135deg, #1a2e48 0%, #0e1f33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  min-height: 200px;
  border-radius: var(--radius, 6px);
}

.img-placeholder i {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 8px;
  color: rgba(196,147,63,0.4);
}

/* ==========================================================================
   RESPONSIVE TABLES — prevent horizontal overflow on small screens
   ========================================================================== */
@media (max-width: 767px) {
  .pricing-table-wrap,
  .connectivity-wrap,
  .spec-table-wrap {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
  }

  .breadcrumb-nav .container {
    padding: 0 16px;
  }

  .hero-prev, .hero-next {
    display: none; /* hide arrows on very small screens, use swipe */
  }
}

/* ==========================================================================
   UTILITY OVERRIDES FOR BOOTSTRAP 5 DARK NAVBAR
   ========================================================================== */
.navbar-dark .btn-primary,
.site-header .btn-primary {
  background-color: var(--color-accent, #c4933f);
  border-color: var(--color-accent, #c4933f);
  color: #fff;
}

.navbar-dark .btn-secondary,
.site-header .btn-secondary {
  background-color: transparent;
  border-color: rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.9);
}

.navbar-dark .btn-secondary:hover,
.site-header .btn-secondary:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: #fff;
  color: #fff;
}

/* ==========================================================================
   ACCESSIBILITY — high contrast focus rings visible on dark backgrounds
   ========================================================================== */
.site-header *:focus-visible,
.hero-slider *:focus-visible,
.mobile-cta-bar *:focus-visible {
  outline-color: var(--color-accent, #c4933f);
  outline-offset: 3px;
}

/* ============================================================
   HORIZONTAL-OVERFLOW GUARDS
   Stops stray full-page horizontal scroll on mobile. The root
   cause on some pages was a long, non-wrapping button/flex item
   (e.g. the master-plan "Download Master Plan PDF" CTA) sizing
   itself to its content and pushing past the viewport.
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }

/* Let long buttons wrap instead of forcing the page wider */
.btn { max-width: 100%; white-space: normal; word-break: break-word; }

/* Stack the download / CTA button pairs full-width on phones */
@media (max-width: 575.98px) {
  .section-download-cta .d-flex .btn,
  .section-enquiry .d-flex .btn { width: 100%; }
}