/* ════════════════════════════════════════════════════════════════════════
   /tourtype/[slug] — design: "Day Tours" 1a, the ranked grid.

   A four-up grid under a sticky filter rail. Photography leads and each card
   carries only what a decision needs: name, length, price. The comp offered
   three layouts and this is the one chosen.

   Prefixed tt2- so it can sit beside the old .tt-/.hsj-grid rules during the
   change rather than fighting them mid-deploy.
   ════════════════════════════════════════════════════════════════════════ */

.tt2 {
  --tt2-ink: #1A2332;
  --tt2-body: #16181C;
  --tt2-muted: #5B6072;
  --tt2-subtle: #67788A;
  --tt2-line: #E7E9EE;
  --tt2-hair: #EEF1F5;
  --tt2-card: #E3E7ED;
  --tt2-navy: #1A4B89;
  --tt2-navy-deep: #16314F;
  --tt2-action: #1B75E8;
  --tt2-amber: #FBA504;
  --tt2-slate: #334155;

  background: #fff;
}
.tt2 *, .tt2 *::before, .tt2 *::after { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────────────────────── */
.tt2-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--tt2-hair);
}
.tt2-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tt2-subtle);
}
.tt2-crumb a { color: var(--tt2-subtle); }
.tt2-crumb a:hover { color: var(--tt2-action); }
.tt2-crumb span:last-child { color: var(--tt2-slate); }
.tt2-h1 {
  margin: 9px 0 0;
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tt2-ink);
}
.tt2-rule { width: 64px; height: 3px; margin: 12px 0 0; background: var(--tt2-amber); }
.tt2-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--tt2-slate);
}
.tt2-facts i { font-style: normal; color: #C6CDD8; }
.tt2-intro {
  max-width: 860px;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tt2-body);
  text-wrap: pretty;
}

/* ── Card grid ──────────────────────────────────────────────────────────
   Layout only. The cards themselves are TourCardCarousel — the same component
   the homepage rows use — so their photography, price treatment, review stars
   and gallery come with them and cannot drift from the homepage's. This file
   supplies the four-up grid and nothing else; the bespoke .tt2-card rules that
   were here for 1b are gone with it. ── */
.tt2-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 28px 40px;
}
.tt2-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px; }
.tt2-empty { margin: 28px 0 0; font-size: 14px; color: var(--tt2-slate); }
.tt2-empty a { font-weight: 600; }

/* ── Sticky filter rail ──────────────────────────────────────────────── */
/* top: 58px, not 0. .hsj-nav is `position: sticky; top: 0; z-index: 900` and
   collapses to 58px once scrolled, so a rail pinned at 0 with z-index 20 parked
   *behind* the header and vanished the moment it became sticky. 58px is the
   same figure .hsj-mega-wrap offsets by, for the same reason. */
.tt2-rail-wrap {
  position: sticky;
  top: 58px;
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tt2-line);
}
.tt2-rail-in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
}
.tt2-rail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tt2-rail::-webkit-scrollbar { height: 6px; }
.tt2-rail::-webkit-scrollbar-thumb { background: #D7DCE5; border-radius: 999px; }
.tt2-rail::-webkit-scrollbar-track { background: transparent; }
.tt2-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt2-slate);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background .18s cubic-bezier(.22, 1, .36, 1),
    border-color .18s cubic-bezier(.22, 1, .36, 1),
    color .18s cubic-bezier(.22, 1, .36, 1),
    transform .18s cubic-bezier(.22, 1, .36, 1);
  /* Entry: transform + opacity only, so it stays on the compositor. */
  animation: tt2-chip-in .38s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tt2-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Staggered rather than all at once — the rail reads left-to-right as it
   settles, which is also the order you scan it in. */
.tt2-chip:nth-child(1) { animation-delay: 0ms; }
.tt2-chip:nth-child(2) { animation-delay: 45ms; }
.tt2-chip:nth-child(3) { animation-delay: 90ms; }
.tt2-chip:nth-child(4) { animation-delay: 135ms; }
.tt2-chip:nth-child(5) { animation-delay: 180ms; }
.tt2-chip:nth-child(n + 6) { animation-delay: 225ms; }
.tt2-chip:hover { border-color: #B9C4D2; color: var(--tt2-slate); }
/* A pill that does not move under the thumb feels dead on a touch screen. */
.tt2-chip:active { transform: scale(.97); }
.tt2-chip:focus-visible {
  outline: 2px solid var(--tt2-action);
  outline-offset: 2px;
  border-color: var(--tt2-action);
}
.tt2-chip[aria-current="true"] {
  background: var(--tt2-navy);
  border-color: var(--tt2-navy);
  color: #fff;
}
.tt2-chip[aria-current="true"]:hover { background: var(--tt2-navy-deep); border-color: var(--tt2-navy-deep); color: #fff; }
.tt2-rail-end { flex: none; display: flex; align-items: center; gap: 9px; }
.tt2-count { font-size: 12.5px; color: var(--tt2-subtle); white-space: nowrap; }
.tt2-sep { width: 1px; height: 18px; background: var(--tt2-line); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tt2-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .tt2-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .tt2-head, .tt2-grid { padding-left: 16px; padding-right: 16px; }
  .tt2-h1 { font-size: 27px; }

  /* The collision this fixes: one flex row put a ~160px sort control beside a
     scrolling chip rail, so on a 390px screen the chips had ~200px and
     "Half day, 4 hrs or less" was cut mid-word behind the select. Two rows
     instead — chips get the full width, controls sit under them. */
  .tt2-rail-in {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0 11px;
  }

  /* Chips bleed to the screen edge so the next one peeks past the margin —
     that peek is the only affordance saying the rail scrolls, which is why
     there is no scrollbar and no arrows. */
  .tt2-rail {
    margin: 0;
    padding: 2px 16px 4px;
    scrollbar-width: none;
    /* Fades the trailing edge instead of cutting a chip dead, reinforcing that
       there is more to the right. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .tt2-rail::-webkit-scrollbar { display: none; }

  .tt2-rail-end {
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
  }
  /* Kept on phones, not hidden. The count is the feedback that a filter did
     something, so it matters most on the screen where the list is not all
     visible at once. */
  .tt2-count { display: block; }
  .tt2-sep { display: none; }
}
@media (max-width: 460px) {
  .tt2-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tt2-chip {
    animation: none;
    transition-duration: .01ms;
  }
  .tt2-chip:active { transform: none; }
  .tt2-rail { scroll-behavior: auto; }
}