/* ── Explore Britain — the Wander map, embedded ───────────────
   All rules scoped under #wander so the rest of the site is
   untouched. Motion law: only the camera moves; UI crossfades. */

/* ── Flagship section layout — panel introduces, map is the hero ── */
.ebrit-flag{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(300px,400px) minmax(0,1fr);
  gap:clamp(28px,3.5vw,56px);align-items:center;
  padding:0 clamp(16px,2.5vw,40px)}
.ebrit-panel{display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;padding:8px 0}
.ebrit-heading--flag{font-size:clamp(2.3rem,3.4vw,3.6rem);margin:8px 0 14px}
.ebrit-panel .ebrit-copy{margin-bottom:24px}
.ebrit-map-side{position:relative;display:flex;align-items:center;
  justify-content:center;min-width:0}

/* The three quiet instructions */
.wx-steps{display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
.wx-step{display:flex;align-items:center;gap:13px}
.wx-step-icon{width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid rgba(200,136,42,.5);background:var(--cream);
  display:flex;align-items:center;justify-content:center}
.wx-step-icon svg{width:17px;height:17px;stroke:var(--gold-dark);fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.wx-step-icon--sm{width:30px;height:30px}
.wx-step-icon--sm svg{width:14px;height:14px}
.wx-step-text{font-family:var(--sans);font-weight:300;font-size:.86rem;
  color:var(--ink-2);line-height:1.5}

/* Can't decide where to go? — the feature, explained */
.wx-decide{width:100%;background:var(--cream);border-left:3px solid var(--gold);
  padding:16px 18px;margin-bottom:24px}
.wx-decide-title{font-family:var(--serif);font-weight:400;font-size:1.35rem;
  color:var(--forest);line-height:1.15;margin:0 0 8px}
.wx-decide-copy{font-size:.85rem;font-weight:300;color:var(--ink-2);
  line-height:1.75;margin:0 0 8px}
.wx-decide-copy em{font-style:italic;color:var(--gold-dark)}
.wx-decide-tail{font-family:var(--serif);font-style:italic;font-size:.98rem;
  color:var(--forest);margin:0}

/* Currently discover — the legend */
.wx-cats{width:100%;border-top:1px solid var(--cream-dark);
  padding-top:18px;margin-bottom:26px}
.wx-cats-title{display:block;font-family:var(--sans);font-weight:500;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:12px}
.wx-cat{display:flex;align-items:center;gap:12px;padding:4px 0}
.wx-cat-name{flex:1;font-family:var(--serif);font-size:1.02rem;
  color:var(--ink)}
.wx-cat-count{font-family:var(--serif);font-size:1.02rem;color:var(--gold-dark)}
.wx-cats-note{font-size:.74rem;font-weight:300;font-style:italic;
  color:var(--stone);line-height:1.7;margin:12px 0 0}

/* Category colours — muted, printed, instantly legible */
[data-cat="farm"] .wx-step-icon--sm, #wander [data-cat="farm"].wx-seal, #wander [data-cat="farm"].wx-pv-gem-glyph{border-color:#8C7C42}
[data-cat="farm"] .wx-step-icon--sm svg, #wander [data-cat="farm"].wx-seal svg, #wander [data-cat="farm"].wx-pv-gem-glyph svg{stroke:#8C7C42}
[data-cat="garden"] .wx-step-icon--sm, #wander [data-cat="garden"].wx-seal, #wander [data-cat="garden"].wx-pv-gem-glyph{border-color:#7C8F62}
[data-cat="garden"] .wx-step-icon--sm svg, #wander [data-cat="garden"].wx-seal svg, #wander [data-cat="garden"].wx-pv-gem-glyph svg{stroke:#7C8F62}
[data-cat="pub"] .wx-step-icon--sm, #wander [data-cat="pub"].wx-seal, #wander [data-cat="pub"].wx-pv-gem-glyph{border-color:#9C6A22}
[data-cat="pub"] .wx-step-icon--sm svg, #wander [data-cat="pub"].wx-seal svg, #wander [data-cat="pub"].wx-pv-gem-glyph svg{stroke:#9C6A22}
[data-cat="tea"] .wx-step-icon--sm, #wander [data-cat="tea"].wx-seal, #wander [data-cat="tea"].wx-pv-gem-glyph{border-color:#6E573F}
[data-cat="tea"] .wx-step-icon--sm svg, #wander [data-cat="tea"].wx-seal svg, #wander [data-cat="tea"].wx-pv-gem-glyph svg{stroke:#6E573F}
[data-cat="walk"] .wx-step-icon--sm, #wander [data-cat="walk"].wx-seal, #wander [data-cat="walk"].wx-pv-gem-glyph{border-color:#6C8CA0}
[data-cat="walk"] .wx-step-icon--sm svg, #wander [data-cat="walk"].wx-seal svg, #wander [data-cat="walk"].wx-pv-gem-glyph svg{stroke:#6C8CA0}
[data-cat="stay"] .wx-step-icon--sm, #wander [data-cat="stay"].wx-seal, #wander [data-cat="stay"].wx-pv-gem-glyph{border-color:#71506A}
[data-cat="stay"] .wx-step-icon--sm svg, #wander [data-cat="stay"].wx-seal svg, #wander [data-cat="stay"].wx-pv-gem-glyph svg{stroke:#71506A}
[data-cat="attraction"] .wx-step-icon--sm, #wander [data-cat="attraction"].wx-seal, #wander [data-cat="attraction"].wx-pv-gem-glyph{border-color:#A15C33}
[data-cat="attraction"] .wx-step-icon--sm svg, #wander [data-cat="attraction"].wx-seal svg, #wander [data-cat="attraction"].wx-pv-gem-glyph svg{stroke:#A15C33}

/* Tablet & mobile — panel stacks above; the map keeps its full size */
@media (max-width:1023px){
  .ebrit-flag{grid-template-columns:1fr;gap:26px}
  .ebrit-panel{max-width:620px;margin:0 auto;align-items:center;text-align:center}
  .wx-steps{align-items:flex-start}
  .wx-cats{max-width:360px}
  .wx-cat{text-align:left}
}
@media (max-width:768px){
  .ebrit-flag{padding:0 10px}
  .ebrit-panel{padding:0 14px}
}

#wander{position:relative;z-index:1;width:100%;
  height:clamp(520px,74vh,780px);border-radius:18px;overflow:hidden;
  border:1px solid rgba(200,136,42,.35);
  box-shadow:0 28px 56px rgba(12,22,12,.45);
  background:#547484}
#wander .wx-map{position:absolute;inset:0}
#wander .wx-map canvas{outline:none}

/* Cloud shadows — the scene breathing */
#wander .wx-clouds{position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;opacity:0;transition:opacity 1.6s ease-out;z-index:2}
#wander.wx-ready .wx-clouds{opacity:.08}

/* Take me somewhere — the single primary action */
#wander .wx-cta{position:absolute;left:12px;right:12px;margin:0 auto;
  width:fit-content;
  bottom:22px;z-index:6;font-family:var(--sans);font-weight:500;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--forest);background:rgba(250,248,242,.88);
  border:1px solid var(--gold);border-radius:999px;
  padding:15px 30px;min-width:264px;max-width:calc(100% - 24px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-sizing:border-box;cursor:pointer;opacity:0;
  transition:opacity 1.2s ease-out, background-color .3s ease-out;
  backdrop-filter:blur(3px)}
#wander.wx-ready .wx-cta{opacity:1}
#wander .wx-cta:hover{background:rgba(250,248,242,.98)}
#wander .wx-cta:disabled{cursor:default;opacity:.55}

/* Gold stars — gems seen from altitude */
#wander .wx-star{width:8px;height:8px;border-radius:50%;background:var(--gold);
  border:1px solid rgba(250,248,242,.85);opacity:0;transition:opacity .8s ease-out;
  pointer-events:none;box-shadow:0 0 0 3px rgba(200,136,42,.18)}
