/* =====================================================================
   PACKAGE DEALS ROW
   A place name with "View All" over a rail of package cards, built to the
   reference's proportions: a near-square photograph with a saving flag and
   photo dots, then duration and rating, the title, the stops it visits, the
   offer flag, was/now pricing and the call + callback buttons.

   Three cards to a row on a desktop, two on a tablet, one on a phone; the
   rest are a scroll (or an arrow-press) away.
   ===================================================================== */
.kdeals {
  --kdeal-line: rgba(46, 71, 85, .14);
  --kdeal-soft: rgba(46, 71, 85, .06);

  /* The card palette is the site's own three colours: mustard for anything to
     act on, navy for a saving or a score, a warm mustard tint for the stops
     strip and a navy flag for the offer. Declared as tokens on the section so
     a future change lands in one place. */
  --kd-accent:      #BD830D;
  --kd-ink:         #2e4755;
  --kd-accent-soft: rgba(189, 131, 13, .16);
  --kd-muted:       rgba(46, 71, 85, .55);
  --kd-flag-a:      #2e4755;
  --kd-flag-b:      #365467;
  --kd-flag-c:      #3f6178;
  --kd-flag-ring-a: #BD830D;
  --kd-flag-ring-b: #D69C1E;

  padding: clamp(36px, 4.4vw, 64px) 0 clamp(10px, 1.6vw, 22px);
}

.kdeals__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(16px, 1.8vw, 26px);
}
.kdeals__title {
  margin: 0;
  font-size: clamp(1.3rem, 1.85vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.kdeals__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: clamp(.92rem, 1vw, 1.02rem);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.kdeals__allic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  transition: transform .2s var(--ease);
}
.kdeals__allic svg { width: 15px; height: 15px; }
.kdeals__all:hover .kdeals__allic { transform: translateX(2px); }

/* ------------------------------- type tabs ------------------------------- */
/* Travel / Skiing / Hotels / Rentals, drawn like the Featured Packages tabs
   further down the page so the two rails read as one family. */
.kdeals__tabs {
  display: flex;
  gap: clamp(14px, 2vw, 34px);
  margin-bottom: clamp(16px, 1.9vw, 26px);
  border-bottom: 1px solid var(--kdeal-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.kdeals__tabs::-webkit-scrollbar { display: none; }
.kdeals__tab {
  flex: none;
  padding: 0 2px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--text-2);
  font-size: clamp(.86rem, .98vw, 1rem);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.kdeals__tab:hover { color: var(--gold); }
.kdeals__tab.is-active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

/* A card outside the active tab. Stated explicitly because .kdeal sets its own
   display, which would otherwise win over the browser's [hidden]. */
.kdeal[hidden] { display: none; }

/* ------------------------------- the rail ------------------------------- */
.kdeals__rail { position: relative; }
.kdeals__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(16px, 1.7vw, 30px)) / 3);
  gap: clamp(16px, 1.7vw, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the card shadow, which a clipped scroller would cut off. The
     scroll-padding matches it, or snapping would rest the first card at
     scrollLeft 4 and the rail would look scrolled from the start. */
  padding: 6px 4px 14px;
  margin: -6px -4px -14px;
  scroll-padding-inline: 4px;
}
.kdeals__track::-webkit-scrollbar { display: none; }

.kdeals__step {
  position: absolute;
  top: 32%;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--kdeal-line);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(46, 71, 85, .16);
  cursor: pointer;
  transition: opacity .25s ease, background-color .2s ease, transform .2s ease;
}
.kdeals__step:hover { transform: translateY(-50%) scale(1.06); }
.kdeals__step svg { width: 20px; height: 20px; }
.kdeals__step--prev { left: 0; transform: translate(-50%, -50%); }
.kdeals__step--next { right: 0; transform: translate(50%, -50%); }
.kdeals__step--prev:hover { transform: translate(-50%, -50%) scale(1.06); }
.kdeals__step--next:hover { transform: translate(50%, -50%) scale(1.06); }
/* Both arrows start hidden; the script shows one only while there is more to
   scroll to on that side. Stated this way round, nothing dangles at either
   end — including on a page where the script never ran. */
.kdeals__step { opacity: 0; visibility: hidden; pointer-events: none; }
.kdeals__rail.can-prev .kdeals__step--prev,
.kdeals__rail.can-next .kdeals__step--next { opacity: 1; visibility: visible; pointer-events: auto; }

/* -------------------------------- a card -------------------------------- */
.kdeal {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kdeal__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--kdeal-soft);
}
.kdeal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.kdeal:hover .kdeal__media img { transform: scale(1.04); }

