@charset "UTF-8";
/* ===================================================================
   Single safari itinerary — ts-trip-*
   Loaded only on is_singular('safaris'), after ds.css.

   Everything here reads the theme's own tokens (--ac, --ink, --cream,
   --muted, --line, --sans, --serif). The reference design's orange is
   deliberately absent: the one accent on this page is the site emerald.

   Layout: a full-width headline + mosaic, a sticky section strip, then a
   two-column body (long column + floating card) that collapses to one
   column at 980px. Nothing is hidden by default, so the page is complete
   with scripting off.
   =================================================================== */

/* The fixed site header reserves --header-height (130px) but the bar you can
   actually see is 88px: the extra 42px is the space the logo tab used to drop
   into. Below 1180px style.css collapses the header and --header-height (76px)
   becomes the real height, so the offset goes away. Both numbers are measured
   from the rendered page, not guessed — get this wrong and the sticky strip
   parks itself underneath the header. */
.ts-trip{
  --ts-stick:calc(var(--header-height) - 42px);
  --ts-navh:62px;
  --ts-gap:clamp(20px,2.4vw,34px);
  background:#fff;
}

/* Anchors have to clear both the fixed site header and our sticky strip.
   style.css already sets a global [id] scroll-margin for the header; this
   adds the strip's own height on top of it. */
.ts-trip [id]{scroll-margin-top:calc(var(--ts-stick) + var(--ts-navh) + 14px)}

/* ------------------------------------------------------------------
   1. HEADLINE
   ------------------------------------------------------------------ */
.ts-trip-hero{padding:clamp(22px,3vw,40px) 0 0}

.ts-trip-crumb{margin-bottom:clamp(14px,1.6vw,22px)}
.ts-trip-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:12.5px;font-weight:500;color:var(--muted);list-style:none;margin:0;padding:0}
.ts-trip-crumb li{display:flex;align-items:center;gap:10px}
.ts-trip-crumb li+li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--line);flex:0 0 auto}
/* Vertical padding, not extra height: it lifts every one of these inline
   links to a 44px hit box without moving anything on screen. Safe here
   because the crumbs sit side by side, so the boxes cannot overlap. */
.ts-trip-crumb a,.ts-trip-crumb [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.ts-trip-crumb ol{margin-top:-10px;margin-bottom:-10px}
.ts-trip-crumb a{color:var(--muted)}
.ts-trip-crumb a:hover{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.ts-trip-crumb [aria-current]{color:var(--ink);font-weight:600}

.ts-trip-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:14px}

.ts-trip-badge{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:999px;background:var(--ac-soft);color:var(--ac-dark);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ts-trip-badge svg{width:15px;height:15px}
.ts-trip-badge:hover{background:var(--ac);color:#fff}

/* This row is where the reference prints "4.6 ★ · 1092 Reviews". There are
   no ratings and no reviews in this catalogue, so it carries two counts
   that are true instead. */
.ts-trip-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:13.5px;font-weight:600;color:var(--muted)}
.ts-trip-facts span{display:inline-flex;align-items:center;gap:7px}
.ts-trip-facts svg{width:16px;height:16px;color:var(--ac)}

.ts-trip-title{font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.06;
  color:var(--ink);letter-spacing:-.015em;max-width:20ch;margin:0}

.ts-trip-sub{margin:14px 0 0;color:var(--muted);font-size:clamp(15px,1.1vw,17.5px);
  font-family:var(--serif);font-style:italic;max-width:62ch;line-height:1.5}

.ts-trip-head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;margin-top:clamp(16px,2vw,26px)}

.ts-trip-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ts-trip-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--cream);
  color:var(--ink);font-size:13px;font-weight:600}

.ts-trip-acts{display:flex;flex-wrap:wrap;gap:6px}
.ts-trip-act{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;
  border-radius:12px;background:transparent;color:var(--ink);
  font-size:13.5px;font-weight:600;border:1px solid transparent;
  transition:background var(--oh-dur-fast,.18s) ease,border-color var(--oh-dur-fast,.18s) ease}