#wander .wx-star.in{opacity:.9}

/* Venue seals — marks, not markers. Flat, printed, never moving. */
#wander .wx-seal{width:36px;height:36px;border-radius:50%;background:var(--warm-white);
  border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease-out, visibility .5s;
  box-shadow:0 0 0 3px rgba(250,248,242,.35)}
#wander .wx-seal.in{opacity:1;visibility:visible;pointer-events:auto}
#wander .wx-seal svg{width:18px;height:18px;stroke:var(--forest);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#wander .wx-seal-name{position:absolute;top:40px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-weight:500;font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--forest);white-space:nowrap;opacity:0;
  transition:opacity .3s ease-out;pointer-events:none;
  text-shadow:0 0 10px rgba(250,248,242,.95),0 0 4px rgba(250,248,242,.9)}
#wander .wx-seal:hover .wx-seal-name,
#wander .wx-seal:focus .wx-seal-name{opacity:1}
#wander .wx-seal.near{box-shadow:0 0 0 3px rgba(250,248,242,.35),0 0 0 5px rgba(200,136,42,.3);
  transition:opacity .5s ease-out, box-shadow .9s ease-out}

/* The hover halo — the land leans toward you, slowly */
#wander .wx-halo{position:absolute;width:320px;height:320px;margin:-160px 0 0 -160px;
  border-radius:50%;pointer-events:none;z-index:3;opacity:0;
  transition:opacity 1.1s ease-out;mix-blend-mode:soft-light;
  background:radial-gradient(circle,rgba(250,244,224,.9) 0%,rgba(250,244,224,0) 62%)}
