.meridian-guides,
.meridian-guide { width: min(calc(100% - 64px), 1344px); margin: 0 auto; padding: 54px 0 90px; }
.guides-hero { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 50px; align-items: end; padding-bottom: 42px; border-bottom: var(--rule) solid var(--rule-color); }
.guides-hero > .m-eyebrow { grid-column: 1 / -1; margin-bottom: -28px; }
/* Heading and lede come from the shared page-hero contract in trips-meridian.css. */
.guides-hero dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0 0; border-top: var(--rule) solid var(--rule-color); border-bottom: var(--rule) solid var(--rule-color); }
.guides-hero dl div { padding: 17px 12px 17px 0; }
.guides-hero dt { color: var(--color-neutral-700); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.guides-hero dd { margin: 5px 0 0; font: 700 30px/1 var(--font-display); }
.guides-index { padding-top: 42px; }
.guides-index__head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 18px; }
.guides-index__head h2 { margin: 0; font: 700 42px/.95 var(--font-display); text-transform: var(--heading-case); }
.guides-index__head p { margin: 0; color: var(--color-neutral-700); }
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-card { display: grid; grid-template-rows: 230px 1fr auto; min-width: 0; border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--sheet); box-shadow: var(--shadow-sm); overflow: hidden; }
.guide-card.is-lead { grid-column: span 2; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: 1fr auto; }
.guide-card.is-lead .guide-card__media { grid-row: 1 / 3; min-height: 410px; }
.guide-card__media { display: grid; place-items: center; min-width: 0; color: var(--color-neutral-700); background: var(--tint); overflow: hidden; }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--map-filter); }
.guide-card__copy { min-width: 0; padding: 22px 22px 16px; overflow-wrap: anywhere; }
.guide-card__copy .m-eyebrow { margin: 0 0 9px; }
.guide-card__copy h2 { margin: 0; font: 700 28px/.96 var(--font-display); letter-spacing: var(--heading-track); text-transform: var(--heading-case); }
.guide-card__copy h2 a { color: var(--color-text); text-decoration: none; }
.guide-card__copy > p:not(.m-eyebrow) { margin: 11px 0; color: var(--color-neutral-700); line-height: 1.48; }
.guide-card__copy > div { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-card__copy > div span { padding: 5px 7px; background: var(--tint); font-size: 11px; }
.guide-card__open { display: block; padding: 14px 22px; border-top: var(--rule) solid var(--rule-color); color: var(--color-accent-700); font-weight: 800; text-decoration: none; }
.guides-empty { max-width: 800px; margin: 80px auto; padding: 42px; border: var(--rule) solid var(--rule-color); background: var(--sheet); text-align: center; }
.guides-empty h1,
.guides-empty h2 { margin: 0 0 12px; font: 700 48px/.95 var(--font-display); }

.guide-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(380px, 100%), .9fr); min-height: 500px; border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--sheet); box-shadow: var(--shadow-lg); overflow: hidden; }
.guide-hero__copy { align-self: center; padding: 44px 46px; }
.guide-hero__copy h1 { margin: 10px 0 18px; }
.guide-hero__copy > p:not(.m-eyebrow) { margin: 0; color: var(--color-neutral-800); font-size: 18px; line-height: 1.5; }
.guide-hero__facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--rule-soft); color: var(--color-neutral-700); }
.guide-hero__media { display: grid; place-items: center; min-height: 360px; color: var(--color-neutral-700); background: var(--tint); }
.guide-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--map-filter); }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 32px; }
.guide-days { border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--sheet); }
.guide-days__intro { padding: 30px 34px; border-bottom: var(--rule) solid var(--rule-color); }
.guide-days__intro h2 { margin: 0; font: 700 44px/.95 var(--font-display); text-transform: var(--heading-case); }
.guide-days__intro p { max-width: 720px; margin: 10px 0 0; color: var(--color-neutral-700); line-height: 1.5; }
.guide-day { padding: 28px 34px; border-bottom: var(--rule) solid var(--rule-color); }
.guide-day:last-child { border-bottom: 0; }
.guide-day > header { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; }
.guide-day > header > span { color: var(--color-accent-700); font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.guide-day header h2 { margin: 0; font: 700 32px/.95 var(--font-display); }
.guide-day header p { margin: 5px 0 0; color: var(--color-neutral-700); }
.guide-day ol { margin: 20px 0 0 94px; padding: 0; list-style: none; }
.guide-day li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.guide-day li > span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--color-bg); background: var(--color-accent); font-weight: 850; }
.guide-day h3 { margin: 0; font-size: 19px; }
.guide-day li p { margin: 6px 0 12px; color: var(--color-neutral-700); line-height: 1.5; }
.guide-day dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 10px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.guide-day dl div { padding: 9px 10px 9px 0; }
.guide-day dt { color: var(--color-neutral-700); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.guide-day dd { margin: 3px 0 0; font-size: 12px; line-height: 1.35; }
.guide-day a { color: var(--color-accent-700); font-size: 12px; font-weight: 750; }
.guide-stop__opening { display: block; margin: 0 0 8px; color: var(--color-neutral-700); font-size: 12px; line-height: 1.45; }
.guide-take { position: sticky; top: 90px; padding: 27px; border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--sheet); box-shadow: var(--shadow-md); }
.guide-take h2 { margin: 8px 0 12px; font: 700 36px/.95 var(--font-display); text-transform: var(--heading-case); }
.guide-take > p:not(.m-eyebrow) { color: var(--color-neutral-700); line-height: 1.5; }
.guide-take .m-btn { width: 100%; margin-top: 10px; text-align: center; }
.guide-take small { display: block; margin-top: 13px; color: var(--color-neutral-700); line-height: 1.45; }

