/* Card rails: Dinosaur Attractions, Self Drive Itineraries and every other
   rail built with dea_card_rail(). From the design system's Card / Attraction:
   296 cards 32 apart on desktop (photo 296 x 272 with the lg radius, eyebrow,
   two-line title beside a 32 ink arrow, meta line), 256 cards on tablet and
   mobile. The controls sit in the section header; the rail starts on the
   content column and bleeds off the right edge of the page.

   The same card also sits in the card grids and card panels at the foot of
   this file: four across, two on a tablet, a rail on a phone. */
.dea-attr {
  --attr-card-w: 296px;
  --attr-gap: 32px;
  /* Page edge to the content column. The % form is for the section's own
     children (100% is the section); the vw form is for the rail's end spacer,
     whose 100% would be a card track. */
  --attr-edge: max(var(--dea-gutter), calc((100% - var(--dea-max)) / 2));
  --attr-edge-vw: max(var(--dea-gutter), calc((100vw - var(--dea-max)) / 2));
  background: var(--dea-bg-page);
  /* clip, not hidden: the bleed must not create a scroll container. */
  overflow-x: clip;
}

.dea-attr__head {
  padding-inline: var(--attr-edge);
  margin-bottom: 40px;
}
.dea-attr__title { margin: 0; font: var(--dea-type-section); letter-spacing: var(--dea-track-head); color: var(--dea-text-heading); }
.dea-attr__title--small { margin-bottom: 40px; }

/* The rail's left edge is the content column's. */
.dea-attr__inner { padding-left: var(--attr-edge); }

.dea-attr__railwrap { position: relative; }

/* Soft edge over the bleed zone, page colour to transparent, so the cut-off
   card reads as "more to come" rather than clipped. Fades out at the end of
   the rail (is-end is set on the section by dea-rail.js). */
.dea-attr__railwrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  width: 120px;
  background: linear-gradient(to right, rgba(249, 247, 242, 0) 0%, var(--dea-bg-page) 100%);
  pointer-events: none;
  transition: opacity .3s ease;
}
.dea-attr.is-end .dea-attr__railwrap::after { opacity: 0; }

/* The rail is a native scroll container. The padding is room for the card
   shadows, which a scrollport would otherwise clip; the negative margins give
   that room back to the layout so the rail sits where the design puts it. */
.dea-attr__rail {
  list-style: none;
  margin: -24px 0 -32px -24px;
  padding: 24px 0 32px 24px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--attr-card-w);
  gap: var(--attr-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-padding-inline: 24px var(--attr-edge-vw);
}
/* Room at the end so the last card can scroll fully onto the column. */
.dea-attr__rail::after { content: ""; width: max(0px, calc(var(--attr-edge-vw) - var(--attr-gap))); }
.dea-attr__rail::-webkit-scrollbar { display: none; }

.dea-attr__card { scroll-snap-align: start; }

.dea-attr__link { display: block; color: inherit; text-decoration: none; }
.dea-attr__link--static { cursor: default; }
.dea-attr__link:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 4px; border-radius: var(--dea-radius-lg); }

.dea-attr__media {
  display: block; position: relative;
  aspect-ratio: 296 / 272;
  border-radius: var(--dea-radius-lg); overflow: hidden;
  background: var(--dea-bg-sand);
  box-shadow: var(--dea-shadow-card);
}
.dea-mod .dea-attr__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--dea-ease);
}
.dea-attr__link:hover .dea-attr__media img { transform: scale(1.03); }

.dea-attr__eyebrow {
  display: block; margin: 16px 0 0;
  font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase;
  color: var(--dea-text-eyebrow);
}
/* Two lines of title minimum, so the arrows line up across the rail whatever
   the names do. Centred against that, the arrow stays put. */
.dea-attr__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; min-height: 60px; }
.dea-attr__name { font: var(--dea-type-title-lg); letter-spacing: var(--dea-track-title); color: var(--dea-text-body); }
.dea-attr__link:hover .dea-attr__go { background-color: var(--dea-action-primary); transform: translateX(4px); }
.dea-attr__meta { display: block; margin-top: 8px; font: var(--dea-type-body-sm); color: var(--dea-text-muted); }

/* The sm card, used below desktop and wherever a module asks for it. */
.dea-attr--sm .dea-attr__media { aspect-ratio: 256 / 232; }
.dea-attr--sm .dea-attr__row { min-height: 40px; }
.dea-attr--sm .dea-attr__name { font: var(--dea-type-title-sm); }

/* The arrows are styled by .dea-iconbtn; only the legacy placement is here,
   for a rail that still keeps its arrows inside the rail wrapper. */
.dea-attr__railwrap > .dea-attr__arrow { position: absolute; top: calc(var(--attr-card-w) * .46 - 24px); z-index: 2; }
.dea-attr__railwrap > .dea-attr__arrow--prev { left: 0; }
.dea-attr__railwrap > .dea-attr__arrow--next { right: var(--dea-gutter); }

.dea-attr--inpage { padding: 40px 0; }

/* Tablet and mobile: the sm card. */
@media (max-width: 1023px) {
  .dea-attr { --attr-card-w: 256px; --attr-gap: 24px; }
  .dea-attr__media { aspect-ratio: 256 / 232; }
  .dea-attr__row { min-height: 40px; }
  .dea-attr__name { font: var(--dea-type-title-sm); }
}
@media (max-width: 767px) {
  .dea-attr { --attr-gap: 16px; }
  .dea-attr__head { margin-bottom: 24px; }
  .dea-attr__title--small { margin-bottom: 24px; }
  .dea-attr__rail { margin: -16px 0 -24px -16px; padding: 16px 0 24px 16px; scroll-padding-inline: 16px var(--attr-edge-vw); }
}

/* ---------------- card grids and card panels ----------------
   Four cards across on desktop, two on a tablet, and on a phone a rail that
   bleeds off the right: past the page gutter for a grid on the page, past the
   panel's padding for a grid inside a card panel, where the edge shadow says
   there is more. The wrapper is a passive rail root, so dea-rail.js gives it
   the is-end class that fades the shadow at the last card. */
.dea-cardgrid-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.dea-cardgrid-wrap { --cardgrid-bleed: var(--dea-gutter); position: relative; }
.dea-cardgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dea-cardgrid .dea-attr__card { scroll-snap-align: none; }

.dea-attr-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  padding: var(--dea-panel-pad);
  border-radius: var(--dea-radius-xl);
  background: var(--dea-bg-tint);
  overflow: clip;
}
.dea-attr-panel__title, .dea-mod .dea-attr-panel__title { margin: 0; font: var(--dea-type-h4); letter-spacing: var(--dea-track-head); color: var(--dea-text-strong); }
.dea-attr-panel .dea-cardgrid-wrap { --cardgrid-bleed: var(--dea-panel-pad); }

@media (max-width: 1023px) {
  .dea-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dea-cardgrid-wrap { margin-right: calc(var(--cardgrid-bleed) * -1); }
  .dea-attr-panel .dea-cardgrid-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(35, 31, 32, 0), rgba(35, 31, 32, .072));
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .dea-attr-panel .dea-cardgrid-wrap.is-end::after { opacity: 0; }
  .dea-cardgrid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 256px;
    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(--cardgrid-bleed);
  }
  .dea-cardgrid::after { content: ""; width: max(0px, calc(var(--cardgrid-bleed) - 16px)); }
  .dea-cardgrid::-webkit-scrollbar { display: none; }
  .dea-cardgrid .dea-attr__card { scroll-snap-align: start; }
}