.ts-trip-act svg{width:18px;height:18px;color:var(--ac)}
.ts-trip-act:hover{background:var(--cream);border-color:var(--line)}
.ts-trip-act--save[aria-pressed="true"]{background:var(--ac-soft);border-color:var(--ac-soft);color:var(--ac-dark)}
.ts-trip-act--save[aria-pressed="true"] svg{fill:var(--ac);color:var(--ac)}

/* ------------------------------------------------------------------
   2. PICTURE MOSAIC
   The reference is always one large photo plus four thumbnails. Ours
   sizes itself: 99 of 117 trips have exactly one distinct picture once
   the featured image and gallery ids are merged, and printing four
   empty frames on 85% of the catalogue would be a design that lies.
   ------------------------------------------------------------------ */
.ts-trip-mosaic{position:relative;display:grid;gap:10px;margin-top:clamp(20px,2.6vw,34px);
  border-radius:var(--oh-radius,18px);overflow:hidden}

.ts-trip-shot{display:block;background:var(--cream);overflow:hidden;min-height:0}
.ts-trip-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--oh-ease,ease)}
.ts-trip-shot:hover img{transform:scale(1.03)}

/* Every track is minmax(0,1fr), never plain 1fr. A `1fr` track floors at the
   item's min-content width, and an <a> with an aspect-ratio and a min-height
   has a min-content width of (min-height x ratio) — which is how the 375px
   mosaic ended up 62px wider than its column, silently clipped by the
   overflow:hidden that rounds the corners. Unequal resolved tracks are the
   tell; the clip is what hides it. */
.ts-trip-mosaic[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.ts-trip-mosaic[data-count="1"] .ts-trip-shot{aspect-ratio:16/7}

.ts-trip-mosaic[data-count="2"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ts-trip-mosaic[data-count="2"] .ts-trip-shot{aspect-ratio:3/2}

.ts-trip-mosaic[data-count="3"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.ts-trip-mosaic[data-count="3"] .ts-trip-shot{aspect-ratio:auto;min-height:150px}
.ts-trip-mosaic[data-count="3"] .ts-trip-shot--lead{grid-row:1/3;min-height:310px}

.ts-trip-mosaic[data-count="4"],
.ts-trip-mosaic[data-count="5"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.ts-trip-mosaic[data-count="4"] .ts-trip-shot--lead,
.ts-trip-mosaic[data-count="5"] .ts-trip-shot--lead{grid-row:1/3;grid-column:1/2;min-height:340px}
.ts-trip-mosaic[data-count="4"] .ts-trip-shot,
.ts-trip-mosaic[data-count="5"] .ts-trip-shot{min-height:165px;aspect-ratio:auto}
.ts-trip-mosaic[data-count="4"] .ts-trip-shot:nth-child(4){grid-column:2/4}

.ts-trip-allshots{position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  border-radius:12px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-sm)}
.ts-trip-allshots svg{width:17px;height:17px;color:var(--ac)}
.ts-trip-allshots:hover{background:var(--ink);color:#fff}
.ts-trip-allshots:hover svg{color:#fff}

/* ------------------------------------------------------------------
   3. STICKY SECTION STRIP
   Real anchor links, not tabs. Nothing is hidden behind them.
   ------------------------------------------------------------------ */
.ts-trip-nav{position:sticky;top:var(--ts-stick);z-index:calc(var(--oh-z-sticky,60) - 1);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);margin-top:clamp(22px,2.6vw,36px)}
.ts-trip-nav .wrap{display:flex;align-items:center;gap:18px;justify-content:space-between}

.ts-trip-nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.ts-trip-nav-list::-webkit-scrollbar{display:none}
.ts-trip-nav-list a{display:inline-flex;align-items:center;min-height:var(--ts-navh);
  padding:0 14px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent}
.ts-trip-nav-list a:hover{color:var(--ink)}
.ts-trip-nav-list a[aria-current]{color:var(--ac);border-bottom-color:var(--ac)}

/* Same action as the aside button, so the same colour. The sticky bar sits
   on white, and gold with ink reads there as well as it does on the card. */
.ts-trip-nav-cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  border-radius:999px;background:var(--gold);color:var(--ink);font-size:13.5px;font-weight:700;
  white-space:nowrap;flex:0 0 auto}
.ts-trip-nav-cta svg{width:17px;height:17px;color:var(--ink)}
.ts-trip-nav-cta:hover{background:var(--gold-dark);color:var(--ink)}
.ts-trip-nav-cta:focus-visible{outline:3px solid var(--ac-dark); outline-offset:3px}

/* ------------------------------------------------------------------
   4. BODY GRID
   ------------------------------------------------------------------ */
.ts-trip-body{padding:clamp(34px,4.4vw,64px) 0 clamp(40px,5vw,80px)}
.ts-trip-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,25vw,352px);
  gap:clamp(28px,3.4vw,56px);align-items:start}
.ts-trip-main{min-width:0}

.ts-trip-sec{padding-bottom:clamp(34px,4vw,58px);margin-bottom:clamp(34px,4vw,58px);
  border-bottom:1px solid var(--line)}
.ts-trip-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.ts-trip-sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 28px;margin-bottom:clamp(18px,2.2vw,30px)}
.ts-trip-sechead-note{color:var(--muted);font-size:14px;margin:0}
.ts-trip-sechead-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  color:var(--ac);font-weight:600;font-size:14px}
.ts-trip-sechead-link svg{width:18px;height:18px}
.ts-trip-sechead-link:hover{text-decoration:underline;text-underline-offset:4px}