#wander .wx-halo.show{opacity:.55}

/* The floating editorial preview — a door, not a tooltip */
#wander .wx-preview{position:absolute;width:300px;z-index:7;background:var(--warm-white);
  border:1px solid var(--cream-dark);border-radius:14px;overflow:hidden;
  opacity:0;pointer-events:none;transform:scale(.985);transform-origin:center;
  transition:opacity .45s ease-out, transform .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 24px 60px rgba(24,21,15,.22)}
#wander .wx-preview.show{opacity:1;pointer-events:auto;transform:scale(1)}
#wander .wx-pv-photo{aspect-ratio:16/10;background:var(--cream)}
#wander .wx-pv-photo img{width:100%;height:100%;object-fit:cover;display:block}
#wander .wx-noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--cream) 0%,var(--cream-dark) 100%)}
#wander .wx-noimg-glyph{width:52px;height:52px;border-radius:50%;
  background:var(--warm-white);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center}
#wander .wx-noimg-glyph svg{width:24px;height:24px;stroke:var(--forest);fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#wander .wx-pv-body{padding:14px 16px}
#wander .wx-pv-name{font-family:var(--serif);font-weight:400;font-size:1.28rem;
  color:var(--forest);line-height:1.12;margin:0 0 5px}
#wander .wx-pv-line{font-family:var(--serif);font-style:italic;font-size:.94rem;
  line-height:1.45;color:var(--ink-2);margin:0 0 8px}
#wander .wx-pv-chips{font-size:.58rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-dark);line-height:1.9;margin:0 0 10px}
#wander .wx-pv-near{border-top:1px solid var(--cream);padding-top:9px}
#wander .wx-pv-near-title{display:block;font-size:.56rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
#wander .wx-pv-gem{display:flex;align-items:center;gap:9px;width:100%;padding:6px 2px;
  background:none;border:none;cursor:pointer;text-align:left;border-radius:7px;
  transition:background-color .3s ease-out;font-family:var(--sans)}
