/* =====================================================================
   DEAL RAILS
   A heading and its line of explanation, a pair of arrows opposite, and a
   sideways row of portrait photo tiles under them.

   Laid out to the reference but with no white card: the row sits straight on
   the site's own page gradient, which keeps it in one piece with the sections
   above and below rather than floating on a slab.
   ===================================================================== */
.ktrail {
  --kr-ink: #213857;
  --kr-sub: rgba(33, 56, 87, .64);
  --kr-edge: rgba(33, 56, 87, .16);
  --kr-gap: clamp(10px, 1.1vw, 18px);
  --kr-ease: cubic-bezier(.22, .61, .36, 1);
  /* Its own block on the page, like every other section here.

     Deliberately plain: no position, no filter, nothing that would put this
     section on its own compositing layer. Tiles that animated a transform and
     a box-shadow on hover, over a smooth-scrolling track, promoted this whole
     band to a layer of its own — and Chrome rasterised the section ABOVE it
     softly as a result, which read on the page as a blurred strip across the
     bottom of the row before it. Keep this block cheap. */
  display: block;
  padding: clamp(30px, 3.4vw, 52px) 0;
  background: transparent;
  color: var(--kr-ink);
}

.ktrail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(13px, 1.5vw, 20px);
}
.ktrail__copy { min-width: 0; }

/* Sized to sit level with the headings of the sections either side. */
.ktrail__h2 {
  margin: 0 0 5px;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--kr-ink);
}
.ktrail__sub {
  margin: 0;
  font-size: clamp(.79rem, .92vw, .92rem);
  color: var(--kr-sub);
}

/* ------------------------------ the arrows ------------------------------
   One pill with a hairline down the middle, as the reference has it. */
.ktrail__nav {
  flex: none;
  display: flex;
  align-items: stretch;
  height: clamp(30px, 2.4vw, 36px);
  border: 1px solid var(--kr-edge);
  border-radius: 999px;
  overflow: hidden;
}
.ktrail__split { width: 1px; background: var(--kr-edge); }
.ktrail__arrow {
  display: grid;
  place-items: center;
  width: clamp(34px, 2.9vw, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kr-ink);
  cursor: pointer;
  transition: background-color .18s var(--kr-ease), opacity .18s var(--kr-ease);
}
.ktrail__arrow svg { width: 17px; height: 17px; }
.ktrail__arrow:hover { background: rgba(33, 56, 87, .07); }
.ktrail__arrow:focus-visible { outline: 2px solid #BD830D; outline-offset: -2px; }
/* An end with nothing more to show dims rather than disappearing, so the pill
   keeps its shape. */
.ktrail__arrow[disabled] { opacity: .3; cursor: default; }
.ktrail__arrow[disabled]:hover { background: none; }

/* ------------------------------- the track ------------------------------- */
.ktrail__track {
  display: flex;
  gap: var(--kr-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Smoothing is asked for per-scroll by the script instead, so the track is
     not a permanently smooth-scrolling — and therefore permanently
     composited — layer. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ktrail__track::-webkit-scrollbar { display: none; }

/* Seven across, not eight: the same row of width gives each card about a
   sixth more of it, which is enough for the photograph to read. */
.ktrail__card {
  position: relative;
  /* Five across, not seven: the same row of width split fewer ways, so each
     tile is about a third larger. The rail still holds every trip — the rest
     are a swipe or an arrow away. */
  flex: 0 0 clamp(160px, calc((100% - 4 * var(--kr-gap)) / 5), 300px);
  /* Squarer than it was: the reference's tile is about three quarters as wide
     as it is tall, where this used to be two thirds and read as a sliver. */
  aspect-ratio: 290 / 390;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  scroll-snap-align: start;
  text-decoration: none;
  background: rgba(33, 56, 87, .06);
}
.ktrail__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Much lighter than it was, and only across the foot. The reference barely
   darkens its photographs at all — the name carries a shadow of its own
   instead, which keeps it legible over a bright field without dimming the
   picture the way a heavy scrim does. */
.ktrail__card__veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .5) 0%,
    rgba(0, 0, 0, .18) 52%,
    rgba(0, 0, 0, 0) 100%);
}
.ktrail__card__name {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 12px;
  color: #FFFFFF;
  font-size: clamp(.8rem, .92vw, .95rem);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
/* The card stays still and unshadowed. Pointing at it underlines the name and
   nothing else — enough to show it is a link, and it costs no layer. */
.ktrail__card:hover .ktrail__card__name { text-decoration: underline; text-underline-offset: 2px; }
.ktrail__card:focus-visible { outline: 2px solid #BD830D; outline-offset: 3px; }

/* ------------------------------ dark theme ------------------------------ */
:root[data-theme="dark"] .ktrail {
  --kr-ink: #FAF8F3;
  --kr-sub: rgba(250, 248, 243, .66);
  --kr-edge: rgba(250, 248, 243, .2);
}
:root[data-theme="dark"] .ktrail__arrow:hover { background: rgba(250, 248, 243, .1); }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1100px) { .ktrail__card { flex-basis: clamp(160px, calc((100% - 3 * var(--kr-gap)) / 4), 260px); } }
@media (max-width: 820px)  { .ktrail__card { flex-basis: calc((100% - 2 * var(--kr-gap)) / 3); } }
@media (max-width: 560px) {
  .ktrail__card { flex-basis: calc((100% - var(--kr-gap)) / 2.2); }
  /* On a phone the row is swiped, so the arrows are dead weight. */
  .ktrail__nav { display: none; }
}