@media (max-width: 940px) {
  .guides-hero,
  .guide-hero,
  .guide-layout { grid-template-columns: 1fr; }
  .guides-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guide-card.is-lead { grid-column: 1 / -1; }
  .guide-take { position: static; }
}
@media (max-width: 680px) {
  /* Two guide cards do not fit a phone: at 320px the pair forced 51px of
     horizontal scroll on the whole document. */
  .guides-grid { grid-template-columns: minmax(0, 1fr); }
  .meridian-guides,
  .meridian-guide { width: 100%; padding: 34px 16px 80px; }
  .guides-hero { display: block; }
  .guides-hero > p { margin-top: 20px; }
  .guides-hero dl { margin-top: 24px; }
  .guides-grid { grid-template-columns: 1fr; }
  /* A bare 1fr keeps an implicit auto minimum, so the track still refuses to
     shrink below the card's content and pushed 51px of scroll onto the whole
     document at 320px. minmax(0, 1fr) is the track that actually shrinks. */
  .guide-card.is-lead { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 230px 1fr auto; }
  .guide-card.is-lead .guide-card__media { grid-row: auto; min-height: 0; }
  .guide-hero__copy { padding: 30px 18px; }
  .guide-hero__copy h1 { font-size: 54px; }
  .guide-hero__media { min-height: 240px; }
  .guide-days__intro,
  .guide-day { padding: 24px 16px; }
  .guide-day > header { grid-template-columns: 1fr; gap: 7px; }
  .guide-day ol { margin-left: 0; }
  .guide-day dl { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .guides-hero > .m-eyebrow { margin: 0 0 14px; }
  .guides-hero h1 { font-size: clamp(2.5rem, 12vw, 3.375rem); line-height: .96; }
  .guides-hero > p:not(.m-eyebrow) { margin-top: 20px; }
}

/* ------------------------------------------------------------------
   The guides index (.gx).

   Rewritten when the index stopped being a wall of every published
   itinerary and became a filtered directory. The single-guide styles
   above (.guide-hero, .guide-day, .guide-take) are unchanged and still
   belong to /guide.php.

   Same visual language as search, place and destination pages: nothing
   here introduces a colour or a typeface the site was not already using.
   ------------------------------------------------------------------ */

.guides-page {
  --gx-ink: #f6f4fb;
  --gx-body: rgba(226, 224, 240, .84);
  --gx-quiet: rgba(188, 186, 214, .78);
  --gx-rule: rgba(176, 187, 232, .18);
  --gx-edge: rgba(110, 122, 188, .26);
  --gx-accent: #a78aff;
  --gx-accent-soft: #cdbdff;
  --gx-panel: rgba(13, 25, 56, .6);
  --gx-panel-solid: #0d1938;
}

.gx {
  margin: 0 24px;
  padding: 0 0 44px;
  color: var(--gx-body);
  background: var(--gx-panel-solid);
}

/* ------------------------------------------------------------- hero */

.gx-hero {
  padding: 54px 60px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: center;
  background: radial-gradient(circle at 12% 0, rgba(103, 78, 214, .28), transparent 50%), var(--gx-panel-solid);
}

.gx-hero__copy h1 {
  margin: 8px 0 0;
  color: #fff;
  font: 700 clamp(36px, 4.6vw, 62px)/1.02 "Playfair Display", Georgia, serif;
  letter-spacing: -.03em;
  text-transform: none;
}

.gx-hero__copy > p {
  max-width: 56ch;
  margin: 18px 0 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
}

.gx-hero__actions { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

.gx-hero__stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--gx-edge);
  border-radius: 14px;
  overflow: hidden;
  background: var(--gx-edge);
}

