/* Resort detail page recipes (.rst-*) for Pages/Resort. Token-consuming: every value
   resolves through a --dvc-* custom property; raw literals appear only in the
   component-local token block below (this file's tokenization point), mirroring
   discover.css. Reuses the shared app-hero + app-grid-3 layout. */

:root {
  --dvc-rst-stack: 18px;
  --dvc-rst-hero-min: 320px;
  --dvc-rst-gap: 10px;
  --dvc-rst-fact-gap: 18px;
  --dvc-rst-shot-ratio: 4 / 3;
  --dvc-rst-muted-alpha: 0.72;
}

.rst-detail {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-rst-stack);
}

.rst-back {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-rst-gap);
  color: var(--dvc-ink);
  opacity: var(--dvc-rst-muted-alpha);
  font-weight: 600;
  text-decoration: none;
}

.rst-back:hover {
  opacity: 1;
}

.rst-hero {
  min-block-size: var(--dvc-rst-hero-min);
}

.rst-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-rst-gap);
  align-items: flex-start;
}

.rst-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-rst-gap);
}

.rst-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dvc-rst-fact-gap);
}

.rst-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-rst-gap);
}

.rst-shot {
  aspect-ratio: var(--dvc-rst-shot-ratio);
}

.rst-empty {
  color: var(--dvc-ink);
  opacity: var(--dvc-rst-muted-alpha);
}