.ts-trip-kick{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.ts-trip-h2{font-weight:700;font-size:clamp(23px,2.3vw,32px);line-height:1.12;
  color:var(--ink);letter-spacing:-.01em;margin:0}
.ts-trip-h3{font-weight:700;font-size:clamp(16px,1.3vw,18.5px);color:var(--ink);margin:0 0 12px}

/* ------------------------------------------------------------------
   5. PROSE
   The theme resets every `ul` to list-style:none, which is right for
   navigation and wrong for imported editorial content: accommodation
   options and inclusion lists arrive as real bullet lists.
   ------------------------------------------------------------------ */
.ts-trip-prose{color:var(--body,#5F564E);font-size:16.2px;line-height:1.78;max-width:72ch}
.ts-trip-prose>*+*{margin-top:1em}
.ts-trip-prose p{margin:0}
.ts-trip-prose strong,.ts-trip-prose b{color:var(--ink);font-weight:700}
.ts-trip-prose a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.ts-trip-prose ul,.ts-trip-prose ol{list-style:revert;padding-left:1.35em;margin-top:.7em}
.ts-trip-prose li{margin:.3em 0}
.ts-trip-prose li::marker{color:var(--ac)}
.ts-trip-prose h2,.ts-trip-prose h3,.ts-trip-prose h4{color:var(--ink);font-weight:700;
  font-size:clamp(17px,1.4vw,20px);line-height:1.25;margin-top:1.5em}
.ts-trip-prose img{border-radius:var(--oh-radius-sm,12px);margin:1em 0}
.ts-trip-prose table{width:100%;border-collapse:collapse}
.ts-trip-prose td,.ts-trip-prose th{border:1px solid var(--line);padding:8px 10px;text-align:left}
/* The importer left empty <menu type="context"> nodes in `highlights`. */
.ts-trip-prose menu:empty{display:none}

/* ------------------------------------------------------------------
   6. FEATURE CHECKLIST  (the reference's amenity grid)
   ------------------------------------------------------------------ */
.ts-trip-features{margin-top:clamp(26px,3vw,40px);border:1px solid var(--line);
  border-radius:var(--oh-radius,18px);background:var(--cream);overflow:hidden}

.ts-trip-fstrip{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line);
  background:#fff;overflow-x:auto;scrollbar-width:none}
.ts-trip-fstrip::-webkit-scrollbar{display:none}
.ts-trip-fstrip-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  border-radius:10px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.ts-trip-fstrip-btn:hover{background:var(--cream);color:var(--ink)}
.ts-trip-fstrip-btn[aria-current]{background:var(--ac-soft);color:var(--ac-dark)}
.ts-trip-fcount{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--line);color:var(--ink);font-size:11.5px;font-weight:700}
.ts-trip-fstrip-btn[aria-current] .ts-trip-fcount{background:var(--ac);color:#fff}

.ts-trip-fgroup{padding:clamp(18px,2vw,26px)}
.ts-trip-fgroup+.ts-trip-fgroup{border-top:1px solid var(--line)}

/* Rows are a full 44px tall rather than 26px with a 44px hit box bolted on:
   padded hit boxes on a 10px row gap would overlap their neighbours, and a
   tap landing on the wrong filter is worse than a taller list. */
.ts-trip-flist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 22px;
  list-style:none;margin:0;padding:0}
.ts-trip-flist li{display:flex;align-items:center;gap:10px;font-size:14.6px;
  font-weight:500;color:var(--ink);line-height:1.35;min-height:44px}
.ts-trip-tick{width:15px;height:15px;flex:0 0 auto;color:var(--ac)}
.ts-trip-flist a,.ts-trip-flist span{display:flex;align-items:center;min-height:44px}
.ts-trip-flist a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px}
.ts-trip-flist a:hover{color:var(--ac);text-decoration-color:var(--ac)}

/* ------------------------------------------------------------------
   7. DAY CARDS  (the reference's room list)
   ------------------------------------------------------------------ */
.ts-trip-days{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}

.ts-trip-day{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--oh-radius,18px);background:#fff;
  overflow:hidden;transition:box-shadow var(--oh-dur,.34s) var(--oh-ease,ease)}