.gx-hero__stats > div { padding: 20px; background: rgba(9, 18, 42, .72); }

.gx-hero__stats dt {
  margin-bottom: 6px;
  color: var(--gx-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.gx-hero__stats dd {
  margin: 0;
  color: #fff;
  font: 700 clamp(24px, 2.4vw, 34px)/1 "Playfair Display", Georgia, serif;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- how it works */

.gx-how { margin: 0 60px; padding: 26px 0 0; border-top: 1px solid var(--gx-rule); }

.gx-how ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.gx-how li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: start; }

.gx-how li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(144, 113, 255, .5);
  border-radius: 9px;
  color: var(--gx-accent-soft);
  font-size: 13px;
  font-weight: 800;
  background: rgba(84, 60, 184, .22);
}

.gx-how strong { display: block; margin-bottom: 4px; color: var(--gx-ink); font-size: 15px; }
.gx-how p { margin: 0; color: rgba(218, 217, 233, .76); font-size: 13.5px; line-height: 1.5; }

/* ---------------------------------------------------------- filters */

.gx-filters {
  margin: 30px 60px 0;
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--gx-edge);
  border-radius: 14px;
  background: var(--gx-panel);
  scroll-margin-top: 84px;
}

.gx-filters__search {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--gx-edge);
  border-radius: 10px;
  background: rgba(9, 18, 42, .72);
}

.gx-filters__search:focus-within { border-color: rgba(144, 113, 255, .7); }
.gx-filters__search > span { display: grid; place-items: center; color: var(--gx-accent-soft); }
.gx-filters__search svg { width: 18px; height: 18px; }

.gx-filters__search input {
  min-width: 0;
  padding: 13px 14px 13px 0;
  border: 0;
  color: var(--gx-ink);
  font: inherit;
  font-size: 15px;
  background: transparent;
  appearance: none;
}

.gx-filters__search input::placeholder { color: rgba(200, 198, 224, .58); }
.gx-filters__search input:focus { outline: none; }

.gx-filters__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
}

.gx-filters__row label { display: grid; gap: 5px; min-width: 0; }

.gx-filters__row label > span {
  color: var(--gx-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gx-filters__row select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--gx-edge);
  border-radius: 9px;
  color: var(--gx-ink);
  font: inherit;
  font-size: 14px;
  background: rgba(9, 18, 42, .72);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(205, 189, 255, .8) 50%), linear-gradient(135deg, rgba(205, 189, 255, .8) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.gx-filters__row select:focus-visible { border-color: rgba(144, 113, 255, .7); outline: none; }
.gx-filters__row select option { color: #111; background: #fff; }

.gx-filters__clear { align-self: center; padding: 11px 6px; color: var(--gx-quiet); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.gx-filters__clear:hover { color: var(--gx-accent-soft); }

.gx-count {
  margin: 18px 60px 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gx-rule);
  color: var(--gx-quiet);
  font-size: 13.5px;
}

.gx-count strong { color: var(--gx-ink); }

/* ------------------------------------------------------------ cards */

.gx-index { margin: 0 60px; padding: 24px 0 0; }

.gx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gx-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  border: 1px solid var(--gx-edge);
  border-radius: 14px;
  overflow: hidden;
  background: var(--gx-panel);
  transition: border-color .16s ease, transform .16s ease;
}

.gx-card:hover { border-color: rgba(144, 113, 255, .55); transform: translateY(-2px); }

.gx-card.is-lead { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.gx-card.is-lead .gx-card__media { grid-row: 1 / 3; aspect-ratio: auto; min-height: 320px; }
.gx-card.is-lead .gx-card__copy { align-content: center; padding: 24px 24px 18px; }
.gx-card.is-lead .gx-card__copy h2 { font-size: clamp(24px, 2.2vw, 32px); }

.gx-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(9, 18, 42, .78);
}

.gx-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; }

.gx-card__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 25%, rgba(103, 78, 214, .32), transparent 60%), rgba(9, 18, 42, .8);
}

.gx-card__fallback svg { width: 34px; height: 34px; color: rgba(199, 175, 255, .8); }