/* The saving flag, notched into the photograph's top-left corner. */
.kdeal__save {
  position: absolute;
  top: 14px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 11px;
  border-radius: 0 6px 6px 0;
  background: var(--kd-ink);
  color: #FAF8F3;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.kdeal__save svg { width: 14px; height: 14px; flex: none; }

.kdeal__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.kdeal__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 243, .55);
  cursor: pointer;
  transition: width .25s var(--ease), background-color .25s ease;
}
.kdeal__dot.is-on { width: 16px; border-radius: 999px; background: #FAF8F3; }

/* --------------------------------- body --------------------------------- */
/* Stretches so the buttons of every card in the row sit on one line, however
   many lines the title above them runs to. */
.kdeal__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
}
.kdeal__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: .92rem;
}
.kdeal__dur { color: var(--text-2); }
.kdeal__rate { display: inline-flex; align-items: center; gap: 6px; color: var(--kd-ink); }
.kdeal__rate svg { width: 17px; height: 17px; }
.kdeal__rate b { color: var(--kd-ink); font-weight: 700; }
/* The review count, greyed beside the score: "4.6 (9)". */
.kdeal__rev { color: var(--kd-muted); font-style: normal; font-size: .88rem; }

.kdeal__title {
  margin: 10px 0 0;
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
}
.kdeal__title a {
  color: var(--ink);
  text-decoration: none;
  /* Two lines, so every card in the row keeps its rhythm.
     The clamp caps a long title at two lines; the min-height RESERVES both for
     a short one. Without it a one-line title pulled the stops, the price and
     everything under it up, and the card sat out of step with its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.kdeal__title a:hover { color: var(--kd-accent); }

/* The stops, on their own cream strip as in the reference. */
.kdeal__stops {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  /* The vertical padding stays though the strip's ground has gone: it is what
     holds this row's height, and every card's price and buttons line up
     against it. The side padding goes, or the places would sit indented from
     the title now that there is no strip to sit them on. */
  padding: 9px 0;
  background: transparent;
  color: var(--ink);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
}
/* .is-empty holds its height with nothing in it, so the rows under it stay in
   line. It needs no rule of its own now the strip has no ground to hide. */
.kdeal__stops span { overflow: hidden; text-overflow: ellipsis; }
.kdeal__stops i { flex: none; font-style: normal; opacity: .5; }
.kdeal__extra { flex: none; color: var(--kd-accent); font-weight: 700; }

/* The offer flag, built to the reference: a ringed circular megaphone mark
   overlapping the left end of a rounded blue bar. The circle stands taller
   than the bar and hangs off its left edge, so the flag carries a matching
   left margin and the overhang never collides with the card edge. */
.kdeal__offer {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 14px 0 0 15px;
  padding: 8px 18px 8px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kd-flag-a) 0%, var(--kd-flag-b) 55%, var(--kd-flag-c) 100%);
  color: #FAF8F3;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kdeal__offer-ic {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kd-flag-ring-a), var(--kd-flag-ring-b));
  color: #2e4755;
  /* The reference's white collar, drawn as a ring in the card's own ground so
     it reads as a gap between the circle and the bar. */
  box-shadow: 0 0 0 3px var(--surface, #fff);
}
.kdeal__offer-ic svg { width: 19px; height: 19px; }

.kdeal__was {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: .92rem;
}
.kdeal__was s { color: var(--kd-muted); }
.kdeal__chip {
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--kd-accent-soft);
  color: var(--kd-ink);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.kdeal__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 0;
}
.kdeal__price b { font-size: clamp(1.12rem, 1.3vw, 1.32rem); font-weight: 800; color: var(--ink); }
.kdeal__price span { color: var(--text-2); font-size: .9rem; }

/* --------------------------------- buttons -------------------------------- */
.kdeal__cta {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.kdeal__call {
  flex: none;
  width: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kd-accent);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--kd-accent);
  transition: border-color .2s ease, background-color .2s ease;
}
.kdeal__call:hover { border-color: var(--kd-accent); background: rgba(189, 131, 13, .12); }
.kdeal__call svg { width: 21px; height: 21px; }
.kdeal__btn {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 15px 18px;
  border-radius: 10px;
  background: var(--kd-accent);
  /* White, not the navy this used to carry: navy on mustard is a shade over
     3:1, which is under the 4.5:1 that body-sized text needs. White clears it
     comfortably and reads from further off. */
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.kdeal__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ------------------------------- responsive ------------------------------- */
@media (max-width: 1000px) {
  .kdeals__track { grid-auto-columns: calc((100% - clamp(16px, 1.7vw, 30px)) / 2); }
  .kdeals__step { display: none; }
}
@media (max-width: 640px) {
  .kdeals__track { grid-auto-columns: 82%; }
  .kdeal__btn { font-size: .94rem; padding: 13px 14px; }
  .kdeal__call { width: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .kdeals__track { scroll-behavior: auto; }
  .kdeal__media img, .kdeal__btn, .kdeals__step { transition: none; }
}

/* ------------------------- seasonal packages row ------------------------- */
/* Same cards as the deals row; the heading carries the season's tagline. */
.kseason__tag {
  margin: 4px 0 0;
  color: var(--kd-muted);
  font-size: clamp(.86rem, .95vw, .98rem);
}