/*
 * The attraction page, from the design system's Attractions Page frames:
 * the back tag and an H3 title, a gallery of one wide photo with two stacked
 * beside it, then the copy with two rails of what you can do here, and a
 * side column with the map and the dark visitor information panel. Other
 * attractions close the page in a card panel. Below 1024 the side column
 * slides up between the copy and the rails.
 */
.dea-exp {
  box-sizing: border-box;
  max-width: calc(var(--dea-max) + var(--dea-gutter) * 2);
  margin: 0 auto;
  padding: var(--dea-page-gap) var(--dea-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dea-page-gap);
}

/* ---------------- header ---------------- */
.dea-exp__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.dea-exp__back svg { width: 16px; height: 16px; }
.dea-exp__back:hover { background-color: var(--dea-action-primary-hover); color: var(--dea-action-on-action); }
.dea-exp__title, .dea-mod .dea-exp__title { margin: 0; font: var(--dea-type-h3); letter-spacing: var(--dea-track-head); color: var(--dea-text-strong); text-wrap: balance; }

/* ---------------- gallery ----------------
   One wide frame with two stacked beside it: 1000 + 16 + 264 across, 424
   tall on desktop; 528 + 176 on a tablet; the wide one over a pair on a phone. */
.dea-exp__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.dea-exp__gallery--solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
@media (max-width: 1023px) {
  .dea-exp__gallery { grid-template-columns: minmax(0, 1fr) 176px; }
  .dea-exp__gallery .dea-exp__shot--hero { aspect-ratio: 528 / 288; }
}
@media (max-width: 767px) {
  .dea-exp__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .dea-exp__gallery .dea-exp__shot--hero { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 343 / 200; }
}

.dea-exp__shot {
  /* A button, not a figure: it opens the viewer. The parent theme paints
     button:hover/:focus crimson, so every state is set here. */
  display: block; position: relative; overflow: hidden;
  margin: 0; padding: 0; border: 0;
  border-radius: var(--dea-radius-lg);
  background: var(--dea-bg-sand);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  text-align: left;
  aspect-ratio: 264 / 204;
}
.dea-exp__shot:hover,
.dea-exp__shot:focus,
.dea-exp__shot:active { background: var(--dea-bg-sand); }
.dea-exp__shot:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 3px; }
.dea-exp__shot .dea-exp__img { transition: transform .5s var(--dea-ease); }
.dea-exp__shot:hover .dea-exp__img { transform: scale(1.03); }
.dea-exp__shot--hero { grid-row: 1 / 3; aspect-ratio: 1000 / 424; }
.dea-exp__gallery--solo .dea-exp__shot--hero { grid-row: auto; }

/* The last frame says how many there are. */
.dea-exp__seeall {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 32px; border-radius: var(--dea-radius-full);
  background: rgba(249, 247, 242, .94); color: var(--dea-text-strong);
  font: var(--dea-type-label-sm); letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: var(--dea-shadow-card);
  transition: background .2s var(--dea-ease);
}
.dea-exp__shot:hover .dea-exp__seeall { background: #fff; }

.dea-mod .dea-exp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------- copy and side column ---------------- */
.dea-exp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) {
  .dea-exp__grid { grid-template-columns: minmax(0, 1fr) 392px; gap: 48px; align-items: start; }
}
.dea-exp__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.dea-exp__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }

/* Below desktop the main column dissolves so its rails can follow the map
   and the visitor panel, which sit side by side on a tablet. */
@media (max-width: 1023px) {
  .dea-exp__main { display: contents; }
  .dea-exp__copy { order: 1; }
  .dea-exp__side { order: 2; grid-template-columns: 316px minmax(0, 1fr); }
  .dea-exp__main > .dea-attr { order: 3; }
}
@media (max-width: 767px) {
  .dea-exp__side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.dea-exp__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.dea-exp__lede { margin: 0; font: var(--dea-type-h4); letter-spacing: var(--dea-track-head); font-family: var(--dea-font-head); color: var(--dea-text-strong); }
@media (max-width: 767px) { .dea-exp__lede { font: var(--dea-type-h5); font-family: var(--dea-font-head); } }
.dea-exp__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font: var(--dea-type-body-md); color: var(--dea-text-body); }
.dea-exp__body p { margin: 0; }
.dea-exp__body a { color: var(--dea-text-link); }
.dea-exp__body h2, .dea-exp__body h3 { margin: 12px 0 0; font: var(--dea-type-h5); letter-spacing: var(--dea-track-head); color: var(--dea-text-strong); }
.dea-exp__body ul, .dea-exp__body ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------------- map ---------------- */
.dea-exp__map { aspect-ratio: 392 / 380; border-radius: var(--dea-radius-lg); }
@media (max-width: 1023px) { .dea-exp__map { aspect-ratio: 316 / 288; } }
@media (max-width: 767px) { .dea-exp__map { aspect-ratio: 343 / 280; } }

/* ---------------- visitor information ---------------- */
.dea-exp__address { display: block; }
.dea-exp__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dea-exp__textlink { color: var(--dea-text-accent); font: var(--dea-type-cta-md); text-decoration: none; }
.dea-exp__textlink:hover { text-decoration: underline; }

/* ---------------- the two rails in the main column ----------------
   They start on the column's left edge and run past its right edge, with the
   sm card; below desktop they bleed to the page edge like every rail. */
.dea-exp__main .dea-attr {
  --attr-card-w: 256px;
  --attr-gap: 24px;
  --attr-edge: 0px;
  --attr-edge-vw: 0px;
  padding: 0;
  background: transparent;
}
.dea-exp__main .dea-attr__head { padding-inline: 0; margin-bottom: 24px; }
.dea-exp__main .dea-attr__title { font: var(--dea-type-h4); }
.dea-exp__main .dea-attr__inner { padding-left: 0; }
.dea-exp__main .dea-attr__media { aspect-ratio: 256 / 232; }
.dea-exp__main .dea-attr__row { min-height: 40px; }
.dea-exp__main .dea-attr__name { font: var(--dea-type-title-sm); }
.dea-exp__main .dea-attr__railwrap::after { width: 80px; }
.dea-exp__main .dea-attr__rail::after { content: none; }
.dea-exp__main .dea-attr__rail { scroll-padding-inline: 24px 0; }
@media (max-width: 1023px) {
  .dea-exp__main .dea-attr__railwrap { margin-right: calc(var(--dea-gutter) * -1); }
  .dea-exp__main .dea-attr__rail { scroll-padding-inline: 24px var(--dea-gutter); }
}
@media (max-width: 767px) {
  .dea-exp__main .dea-attr { --attr-gap: 16px; }
  .dea-exp__main .dea-attr__rail { scroll-padding-inline: 16px var(--dea-gutter); }
}

/* ---------------- other attractions ---------------- */
.dea-exp__other {
  box-sizing: border-box;
  max-width: calc(var(--dea-max) + var(--dea-gutter) * 2);
  margin: var(--dea-page-gap) auto 0;
  padding: 0 var(--dea-gutter);
}