.ts-trip-day:hover{box-shadow:var(--shadow-sm)}

.ts-trip-day-rail{background:var(--cream);border-right:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:center;padding:22px 10px}
.ts-trip-day-num{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 12px;border-radius:999px;background:var(--ac);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.02em;text-align:center;line-height:1.2}
.ts-trip-day-num--note{background:var(--ac-soft);color:var(--ac-dark);gap:7px;padding:0 12px}
.ts-trip-day-num--note svg{width:17px;height:17px}

.ts-trip-day-body{padding:clamp(18px,2vw,26px)}
.ts-trip-day-title{font-weight:700;font-size:clamp(17px,1.5vw,21px);line-height:1.25;
  color:var(--ink);margin:0 0 10px}
.ts-trip-day-body .ts-trip-prose{font-size:15.6px}

.ts-trip-day--note{background:var(--cream)}
.ts-trip-day--note .ts-trip-day-rail{background:#fff}

/* ------------------------------------------------------------------
   8. PARKS
   ------------------------------------------------------------------ */
.ts-trip-parks{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
.ts-trip-park>a,.ts-trip-park>span{display:flex;align-items:center;gap:14px;height:100%;
  border:1px solid var(--line);border-radius:var(--oh-radius-sm,12px);background:#fff;
  padding:10px;transition:border-color var(--oh-dur-fast,.18s) ease,box-shadow var(--oh-dur-fast,.18s) ease}
.ts-trip-park>a:hover{border-color:var(--ac);box-shadow:var(--shadow-sm)}
.ts-trip-park-img{width:64px;height:64px;flex:0 0 auto;border-radius:10px;overflow:hidden;
  background:var(--cream);display:block}
.ts-trip-park-img img{width:100%;height:100%;object-fit:cover}
.ts-trip-park-body{display:block;min-width:0}
.ts-trip-park-body strong{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.25}
.ts-trip-park-body small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------------------
   9. PICTURE GRID + LIGHTBOX
   ------------------------------------------------------------------ */
.ts-trip-grid-pics{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ts-trip-grid-pics a{display:block;border-radius:var(--oh-radius-sm,12px);overflow:hidden;
  background:var(--cream);aspect-ratio:4/3}
.ts-trip-grid-pics img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--oh-ease,ease)}
.ts-trip-grid-pics a:hover img{transform:scale(1.04)}

.ts-trip-lb{position:fixed;inset:0;z-index:var(--oh-z-overlay,120);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(22,20,18,.9)}
.ts-trip-lb[open],.ts-trip-lb.is-open{display:flex}
.ts-trip-lb img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--oh-radius-sm,12px)}
.ts-trip-lb-btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink)}
.ts-trip-lb-btn svg{width:22px;height:22px}
.ts-trip-lb-btn:hover{background:#fff}
.ts-trip-lb-close{top:18px;right:18px}
.ts-trip-lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.ts-trip-lb-next{right:14px;top:50%;transform:translateY(-50%)}
.ts-trip-lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em}

