/* =====================================================================
   TOUR PACKAGES PAGE
   Everything here is prefixed `pk`, so nothing collides with the shared
   components or with the other pages' own sheets. The slide-over detail
   panel is built in this file rather than borrowed from destinations.css
   — it holds a day-by-day itinerary instead of a gallery and some prose,
   so it is a different panel wearing the same clothes.

   Loaded last on packages.html, after tokens / base / components /
   sections.
   ===================================================================== */


/* =====================================================================
   1. HERO — one photograph under a warm light wash

   The other heroes on this site darken their photograph and set white
   type on it. This one does the opposite: a warm canvas-toned scrim,
   green type, the page starting bright. A page of nine routes is a
   catalogue, and a catalogue should feel open rather than cinematic-dark.
   ===================================================================== */

.pkhero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
  overflow: hidden;
  background-color: var(--color-canvas);
}

.pkhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pkhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pulls the photograph back so it reads as a ground rather than a
     subject; the scrim above does the rest. */
  filter: saturate(0.92);
}

/* Two layers: a flat warm wash over the whole frame, and a stronger
   canvas gradient rising from the bottom so the text block always has
   something solid under it whatever the photograph is doing there. */
.pkhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to top,
      rgba(249, 251, 231, 0.97) 0%,
      rgba(249, 251, 231, 0.88) 34%,
      rgba(249, 251, 231, 0.52) 68%,
      rgba(249, 251, 231, 0.3) 100%
    ),
    linear-gradient(105deg, rgba(255, 193, 7, 0.14), rgba(27, 94, 32, 0.1));
}

.pkhero__inner {
  position: relative;
  z-index: var(--z-base);
  /* Centred at every width: the headline, the eyebrow above it and the
     pills below it all share one axis. */
  text-align: center;
}

.pkhero__title {
  max-width: 24ch;
  margin-block: var(--space-xs) 0;
  margin-inline: auto;
  font-size: clamp(2rem, 3.4vw + 1rem, 3.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-green-900);
}

.pkhero__title em {
  font-style: normal;
  /* Underlined rather than recoloured: accent yellow on a near-white
     wash fails contrast, and this keeps the emphasis without it. */
  box-shadow: inset 0 -0.34em 0 rgba(255, 193, 7, 0.55);
}

.pkhero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  margin-block: var(--space-md) 0;
  padding: 0;
  list-style: none;
}

.pkhero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-green-900);
}

.pkhero__meta .icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--color-green-700);
}


/* =====================================================================
   2. THE FILTER — one row of pills over the grid

   Duration is the only axis anybody filters a package list on, so there
   is one tier of pills and no dropdown fallback: five buttons fit on a
   phone in two lines, which two dependent selects never would.
   ===================================================================== */

.pkboard {
  padding-block: var(--space-3xl);
}

.pkfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: 0;
  list-style: none;
}

.pkchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 42px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-green-100);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-green-900);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.pkchip:hover {
  border-color: var(--color-green-500);
  transform: translateY(-1px);
}

.pkchip__n {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-green-50);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-green-700);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.pkchip.is-active {
  border-color: var(--color-green-900);
  background-color: var(--color-green-900);
  color: var(--color-white);
}

.pkchip.is-active .pkchip__n {
  background-color: var(--color-accent);
  color: var(--color-green-900);
}

.pkcount {
  margin-block: 0 var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-600);
}

.pkcount strong {
  font-family: var(--font-display);
  color: var(--color-green-900);
}


/* =====================================================================
   3. THE GRID
   ===================================================================== */

.pkgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
}

.pkgrid__item {
  /* The filter fades cards out before it hides them; the transition
     lives on the list item so the card's own hover lift is untouched. */
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.pkgrid__item.is-out {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}

.pkgrid__item[hidden] { display: none; }

.pkcard {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.pkcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pkcard__media {
  position: relative;
  overflow: hidden;
}

.pkcard__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.pkcard:hover .pkcard__media img { transform: scale(1.04); }

/* The duration badge. Accent yellow with dark green type: the one
   number people scan this grid for, so it gets the loudest colour on
   the page. */
.pkcard__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-900);
}

.pkcard__badge .icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.pkcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-lg);
}

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

.pkcard__where .icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.pkcard__title {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-900);
}

.pkcard__text {
  margin-block: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

.pkcard__points {
  margin-block: var(--space-md) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

.pkcard__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

.pkcard__points .icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  fill: var(--color-green-500);
}

/* margin-top:auto pins the button to the bottom of the card, so a row
   of cards with different amounts of text still lines its buttons up. */
.pkcard__more {
  margin-top: auto;
  padding-top: var(--space-lg);
}

.pkcard__more .btn { width: 100%; }

.pkempty {
  margin-top: var(--space-xl);
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--color-green-100);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  text-align: center;
}

