/* ============================================================================
   TripSkyWay public website - trip pages (design system v2)
   ----------------------------------------------------------------------------
   /packages, /offers, /packages/{slug}, /destinations, /destinations/{slug},
   /travel/*, /travel-styles/{slug}. Read docs/REDESIGN.md and site.css first:
   this file only composes site.css tokens and components (tickets, tiles,
   route, chips, lead form, accordion, pagination) into page layouts. Every
   class here starts with trip-.

   The one bold element on these pages is the route (principle 1). On a
   package page it draws itself in once on load - the single motion moment -
   and stays still under prefers-reduced-motion.
   ========================================================================== */

/* ---- Small shared pieces ------------------------------------------------- */
.trip-h2 { font-size: var(--t-2xl); }
.trip-h3 { font-size: var(--t-lg); }
.trip-ico-sm { width: 14px; height: 14px; flex: none; }
.trip-group-count { font-size: var(--t-sm); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

/* Inner-page heading band (listings, destinations, plain fallbacks). */
.trip-head { padding-block: var(--s-7) var(--s-7); }
.trip-head h1 { max-width: 20ch; }

/* ---- Photo band (package, destination, market and style pages) ----------- */
.trip-hero { min-height: clamp(420px, 62vh, 640px); }
.trip-hero .trip-hero-inner { gap: var(--s-5); padding-block: var(--s-9) var(--s-6); }
.trip-hero::after { background: linear-gradient(180deg, rgba(27,31,59,.38) 0%, rgba(27,31,59,.3) 35%, rgba(27,31,59,.84) 100%); }
.trip-hero h1 { max-width: 20ch; font-size: var(--t-5xl); line-height: 1; letter-spacing: -0.03em; }
.trip-hero-text { display: grid; gap: var(--s-4); justify-items: start; }
.trip-hero-text .lede { max-width: 54ch; }
.trip-hero-where { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: rgba(255,255,255,.92); }
.trip-hero-where svg { width: 18px; height: 18px; color: var(--c-marigold); }
.trip-hero-plain { background: radial-gradient(110% 90% at 85% 10%, color-mix(in srgb, var(--c-brand) 60%, transparent), transparent 60%), linear-gradient(160deg, var(--c-brand-strong), var(--c-ink)); }
.trip-hero-mark { position: absolute; right: -4%; top: 6%; width: min(46%, 520px); color: #fff; opacity: .1; }
.trip-hero-mark svg { width: 100%; height: auto; stroke-width: 1; }

/* The facts: a definition list, written as words, never a middle-dot string. */
.trip-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5);
    margin: 0; padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.28);
}
.trip-fact { display: grid; gap: 2px; min-width: 0; }
.trip-fact dt { font-size: 0.8125rem; font-weight: 560; color: rgba(255,255,255,.78); }
.trip-fact dd { margin: 0; font-size: var(--t-md); font-weight: 650; color: #fff; letter-spacing: -0.005em; }
.trip-fact a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
.trip-fact a:hover { color: #fff; text-decoration-color: #fff; }
@media (min-width: 720px) {
    .trip-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
}

/* ---- Package and destination layout --------------------------------------
   One grid: content, booking panel, quote form. Phones stack them in that
   order; from 960px the panel is a sticky column beside both. */
.trip-layout {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside" "quote";
    gap: var(--s-7); padding-block: var(--s-7) var(--section-y);
}
.trip-main { grid-area: main; display: grid; gap: var(--s-8); align-content: start; min-width: 0; }
.trip-aside { grid-area: aside; min-width: 0; }
.trip-quote { grid-area: quote; min-width: 0; }
.trip-layout-dest { grid-template-areas: "main" "aside"; }
.trip-layout-solo { grid-template-areas: "aside" "quote"; }
@media (min-width: 960px) {
    .trip-layout {
        grid-template-columns: minmax(0, 1fr) 344px; grid-template-areas: "main aside" "quote aside";
        column-gap: clamp(32px, 4.5vw, 80px); row-gap: var(--s-8); align-items: start;
    }
    .trip-aside { align-self: stretch; }
    .trip-layout-dest { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "main aside"; }
    .trip-layout-solo { grid-template-areas: "quote aside"; }
}

.trip-sec { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.trip-intro { gap: var(--s-6); }
.trip-styles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.trip-styles-label { font-weight: 620; color: var(--c-ink-2); }
.trip-styles-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }

/* Lists of short facts: an icon that says what kind of item it is. */
.trip-list { list-style: none; display: grid; gap: var(--s-3); font-family: var(--f-text); font-size: var(--t-md); line-height: 1.5; }
.trip-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.trip-list svg { width: 20px; height: 20px; margin-top: 3px; color: var(--c-brand); }
.trip-list-star svg { color: var(--c-marigold-text); }
.trip-list-yes svg { color: var(--c-success); }
.trip-list-no svg { color: var(--c-ink-3); }
.trip-list-no li { color: var(--c-ink-2); }
.trip-split { display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.trip-split-col { display: grid; gap: var(--s-4); align-content: start; }

.trip-note { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-control); background: var(--c-warning-soft); }
.trip-note-text { font-size: var(--t-sm); color: var(--c-ink); }
.trip-terms { display: grid; gap: var(--s-2); }
.trip-terms .trip-h3 { font-size: var(--t-md); }
.trip-terms-text { display: grid; gap: .8em; font-family: var(--f-text); font-size: var(--t-sm); line-height: 1.6; color: var(--c-ink-2); max-width: var(--measure); }

/* ---- The route (overview) and the days ------------------------------------
   The partial draws the line; this frames it and lets it scroll sideways
   when there are more stops than fit, instead of squeezing the names. */
.trip-route {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    padding: var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-media); background: var(--c-haze);
}
.trip-route .route { min-width: calc(var(--stops, 5) * 108px); }
/* Wider stops on a package page: the names may take two lines here rather
   than the single ellipsised line the compact ticket route needs. */
.trip-route li { align-content: start; }
.trip-route .route-place { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; padding-right: var(--s-2); }
.trip-route li:nth-child(2)  { --k: 1; }
.trip-route li:nth-child(3)  { --k: 2; }
.trip-route li:nth-child(4)  { --k: 3; }
.trip-route li:nth-child(5)  { --k: 4; }
.trip-route li:nth-child(6)  { --k: 5; }
.trip-route li:nth-child(7)  { --k: 6; }
.trip-route li:nth-child(8)  { --k: 7; }
.trip-route li:nth-child(9)  { --k: 8; }
.trip-route li:nth-child(10) { --k: 9; }
.trip-route li:nth-child(11) { --k: 10; }
.trip-route li:nth-child(12) { --k: 11; }
.trip-route li:nth-child(n+13) { --k: 12; }
/* The one motion moment: the line draws from the first stop to the last and
   each stop appears as the line reaches it. Runs once, on load only. */
@media (prefers-reduced-motion: no-preference) {
    .trip-route .route::before { animation: trip-draw 1.3s var(--ease) .25s both; }
    .trip-route li { animation: trip-stop .45s var(--ease) both; animation-delay: calc(.25s + var(--k, 0) * 1.3s / max(1, var(--stops, 5) - 1)); }
}
@keyframes trip-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes trip-stop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.trip-days { list-style: none; display: grid; }
/* Day by day: the same sequence as the route above, told in full. A quiet
   rail with a marigold stop per day; the label sits with its day. */
.trip-day {
    position: relative; display: grid; gap: var(--s-2); align-content: start;
    padding: 0 0 var(--s-6) var(--s-6); border-left: 2px solid var(--c-line); margin-left: 7px;
}
.trip-day::before {
    content: ''; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--c-paper); border: 3px solid var(--c-marigold);
}
.trip-day:last-child { border-left-color: transparent; padding-bottom: 0; }
.trip-day-label { font-size: var(--t-xs); font-weight: 680; color: var(--c-marigold-text); font-variant-numeric: tabular-nums; line-height: 1.6; }
.trip-day-title { font-size: var(--t-lg); }
.trip-day-text { color: var(--c-ink-2); max-width: 62ch; }

