/* ==========================================================================
   Homepage catalogue sections
     .em-offers  "Our most popular experiences" — filterable carousel
     .em-must    "Our must-haves" — static row, never a carousel
   Tokens come from main.css; nothing here introduces a new colour.
   ========================================================================== */

/* --------------------------------------------------------------- offers  */

.em-home-page .em-offers {
  background: var(--em-bg2);
}

.em-home-page .em-offers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}

.em-home-page .em-offers__all {
  flex: none;
  color: var(--em-gold-d);
  font-family: var(--em-font-head);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--em-ease), color .3s var(--em-ease);
}
.em-home-page .em-offers__all:hover,
.em-home-page .em-offers__all:focus-visible {
  color: var(--em-ink);
  border-bottom-color: var(--em-gold);
}

/* filters */

.em-home-page .em-offers__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.8rem;
}

.em-home-page .em-offers__filter {
  padding: .5rem 1.1rem;
  font-family: var(--em-font-head);
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--em-muted);
  background: transparent;
  border: 1px solid rgba(28, 24, 19, .16);
  border-radius: 999px;
  cursor: pointer;
  transition: color .25s var(--em-ease), background .25s var(--em-ease),
              border-color .25s var(--em-ease);
}
.em-home-page .em-offers__filter:hover {
  color: var(--em-ink);
  border-color: var(--em-gold);
}
.em-home-page .em-offers__filter.is-active {
  color: #fff;
  background: var(--em-gold-d);
  border-color: var(--em-gold-d);
}

/* viewport + track */

.em-home-page .em-offers__viewport {
  position: relative;
}

.em-home-page .em-offers__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 4px 2px 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.em-home-page .em-offers__track::-webkit-scrollbar { display: none; }

.em-home-page .em-offers__item {
  flex: 0 0 clamp(258px, 24%, 300px);
  scroll-snap-align: start;
}
.em-home-page .em-offers__item[hidden] { display: none; }

/* card */

.em-home-page .em-offer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--em-bg);
  border: 1px solid rgba(28, 24, 19, .08);
  border-radius: 14px;
  transition: transform .4s var(--em-ease), box-shadow .4s var(--em-ease);
}
.em-home-page .em-offer:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(28, 24, 19, .13);
}

.em-home-page .em-offer__media {
  position: relative;
  display: block;
  /* Fixed ratio so the row cannot re-flow when images decode — the CLS
     source that cost us most on the tour hero. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--em-bg2);
}
.em-home-page .em-offer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--em-ease);
}
.em-home-page .em-offer:hover .em-offer__media img { transform: scale(1.05); }

.em-home-page .em-offer__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--em-bg2), rgba(192, 136, 58, .22));
}

.em-home-page .em-offer__type {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  padding: .28rem .7rem;
  font-family: var(--em-font-head);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--em-ink);
  background: rgba(244, 236, 224, .93);
  border-radius: 999px;
}

.em-home-page .em-offer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .45rem;
  padding: .95rem 1rem 1rem;
}

.em-home-page .em-offer__title {
  margin: 0;
  font-family: var(--em-font-head);
  font-size: 1.16rem;
  line-height: 1.25;
}
.em-home-page .em-offer__title a {
  color: var(--em-ink);
  text-decoration: none;
}
.em-home-page .em-offer__title a:hover { color: var(--em-gold-d); }

.em-home-page .em-offer__meta {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--em-gold-d);
}

.em-home-page .em-offer__desc {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--em-muted);
}

/* transport selector */

.em-home-page .em-offer__options {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .2rem;
}

.em-home-page .em-offer__option {
  padding: .3rem .6rem;
  font-family: var(--em-font-body);
  font-size: .78rem;
  color: var(--em-muted);
  background: transparent;
  border: 1px solid rgba(28, 24, 19, .18);
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s var(--em-ease), background .2s var(--em-ease),
              border-color .2s var(--em-ease);
}
.em-home-page .em-offer__option:hover { border-color: var(--em-gold); }
.em-home-page .em-offer__option.is-active {
  color: #fff;
  background: var(--em-teal);
  border-color: var(--em-teal);
}

.em-home-page .em-offer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding-top: .7rem;
}

.em-home-page .em-offer__price {
  font-family: var(--em-font-head);
  font-size: 1.02rem;
  color: var(--em-ink);
}

.em-home-page .em-offer__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--em-gold-d);
  text-decoration: none;
  border: 1px solid rgba(192, 136, 58, .45);
  border-radius: 50%;
  transition: color .25s var(--em-ease), background .25s var(--em-ease);
}
.em-home-page .em-offer__go:hover {
  color: #fff;
  background: var(--em-gold-d);
}

/* arrows */

