/* The template trip page, design J (docs/plans/trip-page-redesign.md): the gallery hero, the
   sticky facts strip, the intro with the testimonial, "Everything in the price" (the price card
   and what it covers, design A of 10 October 2026). Loaded only for ?header=gallery while the design is being rolled out
   (TripDetail.razor); becomes part of the page when it is the default.
   Colours: brand pink #D20158, ink #3D3D3D, paper #F3EEE4, hairline #E0E0E0, caption #757575.
   Header pieces are scoped under .th-gallery (the header wrapper); the bands below it use the
   tg- prefix on their own. */

.trip-header-wrapper.th-gallery {
    padding: 0;
    color: #3D3D3D;
}

.trip-header-wrapper.th-gallery .tg-serif,
.trip-header-wrapper.th-gallery .tg-title,
.tg-h2,
.tg-price-trip,
.tg-price-car {
    font-family: 'Roboto Serif', Georgia, serif;
}

/* ---- Hero ---- */

.trip-header-wrapper.th-gallery .tg-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 8px;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
}

.trip-header-wrapper.th-gallery .tg-hero-single {
    grid-template-columns: minmax(0, 1fr);
}

.trip-header-wrapper.th-gallery .tg-hero-main {
    position: relative;
    overflow: hidden;
    background: #1B1B1F;
}

.trip-header-wrapper.th-gallery .tg-hero-link {
    display: block;
    position: absolute;
    inset: 0;
}

.trip-header-wrapper.th-gallery .tg-hero-main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    display: block;
}

/* The breadcrumb's own padding is enough space above the gallery (phones hide the breadcrumb). */
@media (min-width: 769px) {
    .home-container:has(.trip-header-wrapper.th-gallery) {
        padding-top: 0;
    }
}

/* The panel lets clicks through to the photo link under it; only the share button is its own target. */
.trip-header-wrapper.th-gallery .tg-hero-panel {
    pointer-events: none;
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: 24px;
    max-width: 640px;
    padding: 18px 22px;
    color: #fff;
    background: rgba(18, 18, 22, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
}

.trip-header-wrapper.th-gallery .tg-hero-empty {
    height: auto;
    background: #1B1B1F;
    padding: 32px;
}

.trip-header-wrapper.th-gallery .tg-hero-empty .tg-hero-panel {
    position: static;
    max-width: none;
}

.trip-header-wrapper.th-gallery .tg-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    color: #E7AE4B;
}

.trip-header-wrapper.th-gallery .tg-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.trip-header-wrapper.th-gallery .trip-title.tg-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #fff;
}

/* The share button on the dark panel: a translucent pill with white text (app.css paints it
   white on white elsewhere). */
.trip-header-wrapper.th-gallery .tg-title-row .trip-header-action-btn.share-btn {
    pointer-events: auto;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.trip-header-wrapper.th-gallery .tg-title-row .trip-header-action-btn.share-btn:hover {
    background: rgba(255, 255, 255, .28);
    border-color: #fff;
    color: #fff;
}

.trip-header-wrapper.th-gallery .tg-hero-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
}

.trip-header-wrapper.th-gallery .tg-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #E0E0E0;
    min-height: 0;
}

.trip-header-wrapper.th-gallery .tg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.trip-header-wrapper.th-gallery .tg-thumb:hover img {
    transform: scale(1.03);
}

.trip-header-wrapper.th-gallery .tg-thumb-all {
    background: #1B1B1F;
    color: #fff;
    text-decoration: none;
}

.trip-header-wrapper.th-gallery .tg-thumb-all img {
    opacity: .55;
}

.trip-header-wrapper.th-gallery .tg-thumb-all-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
}

/* ---- Facts strip ---- */

.trip-header-wrapper.th-gallery .tg-facts {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    margin-top: 4px;
}

/* The old Trip Info rows as one line: an icon, a grey label, a bold value; the notes behind
   (i) tooltips so every item stays one line high and the strip wraps cleanly. The tooltip
   (.tg-tip) is shared with the price card, so its rules are not scoped to the header. */
