/* The Fossil Trail page. Every section is a centred 1280 column on the page
   ground: an H2 in the heading colour, a Body lg intro on 900, then the
   section's own layout. Sections are 80 apart (64 on a tablet, 48 on a phone),
   the token --dea-ftp-gap. The ten stops themselves come from the Fossil
   Trail module (fossil-trail.css), drawn here as a grid. */

.dea-ftp { background: var(--dea-bg-page); padding: 0 var(--dea-gutter); }
.dea-ftp__inner { max-width: var(--dea-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* Rhythm: each section owns the gap above it; the first sits one page gap
   under the header pill, and the footer closes with the page gap. */
.dea-trail-page .dea-ftp, .dea-trail-page .dea-ft { padding-top: var(--dea-ftp-gap); }
.dea-trail-page .dea-ftp--intro { padding-top: var(--dea-page-gap); }

.dea-ftp__h2, .dea-mod .dea-ftp__h2 { margin: 0; font: var(--dea-type-h2); letter-spacing: var(--dea-track-head); color: var(--dea-text-heading); }
.dea-ftp__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dea-ftp__intro { margin: 0; max-width: 900px; font: var(--dea-type-body-lg); color: var(--dea-text-body); }
.dea-ftp__note { margin: 0; font: var(--dea-type-body-sm); color: var(--dea-text-muted); max-width: 70ch; }
@media (max-width: 767px) {
  .dea-ftp__h2, .dea-mod .dea-ftp__h2 { font: var(--dea-type-h3); }
  .dea-ftp__intro { font: var(--dea-type-body-md); }
}

/* ---------------- introduction ---------------- */
/* The banner, then the copy: the lede in Body lg and the paragraphs in Body md,
   on the full column as the design draws them. */
.dea-ftp--intro .dea-ftp__inner { gap: var(--dea-ftp-gap); }
.dea-ftp__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dea-ftp__lede { margin: 0; font: var(--dea-type-body-lg); color: var(--dea-text-body); }
.dea-ftp__body { font: var(--dea-type-body-md); color: var(--dea-text-body); }
.dea-ftp__body p { margin: 0 0 20px; }
.dea-ftp__body p:last-child { margin-bottom: 0; }

/* ---------------- stories ---------------- */
/* Each story is its own section: the heading, the copy in two columns on
   desktop, and a byline under a rule. */
.dea-ftp--stories .dea-ftp__inner { gap: var(--dea-ftp-gap); }
.dea-ftp__story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.dea-ftp__storycols { font: var(--dea-type-body-md); color: var(--dea-text-body); }
@media (min-width: 1024px) { .dea-ftp__storycols { columns: 2; column-gap: 48px; } }
.dea-ftp__storycols p { margin: 0 0 20px; break-inside: avoid; }
.dea-ftp__storycols p:last-child { margin-bottom: 0; }
.dea-ftp__byline { margin: 0; padding-top: 20px; border-top: 1px solid var(--dea-border-default); display: grid; gap: 2px; }
.dea-ftp__bylinename { font: var(--dea-type-title-sm); letter-spacing: var(--dea-track-title); color: var(--dea-text-strong); }
.dea-ftp__bylinerole { font: var(--dea-type-body-sm); color: var(--dea-text-muted); }
.dea-ftp__storyfig { margin: 0; }
.dea-mod .dea-ftp__storyfig img { width: 100%; height: auto; border-radius: var(--dea-radius-lg); display: block; }
.dea-ftp__storyfig figcaption { margin-top: 12px; font: var(--dea-type-body-sm); color: var(--dea-text-muted); }

/* ---------------- the BIG 7 ----------------
   The rail card in a grid: the species as the eyebrow, the nickname as the
   title, the claim as the meta line, linking to the place that has it. */

/* ---------------- feature card grids: itineraries, other experiences ---------------- */
.dea-ftp__fcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dea-ftp__fcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dea-ftp__fcardswrap { position: relative; }
@media (max-width: 1023px) {
  .dea-ftp__fcards, .dea-ftp__fcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Other experiences stack; the itineraries become a rail off the page edge. */
  .dea-ftp__fcards--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dea-ftp__fcardswrap--rail { margin-right: calc(var(--dea-gutter) * -1); }
  .dea-ftp__fcards--rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 280px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: -16px 0 -24px -16px;
    padding: 16px 0 24px 16px;
    scroll-padding-inline: 16px var(--dea-gutter);
  }
  .dea-ftp__fcards--rail::after { content: ""; width: max(0px, calc(var(--dea-gutter) - 16px)); }
  .dea-ftp__fcards--rail::-webkit-scrollbar { display: none; }
  .dea-ftp__fcards--rail > li { scroll-snap-align: start; }
}

/* ---------------- guided tours ---------------- */
.dea-ftp__tours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) { .dea-ftp__tours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 767px) { .dea-ftp__tours { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.dea-ftp__tourgroup { display: grid; gap: 24px; align-content: start; padding-top: 16px; border-top: 1px solid var(--dea-border-default); }
.dea-ftp__tourop, .dea-mod .dea-ftp__tourop { margin: 0; font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: var(--dea-text-eyebrow); }
.dea-ftp__tourop a { color: inherit; text-decoration: none; }
.dea-ftp__tourop a:hover, .dea-ftp__tourop a:focus { color: var(--dea-text-link); }
.dea-ftp__tourlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.dea-ftp__tourlist li { display: grid; gap: 6px; }
.dea-ftp__tourname { font: var(--dea-type-title-sm); letter-spacing: var(--dea-track-title); color: var(--dea-action-secondary); }
.dea-ftp__tourtext { font: var(--dea-type-body-sm); color: var(--dea-text-body); }

/* ---------------- before you go ---------------- */
.dea-ftp--know .dea-ftp__inner { padding: 40px; border-radius: var(--dea-radius-xl); background: var(--dea-bg-tint); }
.dea-ftp__know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 1023px) { .dea-ftp__know { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } }
@media (max-width: 767px) {
  .dea-ftp--know .dea-ftp__inner { padding: 24px; }
  .dea-ftp__know { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.dea-ftp__knowgroup { display: grid; gap: 12px; align-content: start; }
.dea-ftp__knowname, .dea-mod .dea-ftp__knowname { margin: 0; font: var(--dea-type-h5); letter-spacing: var(--dea-track-head); color: var(--dea-action-secondary); }
.dea-ftp__knowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: var(--dea-type-body-sm); color: var(--dea-text-body); }
.dea-ftp__knowlist li { position: relative; padding-left: 14px; }
.dea-ftp__knowlist li::before { content: "\2022"; position: absolute; left: 0; }

/* ---------------- pocket guide ---------------- */
.dea-ftp--guide .dea-ftp__inner {
  padding: 48px;
  border-radius: var(--dea-radius-xl);
  background: var(--dea-bg-feature);
  color: var(--dea-text-inverse);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.dea-ftp__guidetext { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dea-ftp--guide .dea-ftp__h2, .dea-ftp--guide .dea-mod .dea-ftp__h2, .dea-mod .dea-ftp--guide .dea-ftp__h2 { color: inherit; }
.dea-ftp__guidebody { margin: 0; font: var(--dea-type-body-md); color: inherit; }
.dea-ftp__guidecta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; }
.dea-ftp__guidesize { margin: 0; font: var(--dea-type-body-sm); color: inherit; }
@media (max-width: 1023px) {
  .dea-ftp--guide .dea-ftp__inner { grid-template-columns: minmax(0, 1fr); padding: 40px; gap: 24px; }
  .dea-ftp__guidecta { justify-items: start; }
}
@media (max-width: 767px) {
  .dea-ftp--guide .dea-ftp__inner { padding: 24px; }
  .dea-ftp__guidecta { justify-items: stretch; }
  .dea-ftp__guidesize { text-align: center; }
}