/* communities.css — Communities page */

.page-hero { height:480px; align-items:flex-end; padding-bottom:4.5rem; }
.hero-bg {
  background:
    linear-gradient(to bottom, rgba(13,27,42,.4) 0%, rgba(13,27,42,.88) 100%),
    url('images/towersfog.jpg') center/cover no-repeat;
}
.page-hero h1 { font-size:clamp(2rem,5vw,3.75rem); }

/* ── STAT BAR ── */
.stat-bar { background:var(--navy); display:flex; justify-content:center; }
.stat-item { flex:1; max-width:240px; padding:1.5rem; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.stat-item:last-child { border-right:none; }
.stat-item strong { display:block; font-family:'Playfair Display',serif; font-size:2.25rem; color:var(--mist); line-height:1; margin-bottom:4px; }
.stat-item span { font-size:.75rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; }

/* ── SECTION INTRO ── */
.section-intro { padding:5rem 5vw 3rem; max-width:1200px; margin:0 auto; }

/* ── COMMUNITY BLOCKS ── */
.community-block { padding:0 5vw 6rem; max-width:1200px; margin:0 auto; }
.community-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.community-inner.flip { direction:rtl; }
.community-inner.flip > * { direction:ltr; }

.comm-media { position:relative; }
.comm-hero-img { width:100%; aspect-ratio:4/3; border-radius:18px; overflow:hidden; position:relative; }
.comm-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.comm-badge { position:absolute; bottom:16px; left:16px; background:rgba(13,27,42,.88); backdrop-filter:blur(8px); border:1px solid rgba(79,195,247,.3); border-radius:12px; padding:.75rem 1rem; display:flex; align-items:center; gap:.625rem; }
.comm-badge-icon { font-size:1.25rem; }
.comm-badge-text strong { display:block; font-size:.875rem; color:var(--mist); font-weight:700; }
.comm-badge-text span  { font-size:.7rem; color:rgba(255,255,255,.55); }

.comm-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.625rem; margin-top:.75rem; }
.comm-strip img { width:100%; height:110px; object-fit:cover; border-radius:10px; display:block; transition:transform .3s,filter .3s; cursor:pointer; }
.comm-strip img:hover { transform:scale(1.04); filter:brightness(1.1); }

.comm-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,191,165,.1); color:var(--teal); border:1px solid rgba(0,191,165,.25); padding:4px 12px; border-radius:100px; margin-bottom:.875rem; }
.comm-title { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,3vw,2.25rem); color:var(--navy); line-height:1.2; margin-bottom:.5rem; }
.comm-location { font-size:.875rem; color:var(--gray); margin-bottom:1.125rem; display:flex; align-items:center; gap:.375rem; }
.comm-location svg { width:14px; height:14px; color:var(--teal); flex-shrink:0; }
.comm-desc { font-size:.9375rem; color:var(--gray); line-height:1.7; margin-bottom:1.75rem; }

.comm-specs { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.75rem; }
.spec-pill { background:var(--light); border:1px solid var(--border); border-radius:10px; padding:.75rem; }
.spec-pill span { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:2px; }
.spec-pill strong { font-size:.9375rem; color:var(--navy); }

.comm-scope { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.75rem; }
.scope-item { display:flex; align-items:center; gap:.625rem; font-size:.875rem; color:var(--navy); }
.scope-dot { width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; }

.btn-comm-quote { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:.9375rem; padding:.75rem 1.5rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-comm-quote:hover { background:#00a896; transform:translateY(-1px); }

.comm-divider { border:none; border-top:1px solid var(--border); max-width:1200px; margin:0 auto 6rem; }

/* ── ALSO SERVING ── */
.also-serving { background:var(--light); padding:5rem 5vw; }
.also-inner { max-width:1200px; margin:0 auto; }
.also-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.5rem; }
.also-card { background:var(--white); border-radius:14px; padding:1.5rem; border:1px solid var(--border); transition:box-shadow .2s,transform .2s; }
.also-card:hover { box-shadow:0 8px 28px rgba(13,27,42,.1); transform:translateY(-2px); }
.also-card-icon { font-size:1.5rem; margin-bottom:.75rem; }
.also-card h4 { font-size:.9375rem; font-weight:700; color:var(--navy); margin-bottom:.25rem; }
.also-card p { font-size:.8125rem; color:var(--gray); line-height:1.5; }

/* ── CTA BANNER (dark navy variant) ── */
.cta-banner { background:linear-gradient(135deg,var(--navy) 0%,#1a3047 100%); padding:5rem 5vw; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 70% at 50% 50%, rgba(79,195,247,.08) 0%, transparent 70%); }
.cta-banner-inner { position:relative; max-width:620px; margin:0 auto; }
.cta-banner h2 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.75rem); color:var(--white); margin-bottom:.75rem; }
.cta-banner p { font-size:1.0625rem; color:rgba(255,255,255,.65); margin-bottom:2.25rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-teal-lg { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:700; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-teal-lg:hover { background:#00a896; transform:translateY(-1px); }
.btn-ghost-lg { display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(255,255,255,.3); color:var(--white); text-decoration:none; font-weight:500; font-size:1rem; padding:.875rem 2rem; border-radius:8px; transition:border-color .2s,background .2s; }
.btn-ghost-lg:hover { border-color:var(--mist); background:rgba(79,195,247,.08); }

/* ── LIGHTBOX ── */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:500; align-items:center; justify-content:center; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw; max-height:90vh; border-radius:12px; object-fit:contain; }
#lightbox-close { position:absolute; top:1.5rem; right:2rem; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; line-height:1; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .community-inner { grid-template-columns:1fr; gap:2.5rem; }
  .community-inner.flip { direction:ltr; }
  .also-grid { grid-template-columns:1fr 1fr; }
  .stat-bar { flex-wrap:wrap; }
  .stat-item { min-width:50%; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
}
@media (max-width:640px) {
  .also-grid { grid-template-columns:1fr; }
  .comm-specs { grid-template-columns:1fr; }
  .comm-strip { grid-template-columns:1fr 1fr; }
}