.pkempty__title {
  margin: 0;
  font-size: var(--text-lg);
}

.pkempty p {
  margin-block: var(--space-xs) var(--space-md);
  color: var(--color-ink-600);
}

.pkempty[hidden] { display: none; }


/* =====================================================================
   4. THE ITINERARY PANEL — a slide-over, not a new page

   Same gesture as the Destinations and Experiences sheets so the site
   behaves consistently, but the body is a day-by-day timeline. Built
   at runtime from js/packages-data.js.
   ===================================================================== */

.pkdetail {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.pkdetail[hidden] { display: none; }

.pkdetail__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 51, 17, 0.52);
  opacity: 0;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  transition: opacity var(--duration-base) var(--ease-out);
  cursor: pointer;
}

.pkdetail.is-open .pkdetail__backdrop { opacity: 1; }

.pkdetail__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(660px, 100%);
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.pkdetail.is-open .pkdetail__sheet { transform: translateX(0); }

.pkdetail__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-green-900);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.pkdetail__close .icon { width: 20px; height: 20px; fill: currentColor; }

.pkdetail__close:hover {
  background-color: var(--color-accent);
  transform: rotate(90deg);
}

.pkdetail__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- the photographs at the top of the sheet ---------------------

   A scroll-snapping strip rather than a carousel with arrows and dots:
   three photographs do not need a widget, and a native scroller is
   reachable by touch, trackpad, keyboard and screen reader without a
   line of script. */

.pkshot {
  position: relative;
  background-color: var(--color-green-900);
}

.pkshot__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pkshot__track::-webkit-scrollbar { display: none; }

/* Not quite the full width: the sliver of the next photograph is what
   tells you the strip scrolls at all. */
.pkshot__slide {
  flex: 0 0 88%;
  margin: 0;
  scroll-snap-align: start;
}

.pkshot__slide:last-child { flex-basis: 100%; }

.pkshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pkshot__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: var(--space-lg) var(--space-md) var(--space-xs);
  background-image: linear-gradient(to top, rgba(13, 51, 17, 0.62), transparent);
  font-size: var(--text-xs);
  text-align: right;
  color: rgba(255, 255, 255, 0.86);
}

.pkshot__credit:empty { display: none; }

/* ---- the body ---------------------------------------------------- */

.pkdetail__body {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.pkdetail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
}

.pkdetail__badges span {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-green-50);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-700);
}

.pkdetail__badges span:first-child {
  background-color: var(--color-accent);
  color: var(--color-green-900);
}

.pkdetail__title {
  margin-block: var(--space-sm) 0;
  font-size: var(--text-3xl, var(--text-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-900);
}

.pkdetail__summary {
  margin-block: var(--space-sm) 0;
  color: var(--color-ink-700);
}

.pkdetail__sub {
  margin-block: var(--space-2xl) var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-green-100);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-700);
}

/* ---- the day-by-day timeline ------------------------------------- */

/* A single continuous rule down the left, drawn with a border on the
   list rather than per item, so the line never breaks between days. */
.pkdays {
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--color-green-100);
  list-style: none;
}

.pkday {
  position: relative;
  padding-bottom: var(--space-lg);
}

.pkday:last-child { padding-bottom: 0; }

/* The marker sits on the rule, which is 2px wide and
   calc(var(--space-lg) + 2px) to the left of the text edge. */
.pkday::before {
  content: '';
  position: absolute;
  top: 7px;
  left: calc(-1 * var(--space-lg) - 7px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-canvas);
  border-radius: 50%;
  background-color: var(--color-green-500);
}

.pkday__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-green-700);
}

.pkday__title {
  margin-block: var(--space-2xs) 0;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-900);
}

.pkday__text {
  margin-block: var(--space-2xs) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

/* ---- stops, highlights, and the two information blocks ----------- */

.pklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

.pklist li:first-child { margin-top: 0; }

.pklist .icon {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  fill: var(--color-green-500);
}

.pkpanel {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: var(--shadow-xs);
}

.pkpanel .icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--color-green-700);
}

.pkpanel__title {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-green-900);
}

.pkpanel__text {
  margin-block: var(--space-2xs) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

/* The honesty block about entrance fees and seasons: accent-edged, so
   it reads as a caution rather than as more marketing. */
.pkpanel--note {
  background-color: rgba(255, 193, 7, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.4);
}

.pkpanel--note .icon { fill: #8a6100; }

/* ---- the sheet's own call to action ------------------------------- */

.pkdetail__cta {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--color-green-900);
  color: var(--color-white);
}

.pkdetail__ctatitle {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-white);
}

.pkdetail__ctatext {
  margin-block: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.84);
}

.pkdetail__ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---- previous / next through the nine routes --------------------- */

.pkdetail__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-xl);
  background-color: var(--color-green-100);
}

