/* ================================================
   OMEGA INFRABUILD — MOBILE & RESPONSIVE CSS
   Covers: tablet (≤1024px), mobile (≤760px), small mobile (≤480px)
   ================================================ */

/* ── Base overflow fix ─────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Fixed-header offset (header is position:fixed, 72px tall) ── */
/* Project pages — full-bleed image hero — padding-top handled per breakpoint in home.css */
/* Base padding-top keeps hero clear of the 72px fixed header on all screens */
.proj-hero {
  padding-top: 72px; /* keep in sync with header height */
  box-sizing: border-box;
}
/* Home page — full-bleed video hero (100vh already, just needs safe area) */
.project-header-video--hero {
  padding-top: 0;          /* video fills full 100vh; text sits at bottom */
  margin-top: 0;
}
/* Home page scroll anchor sections: ensure they aren't obscured by fixed header */
main > section[id],
.proj-hero + main > section[id] {
  scroll-margin-top: 80px;
}
/* Kalyani coming-soon hero */
.cs-hero {
  padding-top: 72px;
}

/* ================================================
   PROJECT PAGE — GLOBAL COMPONENT FIXES
   (omega-urban-greens, suraksha-enclave, kalyani)
   ================================================ */

/* ── Office cards grid (3 columns → stack) ──── */
.office-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Project detail grid (2 col → 1 col) ─────── */
.project-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* ── Gallery grid (masonry-style → responsive) ── */
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.project-gallery-grid .g-wide {
  grid-column: span 2;
}
.project-gallery-grid .gallery-link {
  overflow: hidden;
  border-radius: 12px;
  display: block;
}
.project-gallery-grid .gallery-link img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.project-gallery-grid .gallery-link:hover img {
  transform: scale(1.04);
}

