/*
 * Experiences listing (/tours, tours.php). Mobile first; built on site.css tokens; every rule is xp- prefixed.
 * Phones: each journey is a short row, photograph beside the text. 40rem: cards two across. 64rem: three across.
 */

/* ---- Head: title, introduction, filter and currency switch -------------------------------------- */
.xp-head { padding: 1.25rem 0 0.5rem; }
.xp-head h1 { margin: 0.5rem 0 0.75rem; font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.1; }
.xp-head__lede { max-width: 42rem; margin: 0; color: var(--charcoal-soft); font-size: var(--text-base); line-height: 1.65; }

.xp-controls { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1.5rem;
    padding-block: 0.75rem; border-block: 1px solid var(--line); }
.js .xp-controls { display: flex; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 1rem; border: 1px solid var(--line); border-radius: 999px;
    background: transparent; color: var(--green); font: 700 var(--text-xs) var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.xp-chip:hover { border-color: var(--green); }
.xp-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: var(--cream); }
.xp-chip__n { font-weight: 400; letter-spacing: 0; opacity: 0.75; }
.xp-chip:focus-visible, .xp-currency__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* The currency switch's own styles are in site.css (also used on tour pages). */

/* ---- Groups ------------------------------------------------------------------------------------- */
.xp-group { padding-block: 1.5rem 0.5rem; }
.xp-group:last-of-type { padding-bottom: var(--section); }
.xp-group__title { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); }
.xp-group__title span { color: var(--gold-deep); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.xp-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

/* ---- A journey: a row on phones ------------------------------------------------------------------ */
.xp-card { position: relative; display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); background: #FFFFFF; border: 1px solid var(--line);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.xp-card:hover { border-color: rgba(27, 59, 43, 0.35); box-shadow: 0 10px 28px -18px rgba(27, 59, 43, 0.45); }
.xp-card:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.xp-card__media { position: relative; }
.xp-card__media .ph, .xp-card__media .media { height: 100%; aspect-ratio: auto; min-height: 100%; border-radius: 0; }
.xp-card__media .ph::after { inset: 0.4rem; }
.xp-card__badge { position: absolute; left: 0.4rem; top: 0.4rem; padding: 0.2rem 0.45rem; background: var(--green); color: var(--cream);
    font-size: var(--text-label); font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; }
.xp-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem 0.85rem; }
.xp-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.xp-card__title a { color: var(--green); text-decoration: none; }
/* The whole card opens the journey. */
.xp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.xp-card__title a:focus-visible { outline: none; }
.xp-card__route { margin: 0; color: var(--charcoal-soft); font-size: 0.8125rem; line-height: 1.45; }
.xp-card__hook { display: none; margin: 0; color: var(--charcoal-soft); font-size: 0.9375rem; line-height: 1.6; }
.xp-card__price { margin: 0.2rem 0 0; color: var(--green); font-size: 0.875rem; font-weight: 700; line-height: 1.45; }
.xp-card__from { margin-right: 0.15rem; color: var(--gold-deep); font-size: var(--text-label); letter-spacing: 0.12em; text-transform: uppercase; }
.xp-card__more, .xp-card__soon { display: none; margin: 0; }
.xp-card--soon { opacity: 0.8; }

.xp-card__price .price-set.is-one { font-size: 1rem; }

/* ---- Cards, two then three across ------------------------------------------------------------------ */
@media (min-width: 40rem) {
    .xp-head { padding-top: 2rem; }
    .xp-head__lede { font-size: var(--text-lg); }
    .xp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .xp-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .xp-card__media .ph, .xp-card__media .media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
    .xp-card__badge { left: 0.75rem; top: 0.75rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; }
    .xp-card__body { gap: 0.5rem; padding: 1.25rem 1.25rem 1.35rem; }
    .xp-card__title { font-size: 1.3125rem; }
    .xp-card__hook { display: block; }
    .xp-card__price { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); }
    .xp-card__more, .xp-card__soon { display: block; color: var(--green); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    .xp-card__more::after { content: " \2192"; color: var(--gold-deep); }
    .xp-card__soon { color: var(--charcoal-soft); }
    .xp-group { padding-top: 2.5rem; }
}
@media (min-width: 64rem) {
    .xp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
    .xp-group__title { margin-bottom: 1.5rem; }
}

/* ---- Google reviews, after the journeys ----------------------------------------------------------- */
.xp-guests { padding-bottom: var(--section); }
.xp-guests__inner { padding-top: 2.5rem; border-top: 1px solid var(--line); }
.xp-guests__inner h2 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); }
.xp-group:last-of-type { padding-bottom: 2.5rem; }