/* ==========================================================================
   Retreats — the hub page for the three hosted retreats
   Skin: .skin-core. Every rule scoped under .page-retreats.
   ========================================================================== */
.page-retreats .rt-top { padding-top: 40px; }
@media (min-width: 1024px) { .page-retreats .rt-top { padding-top: 56px; } }
.page-retreats .rt-h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 26px; max-width: 24ch; }

.page-retreats .rt-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .page-retreats .rt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.page-retreats .rt-card {
  display: flex; flex-direction: column; min-width: 0; text-decoration: none;
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--card-bg); color: var(--card-text);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.page-retreats .rt-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(14,23,41,0.18); }
.page-retreats .rt-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page-retreats .rt-card__img { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.page-retreats .rt-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-retreats .rt-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; flex: 1; }
.page-retreats .rt-card__kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--card-kicker); margin: 0; }
.page-retreats .rt-card__title { font-family: var(--card-display); font-weight: 500; font-size: 30px; line-height: 1.05; margin: 0; color: var(--card-title); }
.page-retreats .rt-card__text { font-size: 15.5px; line-height: 1.6; margin: 0 0 8px; color: var(--card-text); flex: 1; }
.page-retreats .rt-card__cta { align-self: flex-start; }

/* Each card wears its retreat's colours */
.page-retreats .rt-card--raid { --card-bg: #16181C; --card-text: #C9CDD2; --card-title: #F2F1EE; --card-kicker: #D4491F; --card-display: 'Anton', 'Archivo', system-ui, sans-serif; }
.page-retreats .rt-card--raid .rt-card__title { text-transform: uppercase; letter-spacing: 0.01em; font-size: 34px; }
.page-retreats .rt-card--raid .cr-btn--primary { background: #D4491F; color: #F2F1EE; }
.page-retreats .rt-card--skyfire { --card-bg: #0C1020; --card-text: #B6BECB; --card-title: #E9E9F0; --card-kicker: #E8A34D; --card-display: 'Cormorant Garamond', Georgia, serif; }
.page-retreats .rt-card--skyfire .rt-card__title { font-weight: 300; font-size: 34px; }
.page-retreats .rt-card--skyfire .cr-btn--primary { background: #E8A34D; color: #0C1020; }
.page-retreats .rt-card--borderland { --card-bg: #1E3A2F; --card-text: #D8D0B8; --card-title: #EDE4CF; --card-kicker: #C6A24A; --card-display: 'Fraunces', Georgia, serif; }
.page-retreats .rt-card--borderland .cr-btn--primary { background: #C6A24A; color: #1E3A2F; }

.page-retreats .rt-how { display: grid; grid-template-columns: 1fr; gap: 0 32px; margin-top: 8px; max-width: 980px; }
@media (min-width: 768px) { .page-retreats .rt-how { grid-template-columns: 1fr 1fr; } }
.page-retreats .rt-how > div { padding: 16px 0; border-top: 1px solid var(--line-on-light); min-width: 0; }
.page-retreats .rt-how h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.page-retreats .rt-how p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
@media (min-width: 768px) { 
/* Hero: the long table sits in the lower half of the photograph */
.page-retreats .cr-hero { min-height: clamp(520px, 78vh, 640px); }
@media (min-width: 1024px) { .page-retreats .cr-hero { min-height: clamp(620px, 74vh, 860px); } }
.page-retreats .cr-hero__img { object-position: 50% 86%; }
/* The text sits over a bright room, so the scrim is the estate pages' left-dark one */
.page-retreats .cr-hero { --hero-scrim: linear-gradient(rgba(14,23,41,0.84) 0%, rgba(14,23,41,0.66) 55%, rgba(14,23,41,0.4) 100%); }
@media (min-width: 768px) { .page-retreats .cr-hero { --hero-scrim: linear-gradient(92deg, rgba(14,23,41,0.9) 0%, rgba(14,23,41,0.7) 45%, rgba(14,23,41,0.3) 80%, rgba(14,23,41,0.18) 100%); } }