/* ── Floor plan grid ─────────────────────────── */
.floorplan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.floorplan-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  transition: box-shadow 250ms ease;
}
.floorplan-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); }
.floorplan-card__icon { font-size: 2.4rem; margin-bottom: 10px; }
.floorplan-card__type { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold, #b8933a); }
.floorplan-card__label { font-size: 1rem; font-weight: 600; margin: 4px 0; }
.floorplan-card__note { font-size: 0.78rem; color: #888; }

/* ── Payment grid ─────────────────────────────── */
.payment-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.payment-card {
  background: var(--color-navy, #0c1a33);
  color: #fff;
  border-radius: 14px;
  padding: 22px 14px;
  text-align: center;
}
.payment-card__stage { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.6; }
.payment-card__percent { font-size: 2rem; font-weight: 700; color: var(--color-gold, #b8933a); margin: 8px 0 4px; }
.payment-card__label { font-size: 0.8rem; opacity: 0.75; }

/* ── Asset section labels ─────────────────────── */
.asset-section { margin-top: 40px; }
.asset-section__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold, #b8933a);
  margin-bottom: 10px;
}
.asset-section__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 12px;
}
.asset-section__sub { font-size: 0.96rem; color: #555; max-width: 640px; }

/* ── Asset zone (brochure placeholder) ─────────── */
.asset-zone {
  margin-top: 24px;
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  background: rgba(0,0,0,0.02);
}
.asset-zone__icon { font-size: 2.4rem; margin-bottom: 12px; }
.asset-zone__label { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.asset-zone__note { font-size: 0.85rem; color: #777; }




/* ── Container safety ─────────────────────────── */
:root {
  --container-width: min(1200px, calc(100vw - 32px));
}

/* ================================================
   TABLET  (≤ 1024px)
   ================================================ */
@media (max-width: 1024px) {
  .section { padding: 80px 0; }

  /* Hero */
  .hero__content {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-height, 72px) + 36px);
    gap: 28px;
  }
  .hero__mini-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero__panel { display: none; }

  /* Section grids */
  .section-grid--about,
  .section-grid--leadership {
    grid-template-columns: 1fr;
  }

  /* Cards */
  .card-grid--four  { grid-template-columns: repeat(2, 1fr); }
  .card-grid--five  { grid-template-columns: repeat(2, 1fr); }
  .project-preview-grid { grid-template-columns: 1fr; }

  /* Project page hero */
  .proj-hero {
    min-height: 60vh;
  }
  .proj-hero__content {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

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

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

  /* Contact grid */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

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

  /* ── Project page grids — tablet ─────────────── */
  .office-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .project-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .payment-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .floorplan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .project-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Suraksha inline highlights flex row */
  [style*="flex: 1; min-width: 240px"] {
    min-width: 200px !important;
  }
}

/* ================================================
   MOBILE  (≤ 760px)
   ================================================ */
@media (max-width: 760px) {
  :root {
    --container-width: calc(100vw - 24px);
    --header-height: 72px;
  }

  .section { padding: 60px 0; }
  .section-heading { margin-bottom: 32px; }
  .section-title { font-size: clamp(1.9rem, 7.5vw, 2.8rem) !important; }

  /* ── Header ──────────────────────────────────── */
  .proj-header__shell {
    padding: 0 16px;
    width: 100%;
  }
  /* Hamburger already handled by home.css; ensure nav hidden by default */
  .proj-nav {
    /* Overridden by home.css media query, just ensure it doesn't displace layout */
    z-index: 1000;
  }

  /* ── Hero ────────────────────────────────────── */
  .hero {
    min-height: 100svh;
    min-height: 100vh;
  }
  .hero__content {
    grid-template-columns: 1fr;
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 40px;
    align-items: start;
    gap: 24px;
  }
  .hero h1 {
    font-size: clamp(2.6rem, 11vw, 4rem) !important;
    max-width: 100%;
  }
  .hero__lead {
    font-size: 0.97rem;
    max-width: 100%;
    margin-top: 16px;
  }
  .hero__actions { margin-top: 24px; }
  .hero__actions .button-row { flex-direction: column; align-items: flex-start; }
  .hero__panel { display: none; }
  .hero__mini-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
  }
  .hero__metric { padding: 14px; }
  .hero__metric-value { font-size: 1.05rem; }
  .hero__metric-label { font-size: 0.82rem; }

  /* ── Project page hero (proj-hero) ─────────── */
  .proj-hero {
    min-height: 55vh;
  }
  .proj-hero__content {
    grid-template-columns: 1fr !important;
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 32px;
    gap: 16px;
  }
  .proj-hero__content h1 {
    font-size: clamp(2.4rem, 10vw, 3.6rem) !important;
  }
  .proj-hero__badge-row { flex-wrap: wrap; gap: 8px; }
  .proj-hero__stat-bar { overflow-x: auto; }

  /* ── Section grids ─────────────────────────── */
  .section-grid,
  .section-grid--about,
  .section-grid--leadership {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .section-copy { gap: 14px; }

  /* ── Media frames ─────────────────────────── */
  .media-frame--portrait { min-height: 260px; }
  .about-visual-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .about-visual-stack figure { display: none; } /* hide large portrait on mobile */

  /* ── Cards ────────────────────────────────── */
  .card-grid--four,
  .card-grid--five {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .project-preview-grid { grid-template-columns: 1fr !important; }
  .project-card__media { min-height: 220px; }

  /* ── Why Omega grid ─────────────────────── */
  .why-omega-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .why-card { padding: 22px 18px !important; }
  .why-card__num { font-size: 1.6rem !important; }

  /* ── Metrics ──────────────────────────── */
  .metrics-layout {
    flex-direction: column !important;
    gap: 32px;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }
  .metric-card { padding: 20px !important; }

  /* ── Leadership ─────────────────────── */
  .leadership-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Office cards ──────────────────── */
  .office-cards {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* ── Contact grid ──────────────────── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .contact-form {
    padding: 24px 18px !important;
  }
  .field { margin-bottom: 14px; }

  /* ── CTA Banner ────────────────────── */
  .cta-banner {
    padding: 36px 20px !important;
    text-align: center;
  }
  .cta-banner .button-row {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  /* ── Buttons ───────────────────────── */
  .button {
    min-height: 50px;
    padding: 0 20px;
    font-size: 0.9rem;
  }
  .button-row { flex-direction: row; flex-wrap: wrap; gap: 10px; }

  /* ── Project detail sections ────────── */
  .detail-grid,
  .highlights-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .detail-copy { gap: 12px; }

  /* ── Highlight list ─────────────────── */
  .highlight-list { padding-left: 18px; }

  /* ── Gallery ─────────────────────── */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* ── Footer ─────────────────────── */
  .proj-footer__inner,
  .site-footer__inner {
    flex-direction: column !important;
    gap: 24px;
    text-align: center;
  }
  .proj-footer__links {
    flex-direction: column !important;
    gap: 12px;
    align-items: center;
  }
  .proj-footer__col { min-width: unset !important; }

  /* ── Connectivity/Map Section ─────── */
  .connectivity { padding: 60px 0; }
  .conn-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .conn-map-area { min-height: 320px; }
  .conn-map-canvas, .map-canvas { width: 100% !important; overflow: visible; }
  .landmark-cards {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .landmark-card { padding: 16px !important; }
  .location-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .location-stat { padding: 16px !important; }

  /* ── Advantages list ──────────────── */
  .advantages-list { grid-template-columns: 1fr !important; }
  .advantage-card { padding: 20px !important; }

  /* ── Context grid ─────────────────── */
  .context-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Page project specific ─────────── */
  .proj-section { padding: 52px 0; }
  .proj-highlights-grid {
    grid-template-columns: 1fr !important;
  }
  .proj-spec-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Site header (home dynamic) ──── */
  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  /* ── Project page grids — mobile ─────────────── */
  .office-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .project-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  /* Image in detail grid — constrain height */
  .project-detail-grid .media-frame img,
  .project-detail-grid figure img {
    height: 240px !important;
    object-fit: cover;
  }
  /* Suraksha highlights — flex row → column */
  .section > div[style*="flex-wrap: wrap"],
  main div[style*="display: flex"][style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .info-card[style*="flex: 1"] {
    flex: none !important;
    width: 100% !important;
    min-width: unset !important;
  }
  /* Gallery grid → 1 col */
  .project-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .project-gallery-grid .g-wide {
    grid-column: span 1 !important;
  }
  /* Floorplan → 2 col */
  .floorplan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  /* Payment → 2 col (scroll if needed) */
  .payment-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

/* ================================================
   SMALL MOBILE  (≤ 480px)
   ================================================ */
@media (max-width: 480px) {
  :root {
    --container-width: calc(100vw - 20px);
  }

  .section { padding: 48px 0; }

  /* Hero */
  .hero h1 { font-size: clamp(2.2rem, 12vw, 3.2rem) !important; }
  .hero__mini-metrics { grid-template-columns: 1fr; gap: 8px; }

  /* Project hero */
  .proj-hero__content h1 { font-size: clamp(2rem, 11vw, 3rem) !important; }

  /* Spec grids → single column on tiny screens */
  .proj-spec-grid { grid-template-columns: 1fr !important; }
  .metrics-grid { grid-template-columns: 1fr !important; }

  /* Cards */
  .card-grid--four,
  .card-grid--five { grid-template-columns: 1fr !important; }

  /* Connectivity */
  .location-stats { grid-template-columns: 1fr !important; }
  .conn-map-area { min-height: 240px; }

  /* Typography */
  .section-title { font-size: clamp(1.7rem, 9vw, 2.4rem) !important; }
  .section-lead,
  .hero__lead,
  .section-copy p { font-size: 0.93rem !important; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; }

  /* Nav — header shrinks to 62px on tiny screens */
  .proj-header__logo { height: 64px; }
  .proj-header__shell { height: 62px; }
  .proj-nav { top: 62px; }

  /* Hero — offset matches the reduced 62px header */
  .proj-hero {
    padding-top: 62px;
    min-height: calc(55vh + 62px);
  }
  .cs-hero { padding-top: 62px; }

  /* Buttons */
  .button { min-height: 46px; padding: 0 18px; width: 100%; text-align: center; }
  .button-row { flex-direction: column; }

  /* Footer */
  .proj-footer { padding: 32px 0 24px; }
  .proj-footer__logo { height: 28px; }

  /* Contact */
  .info-card { padding: 20px 16px; }
  .contact-form { padding: 20px 14px !important; }

  /* Project page grids — tiny screens */
  .floorplan-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .payment-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .payment-card__percent { font-size: 1.6rem; }
}

/* ================================================
   VIDEO — always responsive
   ================================================ */
video {
  max-width: 100%;
  height: auto;
}
.project-header-video,
.project-header-video--hero {
  width: 100%;
  overflow: hidden;
}
.project-header-video video,
.project-header-video--hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================
   MOBILE NAV — hamburger open state overlay
   ================================================ */
@media (max-width: 860px) {
  body.nav-open {
    overflow: hidden;
  }
  .proj-nav.is-open {
    overflow-y: auto;
    max-height: calc(100vh - 72px);
  }
}