/* ============================================================
   Retreats listing page
   ============================================================ */
.phero { padding-block: clamp(1.25rem, 1rem + 1vw, 2.25rem) 0; }
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: start;
}
.phero__body h1 { font-size: var(--step-4); margin-top: 0; }
.phero__fig { margin: 0; }
.phero__fig img {
  width: 100%; aspect-ratio: 4/5; max-height: min(58svh, 30rem);
  object-fit: cover; border-radius: var(--radius-lg);
}

.rl__h { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.rl__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ---------- wide retreat card ---------- */
.rc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) auto;
  gap: clamp(1.2rem, .8rem + 2vw, 2.8rem);
  align-items: center;
  padding: clamp(1rem, .6rem + 1.5vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.rc:hover { border-color: var(--line); transform: translateY(-3px); }
.rc.is-past { opacity: .82; }
@media (prefers-reduced-motion: reduce) { .rc:hover { transform: none; } }

.rc__media { display: block; overflow: hidden; border-radius: var(--radius); }
.rc__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.rc:hover .rc__media img { transform: scale(1.05); }

.rc__meta {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .8rem;
}
.rc__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--clay); }

.rc__body h3 { font-size: var(--step-2); margin-bottom: .35em; }
.rc__body h3 a { text-decoration: none; }
.rc__body h3 a::after { content: ""; position: absolute; inset: 0; }
.rc__sum { color: var(--ink-soft); font-size: var(--step-0); max-width: 52ch; margin-bottom: 1.2rem; }

.rc__foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.rc__price { font-family: var(--display); font-size: var(--step-1); }

.rc__act { padding-right: .8rem; }

@media (max-width: 900px) {
  .phero__grid { grid-template-columns: 1fr; }
  .rc { grid-template-columns: 1fr; }
  .rc__act { padding: 0; }
}