/* ============================================================
   RESIDENTS PAGE
   ============================================================ */

/* ── When you arrive ── */
.res-arrive-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 900px) {
  .res-arrive-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .res-arrive-media { order: -1; }
}
.res-arrive-grid p {
  margin-bottom: var(--sp-4);
}
.res-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* ── Vertical timeline ── */
.res-timeline {
  border-left: 1px solid var(--bc-border-strong);
  padding-left: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  counter-reset: res-step;
}
.res-timeline-item {
  position: relative;
  counter-increment: res-step;
}
.res-timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-8) - 5px);
  top: 0.4em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bc-ivory);
  border: 1.5px solid var(--bc-gold);
}
.res-timeline-item h3 {
  margin-bottom: var(--sp-2);
}
.res-timeline-item h3::before {
  content: counter(res-step, upper-roman) ' · ';
  font-style: italic;
  color: var(--bc-gold);
}
.res-timeline-item p {
  color: var(--bc-mid);
  font-size: var(--t-small);
}

/* ── Rights ── */
.res-rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.res-rights li {
  border: 1px solid var(--bc-border-dark);
  border-left: 2px solid #C4A96A;
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-small);
  color: rgba(248, 245, 238, 0.9);
}

/* ── Daily life ── */
.res-daily-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-10);
}
@media (max-width: 800px) {
  .res-daily-grid { grid-template-columns: 1fr; }
}
.res-daily-col p {
  font-size: var(--t-small);
  color: var(--bc-mid);
  margin-top: var(--sp-2);
}

/* ── Portal CTA ── */
.res-portal-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.res-portal-mark {
  width: 52px;
  height: 52px;
}
.res-portal-cta p {
  color: var(--bc-mid);
}