/* ===== Forbes Property Network — Responsive Overrides ===== */
/* Fixes inline grid/flex layouts for mobile. Uses !important to override inline styles. */

/* ── Tablet (≤1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Two-column inline grids → single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Three-column inline grids → two columns */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero layout */
  .hero .container {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-content {
    max-width: 100% !important;
  }

  /* Section paddings */
  .section {
    padding: 3rem 1.25rem !important;
  }

  /* Pricing grid */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Blog cards */
  .grid-3.stagger {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Developer section two-col */
  .dev-grid,
  [style*="grid-template-columns:1fr 1fr"][class*="dev"] {
    grid-template-columns: 1fr !important;
  }

  /* Location grid */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* All multi-column grids collapse to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Flex rows → column */
  [style*="display:flex"][style*="gap"],
  [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Two-column text grids */
  [style*="grid-template-columns:1fr 1fr;gap:1rem"],
  [style*="grid-template-columns: 1fr 1fr;gap:1rem"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing cards: one per row */
  .grid-3,
  .grid-3.stagger {
    grid-template-columns: 1fr !important;
  }

  /* Pricing card internals */
  .pricing-card {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

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

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero stats */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Hero CTAs */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-ctas .btn {
    text-align: center !important;
  }

  /* Section headers */
  .section-title {
    font-size: clamp(1.6rem, 5vw, 2.5rem) !important;
  }

  /* Container */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Map placeholder */
  .map-placeholder {
    height: 250px !important;
  }

  /* Blog cards */
  .blog-card {
    max-width: 100% !important;
  }

  /* Footer grid: 2 columns on mobile */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Highlights */
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Amenity filters */
  .amenity-tabs {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Tab buttons */
  .tab-btn {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Testimonial grid */
  .testimonials-grid,
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA form inline grids */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:0.75rem"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:0.75rem"] {
    grid-template-columns: 1fr !important;
  }

  /* Timeline layout */
  [style*="padding-left:40px"],
  [style*="padding-left: 40px"] {
    padding-left: 24px !important;
  }

  /* Inner page article content */
  .article-body [style*="grid-template-columns"],
  .glossary-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Progress bars section */
  [style*="max-width:800px"] {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Section padding */
  .section {
    padding: 2.5rem 1.25rem !important;
  }

  /* Hero section */
  .hero {
    padding-top: calc(var(--nav-height) + 1rem) !important;
    padding-bottom: 2rem !important;
  }

  /* Hero form */
  .hero-form-wrapper {
    width: 100% !important;
  }

  .lead-form-card {
    max-width: 100% !important;
  }

  /* Nav phone number — hide on very small */
  .nav-phone {
    display: none !important;
  }
}

/* ── Small Mobile (≤480px) ────────────────────────────────── */
@media (max-width: 480px) {
  /* Gallery → single column */
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero stats → 2 across */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer → single column */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Highlights → 2 across */
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* All inline grids → 1 column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Font scale */
  .section-title {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  h1 {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
  }

  /* Pricing */
  .pricing-price {
    font-size: 1.5rem !important;
  }

  /* Popup */
  .popup-content {
    margin: 0.5rem !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
  }
}

/* ── Glossary & Blog pages responsive ──────────────────────── */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.8rem !important;
    flex-wrap: wrap !important;
  }

  .article-grid,
  .blog-sidebar-grid {
    grid-template-columns: 1fr !important;
  }

  .related-posts-grid {
    grid-template-columns: 1fr !important;
  }

  table {
    font-size: 0.85rem !important;
  }

  th, td {
    padding: 0.5rem !important;
  }

  /* Definition pages */
  .definition-box {
    padding: 1rem !important;
  }

  /* Sticky nav on inner pages */
  .page-nav {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ── Utility: ensure images & iframes are responsive ───────── */
img, iframe, video {
  max-width: 100% !important;
}

/* ── Touch-friendly tap targets ────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  input.form-input,
  select.form-input,
  textarea.form-input {
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  .faq-question {
    padding: 1rem !important;
    min-height: 48px !important;
  }
}