.pknavbtn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  background-color: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.pknavbtn:hover:not(:disabled) { background-color: var(--color-green-50); }

.pknavbtn:disabled { opacity: 0.4; cursor: default; }

.pknavbtn--next {
  flex-direction: row-reverse;
  text-align: right;
}

.pknavbtn .icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--color-green-700);
}

.pknavbtn__text { min-width: 0; }

.pknavbtn__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.pknavbtn__name {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-green-900);
}

/* Page scroll is frozen while the sheet is open, matching the other
   two pages' panels. */
.has-pkdetail { overflow: hidden; }


/* =====================================================================
   5. THREE STEPS
   ===================================================================== */

.pksteps {
  padding-block: var(--space-3xl);
  background-color: var(--color-surface-muted);
}

.pksteps__head {
  max-width: var(--measure);
  margin-bottom: var(--space-2xl);
}

.pksteps__title {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-snug);
}

.pksteps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
  counter-reset: pkstep;
}

.pkstep {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* The number is generated, so the markup carries no decorative digits
   for a screen reader to read out as content. */
.pkstep::before {
  counter-increment: pkstep;
  content: counter(pkstep);
  position: absolute;
  top: calc(-1 * var(--space-md));
  left: var(--space-lg);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--color-green-900);
}

.pkstep__title {
  margin-block: var(--space-lg) 0;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-900);
}

.pkstep__text {
  margin-block: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

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

.pkstep__foot .icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}

.pksteps__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

.pksteps__after .icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--color-green-700);
}

.pksteps__after p {
  margin: 0;
  flex: 1 1 24ch;
}


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

.pkcta {
  position: relative;
  padding-block: var(--space-4xl);
  overflow: hidden;
  background-color: var(--color-green-900);
  color: var(--color-white);
}

.pkcta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pkcta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

.pkcta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Symmetric now that the copy is centred: denser at both edges, a
     little lighter behind the middle of the block. */
  background-image: linear-gradient(
    90deg,
    rgba(13, 51, 17, 0.86) 0%,
    rgba(13, 51, 17, 0.74) 50%,
    rgba(13, 51, 17, 0.86) 100%
  );
}

.pkcta__inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 62ch;
  /* One centre line at every width, matching the hero above the grid. */
  margin-inline: auto;
  text-align: center;
}

.pkcta__title {
  margin-block: var(--space-xs) 0;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.pkcta__text {
  margin-block: var(--space-md) 0;
  color: rgba(255, 255, 255, 0.86);
}

.pkcta__free {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.pkcta__free .icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

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


/* =====================================================================
   7. BREAKPOINTS
   ===================================================================== */

/* ---- tablet: two columns ----------------------------------------- */
@media (min-width: 640px) {
  .pkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pksteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pkdetail__body { padding: var(--space-2xl) var(--space-xl) var(--space-xl); }

  .pkshot__credit { padding-inline: var(--space-xl); }
}

/* ---- desktop: three columns -------------------------------------- */
@media (min-width: 1025px) {
  /* Nine routes divide into three even rows; the filter never leaves a
     row with a single orphan in it either. */
  .pkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- phones ------------------------------------------------------ */
@media (max-width: 639px) {
  .pkhero {
    padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  }

  .pkboard,
  .pksteps { padding-block: var(--space-2xl); }

  .pksteps__title,
  .pkcta__title { font-size: var(--text-xl); }

  /* The chips scroll on one line rather than stacking into five rows
     and pushing the first card off the screen. The gutter padding is
     cancelled and re-applied inside, so the rail runs edge to edge
     while the first chip still lines up with the heading above it. */
  .pkfilter {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--space-md));
    padding-inline: var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pkfilter::-webkit-scrollbar { display: none; }

  .pkchip { flex: none; }

  .pkdetail__sheet { width: 100%; }

  .pkdetail__body { padding: var(--space-xl) var(--space-md) var(--space-md); }

  .pkdetail__cta { padding: var(--space-md); }

  .pkdetail__ctarow .btn { width: 100%; }

  .pknavbtn { padding: var(--space-sm) var(--space-md); }

  .pkcta { padding-block: var(--space-3xl); }

  /* Side padding trimmed so "Plan it on WhatsApp" stays on one line next
     to its icon down to 320px, rather than wrapping and leaving the icon
     stranded at the left edge. */
  .pkcta__actions .btn {
    width: 100%;
    padding-inline: var(--space-md);
  }
}

/* The sheet slides in from the right; with motion turned down it simply
   appears, and the cards stop animating in and out of the grid. */
@media (prefers-reduced-motion: reduce) {
  .pkdetail__sheet { transition: none; }

  .pkcard:hover { transform: none; }

  .pkcard:hover .pkcard__media img { transform: none; }
}