/* ==========================================================================
   Choose your journey — the itinerary collection front page
   Layered on top of styles.css, which already carries the pieces every page
   of the site shares: header, marquee, newsletter and footer.
   ========================================================================== */

/* ---- hero ---- */
.chero {
  position: relative; height: 100svh; min-height: 640px;
  overflow: hidden; background: var(--egw-night, #0d1512);
}
.chero__media { position: absolute; inset: 0; will-change: transform; }
.chero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: kenburns 36s ease-in-out infinite alternate;
}
.chero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 16, 13, 0.45) 0%, rgba(10, 16, 13, 0.15) 42%, rgba(10, 16, 13, 0.58) 100%);
}
.chero__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: #fff;
  padding: 0 clamp(16px, 4vw, 48px);
  will-change: transform, opacity;
}
.chero__frame { position: relative; padding: clamp(28px, 5vw, 64px) clamp(24px, 6vw, 88px); }
.chero__corner {
  position: absolute; width: 18px; height: 18px;
  animation: fadeIn 1s 1.3s both;
}
.chero__corner--tl { top: 0; left: 0; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.chero__corner--tr { top: 0; right: 0; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.chero__corner--bl { bottom: 0; left: 0; border-bottom: 2px solid #fff; border-left: 2px solid #fff; }
.chero__corner--br { bottom: 0; right: 0; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
.chero__eyebrow {
  font: 700 clamp(11px, 1.3vw, 13px)/1.4 var(--font-body);
  letter-spacing: 0.22em; animation: fadeIn 1s 0.25s both;
}
.chero__title {
  margin: clamp(14px, 2vw, 22px) 0 clamp(12px, 1.6vw, 20px);
  font: 600 clamp(2.8rem, 9vw, 7.4rem)/1.02 var(--font-display);
  letter-spacing: -0.01em;
}
.chero__line { display: block; overflow: hidden; padding: 0 0.15em 0.06em; margin: 0 -0.15em -0.06em; }
.chero__line--low { padding-bottom: 0.26em; margin-bottom: -0.26em; }
.chero__line > span { display: block; animation: riseUp 1.15s cubic-bezier(0.22, 0.61, 0.21, 1) 0.5s both; }
.chero__line--low > span { font-style: italic; animation-delay: 0.68s; }
.chero__lede {
  margin: 0 auto; max-width: 560px;
  font: 500 italic clamp(1.05rem, 2vw, 1.4rem)/1.5 var(--font-display);
  animation: fadeIn 1.1s 1.05s both;
}
.chero__meta {
  margin-top: clamp(18px, 2.6vw, 30px);
  display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap;
  font: 700 clamp(10px, 1.2vw, 12px)/1.4 var(--font-body);
  letter-spacing: 0.18em; animation: fadeIn 1.1s 1.2s both;
}
.chero__meta span[aria-hidden] { opacity: 0.55; }
.chero__credit {
  position: absolute; bottom: 22px; left: clamp(18px, 4vw, 44px);
  color: rgba(255, 255, 255, 0.75);
  font: 500 italic 13px/1.4 var(--font-display);
  animation: fadeIn 1s 1.7s both;
}

/* ---- the collection ---- */
.coll {
  padding: clamp(72px, 10vw, 150px) var(--section-pad-x) clamp(56px, 8vw, 110px);
  max-width: var(--container-max); margin: 0 auto; box-sizing: border-box;
}
.coll__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 0 0 clamp(24px, 3vw, 38px);
}
.coll__title {
  margin: 0; max-width: 760px;
  font: 600 clamp(1.9rem, 4vw, 3.3rem)/1.12 var(--font-display);
}
.coll__lede {
  margin: 0 0 clamp(20px, 2.6vw, 32px); max-width: 560px;
  font: 500 italic clamp(1.05rem, 1.7vw, 1.3rem)/1.5 var(--font-display);
  color: var(--color-text-muted, #43483f);
  transition: opacity 260ms ease, filter 260ms ease, transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- filter bar ---- */
.filters {
  display: flex; flex-wrap: wrap; gap: 18px 44px;
  border-top: 1px solid var(--color-border, #d8d3c5);
  border-bottom: 1px solid var(--color-border, #d8d3c5);
  padding: 16px 0; margin: 0 0 clamp(28px, 4vw, 48px);
}
.filters__group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filters__label {
  font: 700 10.5px/1.4 var(--font-body);
  letter-spacing: 0.16em; color: #8b8f84;
}
.filters__set { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font: 700 11px/1.4 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(48, 78, 55, 0.4);
  background: transparent; color: var(--egw-forest-900);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease;
}
.pill:active { transform: scale(0.97); }
.pill[aria-pressed="true"] {
  background: var(--egw-forest-900); border-color: var(--egw-forest-900);
  color: var(--egw-cream-050);
}
.pill:disabled { opacity: 0.35; pointer-events: none; }

/* ---- card grid ---- */
.cards-wrap { position: relative; }
.coll__fx {
  position: absolute; inset: -8px; pointer-events: none; z-index: 5;
  overflow: hidden; opacity: 0; transition: opacity 500ms ease;
  border-radius: var(--radius-sm, 2px);
}
.coll__fx canvas { width: 100%; height: 100%; display: block; }

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.card {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-sm, 2px); aspect-ratio: 4 / 5;
  text-decoration: none; color: #fff;
}
.card--flag { box-shadow: inset 0 0 0 2px var(--egw-sage-400); }

/* Hover: the card text sits on a photo, so it must never take the global
   a:hover green - it would vanish. It stays white, the title lifts to pale
   sage, and the scrim deepens so everything reads harder, not softer. */
.card:link, .card:visited, .card:hover, .card:active, .card:focus { color: #fff; }
.card__title { transition: color 0.3s ease; }
.card:hover .card__title,
.card:focus-visible .card__title { color: var(--egw-sage-200); }
.card:hover .card__scrim,
.card:focus-visible .card__scrim {
  background: linear-gradient(180deg,
    rgba(10, 16, 13, 0.28) 0%, rgba(10, 16, 13, 0.18) 34%, rgba(10, 16, 13, 0.88) 100%);
}
.card__scrim { transition: background 0.4s ease; }
.card:focus-visible {
  outline: 3px solid var(--egw-sage-400); outline-offset: 3px;
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform;
}
.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 16, 13, 0.12) 0%, rgba(10, 16, 13, 0) 40%, rgba(10, 16, 13, 0.78) 100%);
}
.card__badge {
  position: absolute; top: 12px; right: 12px;
  font: 700 10px/1 var(--font-body); letter-spacing: 0.12em;
  background: rgba(244, 242, 236, 0.94); color: var(--egw-forest-900);
  padding: 7px 10px; border-radius: var(--radius-sm, 2px); white-space: nowrap;
}
.card__badge--flag { background: var(--egw-forest-900); color: var(--egw-cream-050); }
.card__body { position: absolute; left: 16px; right: 16px; bottom: 15px; }
.card__kicker {
  font: 600 italic 13px/1 var(--font-display);
  color: var(--egw-sage-400); margin: 0 0 8px;
}
.card__title {
  font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.2 var(--font-display); margin: 0 0 5px;
}
.card__copy { font: 500 12.5px/1.5 var(--font-body); opacity: 0.85; }

/* Journeys that are written but not published yet: same card, no link, and
   an honest label instead of a destination. */
.card--soon { cursor: default; }
.card--soon img { filter: saturate(0.82); }
.card--soon .card__scrim { background: linear-gradient(180deg,
    rgba(10, 16, 13, 0.3) 0%, rgba(10, 16, 13, 0.2) 40%, rgba(10, 16, 13, 0.82) 100%); }
.card__soon {
  position: absolute; top: 12px; left: 12px;
  font: 700 9.5px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 6px 9px; border-radius: var(--radius-sm, 2px);
}

.coll__empty {
  display: none;
  border-top: 1px solid var(--color-border, #d8d3c5);
  border-bottom: 1px solid var(--color-border, #d8d3c5);
  padding: clamp(32px, 5vw, 64px) 0; text-align: center; margin-top: 8px;
}
.coll__empty p {
  margin: 0 0 18px;
  font: 500 italic clamp(1.1rem, 2vw, 1.4rem)/1.5 var(--font-display);
  color: var(--color-text-muted, #43483f);
}
.btn-solid {
  font: 700 11px/1.4 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 20px; border-radius: var(--radius-sm, 2px);
  border: 1px solid var(--egw-forest-900);
  background: var(--egw-forest-900); color: var(--egw-cream-050);
  cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-solid:active { transform: scale(0.97); }

/* ---- featured journey ---- */
.featured { position: relative; overflow: hidden; }
.featured__ghost {
  position: absolute; top: 0; right: -2vw;
  font: 600 clamp(260px, 42vw, 560px)/0.72 var(--font-display);
  color: transparent; -webkit-text-stroke: 1px rgba(244, 242, 236, 0.14);
  pointer-events: none; user-select: none;
}
.featured__inner {
  position: relative;
  padding: clamp(64px, 9vw, 130px) var(--section-pad-x);
  max-width: var(--container-max); margin: 0 auto; box-sizing: border-box;
}
.featured__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.featured__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--font-body); letter-spacing: 0.18em;
  color: #0d1512; background: var(--egw-sage-400);
  padding: 8px 13px; border-radius: var(--radius-sm, 2px); margin: 0 0 22px;
}
.featured__title {
  margin: 0 0 14px;
  font: 600 clamp(2.2rem, 4.6vw, 4rem)/1.05 var(--font-display);
}
.featured__title em { font-style: italic; }
.featured__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font: 700 11px/1.4 var(--font-body); letter-spacing: 0.16em;
  color: rgba(244, 242, 236, 0.85); margin: 0 0 22px;
}
.featured__meta span[aria-hidden] { opacity: 0.5; }
.featured__copy {
  margin: 0 0 22px; max-width: 480px;
  font: 500 15.5px/1.75 var(--font-body); color: rgba(244, 242, 236, 0.88);
}
.featured__route {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  font: 700 10.5px/1.5 var(--font-body); letter-spacing: 0.14em;
  color: var(--egw-sage-400);
  border-top: 1px solid rgba(244, 242, 236, 0.2);
  padding: 14px 0; margin: 0 0 26px;
}
.featured__route span[aria-hidden] { opacity: 0.6; }
.btn-light {
  display: inline-block;
  font: 700 11px/1.4 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--egw-forest-900); background: var(--egw-cream-050);
  padding: 14px 24px; border-radius: var(--radius-sm, 2px);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 200ms ease;
}
.btn-light:hover { background: #fff; color: var(--egw-forest-900); }
.btn-light:active { transform: scale(0.97); }
.featured__fig { margin: 0; position: relative; }
.featured__frame { overflow: hidden; border-radius: var(--radius-sm, 2px); aspect-ratio: 4 / 3; position: relative; }
.featured__frame img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; }
.featured__cap {
  margin-top: 12px;
  font: 500 italic 14px/1.5 var(--font-display); color: rgba(244, 242, 236, 0.85);
}
.featured__cap span {
  display: block;
  font: 500 11.5px/1.6 var(--font-body); letter-spacing: 0.04em; opacity: 0.7;
}

/* ---- full-bleed caption break ---- */
.cbreak {
  position: relative; height: min(74vh, 720px);
  overflow: hidden; display: flex; align-items: flex-end;
}
.cbreak img { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; }
.cbreak__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 13, 0) 45%, rgba(10, 16, 13, 0.55) 100%);
}
.cbreak__body {
  position: relative;
  padding: clamp(28px, 5vw, 64px) var(--section-pad-x);
  color: #fff; max-width: 760px;
}
.cbreak__quote {
  margin: 0 0 8px;
  font: 500 italic clamp(1.3rem, 2.6vw, 1.9rem)/1.4 var(--font-display);
}
.cbreak__credit { font: 500 12px/1.5 var(--font-body); letter-spacing: 0.06em; opacity: 0.8; }

/* ---- how these itineraries work ---- */
.how { padding: clamp(56px, 8vw, 110px) var(--section-pad-x); max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; }
.how__title {
  margin: 0 0 clamp(28px, 4vw, 48px); max-width: 680px;
  font: 600 clamp(1.6rem, 3vw, 2.5rem)/1.14 var(--font-display);
}
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.how__rule { height: 1.5px; background: var(--egw-sage-400); margin: 0 0 16px; }
.how h3 { margin: 0 0 10px; font: 600 clamp(1.15rem, 1.8vw, 1.4rem)/1.25 var(--font-display); }
.how p { margin: 0; font: 500 15px/1.65 var(--font-body); color: var(--color-text-muted, #43483f); }