/* ------------------------------------------------------------------
   10. FLOATING CARD
   ------------------------------------------------------------------ */
.ts-trip-rail{position:sticky;top:calc(var(--ts-stick) + var(--ts-navh) + 14px);
  min-width:0}
.ts-trip-card{border:1px solid var(--line);border-radius:var(--oh-radius,18px);
  background:#fff;box-shadow:var(--shadow-sm);padding:clamp(18px,2vw,24px)}
.ts-trip-card-h{font-weight:700;font-size:17px;color:var(--ink);margin:0 0 4px}

.ts-trip-spec{margin:14px 0 18px}
.ts-trip-spec-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:3px 0;border-bottom:1px solid var(--line)}
.ts-trip-spec-row:last-child{border-bottom:0}
.ts-trip-spec dt{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);
  font-weight:500;margin:0}
.ts-trip-spec dt svg{width:17px;height:17px;color:var(--ac)}
.ts-trip-spec dd{margin:0;font-size:14.2px;font-weight:700;color:var(--ink);text-align:right}
.ts-trip-spec dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px}
.ts-trip-spec dd a:hover{color:var(--ac);text-decoration-color:var(--ac)}

/* The primary action. Gold is the logo's accent and the colour the
   pre-footer band already uses for its primary button, so the site's two
   most important buttons agree. Ink on gold measures ~6.9:1; white on gold
   would be ~1.9:1 and unreadable, so the label is ink. */
.ts-trip-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:52px;border-radius:12px;background:var(--gold);color:var(--ink);
  font-size:15px;font-weight:700;text-align:center;
  box-shadow:0 6px 18px rgba(234,185,36,.28)}
.ts-trip-cta svg{width:19px;height:19px;color:var(--ink)}
.ts-trip-cta:hover{background:var(--gold-dark);color:var(--ink);
  box-shadow:0 8px 22px rgba(201,156,19,.34)}
/* The global focus ring is forest green, which all but disappears against
   gold — the trip page's primary control needs one that can be seen. */