.trip-header-wrapper.th-gallery .tg-facts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* spread across the full width (Florian, 9 October 2026) */
    gap: 8px 30px;
    margin: 0;
    padding: 12px 16px; /* a little room at both ends */
    list-style: none;
    font-size: 15.5px;
}

.trip-header-wrapper.th-gallery .tg-fact {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
}

/* The icons are the teal brand files; grey here, as the old Trip Info column showed them. */
.trip-header-wrapper.th-gallery .tg-fact-icon {
    width: 20px;
    height: 20px;
    flex: none;
    filter: grayscale(1) brightness(.55);
}

/* The old row label, for screen readers only. */
.trip-header-wrapper.th-gallery .tg-fact-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.trip-header-wrapper.th-gallery .tg-fact-value {
    font-weight: 600;
    white-space: nowrap;
}

.tg-tip {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-left: -2px;
    cursor: help;
    border-radius: 50%;
}

.tg-tip:focus-visible {
    outline: 2px solid #D20158;
    outline-offset: 1px;
}

.tg-tip-icon {
    width: 15px;
    height: 15px;
    opacity: .6;
}

.tg-tip-text {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    border-radius: 8px;
    background: #121C30;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 6;
    display: none;
}

.tg-tip-text::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    width: 12px;
    height: 12px;
    background: #121C30;
    transform: translateX(-50%) rotate(45deg);
}

.tg-tip:hover .tg-tip-text,
.tg-tip:focus .tg-tip-text,
.tg-tip:focus-within .tg-tip-text {
    display: block;
}

/* The first and last tooltips sit near the page edges: pin them instead of centring. */
.trip-header-wrapper.th-gallery .tg-fact:first-child .tg-tip-text,
.trip-header-wrapper.th-gallery .tg-fact:nth-child(2) .tg-tip-text,
.trip-header-wrapper.th-gallery .tg-fact:nth-child(3) .tg-tip-text {
    left: 0;
    transform: none;
}

.trip-header-wrapper.th-gallery .tg-fact:first-child .tg-tip-text::before,
.trip-header-wrapper.th-gallery .tg-fact:nth-child(2) .tg-tip-text::before,
.trip-header-wrapper.th-gallery .tg-fact:nth-child(3) .tg-tip-text::before {
    left: 12px;
    transform: rotate(45deg);
}

.trip-header-wrapper.th-gallery .tg-fact .ssr-distance-unit-toggle {
    background: none;
    border: 0;
    padding: 0 0 0 3px;
    font: inherit;
    font-weight: 600;
    color: #D20158;
    cursor: pointer;
    text-decoration: underline dotted;
}

/* ---- Intro and price ---- */

.trip-header-wrapper.th-gallery .tg-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 48px;
    align-items: start;
    padding-top: 48px;
}

/* No price: the description alone, at a reading width. */
.trip-header-wrapper.th-gallery .tg-intro.tg-intro-solo {
    grid-template-columns: minmax(0, 860px);
}

.trip-header-wrapper.th-gallery .trip-description {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: #3D3D3D;
}

/* Next to the price card the intro runs about as tall as the card; stacked (phones) it stays short. */
.trip-header-wrapper.th-gallery .trip-description[data-readmore] .trip-description-text {
    -webkit-line-clamp: 10;
    line-clamp: 10;
}

.trip-header-wrapper.th-gallery .read-more-link {
    color: #D20158;
    margin-top: 6px;
    font-weight: 600;
}

