/* ===================================================================
   EXPERIENCES PAGE
   -------------------------------------------------------------------
   Everything here is prefixed .x… so it cannot collide with the home
   page (.chip, .hero, .dest…) or the Destinations page (.d…).

   The slide-over detail sheet is NOT defined here — it is shared from
   css/destinations.css, which experiences.html loads first.

   Every value comes from css/tokens.css.

   1. EDITORIAL HERO + TRUST STRIP
   2. FOUR PILLARS — bento grid
   3. SIX SIGNATURE EXPERIENCES — alternating story blocks
   4. THE CURATED COLLECTION — staggered lookbook
   5. TAILOR-MADE CTA
   6. RESPONSIVE
   =================================================================== */


/* ===================================================================
   1. COMPACT HERO + TRUST STRIP
   -------------------------------------------------------------------
   Two grid rows. The photograph and the headline share row 1 (one
   stacked on the other); the trust strip sits in row 2 and is pulled
   up with a negative margin so it bites into the bottom of the photo.

   The hero carries the title and nothing else, at the same height as
   the Destinations hero, so the two pages open the same way and the
   reader reaches the actual content in one short scroll. What used to
   sit here — a paragraph and two buttons — is said again further down
   the page, and the floating chat button is on screen throughout.
   =================================================================== */

.xhero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  background: var(--color-canvas);
}

.xhero__media {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  min-height: var(--hero-compact);
  background: var(--color-green-900);
}

/* Taken out of the flow on purpose. Left in it, "height: 100%" of a
   box with only a min-height resolves to auto and the photograph's own
   proportions decide how deep the hero is — which is how a 420px band
   turned into 590px on a tablet. Absolute, it fills whatever the band
   is and never sets it. */
.xhero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}

/* Vertical scrim, heavier at the foot so the headline always holds. */
.xhero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero-vertical-strong);
}

.xhero__inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: var(--z-raised);
  align-self: end;
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  /* The foot clears the trust strip, which bites --space-4xl upwards. */
  padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: calc(var(--space-2xl) + var(--space-4xl));
}

.xhero__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  text-wrap: balance;
}

.xhero__title-em {
  display: block;
  color: var(--color-accent);
}

/* --- trust strip ------------------------------------------------- */

.xtrust {
  grid-area: 2 / 1;
  position: relative;
  z-index: var(--z-sticky);
  margin-top: calc(var(--space-4xl) * -1);
}

.xtrust__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.xtrust__item {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  border-left: 1px solid var(--color-border);
}

.xtrust__item:first-child { border-left: 0; }

.xtrust__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--space-2xs);
  fill: var(--color-primary);
}

.xtrust__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.xtrust__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}


/* ===================================================================
   2. FOUR PILLARS — bento grid
   -------------------------------------------------------------------
   Deliberately uneven: one tall tile, two stacked beside it, one wide
   tile underneath. Copy sits on the photograph behind a scrim rather
   than in a caption, so the section reads as four posters.
   =================================================================== */

.xpillars {
  padding-top: calc(var(--section-y) + var(--space-xl));
  background: var(--color-canvas);
}

.xpillars__head {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.xpillars__title {
  margin: 0;
  max-width: 28ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.xbento {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-areas:
    "a b"
    "a c"
    "d d";
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.xbento__cell--a { grid-area: a; }
.xbento__cell--b { grid-area: b; }
.xbento__cell--c { grid-area: c; }
.xbento__cell--d { grid-area: d; }

.xtile {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 19rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.xbento__cell--a .xtile { min-height: 34rem; }
.xbento__cell--d .xtile { min-height: 24rem; }

.xtile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.xtile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-card);
}

.xtile:hover .xtile__img { transform: scale(1.04); }

.xtile__body {
  align-self: end;
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-xl);
  color: var(--color-text-on-dark);
}

.xtile--compact .xtile__body { padding: var(--space-lg); }

.xtile__index {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
}

.xtile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
  text-wrap: balance;
}

.xbento__cell--a .xtile__title,
.xbento__cell--d .xtile__title { font-size: var(--text-2xl); }

.xtile__text {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
}

.xtile--compact .xtile__text { font-size: var(--text-sm); }

.xtile__where {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.xtile__where .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}


/* ===================================================================
   3. SIX SIGNATURE EXPERIENCES — alternating story blocks
   -------------------------------------------------------------------
   One experience per full-width band, photograph and copy swapping
   sides. The flipped bands also take the sunken canvas, so the page
   stripes as you scroll.
   =================================================================== */

.xstories { background: var(--color-canvas); }

.xstories__head {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--section-y);
  padding-bottom: var(--space-xl);
}

.xstories__title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.xstory {
  padding-block: var(--section-y-tight);
}

.xstory--flip { background: var(--color-canvas-sunk); }

.xstory__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

.xstory--flip .xstory__media { order: 2; }

/* --- the two-photograph stack ------------------------------------ */

.xstory__media {
  position: relative;
  padding-bottom: var(--space-2xl);
  padding-right: var(--space-2xl);
}

.xstory--flip .xstory__media {
  padding-right: 0;
  padding-left: var(--space-2xl);
}