/* ---- Booking panel and the phone action bar ------------------------------ */
.trip-book {
    display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5);
    background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-media);
}
.trip-book-name { font-size: var(--t-xs); font-weight: 600; color: var(--c-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trip-book-from { font-size: var(--t-xs); font-weight: 600; color: var(--c-ink-2); margin-bottom: -8px; }
.trip-book-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); color: var(--c-ink-2); }
.trip-book-price strong { font-size: var(--t-3xl); font-weight: 720; letter-spacing: -0.025em; line-height: 1.05; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.trip-book-ask strong { font-size: var(--t-xl); }
.trip-book-note { font-size: var(--t-xs); color: var(--c-ink-3); margin-top: -4px; }
.trip-book-actions { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-line); margin-top: var(--s-1); }
.trip-book-alt { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-2); }
.trip-book-alt .btn { padding-inline: var(--s-3); }
.trip-book-hint { font-size: var(--t-xs); line-height: 1.5; color: var(--c-ink-3); }
@media (max-width: 959px) {
    /* On phones the form follows the panel directly; the bar links to it. */
    .trip-book-go { display: none; }
}
@media (min-width: 960px) {
    .trip-book { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.trip-quote-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.trip-quote-sub { font-family: var(--f-text); color: var(--c-ink-2); max-width: 60ch; }

.trip-bar { display: none; }
@media (max-width: 959px) {
    .trip-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        display: flex; align-items: center; gap: var(--s-2);
        padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
        background: var(--c-paper); border-top: 1px solid var(--c-line); box-shadow: var(--shadow-float);
    }
    /* The bar carries WhatsApp itself, so the floating button would only
       cover it; the page also leaves room so the footer is never hidden. */
    body:has(.trip-bar) .wa-float { display: none; }
    body:has(.trip-bar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.trip-bar-price { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1.2; }
.trip-bar-price strong { font-size: var(--t-md); font-weight: 720; font-variant-numeric: tabular-nums; }
.trip-bar-from, .trip-bar-basis { font-size: 0.8125rem; color: var(--c-ink-2); }
.trip-bar-wa { width: 48px; padding: 0; flex: none; }
.trip-bar-wa svg { width: 22px; height: 22px; }
.trip-bar-go { flex: none; padding-inline: var(--s-4); }

/* ---- Related trips ------------------------------------------------------- */
.trip-related .section-head-row { margin-bottom: var(--s-5); }

/* ---- Listings: /packages and /offers ------------------------------------- */
.trip-listing { padding-block: var(--s-6) var(--section-y); }
.trip-listing-form { display: grid; gap: var(--s-5); }
.trip-listing-main { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
@media (min-width: 960px) {
    .trip-listing-form { grid-template-columns: 248px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
}

.trip-filters { border: 1px solid var(--c-line); border-radius: var(--r-media); background: var(--c-paper); }
.trip-filters-head {
    display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-4);
    list-style: none; cursor: pointer; font-weight: 650; font-size: var(--t-md);
}
.trip-filters-head::-webkit-details-marker { display: none; }
.trip-filters-title { display: inline-flex; align-items: center; gap: var(--s-2); }
.trip-filters-title svg { width: 20px; height: 20px; color: var(--c-ink-3); }
.trip-filters-n { font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-brand-soft); color: var(--c-brand); }
.trip-filters-chev { margin-left: auto; display: grid; place-items: center; }
.trip-filters-chev svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.trip-filters[open] .trip-filters-chev svg { transform: rotate(180deg); }
.trip-filters-body { display: grid; gap: var(--s-5); padding: var(--s-2) var(--s-4) var(--s-5); }
.trip-filters-foot { display: grid; gap: var(--s-2); }
@media (min-width: 960px) {
    .trip-filters { border: 0; border-radius: 0; background: none; }
    .trip-filters-head { min-height: 0; padding: 0 0 var(--s-4); cursor: default; border-bottom: 1px solid var(--c-line); }
    .trip-filters-chev { display: none; }
    .trip-filters-body { padding: var(--s-5) 0 0; }
}

.trip-fieldset { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-2); }
.trip-legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-xs); font-weight: 620; color: var(--c-ink); }
.trip-picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.trip-pick-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.trip-pick {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 1.5px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-paper);
    font-size: var(--t-xs); font-weight: 580; color: var(--c-ink); cursor: pointer; user-select: none;
}
.trip-pick:hover { border-color: var(--c-ink-3); }
.trip-pick-count { color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.trip-pick-input:checked + .trip-pick { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.trip-pick-input:checked + .trip-pick .trip-pick-count { color: var(--c-on-dark-2); }
.trip-pick-input:focus-visible + .trip-pick { box-shadow: var(--focus); }
.trip-check { min-height: 44px; align-items: center; font-size: var(--t-sm); color: var(--c-ink); }

.trip-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.trip-count { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.trip-sort { display: flex; align-items: center; gap: var(--s-2); }
.trip-sort-label { font-size: var(--t-xs); font-weight: 620; white-space: nowrap; }
.trip-sort .select { width: auto; min-width: 190px; }
@media (max-width: 559px) {
    .trip-sort { width: 100%; }
    .trip-sort .select { flex: 1; min-width: 0; }
}
.trip-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.trip-active-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.trip-chip-x { min-height: 40px; }
.trip-chip-x svg { width: 14px; height: 14px; color: var(--c-ink-3); }

/* Empty states: a dashed frame, the same perforation the tickets use. */
.trip-empty {
    display: grid; justify-items: start; gap: var(--s-4); padding: var(--s-7) clamp(20px, 4vw, 48px);
    border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-media);
}
.trip-empty-inline { padding: var(--s-5); gap: var(--s-3); }
.trip-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-marigold-soft); color: var(--c-marigold-text); }
.trip-empty-icon svg { width: 26px; height: 26px; }
.trip-empty-h { font-size: var(--t-xl); max-width: 30ch; }
.trip-empty-text { font-family: var(--f-text); font-size: var(--t-md); color: var(--c-ink-2); max-width: 58ch; }

