/* ============================================================
   COMMUNITY PAGE TEMPLATE
   ============================================================ */

.community-hero {
  position: relative;
  width: 100%;
  height: clamp(400px, 55vw, 700px);
  overflow: hidden;
}

.community-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.community-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.community-hero__content {
  position: absolute;
  bottom: clamp(var(--space-8), 5vw, var(--space-16));
  left: 0;
  right: 0;
  padding-inline: var(--container-pad);
  max-width: var(--container-xl);
  margin-inline: auto;
  color: #fff;
}

.community-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-light);
  display: block;
  margin-bottom: var(--space-3);
}

.community-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: var(--weight-light);
  color: #fff;
  line-height: var(--leading-tight);
}

/* ---- Quick Facts Strip ----
   Sits between the hero and the write-up — gives the page some scannable
   substance up top instead of dropping straight into a wall of text, and
   was the easiest place to surface real, non-fabricated facts (distance,
   character, known-for tags) that already exist in every write-up. */
.community-facts {
  background-color: var(--color-gold-pale);
  border-bottom: 1px solid var(--color-border-light);
}

.community-facts__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-block: var(--space-8);
}

.community-facts__item {
  flex: 1 1 220px;
  max-width: 300px;
  text-align: center;
  padding-inline: var(--space-6);
  border-left: 1px solid var(--color-border);
}

.community-facts__item:first-child {
  border-left: none;
}

.community-facts__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.community-facts__value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

@media (max-width: 700px) {
  .community-facts__item {
    flex-basis: 100%;
    max-width: 420px;
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-4);
  }

  .community-facts__item:first-child {
    border-top: none;
  }
}

/* ---- Neighborhood Map ----
   Sits between Quick Facts and the write-up (see page-community.php,
   assets/js/community-map.js). */
.community-map-section {
  padding-block: var(--space-12) 0;
}

.community-map-section__heading {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.community-map {
  width: 100%;
  height: clamp(320px, 38vw, 440px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ---- Body Layout ----
   Single centered column (was a 1fr/320px grid with a sticky sidebar —
   the sidebar's grid cell never stretched to the text column's height, so
   the sticky card scrolled out of view after ~one screen and left a dead
   void down the entire right side of the page for everyone still reading).
   Text keeps a comfortable ~700px measure; photos are allowed to break
   out wider, up to the 1100px body max, for an editorial rhythm. */
.community-body {
  max-width: 1100px;
  margin-inline: auto;
}

.community-body__text {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

.community-body__text > p,
.community-body__text > ul,
.community-body__text > h2,
.community-body__text > h3 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.community-body__text p + p {
  margin-top: var(--space-5);
}

/* Drop cap on the lede — an editorial signal that this is a designed
   page, not a wall of identical paragraphs, without touching content. */
.community-body__text > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 4.2em;
  font-weight: var(--weight-light);
  line-height: 0.82;
  padding-right: var(--space-3);
  padding-top: 0.05em;
  color: var(--color-gold);
}

.community-body__text h2,
.community-body__text h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  /* margin-block (not the `margin` shorthand) so it doesn't clobber the
     margin-left/right: auto that centers these within the wider body — see
     the > h2, > h3 rule above. */
  margin-block: var(--space-12) var(--space-4);
}

.community-body__text h2 {
  font-size: var(--text-2xl);
}

/* h3s get a small numbered-mark + rule treatment, echoing the FAQ badges
   elsewhere on this page, so each subsection reads as its own designed
   module instead of plain bold text identical to the last one. */
.community-body__text h3 {
  position: relative;
  font-size: var(--text-xl);
  padding-left: var(--space-8);
}

.community-body__text h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 22px;
  height: 2px;
  background-color: var(--color-gold);
}

.community-body__text h2 + h3,
.community-body__text > h3:first-child {
  margin-top: var(--space-4);
}

/* Lead-in paragraphs like "<strong>The Lifestyle:</strong> …" (used in
   Montecito's enclave breakdowns and similar) get a tinted callout card
   instead of blending into the surrounding paragraph stream. */
.community-body__text p:has(> strong:first-child) {
  background-color: var(--color-gold-pale);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-4);
}

.community-body__text p:has(> strong:first-child) + p:has(> strong:first-child) {
  margin-top: var(--space-3);
}

.community-body__text ul {
  margin-block: var(--space-4) var(--space-5);
  padding: 0;
  list-style: none;
}

.community-body__text ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
}

.community-body__text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

/* ============================================================
   CLOSING CTA (page-community.php — replaces the old sticky sidebar,
   which sat in a CSS Grid cell that never stretched to the text column's
   height, so the "sticky" card scrolled out of view after one screen and
   left the entire right half of the page blank for anyone still reading.
   This runs full-width instead, after the write-up, before the FAQ.)
   ============================================================ */

.community-cta {
  margin-top: var(--space-16);
  padding-block: var(--space-16);
  background-color: var(--color-gold-pale);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.community-cta__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  max-width: 760px;
  margin-inline: auto;
}

.community-cta__portrait {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}

.community-cta__body {
  flex: 1;
  min-width: 0;
}

.community-cta__heading {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  margin: var(--space-2) 0 var(--space-4);
}

.community-cta__text {
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}

.community-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .community-cta__inner {
    flex-direction: column;
    text-align: center;
  }

  .community-cta__actions {
    justify-content: center;
  }
}

/* ============================================================
   COMMUNITY FAQ (page-community.php — shows only when faq_items is set)
   Two-column grid on wide screens instead of a single stacked column —
   the stack alone left the FAQ section feeling thin under all that empty
   space; a grid gives it real presence and cuts the section's height.
   ============================================================ */

.community-faq__heading {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  color: var(--color-text-primary);
}

.community-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.community-faq__item {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-8);
  transition: box-shadow var(--duration-slow) var(--ease-out),
              transform  var(--duration-slow) var(--ease-out);
}

.community-faq__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.community-faq__question {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-gold);
  margin: 0 0 var(--space-3);
}

.community-faq__answer {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 800px) {
  .community-faq__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   COMMUNITIES LANDING GRID (page-communities.php)
   ============================================================ */

.communities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.community-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-slow) var(--ease-out),
              transform  var(--duration-slow) var(--ease-out);
}

.community-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.community-card__image {
  position: absolute;
  inset: 0;
}

.community-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.05) 60%);
}

.community-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.community-card__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-border-light);
}

.community-card__name {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: #fff;
}

/* ============================================================
   CONTENT-BREAK PHOTO
   Now that the body is a single wide (1100px) column with only the text
   itself pinned to a 700px measure (see .community-body__text > p etc.
   above), photos are free to break out past the text — full-width
   "anchor" moments alternating with a narrower, taller inset, instead of
   every photo being squeezed to the same cramped column the old sidebar
   grid left available.
   ============================================================ */

.community-body__text figure.content-photo {
  margin-block: var(--space-16);
  clear: both;
}

.community-body__text .content-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-slow) var(--ease-out);
}

.community-body__text .content-photo figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Alternating rhythm: odd photos break out to the body's full 1100px
   width (the anchor moments); even photos sit narrower than the text
   column itself and centered, with a taller crop, for contrast — so the
   page reads as a composed magazine layout, not a uniform photo stack. */
@media (min-width: 641px) {
  .community-body__text figure.content-photo:nth-of-type(odd) {
    width: 100%;
  }

  .community-body__text figure.content-photo:nth-of-type(odd) img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .community-body__text figure.content-photo:nth-of-type(even) {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .community-body__text figure.content-photo:nth-of-type(even) img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .community-body__text figure.content-photo:hover img {
    transform: scale(1.02);
  }
}