.xstory__shot {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-muted);
}

.xstory__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xstory__shot--main {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.xstory__shot--inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  border: 6px solid var(--color-canvas);
  box-shadow: var(--shadow-xl);
}

.xstory--flip .xstory__shot--inset {
  right: auto;
  left: 0;
  border-color: var(--color-canvas-sunk);
}

/* --- the copy ---------------------------------------------------- */

.xstory__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
}

.xstory__index {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: transparent;
  -webkit-text-stroke: 2px var(--color-green-200);
}

.xstory__kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.xstory__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text);
  text-wrap: balance;
}

.xstory__text {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.xstory__points {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.xstory__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-xs);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.xstory__points .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  fill: var(--color-primary);
}

.xstory__where {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-800);
}

.xstory__where .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.xstory__more { margin-top: var(--space-xs); }


/* ===================================================================
   4. THE CURATED COLLECTION — staggered lookbook
   -------------------------------------------------------------------
   Nine tall cards, copy over the photograph, alternate columns
   dropped down the page so the grid reads as a rail rather than a
   table. No filter bar here on purpose — Destinations owns that
   pattern, and nine items do not need filtering.
   =================================================================== */

.xcollection { background: var(--color-surface-dark); }

.xcollection__head {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.xcollection__head .eyebrow {
  color: var(--color-accent);
}

.xcollection__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
  text-wrap: balance;
}

.xcollection__lede {
  margin: 0;
  color: var(--color-text-on-dark-muted);
}

.xlook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-xl) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The stagger. Column 2 drops furthest, column 3 a little. */
.xlook__item:nth-child(3n + 2) { margin-top: var(--space-4xl); }
.xlook__item:nth-child(3n)     { margin-top: var(--space-xl); }

.xcard {
  position: relative;
  display: flex;
  aspect-ratio: 3 / 4.15;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.xcard__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.xcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-full);
}

.xcard:hover .xcard__img,
.xcard:focus-within .xcard__img { transform: scale(1.05); }

.xcard__body {
  align-self: end;
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

.xcard__tag {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.xcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
  text-wrap: balance;
}

.xcard__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.xcard__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
  padding: 0.55rem var(--space-md);
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.xcard__more svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.xcard__more:hover,
.xcard__more:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-green-900);
}

.xcard__more:hover svg { transform: translateX(3px); }


/* ===================================================================
   5. TAILOR-MADE CTA
   =================================================================== */

.xcta {
  position: relative;
  display: grid;
  isolation: isolate;
  background: var(--color-green-900);
}

.xcta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.xcta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.xcta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-full);
}

.xcta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  padding-block: calc(var(--section-y) + var(--space-md));
  text-align: center;
}

.xcta__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  text-wrap: balance;
}

.xcta__text {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
}

.xcta__free {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-green-900);
}

.xcta__free .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-green-700);
}

.xcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}


/* ===================================================================
   6. RESPONSIVE
   =================================================================== */

/* --- wide desktop ------------------------------------------------ */
@media (min-width: 1100px) {
  .xhero__media { min-height: var(--hero-compact-desktop); }
}

/* --- tablet ( <= 1023px ) ---------------------------------------- */
@media (max-width: 1023px) {

  /* Trust strip: five across is too tight, so go two-up and let the
     last item run the full width. */
  .xtrust { margin-top: calc(var(--space-3xl) * -1); }

  .xtrust__list { grid-template-columns: repeat(2, 1fr); }

  .xtrust__item {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .xtrust__item:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .xtrust__item:nth-child(1),
  .xtrust__item:nth-child(2) { border-top: 0; }
  .xtrust__item:last-child { grid-column: 1 / -1; }

  /* Bento: two equal columns, the tall and wide tiles spanning. */
  .xbento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d d";
  }

  .xbento__cell--a .xtile { min-height: 26rem; }
  .xbento__cell--d .xtile { min-height: 20rem; }
  .xtile { min-height: 17rem; }

  /* Lookbook: two columns, stagger on the second only. */
  .xlook { grid-template-columns: repeat(2, 1fr); }
  .xlook__item:nth-child(3n + 2),
  .xlook__item:nth-child(3n) { margin-top: 0; }
  .xlook__item:nth-child(even) { margin-top: var(--space-3xl); }
}

