/* [project]/apps/elktours/src/components/tours/tour-story.css [app-client] (css) */
.tour-story {
  gap: 2rem;
  display: grid;
}

@media (min-width: 900px) {
  .tour-story {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
    align-items: start;
    gap: 3rem;
  }

  .tour-stop__media {
    display: none;
  }
}

.tour-story__text {
  min-width: 0;
}

.tour-stop {
  border-top: 1px solid hsl(var(--border));
  padding: 1.5rem 0 2.5rem;
  scroll-margin-top: 6rem;
  transition: opacity .4s;
}

.tour-stop.is-active .tour-stop__title {
  color: hsl(var(--primary));
}

.tour-stop__kicker {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
}

.tour-stop__title {
  font-family: var(--eac-font-title, Georgia, serif);
  margin-top: .4rem;
  font-size: 1.6rem;
  line-height: 1.15;
}

.tour-stop__media {
  margin-top: 1rem;
}

.tour-stop__media-slot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius, 0);
  background: hsl(var(--muted));
  width: 100%;
  overflow: hidden;
}

.tour-stop__body {
  margin-top: 1rem;
  line-height: 1.6;
}

.tour-stop__body p + p {
  margin-top: .8em;
}

.tour-story__panel {
  display: none;
}

@media (min-width: 900px) {
  .tour-story__panel {
    grid-template-rows: 1fr 1fr;
    gap: .75rem;
    height: calc(100vh - 6rem);
    min-height: 520px;
    display: grid;
    position: sticky;
    top: 5rem;
  }
}

.tour-story__map, .tour-story__view {
  border-radius: var(--radius, 0);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  position: relative;
  overflow: hidden;
}

.tour-story__map > div {
  height: 100%;
}

.tour-story__caption {
  background: hsl(var(--background) / .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  padding: .3rem .6rem;
  font-size: .78rem;
  position: absolute;
  top: .75rem;
  left: .75rem;
}

.tour-pin {
  background: hsl(var(--card));
  width: 30px;
  height: 30px;
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--foreground));
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font: 600 .8rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: transform .25s, background .25s, color .25s;
  display: inline-flex;
  box-shadow: 0 2px 6px #00000040;
}

.tour-pin.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  transform: scale(1.25);
}

.maplibregl-map {
  background: hsl(var(--muted));
  font-family: inherit;
}

.route-preview {
  aspect-ratio: 16 / 9;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  border-radius: var(--radius, 0);
  width: 100%;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

.route-preview--full {
  z-index: 60;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  min-height: 0;
  position: fixed;
  inset: 0;
}

.route-preview__map {
  width: 100%;
  height: 100%;
  inset: 0;
  position: absolute !important;
}

.route-preview__map .maplibregl-ctrl-bottom-right {
  bottom: 3.2rem;
}

.route-preview__bar {
  background: linear-gradient(to top, hsl(var(--background) / .96), hsl(var(--background) / .7));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid hsl(var(--border));
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.route-preview__btn {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  width: 2rem;
  height: 2rem;
  color: hsl(var(--foreground));
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.route-preview__btn--main {
  background: hsl(var(--primary));
  width: 2.6rem;
  height: 2.6rem;
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.route-preview__dots {
  flex-wrap: wrap;
  gap: .3rem;
  margin-left: .5rem;
  display: flex;
}

.route-preview__dot {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  width: 1.6rem;
  height: 1.6rem;
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  font: 600 .68rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.route-preview__dot.is-done {
  border-color: hsl(var(--foreground) / .5);
  color: hsl(var(--foreground));
}

.route-preview__dot.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.route-preview__progress {
  background: hsl(var(--border));
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
}

.route-preview__progress span {
  background: hsl(var(--primary));
  height: 100%;
  transition: width .2s linear;
  display: block;
}

.route-preview__title {
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 30%;
  margin-left: auto;
  font-size: .78rem;
  overflow: hidden;
}

.route-preview__card {
  background: hsl(var(--card) / .97);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0);
  width: min(360px, 100% - 2rem);
  max-height: calc(100% - 5rem);
  transition: opacity .35s, transform .35s;
  position: absolute;
  top: 1rem;
  right: 1rem;
  overflow: auto;
  box-shadow: 0 10px 30px #0000002e;
}

.route-preview__card.is-expanded {
  width: min(460px, 100% - 2rem);
}

@keyframes rp-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.route-preview__media {
  aspect-ratio: 16 / 9;
  background: hsl(var(--muted));
  position: relative;
}

.route-preview__look {
  background: hsl(var(--background) / .92);
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: .3rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  position: absolute;
  bottom: .5rem;
  right: .5rem;
}

.route-preview__text {
  padding: .9rem 1rem 1rem;
}

.route-preview__h {
  font-family: var(--eac-font-title, Georgia, serif);
  margin-top: .2rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

.route-preview__lede, .route-preview__body {
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.5;
}

.route-preview__body p + p {
  margin-top: .5em;
}

.route-preview__more {
  text-underline-offset: 3px;
  margin-top: .5rem;
  font-size: .78rem;
  text-decoration: underline;
}

.route-preview__start {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 999px;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.3rem;
  font-weight: 600;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px #00000040;
}

.route-preview__start:hover {
  transform: translate(-50%, -50%)scale(1.03);
}

@media (max-width: 640px) {
  .route-preview {
    aspect-ratio: 3 / 4;
  }

  .route-preview__card {
    width: auto;
    max-height: 55%;
    inset: auto .5rem 3.6rem;
  }

  .route-preview__title {
    display: none;
  }
}

.route-preview--full > .route-preview {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  min-height: 0;
  position: absolute;
  inset: 0;
}

.route-preview__card.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  transform: translateY(10px);
}

.route-preview__still {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .6s;
  position: absolute;
  inset: 0;
}

.route-preview__still.is-under {
  opacity: 0;
}

.route-preview__pano {
  opacity: 0;
  transition: opacity .6s;
  position: absolute;
  inset: 0;
}

.route-preview__pano.is-on {
  opacity: 1;
}

.route-preview__dot.is-heading {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.route-preview__map gmp-map-3d {
  width: 100%;
  height: 100%;
  display: block;
}

.route-preview[data-engine="google"] .route-preview__bar {
  background: linear-gradient(to top, #141418e6, #14141899);
  border-top-color: #ffffff26;
}

.route-preview[data-engine="google"] .route-preview__title {
  color: #ffffffbf;
}

.route-preview--hero {
  aspect-ratio: 21 / 9;
  min-height: 420px;
  max-height: 72vh;
}

.route-preview--hero > .route-preview {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  min-height: 0;
  position: absolute;
  inset: 0;
}

.route-preview__poster-shade {
  background: linear-gradient(to top, hsl(var(--background) / .85), hsl(var(--background) / .15) 50%, transparent);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.route-preview__poster-caption {
  color: hsl(var(--foreground) / .85);
  font-size: .85rem;
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
}

@media (max-width: 640px) {
  .route-preview--hero {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}

.route-preview__start {
  white-space: nowrap;
}

/*# sourceMappingURL=apps_elktours_src_components_tours_tour-story_871e5432.css.map*/