/* The two price cards (server CAD, Vue island) share one look, beside the description. */
.tg-price {
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 14px;
    padding: 22px 24px 24px;
    box-shadow: 0 10px 30px rgba(43, 38, 34, .08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    align-items: baseline;
}

.tg-price-row-car {
    border-top: 1px dashed #E0E0E0;
    padding-top: 12px;
}

.tg-price-label {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* The (i) sits near the card's left edge: the tooltip hangs from it instead of centring. */
.tg-price .tg-tip-text {
    left: -4px;
    transform: none;
}

.tg-price .tg-tip-text::before {
    left: 10px;
    transform: rotate(45deg);
}

.tg-price-amount {
    text-align: right;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tg-price-original {
    font-size: 14px;
    color: #757575;
}

.tg-price-trip {
    font-size: 26px;
    font-weight: 600;
    color: #D20158;
    line-height: 1;
}

.tg-price-from {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #3D3D3D;
}

.tg-price-car {
    font-size: 20px;
    font-weight: 500;
}

.tg-price-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #757575;
    margin-top: 4px;
}

/* "30-50% less than a guided tour" (P3 of the price canvas, Florian, 10 October 2026): one
   quiet line between the car and the button; Compare opens the comparison window. */
.tg-price-vs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px dashed #E0E0E0;
    padding-top: 12px;
    font-size: 13px;
    line-height: 1.35;
}

.tg-price-vs strong {
    color: #D20158;
    font-weight: 700;
}

.tg-price-vs-link {
    flex: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #3D3D3D;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tg-price-vs-link:hover {
    color: #D20158;
}

.tg-price-btn {
    background: #D20158;
    color: #fff;
    border: 0;
    padding: 14px 20px;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    margin-top: 4px;
    cursor: pointer;
}

.tg-price-included {
    margin-top: -2px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #3D3D3D;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tg-price-included:hover {
    color: #D20158;
}

.tg-price-btn:hover {
    background: #9E0142;
}

/* ---- Everything in the price ---- */

.tg-h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    color: #3D3D3D;
}

/* "Everything in the price" (TripPriceBand.razor, design A of 10 October 2026): the paper band
   at the bottom of the page, after the itinerary; eight icon tiles and "Not in the price" on the
   left, the price card on the right. The card beside the description links here. */
.tg-money {
    margin: 56px 0 0;
    background: #F3EEE4;
    border-radius: 20px;
    padding: 40px 44px 36px;
    color: #3D3D3D;
    scroll-margin-top: 72px;
}

.tg-money-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}

.tg-money-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}

/* No price on the trip: the tiles take the whole width. */
.tg-money-solo .tg-money-grid {
    grid-template-columns: minmax(0, 1fr);
}

.tg-money-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-money-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tg-money-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: #fff;
    color: #D20158;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.tg-money-icon svg {
    width: 24px;
    height: 24px;
}

.tg-money-title {
    margin: 3px 0 3px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #3D3D3D;
}

.tg-money-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #3D3D3D;
}

.tg-money-text a {
    color: #3D3D3D;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tg-money-text a:hover {
    color: #D20158;
}

/* The same weight as the tiles, no more (Florian, 10 October 2026): on the paper under a
   hairline, a white icon square like theirs, the cross in grey. */
.tg-money-not {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #DED7C8;
}

.tg-money-not-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: #fff;
    color: #6B6B6B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.tg-money-not-body {
    flex: 1;
    min-width: 0;
}

.tg-money-not-body .tg-money-title {
    margin-bottom: 8px;
}

.tg-money-not ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 24px;
    font-size: 13.5px;
    line-height: 1.4;
}

.tg-money-not li::before {
    content: "\2715";
    margin-right: 8px;
    font-weight: 700;
    color: #3D3D3D;
}

.tg-money-not .ssr-distance-value,
.tg-money-not .ssr-distance-unit {
    font: inherit;
}

/* ---- Shared by the bands below the header ---- */

.tg-section-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #D20158;
    font-weight: 600;
}

.tg-section-kicker-gold {
    color: #E7AE4B;
    letter-spacing: .16em;
}

.tg-h2-big {
    font-size: 40px;
}

/* Controls that only work with JavaScript stay hidden until template-trip-header.js shows them. */
.tg-js-only {
    display: none;
}

.tg-js-ready .tg-js-only {
    display: initial;
}

.tg-arrow {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 0;
    background: #D20158;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s ease, background .2s ease;
}

.tg-arrow:hover {
    background: #9E0142;
}

.tg-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.tg-arrow:disabled:hover {
    background: #D20158;
}

/* Outline arrows beside a heading; the solid ones stay for arrows on photos. */
.tg-arrow-quiet {
    background: #fff;
    color: #D20158;
    box-shadow: inset 0 0 0 1.5px #D20158;
}

