/* Round 35 (2026-11-01): trip page header social proof (partials/trip-hero.blade.php).
   Badge above the name, a proof row (stars + review count, "Loved by" reviewer faces, "x travellers have done this trip with us"),
   the price above Book / Ask, and a trust bar under the photos. Loaded after trip.css, trip-mobile.css and trip-hero-mosaic.css.
   Light header (photo gallery trips) by default; .tp-hero:not(.tp-hero--mosaic) = the dark single-photo hero on desktop. */

/* ---------- badge ---------- */
.tph-badge { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff4df; border: 1px solid #f3d59a; color: #8a4b00; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.tph-badge i { color: #e07b00; font-size: 12px; }
html body .tp-hero .tp-title { margin-bottom: 14px; }

/* ---------- proof row ---------- */
.tph-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin: 0 0 20px; color: #33465b; font-size: 14px; line-height: 1.35; }
.tph-proof > * { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 22px; border-left: 1px solid #dbe4ec; }
.tph-proof > :first-child { padding-left: 0; border-left: 0; }
.tph-proof p { margin: 0; }
.tph-proof b { color: #0a2540; font-weight: 700; }
.tph-rating { text-decoration: none; color: inherit; }
.tph-rating > b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tph-rating .tph-sub { color: #5b6f85; text-decoration: underline; text-decoration-color: #c3d2df; text-underline-offset: 3px; }
.tph-rating:hover .tph-sub { color: #0073ad; text-decoration-color: currentColor; }
.tph-stars { display: inline-flex; gap: 2px; color: #f5a623; font-size: 15px; }
.tph-stars .is-off { color: #d7dee6; }
.tph-marks { display: inline-flex; align-items: center; gap: 4px; }
.tph-marks svg { display: block; }
.tph-faces { display: inline-flex; align-items: center; }
.tph-faces > * { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; background: hsl(var(--h, 205) 48% 42%); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; object-fit: cover; box-shadow: 0 2px 6px -2px rgba(10, 37, 64, .35); }
.tph-faces > :first-child { margin-left: 0; }
.tph-faces .tph-faces-more { background: #0a2540; font-size: 11.5px; }
.tph-loved p { max-width: 460px; }
.tph-trav--d { display: none; }
.tph-trav i { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #e6f4ea; color: #15803d; font-size: 15px; }
.tph-trav b { font-size: 16px; }

/* ---------- price above the buttons ---------- */
.tph-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: #5b6f85; font-size: 13px; line-height: 1.2; }
.tph-price b { color: #0a2540; font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tph-price b.is-quote { font-size: 20px; }
.tph-price s { color: #8a9bb0; font-size: 15px; }
.tph-price small { font-size: 13px; }

/* desktop: travellers line + price stacked above the two buttons. A grid (not a wrapping flex row) so the column is only as wide as the buttons. */
@media (min-width: 992px) {
    .tph-trav--m { display: none !important; }
    .tph-trav--d { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 8px 8px; border-radius: 999px; background: #e9f6ee; color: #1d5c37; font-size: 13.5px; line-height: 1.25; }
    .tph-trav--d i { width: 30px; height: 30px; background: #fff; font-size: 13px; }
    .tph-trav--d b { color: #0f4a2a; font-size: 15px; }
    html body .tp-hero .tp-hero-actions { display: grid; grid-template-columns: auto auto; gap: 12px; align-items: center; }
    .tp-hero-actions > .tph-trav, .tp-hero-actions > .tph-price, .tp-hero-actions > .glass { grid-column: 1 / -1; }
    .tp-hero--mosaic .tph-trav--d, .tp-hero--mosaic .tph-price { justify-self: end; }
    .tp-hero:not(.tp-hero--mosaic) .tp-hero-actions { justify-content: start; }
    .tp-hero:not(.tp-hero--mosaic) .tph-trav--d { justify-self: start; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); }
    .tp-hero:not(.tp-hero--mosaic) .tph-trav--d b { color: #fff; }
    .tp-hero:not(.tp-hero--mosaic) .tph-trav--d i { background: rgba(255, 255, 255, .9); }
    .tph-rating > b, .tph-rating .tph-sub, .tph-trav--d span { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    /* buttons sit under the text here: travellers + price on one line, buttons beside them */
    html body .tp-hero--mosaic .tp-hero-actions { grid-template-columns: auto auto auto auto; justify-content: start; }
    .tp-hero--mosaic .tp-hero-actions > .tph-trav, .tp-hero--mosaic .tp-hero-actions > .tph-price { grid-column: auto; justify-self: start; }
    .tp-hero--mosaic .tph-price { margin-right: 6px; }
}

/* ---------- trust bar under the photos ---------- */
.tph-trustbar { background: #fff; padding: 0 0 30px; }
html body .tp-hero.tp-hero--mosaic { padding-bottom: 22px; }
.tph-trust { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 !important; padding: 16px 0; list-style: none; border: 1px solid #dbe4ec; border-radius: 18px; background: linear-gradient(180deg, #fbfdfe, #f5f9fc); }
.tph-trust li { min-width: 0; padding: 0 18px; border-left: 1px solid #e3ebf2; }
.tph-trust li:first-child { border-left: 0; }
.tph-trust li > a, .tph-trust li { color: inherit; text-decoration: none; }
.tph-trust li, .tph-trust li > a { display: flex; align-items: center; gap: 12px; }
.tph-trust i { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: #e8f3fa; color: #0073ad; font-size: 16px; }
.tph-trust span { min-width: 0; color: #5b6f85; font-size: 12.5px; line-height: 1.35; }
.tph-trust b { display: block; margin-bottom: 1px; color: #0a2540; font-size: 14px; font-weight: 700; }
.tph-trust a:hover b { color: #0073ad; }
.tph-trust .tph-trust-rev .tph-marks { flex: 0 0 auto; }
.tph-trust .tph-trust-rev span.tph-marks { font-size: 0; }
@media (max-width: 1199.98px) { .tph-trust li { padding: 0 12px; } .tph-trust i { width: 34px; height: 34px; font-size: 14px; } .tph-trust span { font-size: 12px; } .tph-trust b { font-size: 13px; } }

/* ---------- desktop dark single-photo hero (0–1 photo trips) ---------- */
@media (min-width: 992px) {
    .tp-hero:not(.tp-hero--mosaic) .tph-proof { color: rgba(255, 255, 255, .85); }
    .tp-hero:not(.tp-hero--mosaic) .tph-proof > * { border-left-color: rgba(255, 255, 255, .25); }
    .tp-hero:not(.tp-hero--mosaic) .tph-proof b, .tp-hero:not(.tp-hero--mosaic) .tph-price b { color: #fff; }
    .tp-hero:not(.tp-hero--mosaic) .tph-rating .tph-sub { color: rgba(255, 255, 255, .85); text-decoration-color: rgba(255, 255, 255, .4); }
    .tp-hero:not(.tp-hero--mosaic) .tph-rating:hover .tph-sub { color: #fff; }
    .tp-hero:not(.tp-hero--mosaic) .tph-faces > * { border-color: rgba(255, 255, 255, .9); }
    .tp-hero:not(.tp-hero--mosaic) .tph-trav i { background: rgba(255, 255, 255, .16); color: #b7f0c8; }
    .tp-hero:not(.tp-hero--mosaic) .tph-price { flex: 0 0 100%; margin-bottom: 4px; color: rgba(255, 255, 255, .8); }
    .tp-hero:not(.tp-hero--mosaic) .tph-price s { color: rgba(255, 255, 255, .6); }
    .tph-trustbar--solo { padding: 22px 0; border-bottom: 1px solid #e6edf3; }
}

/* ---------- phones / tablets: proof stacked under the name; price + trust live in the booking card below ---------- */
@media (max-width: 991.98px) {
    .tph-badge { margin-bottom: 10px; font-size: 11.5px; }
    .tph-proof { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 13.5px; }
    .tph-proof > * { padding: 0; border-left: 0; }
    .tph-rating > b { font-size: 16px; }
    .tph-faces > * { width: 30px; height: 30px; font-size: 11px; }
    .tph-trav i { width: 30px; height: 30px; font-size: 13px; }
    .tph-price, .tph-trustbar { display: none !important; }
}