#wander .wx-pv-gem:hover{background:var(--cream)}
#wander .wx-pv-gem-glyph{width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--warm-white);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center}
#wander .wx-pv-gem-glyph svg{width:12px;height:12px;stroke:var(--forest);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#wander .wx-pv-gem-name{flex:1;font-family:var(--serif);font-size:.96rem;
  color:var(--ink-2);line-height:1.25}
#wander .wx-pv-gem-min{font-size:.58rem;letter-spacing:.08em;color:var(--stone);
  white-space:nowrap}

/* The field card — floating panel on desktop */
#wander .wx-card{position:absolute;top:18px;left:18px;width:320px;
  max-width:calc(100% - 36px);z-index:8;background:var(--warm-white);
  border:1px solid var(--cream-dark);border-radius:14px;overflow:hidden;
  opacity:0;pointer-events:none;transform:scale(.985);transform-origin:center;
  transition:opacity .4s ease-out, transform .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 24px 60px rgba(24,21,15,.22)}
#wander .wx-card.open{opacity:1;pointer-events:auto;transform:scale(1)}
#wander .wx-card.dragging{transition:opacity .4s ease-out}

/* Card actions — quiet, thumb-friendly */
#wander .wx-actions{display:flex;gap:7px;margin-top:12px}
#wander .wx-act{flex:1;font-family:var(--sans);font-weight:400;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
  background:none;border:1px solid var(--cream-dark);border-radius:999px;
  padding:10px 0;cursor:pointer;text-align:center;text-decoration:none;
  transition:border-color .3s ease-out, background-color .3s ease-out}
#wander .wx-act:hover{border-color:var(--gold)}
#wander .wx-act.on{background:var(--cream);border-color:var(--gold);
  color:var(--gold-dark)}
#wander .wx-card-grip{display:none}
#wander .wx-card-close{position:absolute;top:10px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(250,248,242,.88);color:var(--ink-2);font-size:1.1rem;
  line-height:1;cursor:pointer;font-family:var(--sans)}
#wander .wx-card-photo{aspect-ratio:16/10;background:var(--cream)}
#wander .wx-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
#wander .wx-card-body{padding:15px 18px 16px}
#wander .wx-card-name{font-family:var(--serif);font-weight:400;font-size:1.4rem;
  color:var(--forest);line-height:1.1;margin:0 0 5px}
#wander .wx-card-meta{font-size:.58rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 8px}
#wander .wx-card-line{font-family:var(--serif);font-style:italic;font-size:.96rem;
  line-height:1.5;color:var(--ink-2);margin:0 0 10px}

/* Attribution kept quiet but present */
#wander .maplibregl-ctrl-attrib{font-size:9px !important;opacity:.6}

/* ── Mobile — thumb-friendly, bottom-sheet card, no hover ── */
@media (hover:none){
  #wander .wx-preview,#wander .wx-halo{display:none}
}
@media (max-width:768px){
  #wander{height:min(78vh,640px);border-radius:14px}
  #wander .wx-seal{width:44px;height:44px}
  #wander .wx-seal svg{width:21px;height:21px}
  #wander .wx-seal-name{display:none}
  #wander .wx-cta{bottom:16px;padding:15px 20px;min-width:0;
    max-width:calc(100% - 24px);font-size:.62rem;letter-spacing:.15em}
  #wander .wx-card{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-width:none;
    border-radius:16px 16px 12px 12px}
  #wander .wx-card-grip{display:block;width:44px;height:4px;border-radius:2px;
    background:var(--cream-dark);margin:8px auto 0}
  #wander .wx-card-photo{aspect-ratio:21/9}
  #wander .wx-card-close{width:40px;height:40px;font-size:1.3rem}
  #wander .wx-pv-gem{padding:9px 2px}
}

@media (max-width:1023px){
  .wx-decide{text-align:left}
  .wx-cats .wx-cat{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  #wander .wx-clouds{display:none}
  #wander .wx-preview,#wander .wx-card,#wander .wx-seal,#wander .wx-star,
  #wander .wx-cta,#wander .wx-halo{transition:none;transform:none}
}