/* MWA-DESIGN-05 — the public Places discovery page (discover.php).
   -------------------------------------------------------------------
   Card, chip and media patterns follow assets/trips-place-info.css and the
   country page's place cards, so a place looks the same wherever it is
   shown. Heading size and case come from the shared page-hero contract in
   trips-meridian.css.

   Colours are tokens throughout, so all four appearances own their own
   palette. The hero is the single exception: it sits on a photograph and
   fixes its own contrast, exactly as the homepage hero does. */

/* Several panels here are flex containers that start hidden and are revealed by
   script. `display: flex` beats the browser's own `[hidden]` rule, so an empty
   Recent searches panel would sit there showing nothing but its own heading. */
.disc [hidden] { display: none !important; }

.disc {
  width: min(1320px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 72px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Hero ------------------------------------------------------ */

.disc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
  gap: 32px;
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-card);
  /* The hero's own dark ground, not only the photograph's. The copy is fixed
     light, so if the image 404s the text must still land on something dark —
     otherwise it disappears in the three light appearances. */
  background: #0a1526;
}
.disc-hero__media { position: absolute; z-index: -2; inset: 0; background: #10203a; }
.disc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.disc-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 14, 32, .95) 0%, rgba(7, 17, 37, .86) 40%, rgba(6, 15, 32, .5) 100%),
    linear-gradient(0deg, rgba(3, 11, 25, .74) 0%, transparent 52%);
}
.disc-hero__copy { max-width: 680px; color: #f2f4fb; }
.disc-hero .m-eyebrow { color: #f2c96f; }
.disc-hero h1 {
  margin: 10px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 5vw, 62px);
  line-height: .94;
  letter-spacing: -.035em;
}
.disc-hero__lead { max-width: 56ch; margin: 12px 0 0; color: rgba(238, 240, 250, .84); font-size: 15px; line-height: 1.55; }

.disc-search {
  width: min(560px, 100%);
  margin-top: 20px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border: 1px solid rgba(163, 180, 224, .55);
  border-radius: 10px;
  background: rgba(8, 18, 37, .68);
  backdrop-filter: blur(12px);
}
.disc-search > svg { width: 18px; height: 18px; color: rgba(226, 230, 244, .68); }
.disc-search input { min-width: 0; padding: 8px 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; font-size: 14px; }
.disc-search input::placeholder { color: rgba(226, 230, 244, .55); }
.disc-search .m-btn { min-height: 36px; padding-inline: 18px; border-radius: 7px; color: #fff; border-color: #8e63ff; background: linear-gradient(135deg, #a788ff, #7041f4); font-size: 12px; }

/* Type-ahead. It hangs below the field, so it uses the page's own opaque
   ground rather than the hero's translucent one — a suggestion list you can
   read the photograph through is not a suggestion list. */
.disc-search { position: relative; }
.disc-suggest {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--color-neutral-300);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.disc-suggest[hidden] { display: none; }
.disc-suggest__kind {
  margin: 6px 0 3px;
  padding: 0 8px;
  color: var(--color-neutral-800);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.disc-suggest__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border-radius: 6px;
  color: var(--color-text);
  text-decoration: none;
}
.disc-suggest__item b { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.disc-suggest__item small { flex: 0 0 auto; color: var(--color-neutral-800); font-size: 11px; }
.disc-suggest__item.is-active,
.disc-suggest__item:hover { background: var(--color-accent); }
.disc-suggest__item.is-active b,
.disc-suggest__item.is-active small,
.disc-suggest__item:hover b,
.disc-suggest__item:hover small { color: #fff; }

.disc-stats { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 30px; }
.disc-stats span { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; color: #f2f4fb; }
.disc-stats i { grid-row: 1 / 3; display: grid; place-items: center; color: #c3b1ff; }
.disc-stats svg { width: 20px; height: 20px; }
.disc-stats b { font-size: 20px; font-weight: 800; line-height: 1.1; }
.disc-stats small { color: rgba(226, 230, 244, .68); font-size: 11px; }

.disc-popular {
  padding: 16px;
  border: 1px solid rgba(160, 178, 222, .42);
  border-radius: 12px;
  color: #eef0fa;
  background: rgba(8, 18, 37, .68);
  backdrop-filter: blur(14px);
}
.disc-popular h2 {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.disc-popular h2 a { color: #c3b1ff; font-size: 10px; letter-spacing: .04em; text-transform: none; }
.disc-popular ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.disc-popular li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.disc-popular li a:hover { background: rgba(255, 255, 255, .08); }
.disc-popular__media { height: 40px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .09); }
.disc-popular__media img { width: 100%; height: 100%; object-fit: cover; }
.disc-popular span span,
.disc-popular li a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.disc-popular b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.disc-popular small { color: rgba(226, 230, 244, .66); font-size: 11px; }
.disc-popular em { color: #c3b1ff; font-size: 10px; font-style: normal; white-space: nowrap; }
.disc-popular .disc-empty { color: rgba(226, 230, 244, .74); }

/* ---------- Filter bar ------------------------------------------------ */

.disc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  padding: 14px 18px;
  border: var(--rule) solid var(--rule-color);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.disc-toolbar__views { display: flex; align-items: center; gap: 4px; }
.disc-toolbar__views > span { margin-right: 6px; color: var(--color-neutral-700); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.disc-toolbar__views a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  color: var(--color-neutral-700);
  font-size: 12px;
  text-decoration: none;
}
.disc-toolbar__views a:hover { background: var(--tint); }
.disc-toolbar__views a.is-active { border-color: var(--color-accent); color: var(--color-accent-700); }
.disc-toolbar__views svg { width: 15px; height: 15px; }

.disc-field { min-width: 0; flex: 1 1 168px; display: flex; flex-direction: column; gap: 5px; }
.disc-field > span { color: var(--color-neutral-700); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.disc-field select {
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  /* An opaque ground per appearance. --color-neutral-300 is the page ground in
     all four; --color-bg is NOT, because Night Glass uses it for ink. */
  background-color: var(--color-neutral-300);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 16px center, right 11px center;
  background-repeat: no-repeat;
  font: inherit;
  font-size: 13px;
  appearance: none;
}
/* The open dropdown is drawn by the browser, not by this stylesheet. It paints
   its own ground — white — but inherits only the control's text colour, which
   on Night Glass is near-white, so the list came out white on white. Stating
   both colours fixes the list itself; color-scheme tells the browser which
   ground to paint, which also covers its scrollbar and the highlight row. */
.disc-field option {
  color: var(--color-text);
  background-color: var(--color-neutral-300);
}
html[data-theme='nightglass'] .disc { color-scheme: dark; }
.disc-apply { min-height: 40px; gap: 8px; font-size: 12px; }
.disc-apply b { padding: 1px 7px; border-radius: 99px; color: var(--color-bg); background: var(--color-accent); font-size: 11px; }
.disc-reset { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--color-neutral-700); font-size: 12px; text-decoration: none; }
.disc-reset:hover { color: var(--color-text); }
.disc-reset.is-inert { opacity: .45; pointer-events: none; }
.disc-reset svg { width: 15px; height: 15px; }

/* ---------- Category tiles -------------------------------------------- */

.disc-tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.disc-tiles a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--color-surface);
  text-decoration: none;
}
.disc-tiles a:hover { border-color: var(--color-accent); background: var(--tint); }
.disc-tiles a.is-active { border-color: var(--color-accent); background: var(--color-accent-200); }
.disc-tiles i { flex: 0 0 22px; display: grid; place-items: center; color: var(--color-accent-700); }
.disc-tiles svg { width: 22px; height: 22px; }
.disc-tiles span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.disc-tiles b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.disc-tiles small { color: var(--color-neutral-800); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------- Body layout ------------------------------------------------ */

.disc-body { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px; align-items: start; }
.disc-results { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.disc-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.disc-results__head p { margin: 0; color: var(--color-neutral-800); font-size: 13px; }

.disc-pager { display: flex; align-items: center; gap: 4px; }
.disc-pager a,
.disc-pager span {
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  color: var(--color-neutral-800);
  font-size: 12px;
  text-decoration: none;
}
.disc-pager span { border-color: transparent; }
.disc-pager a:hover { border-color: var(--color-accent); color: var(--color-text); }
.disc-pager a.is-active { border-color: var(--color-accent); color: var(--color-bg); background: var(--color-accent); }
.disc-pager a.is-inert { opacity: .4; pointer-events: none; }

.disc-empty { margin: 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.55; }
.disc-empty--large { padding: 40px 24px; border: 1px dashed var(--rule-soft); border-radius: var(--radius-card); font-size: 15px; text-align: center; }
.disc-empty a { color: var(--color-accent-700); }

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

.disc-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.disc-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.disc-card:hover { border-color: var(--color-accent); }
.disc-card__media { position: relative; height: 148px; display: block; overflow: hidden; background: var(--tint); }
.disc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.disc-card__drawn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--color-neutral-600); }
.disc-card__drawn svg { width: 26px; height: 26px; }
.disc-card__drawn em { font-size: 11px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

.disc-card__save {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(160, 178, 222, .5);
  border-radius: 8px;
  color: #f2f4fb;
  background: rgba(8, 18, 37, .62);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.disc-card__save svg { width: 16px; height: 16px; }
.disc-card__save[aria-pressed="true"] { border-color: var(--color-accent); color: #fff; background: var(--color-accent); }
.disc-card__save[aria-pressed="true"] svg { fill: currentColor; }
.disc-card__save:disabled { opacity: .55; cursor: progress; }

.disc-card__body { display: flex; flex-direction: column; gap: 7px; padding: 13px; }
.disc-card__body h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.disc-card__body h3 a { color: var(--color-text); text-decoration: none; }
.disc-card__body h3 a:hover { text-decoration: underline; }
.disc-card__where { margin: 0; display: flex; align-items: center; gap: 5px; color: var(--color-neutral-700); font-size: 12px; }
.disc-card__where svg { flex: 0 0 13px; width: 13px; height: 13px; }
.disc-card__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.disc-chip { padding: 3px 8px; border: 1px solid var(--rule-soft); border-radius: 99px; color: var(--color-neutral-700); font-size: 10px; letter-spacing: .04em; }
.disc-time { display: inline-flex; align-items: center; gap: 4px; color: var(--color-neutral-800); font-size: 10px; }
.disc-time svg { width: 12px; height: 12px; }
.disc-card__summary {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--color-neutral-700);
  font-size: 12px;
  line-height: 1.5;
}

.disc-card__actions { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 7px; }
.disc-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: transparent;
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
}
.disc-btn:hover { border-color: var(--color-accent); }
.disc-btn:disabled { opacity: .55; cursor: progress; }
.disc-btn svg { width: 14px; height: 14px; }
.disc-btn--primary { flex: 1; border-color: var(--color-accent); color: var(--color-accent-700); }
.disc-btn--icon { width: 34px; padding: 0; }

.disc-card__menu { position: relative; }
.disc-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  background: var(--color-neutral-300);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.disc-menu[hidden] { display: none; }
.disc-menu > * { padding: 8px 10px; border: 0; border-radius: 5px; color: var(--color-text); background: transparent; font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.disc-menu > *:hover { background: var(--tint); }

.disc-card__status:empty { display: none; }
.disc-card__status { margin: 2px 0 0; color: var(--role-ok); font-size: 11px; line-height: 1.45; }
.disc-card__status.is-error { color: var(--role-danger); }
.disc-card__status a { color: var(--color-accent-700); }

.disc-days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.disc-days button { min-width: 30px; min-height: 30px; padding: 0 7px; border: 1px solid var(--rule-soft); border-radius: var(--radius-ctl); color: var(--color-text); background: transparent; font: 600 11px/1 var(--font-body); cursor: pointer; }
.disc-days button:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* List view: the same card, laid on its side. */
.disc-grid--list { grid-template-columns: minmax(0, 1fr); }
.disc-grid--list .disc-card { flex-direction: row; }
.disc-grid--list .disc-card__media { flex: 0 0 200px; height: auto; min-height: 150px; }
.disc-grid--list .disc-card__body { flex: 1; }
.disc-grid--list .disc-card__summary { -webkit-line-clamp: 2; }
.disc-grid--list .disc-card__actions { justify-content: flex-start; }
.disc-grid--list .disc-btn--primary { flex: 0 0 auto; }

/* ---------- Maps ---------------------------------------------------------- */

.disc-map,
.disc-mini-map { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.disc-map svg,
.disc-mini-map svg { width: 100%; height: auto; color: var(--color-neutral-600); }
.disc-map { padding: 16px; border: 1px solid var(--rule-soft); border-radius: var(--radius-card); background: var(--color-surface); }
/* Radius is rewritten by script as the zoom changes so a pin keeps the same
   size on screen. Without that, zooming in merges 600 pins into one blob. */
.disc-map__pin { fill: var(--color-accent); fill-opacity: .78; stroke: var(--color-neutral-300); stroke-width: .8; vector-effect: non-scaling-stroke; }
.disc-map__pin.is-open { fill: var(--color-accent-800); fill-opacity: 1; stroke: var(--color-text); stroke-width: 2; }
.disc-map figcaption,
.disc-mini-map figcaption { color: var(--color-neutral-800); font-size: 11px; line-height: 1.5; }

/* The shared world map. Real Natural Earth outlines: unvisited land is a quiet
   neutral so the highlighted countries are the only thing reading as data. */
.world-atlas { width: 100%; height: auto; display: block; }
.world-atlas__land { fill: var(--color-neutral-400); stroke: var(--color-neutral-300); stroke-width: 1; vector-effect: non-scaling-stroke; }
.world-atlas__land.is-on { fill: var(--color-accent); }
.world-atlas__pin { fill: var(--color-accent); stroke: var(--color-neutral-300); stroke-width: 2; vector-effect: non-scaling-stroke; }
.world-atlas__pin.is-tiny { fill: var(--color-accent-400); }

/* Interactive maps: grab to pan, and every country or pin is a real link. */
.world-atlas.is-interactive { cursor: grab; touch-action: none; }
.world-atlas.is-interactive:active { cursor: grabbing; }
.world-atlas.is-interactive:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.world-atlas__link { cursor: pointer; }
.world-atlas__link .world-atlas__land.is-on,
.world-atlas__link .world-atlas__pin,
.world-atlas__link .disc-map__pin { transition: fill .12s ease; }
.world-atlas__link:hover .world-atlas__land.is-on,
.world-atlas__link:focus .world-atlas__land.is-on { fill: var(--color-accent-800); }
.world-atlas__link:hover .world-atlas__pin,
.world-atlas__link:hover .disc-map__pin { fill: var(--color-accent-800); fill-opacity: 1; }
.world-atlas__link:focus-visible .world-atlas__pin,
.world-atlas__link:focus-visible .disc-map__pin { fill: var(--color-accent-800); fill-opacity: 1; stroke: var(--color-text); }

[data-atlas-figure] { position: relative; }
.world-atlas__controls { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 3px; }
.world-atlas__controls button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  color: var(--color-text);
  background: var(--color-neutral-300);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
}
.world-atlas__controls button:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* ---------- Right rail ----------------------------------------------------- */

.disc-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.disc-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--rule-soft); border-radius: var(--radius-card); background: var(--color-surface); }
.disc-panel h2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-neutral-700);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.disc-panel h2 a,
.disc-panel h2 button { padding: 0; border: 0; color: var(--color-accent-700); background: transparent; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: none; text-decoration: none; cursor: pointer; }
.disc-panel p { margin: 0; font-size: 13px; line-height: 1.5; }
.disc-panel__note { color: var(--color-neutral-800); font-size: 11px; line-height: 1.55; }
.disc-panel .m-btn { align-self: flex-start; min-height: 38px; font-size: 12px; }
.disc-panel--accent { border-color: var(--color-accent); }
.disc-panel--accent > i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent-700); }
.disc-panel--accent svg { width: 18px; height: 18px; }
.disc-panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.disc-panel ul li { display: flex; align-items: center; gap: 6px; }
.disc-panel ul a { flex: 1; overflow: hidden; padding: 7px 8px; border-radius: 6px; color: var(--color-text); font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.disc-panel ul a:hover { background: var(--tint); }
.disc-panel ul li button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: var(--color-neutral-600); background: transparent; cursor: pointer; }
.disc-panel ul li button:hover { color: var(--color-text); background: var(--tint); }
.disc-panel ul li button svg { width: 13px; height: 13px; }

/* ---------- Collections ----------------------------------------------------- */

.disc-collections { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: var(--rule) solid var(--rule-color); border-radius: var(--radius-card); background: var(--color-surface); }
.disc-collections h2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: var(--heading-track);
  text-transform: var(--heading-case);
}
.disc-collections h2 a { color: var(--color-accent-700); font-family: var(--font-body); font-size: 12px; letter-spacing: normal; text-transform: none; text-decoration: none; }
.disc-collections__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.disc-collection { min-width: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; border: 1px solid var(--rule-soft); border-radius: var(--radius-ctl); color: var(--color-text); text-decoration: none; }
.disc-collection:hover { border-color: var(--color-accent); }
.disc-collection__media { height: 92px; display: block; overflow: hidden; background: var(--tint); }
.disc-collection__media img { width: 100%; height: 100%; object-fit: cover; }
.disc-collection b { padding: 0 11px; font-size: 13px; }
.disc-collection small { padding: 0 11px 11px; color: var(--color-neutral-700); font-size: 11px; }

/* ---------- Toast ------------------------------------------------------------ */

.disc-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 22px;
  max-width: min(440px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  background: var(--color-neutral-300);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
  font-size: 13px;
  transform: translateX(-50%);
}
.disc-toast[hidden] { display: none; }
.disc-toast a { color: var(--color-accent-700); white-space: nowrap; }
.disc-toast.is-error { border-color: var(--role-danger); }

/* ---------- Narrower screens -------------------------------------------------- */

@media (max-width: 1240px) {
  .disc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .disc-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .disc-collections__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .disc-hero { grid-template-columns: minmax(0, 1fr); }
  .disc-popular { max-width: 460px; }
  .disc-body { grid-template-columns: minmax(0, 1fr); }
  .disc-rail { position: static; }
}

@media (max-width: 760px) {
  .disc { width: min(1320px, 100% - 24px); padding-bottom: 52px; }
  .disc-hero { padding: 24px 20px; }
  .disc-search { grid-template-columns: 20px minmax(0, 1fr); }
  .disc-search .m-btn { grid-column: 1 / -1; width: 100%; min-height: 42px; }
  .disc-toolbar { flex-direction: column; align-items: stretch; }
  .disc-toolbar__views { flex-wrap: wrap; }
  .disc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .disc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disc-grid--list .disc-card { flex-direction: column; }
  .disc-grid--list .disc-card__media { flex: none; height: 148px; min-height: 0; }
  .disc-collections__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .disc-grid { grid-template-columns: minmax(0, 1fr); }
  .disc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Map popup -------------------------------------------------------
   Clicking a pin used to navigate straight to the country guide, which answers
   a question the reader has not asked yet. It now says which place it is, and
   offers the guide as the next step. Without script the link still works. */
.disc-map__popup {
  position: absolute;
  z-index: 12;
  min-width: 190px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--color-neutral-300);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transform: translate(-50%, calc(-100% - 14px));
}
.disc-map__popup[hidden] { display: none; }
.disc-map__popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--color-neutral-300);
  transform: translate(-50%, -50%) rotate(45deg);
}
.disc-map__popup b { padding-right: 18px; font-size: 14px; line-height: 1.25; }
.disc-map__popup small { color: var(--color-neutral-800); font-size: 12px; }
.disc-map__popup .disc-chip { align-self: flex-start; }
.disc-map__popup .disc-btn { margin-top: 4px; justify-content: center; }
.disc-map__popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--color-neutral-800);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.disc-map__popup-close:hover { color: var(--color-text); background: var(--tint); }

/* The scope line under a filtered stat row, saying what the numbers describe. */
.disc-scope { margin: 12px 0 0; color: rgba(226, 230, 244, .78); font-size: 12px; }
.disc-scope a { color: #c3b1ff; }