/* Shared styling for inner content pages. Most components live in components.css. */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; margin-bottom: .6rem; }
.prose h3 { margin-top: 1.6rem; margin-bottom: .4rem; }
.prose p, .prose ul { margin-bottom: 1rem; }
.prose ul { color: var(--ink-600); display: grid; gap: .4rem; }

.amenity-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .amenity-grid { grid-template-columns: repeat(3, 1fr); } }
.amenity {
  aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--teal-600), var(--navy-800)); color: #fff;
  display: grid; place-items: end start; padding: 1rem; box-shadow: var(--shadow-sm);
}
.amenity svg { position: absolute; top: 1rem; right: 1rem; width: 30px; height: 30px; opacity: .6; }
.amenity span { font-weight: 700; font-family: var(--font-head); }

.two-col-forms { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .two-col-forms { grid-template-columns: 1fr 1fr; } }

.contact-map {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  background: linear-gradient(150deg, var(--navy-800), var(--teal-600)); min-height: 320px;
  display: grid; place-items: center; color: rgba(255,255,255,.85); text-align: center; padding: 2rem;
}
.contact-map svg { width: 56px; height: 56px; opacity: .7; margin-bottom: .8rem; }

/* ---------- Embedded GoHighLevel form ---------- */
/* GHL's own snippet ships height:100%, which collapses to zero in a normal
   page flow. min-height gives the form something to render into before
   form_embed.js measures the content and sets an exact inline height. */
.ghl-embed { max-width: 760px; margin-inline: auto; }
.ghl-embed iframe {
  display: block;
  width: 100%;
  /* Per-embed starting height; each instance sets --embed-min-h to roughly the
     form's own data-height so there is no big gap before the script resizes. */
  min-height: var(--embed-min-h, 900px);
  border: none;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.ghl-embed .form-note { margin-top: 1rem; text-align: center; }
/* Inside a .form-card the card already supplies the frame. */
.form-card .ghl-embed { max-width: none; }
.form-card .ghl-embed iframe { box-shadow: none; background: transparent; border-radius: 0; }
.form-card .ghl-embed .form-note { text-align: left; }

/* ---------- Residents: three distinct form groups ----------
   Two surveys sit side by side, then the Housing Agreement gets its own
   full-width band. The tinted background plus a gold rule above it makes the
   break obvious so the agreement never reads as a third survey. */
.form-section {
  position: relative;
  border-top: 1px solid var(--line);
}
#housing-agreement::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
}
/* The sticky mobile header would otherwise cover the heading when the anchor
   button jumps here. Not needed >=1080px, where the header is a side rail. */
#housing-agreement { scroll-margin-top: 84px; }
@media (min-width: 1080px) { #housing-agreement { scroll-margin-top: 1.5rem; } }

/* Give the two survey cards a little more air between them on desktop. */
@media (min-width: 900px) { .two-col-forms { gap: clamp(1.8rem, 4vw, 3rem); } }