.gx-card__days {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(6, 12, 28, .78);
  backdrop-filter: blur(4px);
}

.gx-card__copy { min-width: 0; padding: 18px 18px 12px; overflow-wrap: anywhere; }
.gx-card__copy .m-eyebrow { margin: 0 0 8px; }

.gx-card__copy h2 {
  margin: 0;
  font: 700 21px/1.14 "Playfair Display", Georgia, serif;
  letter-spacing: -.015em;
  text-transform: none;
}

.gx-card__copy h2 a { color: var(--gx-ink); text-decoration: none; }
.gx-card__copy h2 a:hover { color: var(--gx-accent-soft); }
.gx-card__copy > p { margin: 10px 0 0; color: rgba(218, 217, 233, .78); font-size: 13.5px; line-height: 1.52; }

.gx-card__facts {
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gx-card__facts li {
  padding: 4px 9px;
  border: 1px solid var(--gx-edge);
  border-radius: 6px;
  color: var(--gx-quiet);
  font-size: 11px;
  background: rgba(9, 18, 42, .5);
}

.gx-card__actions {
  padding: 12px 18px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gx-rule);
}

.gx-card__open { color: var(--gx-accent-soft); font-size: 13.5px; font-weight: 800; text-decoration: none; }
.gx-card__open:hover { text-decoration: underline; }
.gx-card__copy-link { color: var(--gx-quiet); font-size: 13px; text-decoration: none; }
.gx-card__copy-link:hover { color: #fff; text-decoration: underline; }

/* ----------------------------------------------------------- pager */

.gx-pager {
  margin: 30px 60px 0;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--gx-rule);
}

.gx-pager ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }

.gx-pager :is(a, span) {
  min-width: 36px;
  padding: 8px 11px;
  display: inline-block;
  border: 1px solid var(--gx-edge);
  border-radius: 8px;
  color: rgba(233, 231, 245, .86);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
  background: rgba(9, 18, 42, .5);
}

.gx-pager a:hover { border-color: rgba(144, 113, 255, .6); color: #fff; }
.gx-pager .is-active { border-color: rgba(144, 113, 255, .72); color: #fff; background: rgba(84, 60, 184, .34); }
.gx-pager .is-off { color: rgba(188, 186, 214, .4); border-color: rgba(110, 122, 188, .14); }
.gx-pager li span:not(.is-active) { border: 0; background: none; color: var(--gx-quiet); }
.gx-pager__step { font-weight: 700; }

/* ----------------------------------------------------------- empty */

.gx-empty {
  margin: 30px 60px 0;
  padding: 46px 30px 44px;
  text-align: center;
  border: 1px solid var(--gx-edge);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0, rgba(84, 60, 184, .2), transparent 60%), var(--gx-panel);
}

.gx-empty h2 {
  max-width: 24ch;
  margin: 0 auto;
  color: #fff;
  font: 700 clamp(24px, 2.6vw, 36px)/1.15 "Playfair Display", Georgia, serif;
  letter-spacing: -.02em;
  text-transform: none;
}

.gx-empty p { max-width: 58ch; margin: 14px auto 0; line-height: 1.6; }
.gx-empty__actions { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.gx :is(a, button, input, select):focus-visible { outline: 2px solid var(--gx-accent-soft); outline-offset: 3px; }

/* ---------------------------------------------------------- narrow */

@media (max-width: 1140px) {
  .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-card.is-lead { grid-column: span 2; }
  .gx-filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-filters__row > .m-btn { grid-column: 1 / -1; justify-content: center; }
  .gx-filters__clear { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 900px) {
  .gx-hero { grid-template-columns: 1fr; gap: 28px; padding: 38px 28px 30px; }
  .gx-how,
  .gx-filters,
  .gx-count,
  .gx-index,
  .gx-pager,
  .gx-empty { margin-left: 28px; margin-right: 28px; }
  .gx-card.is-lead { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .gx-card.is-lead .gx-card__media { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
  .gx { margin: 0 8px; }
  .gx-hero { padding: 28px 16px 24px; }
  .gx-hero__stats { grid-template-columns: 1fr 1fr; }
  .gx-how,
  .gx-filters,
  .gx-count,
  .gx-index,
  .gx-pager,
  .gx-empty { margin-left: 16px; margin-right: 16px; }
  .gx-grid { grid-template-columns: 1fr; }
  .gx-card.is-lead { grid-column: auto; }
  .gx-hero__actions .m-btn { width: 100%; justify-content: center; }
  .gx-empty { padding: 32px 18px; }
}