.tg-arrow-quiet:hover {
    background: #FCE8F0;
}

.tg-arrow-quiet:disabled:hover {
    background: #fff;
}

/* ---- The highlights that make this trip ---- */

.tg-moments {
    margin: 72px 0 0;
    color: #3D3D3D;
}

.tg-moments-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.tg-js-ready .tg-moments-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tg-moments-counter {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 18px;
}

.tg-moments-counter strong {
    font-weight: 600;
}

.tg-moments-counter-rest {
    color: #757575;
}

.tg-moments-single .tg-moments-counter-to {
    display: none;
}

.tg-moments-viewport {
    position: relative;
}

.tg-moments-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
    padding-bottom: 6px;
}

.tg-js-ready .tg-moments-track {
    scrollbar-width: none;
}

.tg-js-ready .tg-moments-track::-webkit-scrollbar {
    display: none;
}

.tg-moment {
    flex: 0 0 250px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-moment-photo {
    position: relative;
    height: 330px;
    overflow: hidden;
    border-radius: 10px;
    background: #E0E0E0;
}

.tg-moment-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tg-moment-number {
    position: absolute;
    left: 12px;
    top: 6px;
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 56px;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.tg-moment-title {
    margin: 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
    color: #1B1B1F;
}

.tg-moment-sub {
    margin: 6px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #2E2E33;
}

.tg-js-ready .tg-moments-fade {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 330px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}

.tg-js-ready .tg-arrow-floating {
    position: absolute;
    right: 24px;
    top: 141px;
    box-shadow: 0 6px 18px rgba(210, 1, 88, .35);
}

.tg-js-ready .tg-arrow-floating-prev {
    right: auto;
    left: 24px;
}

.tg-js-ready .tg-moments-at-end .tg-moments-fade,
.tg-js-ready .tg-moments-at-end .tg-arrow-floating:not(.tg-arrow-floating-prev),
.tg-js-ready .tg-moments-at-start .tg-arrow-floating-prev {
    display: none;
}

.tg-js-ready .tg-moments-bar {
    display: block;
    position: relative;
    height: 4px;
    background: #EEE;
    border-radius: 2px;
    margin-top: 18px;
}

.tg-moments-bar-fill {
    position: absolute;
    left: 0;
    width: 25%;
    top: 0;
    bottom: 0;
    background: #D20158;
    border-radius: 2px;
    transition: height .15s ease, top .15s ease, bottom .15s ease;
    cursor: grab;
}

/* The bar is a working scrollbar (template-trip-header.js): a taller invisible hit area, a
   thicker thumb on hover or while dragging, no snapping while the thumb is held. */
.tg-js-ready .tg-moments-bar {
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.tg-js-ready .tg-moments-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}

.tg-moments-bar:hover .tg-moments-bar-fill,
.tg-moments-dragging .tg-moments-bar-fill {
    top: -2px;
    bottom: -2px;
}

.tg-moments-dragging .tg-moments-bar-fill {
    cursor: grabbing;
}

.tg-moments-dragging .tg-moments-track {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* ---- Good nights along the way ---- */

.tg-nights {
    position: relative;
    isolation: isolate;
    margin-top: 72px;
    padding: 72px 0;
    color: #F3EEE4;
}

/* The band paints across the viewport while its content keeps the page column. */
.tg-nights::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #151518;
    z-index: -1;
}

.tg-nights-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 28px;
}

.tg-h2.tg-nights-title {
    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;
    color: #fff;
}

.tg-nights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tg-night {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    background: #1F1F24;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    color: #F3EEE4;
    font: inherit;
    cursor: pointer;
    transition: background .2s ease;
}

.tg-night:hover,
.tg-night:focus-visible {
    background: #2A2A31;
    outline: none;
}

.tg-night:focus-visible {
    box-shadow: 0 0 0 2px #E7AE4B;
}

.tg-night-photo {
    display: block;
    width: 216px;
    height: 160px;
    background: #2A2A31;
}

.tg-night-photo img {
    width: 216px;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* The fold: with JavaScript, a long list shows six stays (three on a phone) until "Show all". */
.tg-js-ready .tg-nights[data-nights-collapsed] .tg-night:nth-child(n+7) {
    display: none;
}

.tg-js-ready .tg-nights-toggle {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 40px auto 0;
    padding: 10px 18px;
    border: 1.5px solid #E7AE4B;
    border-radius: 999px;
    background: none;
    color: #F3EEE4;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.tg-nights-toggle-icon {
    flex: none;
    transition: transform .2s ease;
}

.tg-nights-toggle[aria-expanded="true"] .tg-nights-toggle-icon {
    transform: rotate(180deg);
}

.tg-js-ready .tg-nights-toggle:hover {
    background: #E7AE4B;
    color: #1F1F24;
}

.tg-js-ready .tg-nights:not(.tg-nights-long) .tg-nights-toggle {
    display: none;
}

.tg-night-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tg-night-place {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(243, 238, 228, .6);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Long names stop at two lines so every stay keeps the photo's height; the full name is in the title. */
.tg-night-name {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 17px;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.tg-night-score {
    font-size: 13px;
    color: rgba(243, 238, 228, .7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-night-score strong {
    color: #E7AE4B;
    font-weight: 700;
}

/* ---- The route: the drawn map (TripRouteMap.razor, TripMapRenderer) ---- */

.tg-route {
    margin-top: 72px;
}

.tg-route-head {
    margin-bottom: 22px;
}

.tg-route-sub {
    margin: 8px 0 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* The map cover, the fallback when the trip has no map to draw. */
.tg-route-map {
    position: relative;
    height: 360px;
    border-radius: 12px;
    overflow: hidden;
    background: #F3EEE4;
}

/* The paper box under the heading: the map, beside it the flights card, legend and note.
   Narrower than the page column (1,000 px since 9 October 2026) and centred (Florian). */
.tg-route-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
    gap: 28px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 16px;
    background: #F3EEE4;
    color: #3D3D3D;
}

.tg-route-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
}

.tg-route-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-route-legend-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex: none;
    gap: 2px;
}

.tg-route-legend-line {
    width: 32px;
    flex: none;
    border-top: 3px dotted #D20158;
}

.tg-route-legend-high {
    width: 24px;
    height: 14px;
    flex: none;
    border-radius: 3px;
    background: repeating-linear-gradient(125deg, #DCD2BF 0 1px, transparent 1px 6px);
}

.tg-route-legend-flight {
    border-top: 2px dashed #15559A;
}

.tg-route-legend-ring {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 999px;
    background: #fff;
    border: 3px solid #D20158;
}

.tg-route-legend-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 999px;
    background: #D20158;
}

.tg-route-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #757575;
}

.tg-route-figure {
    position: relative;
    margin: 0;
    min-width: 0;
    border-radius: 10px;
    overflow: hidden;
}

.tg-route-svg {
    display: block;
    width: 100%;
    height: auto;
}

.tg-map-river {
    fill: none;
    stroke: #9CC9D8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.tg-map-lake {
    fill: #B9DCE6;
    stroke: none;
}

.tg-map-sea {
    fill: #CFE3EA;
    stroke: none;
}

.tg-map-high {
    stroke: none;
}

.tg-map-hatch {
    stroke: #DCD2BF;
    stroke-width: 1.1;
}

.tg-map-hatch-dense {
    stroke: #CDC0A6;
    stroke-width: 1.3;
}

.tg-map-peak {
    fill: none;
    stroke: #B8AD9A;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tg-map-arrow {
    fill: #D20158;
}

.tg-map-drive {
    fill: none;
    stroke: #D20158;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 8;
}

.tg-map-drive-guess {
    opacity: .5;
}

.tg-map-flight {
    fill: none;
    stroke: #15559A;
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.tg-map-ring {
    fill: #fff;
    stroke: #D20158;
    stroke-width: 3;
}

/* The ring's number (1, 2, 3... in trip order), inside the ring. */
.tg-map-ring-number {
    font-family: Roboto, Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    fill: #D20158;
}

.tg-map-dot {
    fill: #D20158;
}

/* Airport or station where a drive ends: the route colour, like the rings. */
.tg-map-terminal circle {
    fill: #fff;
    stroke: #D20158;
    stroke-width: 2;
}

.tg-map-terminal path {
    fill: #D20158;
}

.tg-map-title {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    fill: #2B2622;
}

.tg-map-sub {
    font-family: Roboto, system-ui, sans-serif;
    font-size: 11px;
    fill: #6B625A;
}

.tg-map-compass {
    fill: #2B2622;
}

.tg-map-compass-south {
    fill: #B8AD9A;
}

.tg-map-compass text,
.tg-map-scale text {
    font-family: Roboto, system-ui, sans-serif;
    font-size: 10px;
    fill: #6B625A;
}

.tg-map-scale line {
    stroke: #2B2622;
    stroke-width: 2;
}

.tg-route-open {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #3D3D3D;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(43, 38, 34, .14);
}

.tg-route-open:hover {
    color: #D20158;
}

.tg-route-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tg-route-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
}

.tg-route-card-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #757575;
    font-weight: 600;
}

.tg-route-card svg {
    display: block;
    width: 100%;
    max-width: 340px; /* on one-column screens the card is wide: keep the drawing, and its text, small */
    height: auto;
    margin: 0 auto;
}

.tg-route-card svg text {
    font-family: Roboto, system-ui, sans-serif;
    fill: #3D3D3D;
}

/* The two place names, HTML inside the SVG so a long airport name wraps instead of clipping. */
.tg-route-card-city {
    display: flex;
    align-items: center;
    height: 100%;
    font-family: Roboto, system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.25;
    color: #3D3D3D;
    overflow-wrap: anywhere;
}

.tg-route-card-city-far {
    justify-content: flex-end;
    text-align: right;
}

.tg-route-card svg .tg-route-card-day {
    font-size: 10px;
    font-weight: 500;
    fill: #15559A;
}

.tg-route-card p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

/* ---- Stop by stop: the Overview tab of the itinerary tabs ---- */

.tg-stops {
    margin-top: 8px;
    color: #3D3D3D;
}

.tg-stops-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-stop {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding: 24px 0;
    border-top: 1px solid #E0E0E0;
}

/* The tab bar's baseline already sits above the first row. */
.tg-stop:first-child {
    border-top: 0;
}

.tg-stop-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tg-stop-number {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    color: #D20158;
    min-width: 44px;
}

.tg-stop-city {
    margin: 0;
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #3D3D3D;
}

.tg-stop-zh {
    margin-left: 6px;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-size: 20px;
    font-weight: 400;
    color: #757575;
}

.tg-stop-days {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #757575;
}

.tg-stop-line {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.tg-stop-cards {
    position: relative;
    min-width: 0;
}

.tg-stop-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
    padding-bottom: 6px;
}

.tg-js-ready .tg-stop-track {
    scrollbar-width: none;
}

.tg-js-ready .tg-stop-track::-webkit-scrollbar {
    display: none;
}

.tg-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: #3D3D3D;
    cursor: pointer;
}

.tg-card-photo {
    position: relative;
    display: block;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3EEE4;
}

.tg-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.tg-card:hover .tg-card-photo img {
    transform: scale(1.04);
}

/* A card clicked before the trip data has loaded waits for it (template-trip-header.js). */
.tg-card.is-waiting,
.tg-night.is-waiting {
    cursor: progress;
    opacity: .75;
}

.tg-card:focus-visible {
    outline: 2px solid #D20158;
    outline-offset: 3px;
    border-radius: 8px;
}

.tg-card-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.tg-card-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    background: #15559A;
    color: #fff;
}

