/* Round 28 (2026-10-29): trip page hero as a masonry photo gallery (trips with 2+ photos; partials/trip-hero.blade.php).
   Desktop (>= 992px): crumbs + title + fact strip + actions on a light band, then 1 large + up to 4 staggered tiles.
   Phones / tablets (< 992px): the gallery replaces the single top photo (1 large + 2), title block below as before.
   Loaded after trip.css, trip-mobile.css and the bundle (desk-1200 / fonts), so it only needs "html body" where those use it. */

html body .tp-hero.tp-hero--mosaic { display: flex; flex-direction: column; align-items: stretch; min-height: 0; max-height: none; color: #0a2540; background: #fff; overflow: visible; isolation: isolate; }

/* ---------- gallery ---------- */
.tp-mosaic { position: relative; display: grid; gap: 10px; border-radius: 22px; overflow: hidden; background: #e8eef3; }
.tp-mosaic-tile { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: #dfe7ee; cursor: zoom-in; }
.tp-mosaic-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.tp-mosaic-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, 0) 55%, rgba(10, 37, 64, .28) 100%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.tp-mosaic-tile:hover img { transform: scale(1.06); }
.tp-mosaic-tile:hover::after { opacity: 1; }
.tp-mosaic-tile:focus-visible { outline: 3px solid #0073ad; outline-offset: -3px; }
.tp-mosaic-all { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #0a2540; font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(10, 37, 64, .55); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .18s ease, background .18s ease; }
.tp-mosaic-all:hover { background: #fff; transform: translateY(-2px); }
.tp-mosaic-all:focus-visible { outline: 3px solid rgba(0, 128, 192, .45); outline-offset: 2px; }
.tp-mosaic-all i { color: #0073ad; }

@media (min-width: 992px) {
    /* light band with a faint contour-line motif behind the title */
    html body .tp-hero.tp-hero--mosaic {
        padding: 30px 0 34px;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='300' viewBox='0 0 760 300' fill='none' stroke='%230a2540' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M0 250c90-40 170-110 280-110s170 70 260 70 150-60 220-90'/%3E%3Cpath d='M0 220c100-46 180-120 290-120s160 64 250 64 150-66 220-100'/%3E%3Cpath d='M0 190c110-52 190-130 300-130s150 58 240 58 150-72 220-110'/%3E%3Cpath d='M0 160c120-58 200-140 310-140s140 52 230 52 150-78 220-120'/%3E%3Cpath d='M40 300c80-30 150-80 250-80s180 60 270 60 140-40 200-62'/%3E%3C/svg%3E") right -40px top -20px / 760px auto no-repeat,
            linear-gradient(180deg, #f3f7fa 0%, #fff 62%);
    }
    html body .tp-hero--mosaic .tp-hero-inner { order: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "text actions"; align-items: end; column-gap: 40px; padding-top: 0; padding-bottom: 24px; }
    .tp-hero--mosaic .tp-crumbs { grid-area: crumbs; margin-bottom: 12px; color: #6a7d91; }
    .tp-hero--mosaic .tp-crumbs a { color: #0073ad; }
    .tp-hero--mosaic .tp-crumbs a:hover { color: #0a2540; }
    .tp-hero--mosaic .tp-hero-text { grid-area: text; min-width: 0; }
    html body .tp-hero--mosaic .tp-title { margin: 0 0 18px; max-width: 980px; font-size: clamp(36px, 3.6vw, 54px); color: #0a2540; text-shadow: none; }

    /* fact strip: value on top, label underneath */
    html body .tp-hero--mosaic .tp-meta { margin: 0; gap: 10px 0; font-size: 13px; font-weight: 500; color: #5b6f85; }
    .tp-hero--mosaic .tp-meta li { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0 22px; border-left: 1px solid #dbe4ec; line-height: 1.3; }
    .tp-hero--mosaic .tp-meta li:first-child { padding-left: 0; border-left: 0; }
    html body .tp-hero--mosaic .tp-meta b { color: #0a2540; font-size: 18px; font-weight: 700; }
    .tp-hero--mosaic .tp-meta li .tp-meta-sub { margin: 0; font-size: 12px; opacity: .8; }
    .tp-hero--mosaic .tp-meta-rating { flex-direction: row !important; flex-wrap: wrap; align-items: baseline !important; column-gap: 6px !important; }
    .tp-hero--mosaic .tp-meta-rating i { font-size: 14px; }

    .tp-hero--mosaic .tp-hero-actions { grid-area: actions; flex-wrap: nowrap; padding-bottom: 2px; }
    html body .tp-hero--mosaic .tp-btn.ghost { color: #0a2540; border-color: #b9c8d6; background: #fff; }
    html body .tp-hero--mosaic .tp-btn.ghost:hover { background: #0a2540; border-color: #0a2540; color: #fff; }

    .tp-hero--mosaic .tp-mosaic-wrap { order: 1; }
    .tp-mosaic { height: clamp(400px, 36vw, 560px); grid-template-rows: repeat(6, minmax(0, 1fr)); }

    /* 5 tiles: large left, then two staggered columns (tall + short / short + tall) */
    .tp-m5 .tp-mosaic { grid-template-columns: 2fr 1fr 1fr; }
    .tp-m5 .t1 { grid-column: 1; grid-row: 1 / 7; }
    .tp-m5 .t2 { grid-column: 2; grid-row: 1 / 5; }
    .tp-m5 .t3 { grid-column: 2; grid-row: 5 / 7; }
    .tp-m5 .t4 { grid-column: 3; grid-row: 1 / 3; }
    .tp-m5 .t5 { grid-column: 3; grid-row: 3 / 7; }
    /* 4 tiles */
    .tp-m4 .tp-mosaic { grid-template-columns: 2fr 1fr 1fr; }
    .tp-m4 .t1 { grid-column: 1; grid-row: 1 / 7; }
    .tp-m4 .t2 { grid-column: 2; grid-row: 1 / 5; }
    .tp-m4 .t3 { grid-column: 2; grid-row: 5 / 7; }
    .tp-m4 .t4 { grid-column: 3; grid-row: 1 / 7; }
    /* 3 tiles */
    .tp-m3 .tp-mosaic { grid-template-columns: 2fr 1fr; }
    .tp-m3 .t1 { grid-column: 1; grid-row: 1 / 7; }
    .tp-m3 .t2 { grid-column: 2; grid-row: 1 / 5; }
    .tp-m3 .t3 { grid-column: 2; grid-row: 5 / 7; }
    /* 2 tiles */
    .tp-m2 .tp-mosaic { grid-template-columns: 3fr 2fr; }
    .tp-m2 .t1, .tp-m2 .t2 { grid-row: 1 / 7; }
}

/* round 29: up to 1399px the fact strip needs the full width (at 1200 it wrapped the rating onto a 2nd line) -> buttons go underneath */
@media (min-width: 992px) and (max-width: 1399.98px) {
    html body .tp-hero--mosaic .tp-hero-inner { grid-template-areas: "crumbs" "text" "actions"; grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
}

/* ---------- phones / tablets: gallery on top, edge to edge (title block below keeps the round 25 phone styles) ---------- */
@media (max-width: 991.98px) {
    .tp-hero--mosaic .tp-mosaic-wrap { order: -1; max-width: none; padding: 0; }
    .tp-mosaic { height: min(66vw, 420px); gap: 4px; border-radius: 0; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .tp-mosaic .t1 { grid-column: 1; grid-row: 1 / 3; }
    .tp-mosaic .t2 { grid-column: 2; grid-row: 1; }
    .tp-mosaic .t3 { grid-column: 2; grid-row: 2; }
    .tp-mosaic .t4, .tp-mosaic .t5 { display: none; }
    .tp-m2 .tp-mosaic .t2 { grid-row: 1 / 3; }
    html body .tp-hero.tp-hero--mosaic #tp-photos { position: absolute; top: auto; right: 10px; bottom: 10px; min-height: 36px; padding: 0 13px; font-size: 12.5px; background: rgba(10, 37, 64, .74); color: #fff; box-shadow: none; }
    html body .tp-hero.tp-hero--mosaic #tp-photos i { color: #fff; }
    .tp-mosaic-all-l { display: none; }
    .tp-mosaic-tile:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) { .tp-mosaic-tile img, .tp-mosaic-tile::after, .tp-mosaic-all { transition: none; } .tp-mosaic-tile:hover img { transform: none; } }