/* ═══════════════════════════════════════════════════════════════════════════
   TOURS PAGE

   The catalogue in the homepage's language. Tour cards are NOT restyled here:
   the page loads css/tourist-dashboard.css and renders .td-tour, so a tour
   looks identical whether you meet it on the homepage, on a destination page
   or in these results. Only what surrounds them is defined here — the toolbar,
   the list variant, the map frame.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.tp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--hub-hairline);
}

.tp-count {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.tp-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* One segmented control, not seven loose icon buttons — a view is a choice
   between four states, and a segmented control is what that looks like. */
.tp-views {
    display: inline-flex;
    padding: 0.25rem;
    gap: 0.2rem;
    background: rgb(var(--hub-overlay-rgb) / 0.05);
    border-radius: 100px;
}

.tp-views .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
    transition: background var(--hub-transition), color var(--hub-transition);
}

.tp-views .view-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.tp-views .view-btn:hover { color: var(--hub-ink); }

.tp-views .view-btn.active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 700;
}

.tp-views .view-btn:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.tp-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-sort-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
}

.tp-sort .sort-select {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 100px;
    background: var(--hub-elev);
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--hub-ink);
    cursor: pointer;
}

.tp-sort .sort-select:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

/* ── Results ─────────────────────────────────────────────────────────────── */

.events-grid-section .events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* A card is a link with three icon buttons floating over its image, so the
   whole card is clickable without nesting a button inside an anchor. */
.events-grid .td-tour { position: relative; }

.td-tour-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.tp-card-actions {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.35rem;
    z-index: 2;
}

.tp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    /* Over the card's image, which is a photo or the brand gradient, so this
       stays a dark scrim with light glyphs in both themes. */
    background: rgb(0 0 0 / 0.45);
    color: #FFFFFF;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background var(--hub-transition), transform var(--hub-transition);
}

.tp-icon-btn svg { width: 16px; height: 16px; }
.tp-icon-btn:hover { background: rgb(0 0 0 / 0.65); transform: scale(1.08); }
.tp-icon-btn.active { background: var(--hub-fill); color: var(--hub-on-fill); }
.tp-icon-btn:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

/* .add-to-compare-btn carries its own square white styling from
   events-module.css, written for the old card where it sat alone in a corner.
   Here it is one of three matching circles. */
.tp-card-actions .add-to-compare-btn {
    position: static;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.45);
    color: #FFFFFF;
    box-shadow: none;
}

.tp-card-actions .add-to-compare-btn.active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
}


.tp-badge {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 2;
}

.tp-badge-free { background: var(--hub-fill); color: var(--hub-on-fill); }

/* ── List view ───────────────────────────────────────────────────────────── */

/* The same card turned on its side. Compact used to be a third mode that
   produced this at the same height, which is why it is gone. */
.events-grid.list-view {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.events-grid.list-view .td-tour-link {
    flex-direction: row;
    align-items: stretch;
}

.events-grid.list-view .td-tour-media {
    flex: 0 0 clamp(160px, 26%, 300px);
    aspect-ratio: auto;
}

.events-grid.list-view .td-tour-body {
    flex: 1;
    justify-content: center;
    padding: 1.25rem 1.5rem;
}

.events-grid.list-view .td-tour-title {
    font-size: 1.2rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.events-grid.list-view .td-tour-price {
    border-top: 0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 620px) {
    /* Side by side, a phone gives the image 90px and the text four words a
       line. Back to the stacked card. */
    .events-grid.list-view .td-tour-link { flex-direction: column; }
    .events-grid.list-view .td-tour-media { flex: none; aspect-ratio: 16 / 10; }
}

/* ── Map ─────────────────────────────────────────────────────────────────── */

.tp-map-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

/* display:flex beats the UA stylesheet's [hidden]{display:none}, so the hidden
   wrapper was still drawing an empty bordered box under the results. */
.tp-map-wrap[hidden] { display: none; }

.events-grid-section .events-map {
    height: min(70vh, 620px);
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-hairline);
    overflow: hidden;
}

.tp-map-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--hub-ink-muted);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .tp-toolbar { flex-direction: column; align-items: flex-start; }
    .tp-toolbar-right { width: 100%; justify-content: space-between; }
    /* Four labelled segments do not fit; the icons carry them. */
    .tp-views .view-btn span { display: none; }
    .tp-views .view-btn { padding: 0.45rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-icon-btn, .tp-views .view-btn { transition: none; }
    .tp-icon-btn:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   Touch targets — the card actions (save, compare, share) measured
   32×32 on a phone, sitting side by side. Fingers need 44px.
   ─────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .tp-icon-btn {
        width: 44px;
        height: 44px;
    }

    .tp-sort select,
    .sort-select {
        min-height: 44px;
    }
}

/* The category a "What kind of trip" card filtered by. It has no control on
   this page, so the heading carries it — and the way out of it. */
.tp-count-clear {
    margin-left: 0.5rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--hub-ink-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.tp-count-clear:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.5);
    color: var(--hub-accent-strong);
}

@media (hover: none) and (pointer: coarse) {
    .tp-count-clear { min-height: 34px; }
}