/* Small extras on top of the Grok visual system. Do not replace styles.css. */

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kill the leftover viewport stretch that left a huge gap above the footer. */
html, body { min-height: 0 !important; height: auto !important; }
.site-wrap { min-height: 0 !important; }
main { min-height: 0 !important; flex: none !important; }

.first-screen {
  background: var(--color-forest-800);
  color: var(--color-cream-100);
}
.first-screen a { color: var(--color-cream-50); }
.first-screen a:hover { color: #fff; }

[data-open="true"].is-open { color: #d7f3e3; }
[data-open="false"].is-closed { color: color-mix(in oklab, var(--color-cream-100) 70%, transparent); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}
.status-pill .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #e8c27a;
  box-shadow: 0 0 0 3px rgba(232, 194, 122, 0.18);
}
[data-open="true"] .dot,
.status-pill.is-open .dot {
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.2);
}

.quote-card {
  border-left: 3px solid var(--color-sage-500);
}

.tfs-mark {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  background: #fdfbf7;
  box-shadow: 0 1px 2px rgba(21, 43, 34, 0.12);
}
.tfs-mark-sm {
  width: 2rem;
  height: 2rem;
}

/* Quiet Facebook — outline, never the loudest thing on the page. */
.btn-facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-forest-800);
  background: #fff;
  color: var(--color-forest-800);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-facebook:hover {
  background: var(--color-sage-100);
  color: var(--color-forest-900);
}
.btn-facebook svg {
  width: 0.85rem;
  height: 0.85rem;
}
.btn-facebook-ghost {
  border-color: color-mix(in oklab, var(--color-cream-100) 45%, transparent);
  background: transparent;
  color: var(--color-cream-50);
}
.btn-facebook-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.card-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.map-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background: var(--color-tan);
}
.map-panel img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.map-panel .map-cta {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

.neighbor-note {
  border: 1px solid var(--color-cream-200);
  background: #fff;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}

.section-air {
  padding-block: 4.25rem;
}
@media (min-width: 640px) {
  .section-air { padding-block: 5.5rem; }
}

@media (max-width: 639px) {
  .hero-photo-card img {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }
}