/* ==========================================================================
   Residents — Current residents hub
   Hero · quick-link grid · emergency callout · maintenance · move-in · move-out
   ========================================================================== */

/* Align residents content with the site chrome (1200px inner) */
.page-residents .container {
  max-width: 1200px;
}

/* Hero
   ---------------------------------------------------------------------- */

.res-hero {
  background: var(--color-cream);
  padding: var(--space-2xl) 0;
}

.res-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-md);
}

.res-hero__lead {
  font-size: var(--text-md);
  color: var(--color-stone);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 var(--space-xl);
}

/* Quick-link card grid
   ---------------------------------------------------------------------- */

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

.res-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-pebble);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  padding: var(--space-lg);
  /* shared .card-link supplies color:inherit, no underline, hover border-brass */
}

.res-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-charcoal);
}

.res-card__title .ext-icon {
  width: 11px;
  height: 11px;
  opacity: 0.45;
  flex-shrink: 0;
}

.res-card__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-stone);
  line-height: var(--leading-normal);
  margin-top: var(--space-sm);
}

/* Emergency callout — linen box (elevation via background change, no border) */

.res-emergency {
  margin-top: var(--space-xl);
  background: var(--color-linen);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}

.res-emergency__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Anchored full-width bands (maintenance / move-in / move-out)
   ---------------------------------------------------------------------- */

.res-section {
  padding: var(--space-3xl) 0;
  scroll-margin-top: 120px; /* clear the sticky header on anchor jumps */
}

.res-section--cream {
  background: var(--color-cream);
}

.res-section--linen {
  background: var(--color-linen);
}

.res-section__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Grid columns — min-width:0 keeps long content from forcing overflow */
.res-section__lead-col,
.res-section__body-col {
  min-width: 0;
}

.res-section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
}

.res-section__intro {
  font-size: var(--text-base);
  color: var(--color-stone);
  line-height: 1.55;
  margin: 0;
}

/* Headed blocks + lists inside the body column
   ---------------------------------------------------------------------- */

.res-block + .res-block {
  margin-top: var(--space-xl);
}

.res-block__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  margin: 0 0 var(--space-sm);
}

/* Closing note under the maintenance accordion */
.res-note {
  font-size: var(--text-sm);
  color: var(--color-stone);
  line-height: var(--leading-relaxed);
  margin: var(--space-md) 0 0;
}

/* Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .res-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 767px) {
  .res-hero {
    padding: var(--space-xl) 0;
  }
}