.em-home-page .em-offers__arrow {
  position: absolute;
  top: 38%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--em-ink);
  background: var(--em-bg);
  border: 1px solid rgba(28, 24, 19, .12);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(28, 24, 19, .14);
  cursor: pointer;
  transition: opacity .25s var(--em-ease), background .25s var(--em-ease);
}
.em-home-page .em-offers__arrow--prev { inset-inline-start: -18px; }
.em-home-page .em-offers__arrow--next { inset-inline-end: -18px; }
.em-home-page .em-offers__arrow:hover { background: var(--em-gold); color: #fff; }
.em-home-page .em-offers__arrow[disabled] {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}
/* The arrow glyphs are direction-agnostic chevrons; flip them for RTL. */
[dir="rtl"] .em-home-page .em-offers__arrow svg { transform: scaleX(-1); }

.em-home-page .em-offers__empty {
  margin: 1.4rem 0 0;
  color: var(--em-muted);
  text-align: center;
}

/* ----------------------------------------------------------- must-haves */

.em-home-page .em-must {
  position: relative;
  color: #f3ece1;
  background: var(--em-dark);
  isolation: isolate;
}

.em-home-page .em-must__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(192, 136, 58, .22), transparent 60%),
    radial-gradient(90% 80% at 85% 100%, rgba(42, 125, 116, .2), transparent 62%);
}

.em-home-page .em-must__head {
  max-width: 46rem;
  margin-bottom: 2rem;
}
.em-home-page .em-must__head .em-title { color: #f6efe4; }
.em-home-page .em-must__head p {
  margin: .6rem 0 0;
  color: rgba(243, 236, 225, .74);
}

/* A static row: it wraps, it never scrolls sideways. */
.em-home-page .em-must__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-home-page .em-must-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  transition: transform .4s var(--em-ease), border-color .4s var(--em-ease),
              background .4s var(--em-ease);
}
.em-home-page .em-must-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .075);
  border-color: rgba(192, 136, 58, .5);
}

.em-home-page .em-must-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.em-home-page .em-must-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--em-ease);
}
.em-home-page .em-must-card:hover .em-must-card__media img { transform: scale(1.05); }

.em-home-page .em-must-card__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(192, 136, 58, .3), rgba(42, 125, 116, .25));
}

.em-home-page .em-must-card__badge {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: 10px;
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  padding: .26rem .66rem;
  font-family: var(--em-font-head);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #16130d;
  background: rgba(244, 236, 224, .92);
  border-radius: 999px;
}

.em-home-page .em-must-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1rem 1rem;
}

.em-home-page .em-must-card__title {
  font-family: var(--em-font-head);
  font-size: 1.14rem;
  line-height: 1.25;
  color: #f6efe4;
}

.em-home-page .em-must-card__desc {
  font-size: .87rem;
  line-height: 1.5;
  color: rgba(243, 236, 225, .66);
}

.em-home-page .em-must-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.em-home-page .em-must-card__dur {
  font-size: .8rem;
  color: rgba(243, 236, 225, .6);
}
.em-home-page .em-must-card__meta strong {
  font-family: var(--em-font-head);
  font-size: 1rem;
  color: var(--em-gold);
}

/* ---------------------------------------------------------- responsive  */

@media (max-width: 1100px) {
  .em-home-page .em-offers__arrow--prev { inset-inline-start: 2px; }
  .em-home-page .em-offers__arrow--next { inset-inline-end: 2px; }
}

@media (max-width: 900px) {
  .em-home-page .em-must__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-home-page .em-offers__item { flex-basis: clamp(240px, 46%, 290px); }
  .em-home-page .em-offers__head { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

@media (max-width: 620px) {
  .em-home-page .em-must__row { grid-template-columns: minmax(0, 1fr); }
  .em-home-page .em-offers__item { flex-basis: 82%; }
  /* Arrows overlap the cards badly at this width and the track already
     scrolls by touch, so hide them rather than shrink them. */
  .em-home-page .em-offers__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-offer,
  .em-home-page .em-offer__media img,
  .em-home-page .em-must-card,
  .em-home-page .em-must-card__media img {
    transition: none;
  }
  .em-home-page .em-offer:hover,
  .em-home-page .em-must-card:hover { transform: none; }
}


/* ── Must-have card: article wrapper (Phase 5H) ────────────────
   The card stopped being one big anchor so its CTAs could live inside it.
   These rules keep the previous look on the new elements and give the two
   links that ARE anchors their own hover, instead of the whole card. */
.em-must-card { display: flex; flex-direction: column; text-decoration: none; }
.em-must-card__media { display: block; text-decoration: none; }
.em-must-card__title { margin: 0; }
.em-must-card__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--em-ease), color .22s var(--em-ease);
}
.em-must-card:hover .em-must-card__title a { border-bottom-color: var(--em-gold); }
.em-must-card__title a:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }
.em-must-card__media:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }
.em-must-card__desc { margin: 0; }

/* The CTA pair sits between the description and the price row. */
.em-must-card .em-ctas--card,
.em-offer .em-ctas--card { margin-top: .8rem; }
.em-must-card__meta { margin-top: .8rem; }