/* --- stacked ( <= 859px ) ---------------------------------------- */
@media (max-width: 859px) {

  /* Story blocks go single column, photo first. The inset photo stops
     overlapping and becomes the second half of a two-up strip. */
  .xstory__inner,
  .xstory--flip .xstory__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .xstory--flip .xstory__media { order: 0; }

  .xstory__media,
  .xstory--flip .xstory__media {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: var(--space-sm);
    padding: 0;
  }

  .xstory__shot--main { aspect-ratio: 4 / 3; }

  .xstory__shot--inset {
    position: static;
    width: auto;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .xstory__index { font-size: var(--text-3xl); }
}

/* --- mobile ( <= 639px ) ----------------------------------------- */
@media (max-width: 639px) {

  .xhero__media { object-position: 50% 60%; }

  .xhero__inner {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: calc(var(--space-xl) + var(--space-2xl));
  }

  /* Trust strip: one promise per row. */
  .xtrust { margin-top: calc(var(--space-2xl) * -1); }

  .xtrust__list { grid-template-columns: 1fr; }

  .xtrust__item {
    border-right: 0 !important;
    padding: var(--space-md) var(--space-lg);
  }

  .xtrust__item:nth-child(2) { border-top: 1px solid var(--color-border); }

  .xtrust__icon { margin-bottom: 0; }

  /* -----------------------------------------------------------------
     THE COPY COMES OFF THE PHOTOGRAPH

     The poster treatment — a paragraph laid over the picture behind a
     scrim — works at tile sizes where there is room for the text to
     sit in dead space at the foot of the frame. On a phone there is
     no dead space: the column is 350px wide, the paragraph wraps to
     five or six lines and lands on whatever happens to be in the
     lower half of the photograph. Darkening the scrim until the text
     always holds would bury the photograph instead.

     So below 640px every overlay card unstacks. The photograph keeps
     a fixed 4:3 frame of its own at the top, the copy moves
     underneath onto a solid surface, and nothing on the page has to
     be read through an image. Tablet and desktop keep the posters.
     ----------------------------------------------------------------- */

  /* Bento: one card per row, photo over copy. */
  .xbento {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
    gap: var(--space-lg);
  }

  .xtile,
  .xbento__cell--a .xtile,
  .xbento__cell--d .xtile {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .xtile__img {
    position: static;
    z-index: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* No scrim where there is nothing over the picture. */
  .xtile::after { content: none; }

  .xtile__body,
  .xtile--compact .xtile__body {
    align-self: stretch;
    gap: var(--space-2xs);
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    color: var(--color-text);
  }

  /* Ink on a light surface now, not white on a scrim. */
  .xtile__index { color: var(--color-accent-text); }

  .xtile__title,
  .xbento__cell--a .xtile__title,
  .xbento__cell--d .xtile__title {
    font-size: var(--text-xl);
    color: var(--color-text);
  }

  .xtile__text,
  .xtile--compact .xtile__text {
    max-width: none;
    color: var(--color-text-muted);
  }

  .xtile__where {
    margin-top: var(--space-xs);
    color: var(--color-accent-text);
  }

  /* Stories: photographs stack too — a wide shot over a wide shot. */
  .xstory__media,
  .xstory--flip .xstory__media { grid-template-columns: 1fr; }

  .xstory__shot--inset { aspect-ratio: 16 / 9; }

  .xstory__more { width: 100%; justify-content: center; }

  /* Lookbook: single column, no stagger, and unstacked the same way.
     This section sits on the dark green, so the copy keeps its
     on-dark colours and moves onto a flat green panel rather than a
     white one — the band still reads as one dark stretch of page. */
  .xlook {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .xlook__item:nth-child(even) { margin-top: 0; }

  .xcard {
    display: grid;
    grid-template-rows: auto 1fr;
    aspect-ratio: auto;
    border: 1px solid var(--color-border-on-dark);
    background: var(--color-green-800);
  }

  .xcard__img {
    position: static;
    z-index: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .xcard::after { content: none; }

  .xcard__body {
    align-self: stretch;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  /* The summary no longer has to fit a fixed frame, so it is shown
     in full instead of being clamped mid-sentence. */
  .xcard__text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    line-clamp: none;
    color: var(--color-text-on-dark-muted);
  }

  .xcard__more {
    margin-top: var(--space-xs);
    width: 100%;
    justify-content: center;
  }

  /* The CTA band keeps its photograph behind the copy — it is one
     short block of centred text, not a paragraph in a card — so it
     takes the heavier scrim instead. */
  .xcta::after { background: var(--scrim-hero-vertical-strong); }

  .xcta__actions .btn { width: 100%; }
}

/* --- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .xtile__img,
  .xcard__img,
  .xcard__more svg { transition: none; }

  .xtile:hover .xtile__img,
  .xcard:hover .xcard__img,
  .xcard:focus-within .xcard__img { transform: none; }
}

/* =====================================================================
   SECTION HEADS, CENTRED ON A PHONE

   A one-column phone layout leaves an eyebrow, a heading and a lede
   sitting straight on the page background with nothing to line up
   against, so a left edge reads as a column that has drifted off to one
   side. Centring gives the stack its own axis -- the same treatment the
   region map intro already gets.

   Only copy out in the open is listed. Anything inside a card, a form,
   a panel or a quote rule keeps its left edge, because there the edge is
   what the text is aligned to.
   ===================================================================== */

@media (max-width: 767px) {
  .xpillars__head,
  .xstories__head,
  .xcollection__head,
  .xcta__inner {
    text-align: center;
    justify-items: center;
    justify-content: center;
  }

  /* The story blocks stack photo-over-copy down here, so the copy ends up
     out in the open on the page background like any other head. The number,
     kicker, title, body, place pill and button all take the same axis. */
  .xstory__copy {
    justify-items: center;
    text-align: center;
  }

  /* Except the ticked points: those are a list, and the ticks only line up
     into a column against a left edge. The block itself still centres. */
  .xstory__points {
    text-align: left;
  }
}