.tg-arrow-small {
    width: 36px;
    height: 36px;
}

.tg-js-ready .tg-scroll-prev,
.tg-js-ready .tg-scroll-next {
    display: flex;
    position: absolute;
    top: 52px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.tg-js-ready .tg-scroll-prev { left: -14px; }
/* Inside the row: the itinerary tab panel clips anything past its right edge. */
.tg-js-ready .tg-scroll-next { right: 8px; }

.tg-scroll-prev:disabled,
.tg-scroll-next:disabled {
    visibility: hidden;
}

/* ---- Make it yours ---- */

/* Teal (the brand's second colour) instead of the pink of the price band next to it, so the two
   bands read as different things (Florian, 14 October 2026). Darker than #00C9C7 for text. */
.tg-yours {
    margin-top: 56px;
    padding: 36px 40px;
    border-radius: 16px;
    background: #E6F5F4;
    color: #3D3D3D;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px 48px;
    align-items: start;
}

.tg-yours .tg-section-kicker {
    color: #0B8F8D;
}

.tg-yours-lead {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.55;
}

.tg-yours-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.tg-chip {
    padding: 9px 16px;
    border: 1px solid #BFE0DE;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #3D3D3D;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.tg-chip:hover,
.tg-chip:focus-visible {
    border-color: #0B8F8D;
    color: #0B8F8D;
    outline: none;
}

.tg-yours-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tg-yours-btn {
    height: 48px;
    padding: 0 26px;
    border-radius: 10px;
    border: 2px solid #0B8F8D;
    background: #0B8F8D;
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.tg-yours-btn:hover {
    background: #087270;
    border-color: #087270;
}

.tg-yours-btn-ghost {
    background: transparent;
    color: #0B8F8D;
}

.tg-yours-btn-ghost:hover {
    background: #fff;
    color: #087270;
}

@media (max-width: 899px) {
    .tg-yours {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 20px;
    }

    .tg-yours-actions {
        grid-column: auto;
    }
}

/* "The itinerary" above the tabs (Overview = the stops, Detail Itinerary = the days). */
.tg-daybyday {
    margin: 72px 0 16px;
}

/* ---- Testimonial, centred after the route map ---- */

.tg-testimonial {
    max-width: 760px;
    margin: 56px auto 24px;
}

/* ---- Narrow screens ---- */

@media (max-width: 899px) {
    .trip-header-wrapper.th-gallery .tg-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 300px 72px;
        height: auto;
    }

    .trip-header-wrapper.th-gallery .tg-hero-single {
        grid-template-rows: 300px;
    }

    .trip-header-wrapper.th-gallery .tg-hero-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
    }

    .trip-header-wrapper.th-gallery .tg-hero-panel {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 16px;
    }

    .trip-header-wrapper.th-gallery .trip-title.tg-title {
        font-size: 24px;
    }

    .trip-header-wrapper.th-gallery .tg-thumb-all-label {
        font-size: 12px;
        gap: 4px;
    }

    .trip-header-wrapper.th-gallery .tg-thumb-all-label svg {
        width: 18px;
        height: 18px;
    }

    .trip-header-wrapper.th-gallery .trip-description[data-readmore] .trip-description-text {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .trip-header-wrapper.th-gallery .tg-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 28px;
    }

    .tg-money {
        padding: 28px 22px 26px;
    }

    .tg-money-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
    }

    .tg-money-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .tg-h2-big {
        font-size: 30px;
    }

    /* Wider cards on phones (Florian, 8 October 2026): one card fills most of the screen,
       the next one peeks in at the edge. */
    .tg-moment {
        flex-basis: min(300px, 82vw);
    }

    .tg-moment-photo {
        height: 360px;
    }

    .tg-js-ready .tg-moments-fade,
    .tg-js-ready .tg-arrow-floating {
        display: none;
    }

    .tg-nights {
        padding: 48px 0;
    }

    .tg-h2.tg-nights-title {
        font-size: 32px;
    }

    .tg-nights-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The photo keeps its smaller size on a phone so the hotel name has room. */
    .tg-night {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .tg-night-photo,
    .tg-night-photo img {
        width: 190px;
        height: 140px;
    }

    .tg-js-ready .tg-nights[data-nights-collapsed] .tg-night:nth-child(n+4) {
        display: none;
    }

    .tg-js-ready .tg-nights:not(.tg-nights-long) .tg-nights-toggle {
        display: flex;
    }

    .tg-route-map {
        height: 280px;
    }

    .tg-route-box {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 16px;
    }

    .tg-stop {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tg-card {
        flex-basis: 170px;
    }

    .tg-js-ready .tg-scroll-prev,
    .tg-js-ready .tg-scroll-next {
        display: none;
    }
}

@media (max-width: 480px) {
    .trip-header-wrapper.th-gallery .tg-facts-list {
        gap: 8px 20px;
    }

    .tg-money-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .tg-money-not ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Phones ---- */

@media (max-width: 640.98px) {
    /* The page column has no gutter on phones (TripDetail.razor.css, for the tabs further
       down); the header and the bands keep one of their own. */
    .trip-header-wrapper.th-gallery,
    .tg-money,
    .tg-moments,
    .tg-nights,
    .tg-route,
    .tg-stops,
    .tg-yours,
    .tg-testimonial,
    .tg-daybyday {
        margin-left: 16px;
        margin-right: 16px;
    }

    /* The sticky facts strip spans the screen so nothing scrolls past its sides. */
    .trip-header-wrapper.th-gallery .tg-facts {
        margin-left: -16px;
        margin-right: -16px;
        padding: 0 16px;
    }

    /* The hero on a phone: the title first, then the photo and the thumbnails, the title on
       the page instead of on the photo (Florian, 8 October 2026: the photo matters too much to
       cover it, and the name should come before the first image). The markup stays the same;
       the main tile's box dissolves so its link and panel become rows. */
    .trip-header-wrapper.th-gallery .tg-hero:not(.tg-hero-empty) {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: auto;
        border-radius: 0;
        overflow: visible;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main {
        display: contents;
    }

    .trip-header-wrapper.th-gallery .tg-hero-link {
        position: relative;
        inset: auto;
        height: 230px;
        border-radius: 14px;
        overflow: hidden;
        background: #1B1B1F;
    }

    /* Three thumbnails, a little bigger: the third photo steps aside so "See all" stays last
       (Florian, 9 October 2026). */
    .trip-header-wrapper.th-gallery .tg-hero-thumbs {
        order: 1;
        height: 92px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trip-header-wrapper.th-gallery .tg-hero-thumbs .tg-thumb:nth-child(3):not(:last-child) {
        display: none;
    }

    .trip-header-wrapper.th-gallery .tg-hero-thumbs:has(.tg-thumb:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trip-header-wrapper.th-gallery .tg-hero-thumbs:has(.tg-thumb:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .trip-header-wrapper.th-gallery .tg-thumb {
        border-radius: 8px;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main .tg-hero-panel {
        order: -1;
        position: static;
        pointer-events: auto;
        max-width: none;
        padding: 14px 0 6px;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        color: #3D3D3D;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main .tg-kicker {
        color: #D20158;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main .trip-title.tg-title {
        font-size: 26px;
        color: #3D3D3D;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main .trip-header-action-btn.share-btn {
        background: #fff;
        border-color: #D20158;
        color: #D20158;
    }

    .trip-header-wrapper.th-gallery .tg-hero-main .trip-header-action-btn.share-btn:hover {
        background: #D20158;
        border-color: #D20158;
        color: #fff;
    }

    /* The card rows scroll edge to edge, with the gutter inside the row (the JavaScript keeps
       the same gutter at the end of the moments track). */
    .tg-moments-viewport,
    .tg-stop-cards {
        margin-left: -16px;
        margin-right: -16px;
    }

    .tg-moments-track,
    .tg-stop-track {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
    }

    /* The facts as two even columns, so the icons and the words line up (Florian, 9 October
       2026: the wrapped line looked messy). */
    .trip-header-wrapper.th-gallery .tg-facts-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        padding: 14px 0;
        font-size: 15px;
    }

    .trip-header-wrapper.th-gallery .tg-fact {
        min-width: 0;
    }

    .trip-header-wrapper.th-gallery .tg-fact-value {
        white-space: normal;
    }

    /* The price card: each price on its own line under its label (Florian, 9 October 2026:
       beside the label it squeezed the text into a narrow column). */
    .tg-price-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tg-price-row .tg-price-amount {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        text-align: left;
    }

    .tg-price-row .tg-price-tag {
        margin-top: 0;
    }
}