/* Phase 1 elevation — Curated journeys page styling
 * Site UI Elevation §9. Listing + detail templates rendered by
 * server/routes/pages/journeys.page.js.
 */

.journeys-page {
  background: var(--black);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: var(--space-5xl);
}

.journeys-hero {
  padding: clamp(var(--space-3xl), 12vh, var(--space-5xl)) clamp(var(--space-md), 6vw, var(--space-3xl)) clamp(var(--space-2xl), 6vw, var(--space-3xl));
  text-align: center;
}

.journeys-hero .bt-display,
.journeys-hero .bt-subheadline {
  color: var(--text);
}

.journeys-hero .bt-subheadline {
  color: var(--text-mid);
  margin-top: var(--space-md);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

.journeys-featured,
.journeys-list {
  padding: var(--space-2xl) clamp(var(--space-md), 4vw, var(--space-xl));
}

.journeys-featured .bt-eyebrow,
.journeys-list .bt-eyebrow {
  margin-bottom: var(--space-xl);
}

.journeys-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-2xl);
}

.journeys-grid--featured {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .journeys-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }
}

.journey-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-base);
}

.journey-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-dim);
  box-shadow: 0 16px 48px rgba(15, 26, 48, 0.32);
}

.journey-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.journey-card__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.journey-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.journey-card:hover .journey-card__cover img {
  transform: scale(1.04);
}

.journey-card__body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.journey-card__eyebrow {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.journey-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-xl), 3vw, var(--size-2xl));
  line-height: var(--leading-tight);
  color: var(--text);
  margin: var(--space-xs) 0 0;
}

.journey-card__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: var(--leading-snug);
  color: var(--text-mid);
  margin: 0;
}

.journey-card__facts {
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
  margin-top: var(--space-sm);
}

.journey-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.journey-card__tags .bt-tag {
  background: rgba(196, 160, 82, 0.08);
  color: var(--gold-pale);
  border-color: rgba(196, 160, 82, 0.3);
}

.journey-card--featured .journey-card__cover {
  aspect-ratio: 21 / 9;
}

.journey-card--featured .journey-card__title {
  font-size: clamp(var(--size-2xl), 4vw, var(--size-3xl));
  max-width: 18ch;
}

/* ────────────────────────────────────────────────────────────────────────
 * Detail page
 * ──────────────────────────────────────────────────────────────────────── */

.journey-detail {
  background: var(--black);
  color: var(--text);
}

.journey-detail__hero {
  position: relative;
  width: 100%;
  height: clamp(480px, 80vh, 880px);
  overflow: hidden;
  background: var(--ink);
}

.journey-detail__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-detail__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 26, 48, 0) 50%,
    rgba(15, 26, 48, 0.6) 100%
  );
  pointer-events: none;
}

.journey-detail__hero-content {
  position: absolute;
  left: clamp(var(--space-md), 6vw, var(--space-3xl));
  right: clamp(var(--space-md), 6vw, var(--space-3xl));
  bottom: clamp(var(--space-2xl), 8vh, var(--space-4xl));
  z-index: 1;
  color: var(--cream);
  max-width: 720px;
}

.journey-detail__eyebrow {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 var(--space-md);
}

.journey-detail__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-3xl), 7vw, var(--size-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--cream);
  margin: 0 0 var(--space-sm);
  text-shadow: 0 1px 32px rgba(0, 0, 0, 0.45);
  max-width: 18ch;
}

.journey-detail__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-md), 2vw, var(--size-lg));
  line-height: var(--leading-snug);
  color: rgba(250, 248, 245, 0.85);
  margin: 0 0 var(--space-md);
  max-width: 36ch;
}

.journey-detail__facts {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.7);
  margin: 0;
}

.journey-detail__intro {
  padding: clamp(var(--space-3xl), 10vw, var(--space-5xl)) var(--space-lg);
}

.journey-detail__intro .bt-body-large {
  color: var(--text);
}

.journey-detail__intro .bt-body-large + .bt-body-large {
  margin-top: var(--space-lg);
}

.journey-detail__days {
  padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) var(--space-lg);
}

.journey-days {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.journey-day {
  position: relative;
}

.journey-day__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.journey-day__number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--size-lg);
  color: var(--gold);
  margin: 0;
}

.journey-day__location {
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-mid);
  margin: 0;
}

.journey-day__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-xl), 3vw, var(--size-2xl));
  line-height: var(--leading-snug);
  color: var(--text);
  margin: 0 0 var(--space-md);
}

.journey-day__figure {
  margin: var(--space-md) 0;
  cursor: zoom-in;
}

.journey-day__figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--ink);
}

.journey-day__caption {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-sm);
  color: var(--text-mid);
  text-align: center;
}

.journey-day__body {
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  line-height: var(--leading-loose);
  color: var(--text);
  margin: 0;
}

.journey-detail__properties,
.journey-detail__experiences {
  padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) var(--space-lg);
}

.journey-properties,
.journey-experiences {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.journey-detail__variations {
  padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) var(--space-lg);
}

.journey-variations {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.journey-variation {
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.journey-variation__label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--size-lg);
  color: var(--text);
  margin: 0 0 var(--space-xs);
}

.journey-variation__summary {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-mid);
  margin: 0;
}

.journey-variation__duration {
  margin-top: var(--space-sm);
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.journey-pricing,
.journey-detail__closing {
  padding: clamp(var(--space-2xl), 6vw, var(--space-4xl)) var(--space-lg);
}

.journey-detail__closing .bt-pullquote {
  color: var(--text);
}