.ts-trip-cta:focus-visible{outline:3px solid var(--ac-dark); outline-offset:3px}
.ts-trip-cta--ghost{margin-top:9px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.ts-trip-cta--ghost svg{color:var(--ac)}
.ts-trip-cta--ghost:hover{background:var(--cream)}
.ts-trip-cta--ghost[aria-pressed="true"]{background:var(--ac-soft);border-color:var(--ac-soft);color:var(--ac-dark)}
.ts-trip-cta--ghost[aria-pressed="true"] svg{fill:var(--ac)}

.ts-trip-card-note{margin:14px 0 0;font-size:12.6px;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------------
   11. RELATED
   ------------------------------------------------------------------ */
.ts-trip-related{background:var(--cream);padding:clamp(40px,5vw,78px) 0}
.ts-trip-rel-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.ts-trip-rel{background:#fff;border:1px solid var(--line);border-radius:var(--oh-radius,18px);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--oh-dur,.34s) var(--oh-ease,ease),box-shadow var(--oh-dur,.34s) ease}
.ts-trip-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ts-trip-rel-img{display:block;aspect-ratio:16/10;background:var(--cream)}
.ts-trip-rel-img img{width:100%;height:100%;object-fit:cover}
.ts-trip-rel-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.ts-trip-rel-body h3{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);margin:0}
.ts-trip-rel-body h3 a{display:inline-block;padding:12px 0;margin:-12px 0}
.ts-trip-rel-body h3 a:hover{color:var(--ac)}
.ts-trip-rel-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:auto 0 0;
  font-size:12.8px;font-weight:600;color:var(--muted)}
.ts-trip-rel-meta span{display:inline-flex;align-items:center;gap:6px}
.ts-trip-rel-meta svg{width:15px;height:15px;color:var(--ac)}

/* ------------------------------------------------------------------
   12. FOCUS
   ------------------------------------------------------------------ */
.ts-trip a:focus-visible,.ts-trip button:focus-visible,.ts-trip-lb button:focus-visible{
  outline:2px solid var(--ac);outline-offset:3px;border-radius:8px}

/* ------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------ */
/* Matches style.css's own header breakpoint. */
@media (max-width:1180px){
  .ts-trip{--ts-stick:var(--header-height)}
}

@media (max-width:1080px){
  .ts-trip-flist{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  .ts-trip-grid{grid-template-columns:minmax(0,1fr)}
  /* The card stops floating and moves above the prose. Left in DOM order it
     landed 14,000px down a 15-day itinerary, which is not a summary. `order`
     puts the visual order ahead of the tab order for this one card, which is
     a real trade-off - it is taken knowingly because everything in the card
     also exists elsewhere on the page (the counts in the headline and the
     sections, the enquiry link in the sticky strip), so nothing is reachable
     only through it. The strip's enquiry button stays visible at this width
     for the same reason: it is the one call to action always on screen. */
  .ts-trip-rail{position:static;order:-1}
}

@media (max-width:760px){
  .ts-trip-title{max-width:none}
  /* Two equal columns, and the per-count min-heights are cleared at the SAME
     specificity that set them - a lower-specificity reset loses and leaves the
     tracks floored at min-content again. */
  .ts-trip-mosaic[data-count="2"],
  .ts-trip-mosaic[data-count="3"],
  .ts-trip-mosaic[data-count="4"],
  .ts-trip-mosaic[data-count="5"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto}
  .ts-trip-mosaic[data-count="2"] .ts-trip-shot,
  .ts-trip-mosaic[data-count="3"] .ts-trip-shot,
  .ts-trip-mosaic[data-count="4"] .ts-trip-shot,
  .ts-trip-mosaic[data-count="5"] .ts-trip-shot{min-height:0;aspect-ratio:4/3;
    grid-row:auto;grid-column:auto}
  .ts-trip-mosaic[data-count="3"] .ts-trip-shot--lead,
  .ts-trip-mosaic[data-count="4"] .ts-trip-shot--lead,
  .ts-trip-mosaic[data-count="5"] .ts-trip-shot--lead{grid-column:1/3;aspect-ratio:16/9}
  .ts-trip-mosaic[data-count="1"] .ts-trip-shot{aspect-ratio:4/3}
  .ts-trip-flist{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:600px){
  /* The day rail would squeeze the prose to nothing, so the number moves
     above the text and the card becomes one column. */
  .ts-trip-day{grid-template-columns:1fr}
  .ts-trip-day-rail{border-right:0;border-bottom:1px solid var(--line);
    justify-content:flex-start;padding:12px 16px}
  .ts-trip-day--note .ts-trip-day-rail{border-bottom-color:var(--line)}
  .ts-trip-parks{grid-template-columns:1fr}
  .ts-trip-grid-pics{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ts-trip-rel-grid{grid-template-columns:1fr}
  .ts-trip-allshots{right:10px;bottom:10px;padding:0 13px;font-size:12.5px}
  .ts-trip-acts{width:100%}
  .ts-trip-nav .wrap{padding-right:12px}
  .ts-trip-nav-cta{padding:0 13px;font-size:12.6px}
  .ts-trip-nav-cta svg{display:none}
  .ts-trip-nav-list a{padding:0 10px;font-size:13.4px}
}

@media (max-width:420px){
  .ts-trip-act span,.ts-trip-act{font-size:13px}
  .ts-trip-hero{padding-top:14px}
}

/* ------------------------------------------------------------------
   14. MOTION / PRINT
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ts-trip *,.ts-trip-lb *{transition:none!important;animation:none!important}
  .ts-trip-shot:hover img,.ts-trip-grid-pics a:hover img,.ts-trip-rel:hover{transform:none}
}

@media print{
  .ts-trip-nav,.ts-trip-acts,.ts-trip-cta,.ts-trip-allshots,.ts-trip-related{display:none}
  .ts-trip-grid{grid-template-columns:1fr}
  .ts-trip-day{break-inside:avoid;border-color:#ccc}
}