/* ---- Closing photo band (listings, destinations) ------------------------- */
.trip-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: clamp(400px, 44vw, 560px); background: var(--c-ink); color: var(--c-on-dark); }
.trip-cta-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.trip-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27,31,59,.9) 0%, rgba(27,31,59,.72) 45%, rgba(27,31,59,.12) 85%); }
.trip-cta-plain::after { background: linear-gradient(160deg, var(--c-brand-strong), var(--c-ink)); }
.trip-cta-inner { padding-block: var(--s-8); }
.trip-cta-copy { display: grid; gap: var(--s-4); justify-items: start; max-width: 34rem; }
.trip-cta-h { color: #fff; font-size: var(--t-3xl); }
.trip-cta-text { font-family: var(--f-text); font-size: var(--t-md); line-height: 1.55; color: rgba(255,255,255,.88); }
@media (max-width: 640px) {
    .trip-cta { align-items: end; min-height: 540px; }
    .trip-cta::after { background: linear-gradient(180deg, rgba(27,31,59,0) 15%, rgba(27,31,59,.88) 62%); }
    .trip-cta-inner { padding-block: var(--s-7); }
}

/* ---- /destinations -------------------------------------------------------- */
.trip-finder { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.trip-search { display: flex; gap: var(--s-2); max-width: 640px; }
.trip-search-field { position: relative; flex: 1; min-width: 0; }
.trip-search-field svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.trip-search-field .input { min-height: 52px; padding-left: 44px; }
.trip-search .btn { min-height: 52px; }
.trip-switch-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.trip-switch-list .chip { min-height: 40px; }
.trip-switch-list .chip[aria-current="page"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.trip-groups { display: grid; gap: var(--s-9); }
.trip-group { display: grid; gap: var(--s-4); }
.trip-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.trip-group-lede { margin-bottom: var(--s-2); }
.trip-dest-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(260px, auto); }
.trip-dest-grid.is-one > * { grid-column: 1 / -1; }
@media (min-width: 560px) {
    .trip-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); }
    .trip-dest-grid.is-odd > :first-child { grid-column: span 2; }
}
@media (min-width: 1100px) {
    .trip-dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .trip-dest-grid.is-odd > :first-child { grid-column: auto; }
    .trip-dest-grid.is-r3 > :first-child { grid-column: span 2; }
    .trip-dest-grid.is-r2 > :nth-child(-n+2) { grid-column: span 2; }
    .trip-dest-grid.is-r1 > :first-child { grid-column: span 2; grid-row: span 2; }
    .trip-dest-grid.is-one > * { grid-column: 1 / -1; }
}
.trip-search-result { font-size: var(--t-sm); color: var(--c-ink-2); }

