/* Fossil Trail. From the design: a tint panel with the xl radius and 32
   padding, a map with the lg radius on the left, and the section header with
   its controls, the intro and the rail of Card / Trail (240 x 276, md radius,
   32 badge, 16 apart) on the right, the rail running into the panel's
   padding with a soft edge shadow that fades out at the end.

   On the Fossil Trail page the ten stops are a grid of five under the map row
   instead of a rail (the .dea-ft--grid modifier). Below 1024 both stack:
   header, intro, map, rail. */
.dea-ft {
  --ft-card-w: 240px;
  --ft-gap: 16px;
  --ft-shadow-w: 56px;
  background: var(--dea-bg-page);
  padding: 0 var(--dea-gutter);
}

.dea-ft__inner {
  max-width: var(--dea-max);
  margin-inline: auto;
  background: var(--dea-bg-tint);
  border-radius: var(--dea-radius-xl);
  padding: var(--dea-panel-pad);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  /* clip, not hidden: the rail bleeds past the panel and must be cut off
     there, but clip does not create a scroll container, so a card's shadow is
     not also clipped by a stray scrollport. */
  overflow: clip;
}

/* Desktop. The map spans every row; the copy and the rail sit in the right
   column with a flexible row above and below, which centres them against the
   map without stretching it. */
@media (min-width: 1024px) {
  .dea-ft__inner {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "map ." "map content" "map stops" "map .";
    column-gap: var(--dea-panel-gap);
    row-gap: 0;
  }
  .dea-ft__mapcol { grid-area: map; align-self: start; }
  .dea-ft__content { grid-area: content; }
  .dea-ft__railwrap { grid-area: stops; margin-top: 24px; }

  /* The trail page: the ten stops as a grid of five under the map row. */
  .dea-ft--grid .dea-ft__inner {
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr auto;
    grid-template-areas: "map ." "map content" "map ." "stops stops";
  }
  .dea-ft--grid .dea-ft__railwrap { margin: 32px 0 0; }
  .dea-ft--grid .dea-ft__railwrap::after { display: none; }
  .dea-ft--grid .dea-sechead__controls { display: none; }
  .dea-ft--grid .dea-sechead__title { font: var(--dea-type-h2); }
  .dea-ft--grid .dea-ft__rail {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
    gap: 24px;
    overflow: visible;
    margin: 0; padding: 0;
    scroll-snap-type: none;
  }
  .dea-ft--grid .dea-ft__rail::after { content: none; }
}

/* ---------------- map ---------------- */
.dea-ft__map { aspect-ratio: 560 / 640; }
.dea-ft--grid .dea-ft__map { aspect-ratio: 584 / 590; }
@media (max-width: 1023px) { .dea-ft__map, .dea-ft--grid .dea-ft__map { aspect-ratio: 656 / 520; } }
@media (max-width: 767px) { .dea-ft__map, .dea-ft--grid .dea-ft__map { aspect-ratio: 1 / 1; } }

/* ---------------- content ---------------- */
/* The explicit column matters: with the implicit auto column, the grid sized
   itself to the ten-card rail inside it and pushed the header's arrows and
   the edge shadow off the right of the panel. */
.dea-ft__content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

.dea-ft__title { margin: 0; }
.dea-ft__intro {
  margin: 0;
  max-width: 46ch;
  font: var(--dea-type-lede);
  color: var(--dea-text-body);
}
.dea-ft--grid .dea-ft__intro { max-width: none; }

/* Below desktop the map moves between the intro and the rail. The column
   wrappers become transparent to the grid and the order does the rest. */
@media (max-width: 1023px) {
  .dea-ft__mapcol, .dea-ft__content { display: contents; }
  .dea-ft__head { order: 1; }
  .dea-ft__intro { order: 2; }
  .dea-ft__map { order: 3; }
  .dea-ft__railwrap { order: 4; }
}

/* The rail runs to the edge of the panel, not to the inset. */
.dea-ft__railwrap { position: relative; margin-right: calc(var(--dea-panel-pad) * -1); }

/* The edge shadow: ink, 0 to 18%, at 40%, over the last 56px. */
.dea-ft__railwrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--ft-shadow-w);
  background: linear-gradient(to right, rgba(35, 31, 32, 0), rgba(35, 31, 32, .072));
  pointer-events: none;
  transition: opacity .3s ease;
}
.dea-ft__railwrap.is-end::after { opacity: 0; }

.dea-ft__rail {
  list-style: none;
  /* Room for the card shadows inside the scrollport, given back by the
     margins so the rail sits where the design puts it. */
  margin: -12px 0 -28px -16px;
  padding: 12px 0 28px 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--ft-card-w);
  gap: var(--ft-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-padding-inline: 16px var(--dea-panel-pad);
}
/* Room at the end so the last card can scroll fully into view. */
.dea-ft__rail::after { content: ""; width: max(0px, calc(var(--dea-panel-pad) - var(--ft-gap))); }
.dea-ft__rail::-webkit-scrollbar { display: none; }

.dea-ft__card {
  scroll-snap-align: start;
  background: var(--dea-bg-card);
  border-radius: var(--dea-radius-md);
  overflow: hidden;
  box-shadow: var(--dea-shadow-card);
  transition: transform .35s var(--dea-ease), box-shadow .35s var(--dea-ease);
}
/* The selected stop lifts, as before, so the map and the rail agree. */
.dea-ft__card.is-active,
.dea-ft__card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(35, 31, 32, .05), 0 14px 28px -8px rgba(35, 31, 32, .22); }

.dea-ft__link { display: block; color: inherit; text-decoration: none; }
.dea-ft__link:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: -3px; }

.dea-ft__media {
  display: block; position: relative;
  aspect-ratio: 240 / 152;
  background: var(--dea-bg-sand);
  overflow: hidden;
}
/* Higher specificity than Elementor's ".elementor img { height: auto }". */
.dea-mod .dea-ft__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dea-ft__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dea-accent-badge); color: var(--dea-text-inverse);
  display: grid; place-items: center;
  font: var(--dea-type-label-md);
}

/* display:block matters: these are spans inside a link, and without it the
   vertical padding does not resolve and the card comes out the wrong height. */
.dea-ft__body { display: block; padding: 16px; }
.dea-ft__name { display: block; font: var(--dea-type-title-sm); letter-spacing: var(--dea-track-title); color: var(--dea-text-strong); }
.dea-ft__town { display: block; margin-top: 8px; font: var(--dea-type-body-sm); color: var(--dea-text-meta); }

/* The arrows are .dea-iconbtn in the section header; dea-map.js disables
   them at either end of the trail. */

@media (max-width: 767px) {
  .dea-ft { --ft-shadow-w: 40px; }
}