/* ---- /destinations/{slug} -------------------------------------------------- */
.trip-dest-prose { font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); }
.trip-aside-form .form-panel { padding: var(--s-5); }
/* A date input keeps its intrinsic width; let it fit the narrow column. */
.trip-aside-form input[type="date"] { min-width: 0; }
@media (min-width: 960px) {
    .trip-aside-form .form-panel { position: relative; }
}

/* ---- /travel/* -------------------------------------------------------------- */
.trip-market .trip-switch-list .chip { min-height: 36px; }
.trip-points-band { padding-block: var(--s-8); }
.trip-points { list-style: none; display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.trip-point { display: grid; gap: var(--s-2); align-content: start; }
.trip-point-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand); }
.trip-point-icon svg { width: 22px; height: 22px; }
.trip-point-title { font-size: var(--t-md); }
@media (max-width: 639px) {
    .trip-points { gap: var(--s-5); }
    .trip-point { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); }
    .trip-point-icon { grid-row: span 2; margin-bottom: 0; }
}
.trip-point-text { font-family: var(--f-text); color: var(--c-ink-2); line-height: 1.55; }

.trip-steps-lede { color: var(--c-on-dark-2); }
.trip-steps { list-style: none; display: grid; gap: var(--s-5); }
.trip-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.trip-step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--c-marigold); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.trip-step-text { font-size: var(--t-md); color: var(--c-on-dark); line-height: 1.4; }
@media (min-width: 900px) {
    .trip-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
    .trip-step { grid-template-columns: none; align-items: start; gap: var(--s-3); }
}

.trip-faq .accordion { max-width: 860px; }
.trip-final-inner { display: grid; gap: var(--s-7); }
.trip-final-copy { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
.trip-others { display: grid; gap: var(--s-3); align-content: start; }
.trip-others-list { list-style: none; display: grid; gap: var(--s-2); }
.trip-other {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center;
    min-height: 64px; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
    border: 1px solid var(--c-line); border-radius: var(--r-control); background: var(--c-paper);
    color: var(--c-ink); text-decoration: none;
}
.trip-other:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.trip-other-title { font-weight: 650; }
.trip-other-sub { grid-column: 1; font-size: var(--t-xs); color: var(--c-ink-3); }
.trip-other svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--c-brand); }
@media (min-width: 960px) {
    .trip-final-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
}

/* ---- /travel-styles/{slug} ------------------------------------------------- */
.trip-style-intro { padding-block: var(--s-8); }
.trip-style-prose { font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); }