/* =========================================================
   London in 90 Minutes – Day Trips
   Scoped styles for .l90-* components only
   ========================================================= */

html.l90-page,
body.l90-page{
  overflow: visible !important;
}

body.l90-page{
  overflow-x: hidden !important; /* keep anti-sideways scroll */
}

/* ---- Layout ---- */
.results-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .results-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* ---- Cards ---- */
.l90-card {
  list-style: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.1rem;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
}

.l90-card::after{
  content: "";
  display: block;
  clear: both;
}

.l90-card + .l90-card {
  margin-top: 1rem;
}

.l90-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ---- Card top row ---- */
.l90-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* prevent the time badge column stretching to match the left content */
  gap: 1rem;
}

.l90-card__title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.l90-card__link {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
}

.l90-card__link:hover {
  text-decoration: underline;
}

.l90-card__county {
  font-size: 0.85rem;
  color: #666;
}

/* ---- Optional card image ---- */
.l90-card__media{
  position: relative;
  margin-top: 0.55rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ededed;
  background: #fafafa;

  /* Mobile/default: banner */
  aspect-ratio: 21 / 9;
  max-height: 140px;
}

/* Desktop: image sits to the right of the text */
@media (min-width: 820px){
  .l90-card__media{
    float: right;
    width: 280px;
    max-width: 40%;
    max-height: none;

    /* More like a thumbnail panel on the side */
    aspect-ratio: 4 / 3;

    /* Space between text and image */
    margin: 0.15rem 0 0.75rem 1rem;
  }
}

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

.l90-card__media[data-gallery] img{
cursor: zoom-in;
}

.l90-card__photoPlus{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
  background: rgba(25,25,25,0.55);
  color: #fff;
  pointer-events: none;
}

/* ---- Time badge ---- */
.l90-card__time{
  align-self: flex-start;
  height: fit-content;
  /* Neutral badge (no orange = no "warning" feel) */
  background: #f7f7f7;
  border: 1px solid #e6e6e6;
  color: #111;

  border-radius: 12px;

  /* Make it compact */
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.22rem 0.5rem;
  line-height: 1;
  font-size: 0.9rem;

  /* Never wrap (prevents tall badge on mobile) */
  white-space: nowrap;
}

@media (max-width: 520px){
  .l90-card__time{
    padding: 0.18rem 0.45rem;
    font-size: 0.85rem;
  }
}

/* ---- Chips ---- */
.l90-card__chips{
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.l90-chip {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #f2f2f2;
  color: #333;

  /* force equal pill widths */
  width: 104px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.l90-chip--warn {
  background: #fff3e6;
  color: #9c4b00;
}

/* ---- Summary + blurb ---- */
.l90-card__summary {
  font-size: 0.85rem;
  color: #444;
  margin-top: 0.35rem;
}


.l90-card__blurb {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* ---- Links inside cards ----
   Keep the title link sized separately; make all other card links
   match the body/summary text size (e.g. Website / Get directions / Book Train / Book Taxi). */
body.l90-page .l90-card a:not(.l90-card__link){
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ---- Details ---- */
.l90-card__details {
  margin-top: 0.6rem;
  clear: both;
}

.l90-card__summaryToggle {
  cursor: pointer;
  font-size: 0.8rem;
  color: #666;
}

.l90-card__summaryToggle:hover {
  text-decoration: underline;
}

.l90-card__detailBody {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #ddd;
}

.l90-card__detailGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .l90-card__detailGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.l90-card__detailLabel {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
}

.l90-card__detailLabel--spaced {
  margin-top: 0.6rem;
}

.l90-card__detailValue {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.l90-card__detailSmall {
  font-size: 0.75rem;
  color: #666;
}

/* ---- Empty / count states ---- */
.l90-empty {
  padding: 1.5rem;
  text-align: center;
  color: #666;
}

.l90-count {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.75rem;
}

/* =========================================================
   Filters + page layout (swish pass v1)
   ========================================================= */

/* Page wrapper */
.l90{
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.l90__header{
  margin: 0 0 1rem;
}

.l90__header h1{
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
}

/* Filters container */
.l90__filters{
  margin: 0 0 1.25rem;
}

/* Sticky on desktop so it feels like a tool */
@media (min-width: 960px){
  .l90__filters{
    position: static;
    z-index: auto;
  }
}

.l90-filters{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);

  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 720px){
  .l90-filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
  }
}

@media (min-width: 1100px){
  /* =========================================================
     Wide desktop filters layout
     Row 1: Transport mode | Departure point | Max travel time
     Row 2: Facilities pills (left) | Good for pills (right)

     NOTE: Time slider lives inside <details>. On wide desktop we
     flatten <details> using display:contents so the Time group can
     sit on row 1, without changing mobile behaviour.
     ========================================================= */

  .l90-filters{
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) minmax(260px, 1fr);
    grid-auto-flow: row;
    align-items: start;
    gap: 0.9rem 1rem;
  }

  /* --- Flatten advanced wrapper for layout ONLY on wide desktop --- */
  details.l90-adv{
    display: contents; /* allow children to participate in parent grid */
  }

  /* Hide the mobile summary bar on wide desktop */
  details.l90-adv > summary,
  details.l90-adv .l90-adv__summary{
    display: none !important;
  }

  /* IMPORTANT:
     Browsers hide <details> content when it is not [open].
     On wide desktop we want the contents to always participate in the grid,
     even if the element isn't open.
  */
  details.l90-adv:not([open]) > :not(summary){
    display: contents !important;
  }

  details.l90-adv > .l90-adv__body{
    display: contents !important;
  }

  /* --- Row 1 placements --- */
  .l90-filters > .l90-filters__group--mode{
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }

  .l90-filters > .l90-filters__group:has(#l90Departure),
  .l90-filters > div.l90-filters__group:has(#l90Departure){
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

/*
  NOTE:
  On wide desktop we flatten <details> + .l90-adv__body with display: contents.
  That means the layout tree no longer has `.l90-adv__body` as a real parent box.
  So we must target BOTH possibilities:
  1) Elements still nested under .l90-adv__body (non-flattened browsers / future refactors)
  2) Elements promoted to be direct children of .l90-filters (because of display: contents)
*/

/* --- Row 1: Time slider in column 3 --- */
.l90-filters > .l90-filters__group:has(#l90Time),
.l90-filters .l90-adv__body > .l90-filters__group:has(#l90Time){
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  align-self: start;
}

/* --- Row 2: Facilities (left) + Good for (right) wrapper --- */
.l90-filters > .l90-filterPills,
.l90-filters .l90-adv__body > .l90-filterPills{
  grid-column: 1 / -1;
  grid-row: 2;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* Keep Good for in the right column, but align its contents to the left */
.l90-filters > .l90-filterPills > .l90-filters__group--goodfor,
.l90-filters .l90-adv__body > .l90-filterPills > .l90-filters__group--goodfor{
  justify-self: start;
}

/* Left/right containers should not overflow their column */
.l90-filters > .l90-filterPills > .l90-filters__group,
.l90-filters .l90-adv__body > .l90-filterPills > .l90-filters__group{
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

  /* Facilities = 3 across */
  .l90-filters > .l90-filterPills .l90-filters__group--toggles:not(.l90-filters__group--goodfor) .l90-toggles,
  .l90-filters .l90-adv__body > .l90-filterPills .l90-filters__group--toggles:not(.l90-filters__group--goodfor) .l90-toggles{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  /* Good for = 2 across, but do NOT stretch full-width */
  .l90-filters > .l90-filterPills .l90-filters__group--goodfor .l90-toggles,
  .l90-filters .l90-adv__body > .l90-filterPills .l90-filters__group--goodfor .l90-toggles{
    display: inline-grid !important;
    grid-template-columns: repeat(2, max-content);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    justify-content: start;
  }

  /* In the Good for group, pills should size to their text */
  .l90-filters > .l90-filterPills .l90-filters__group--goodfor .l90-toggle,
  .l90-filters .l90-adv__body > .l90-filterPills .l90-filters__group--goodfor .l90-toggle{
    width: auto !important;
    justify-content: center;
  }

  /* Pills should fit text better (no hard ellipsis on desktop) */
  .l90-filters > .l90-filterPills .l90-toggles > label.l90-toggle,
  .l90-filters .l90-adv__body > .l90-filterPills .l90-toggles > label.l90-toggle{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .l90-filters > .l90-filterPills .l90-toggle span,
  .l90-filters .l90-adv__body > .l90-filterPills .l90-toggle span{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.15;
    text-align: center;
  }
}


/* Group blocks */
.l90-filters__group{
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* ---------- Advanced filters (expandable) ---------- */

/* Mobile: show a compact “More filters” pill */
@media (max-width: 719px){
  .l90-adv{
    grid-column: 1 / -1;
  }

  .l90-adv__summary{
    /* Compact, legend-like control (not a pill) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    padding: 0.15rem 0;
    border: 0;
    background: transparent;

    cursor: pointer;
    user-select: none;

    /* Match legend styling */
    font-size: 0.8rem;
    color: #555;
    line-height: 1.1;

    /* Avoid weird tap highlight / outlines */
    -webkit-tap-highlight-color: transparent;
  }

  /* Optional: subtle hover/focus affordance */
  .l90-adv__summary:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .l90-adv__summary::-webkit-details-marker { display: none; }
  .l90-adv__summary::marker { content: ""; }

  .l90-adv__summary:focus{
    outline: none;
  }

  .l90-adv__summary:focus-visible{
    outline: 2px solid rgba(0,0,0,0.25);
    outline-offset: 3px;
    border-radius: 8px;
    text-decoration: none;
  }

  /* Text swap: show “More filters” when closed; show “Close” when open */
  .l90-adv__summary .l90-adv__title--more{ display: inline; }
  .l90-adv__summary .l90-adv__title--close{ display: none; }

  .l90-adv[open] .l90-adv__summary .l90-adv__title--more{ display: none; }
  .l90-adv[open] .l90-adv__summary .l90-adv__title--close{ display: inline; }

  .l90-adv__summary :where(.l90-adv__title--more, .l90-adv__title--close){
    font: inherit;
    color: inherit;
  }

  .l90-adv__title{
    /* If you kept a single title span, keep it visually consistent */
    font: inherit;
    color: inherit;
    white-space: nowrap;
  }

  .l90-adv__chev{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: transform 0.15s ease;
  }

  .l90-adv[open] .l90-adv__chev{
    transform: rotate(180deg);
  }

  /* Key: let the inner filter groups participate in the parent .l90-filters grid */
  .l90-adv__body{
    display: contents;
  }

  /* Add a little breathing room between the summary row and the first advanced group */
  .l90-adv__summary + .l90-adv__body .l90-filters__group{
    margin-top: 0.55rem;
  }
}

/* Desktop/tablet: do NOT change layout — hide the “More filters” bar entirely
   AND force <details> content to show even when it is not [open].
   (Browsers apply: details:not([open]) > :not(summary) { display:none; })
*/
@media (min-width: 720px) and (max-width: 1099px){
  /* Keep <details> as a real element on desktop/tablet (Chrome is happier than with display:contents) */
  .l90-adv{
    display: block;
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Never show the summary bar on desktop */
  .l90-adv > summary,
  .l90-adv__summary{ display: none !important; }

  /* Override the UA rule that hides non-summary children when <details> is closed */
  .l90-adv:not([open]) > :not(summary){
    display: block !important;
  }

  /* Let inner groups participate in layout */
  .l90-adv__body{ display: contents !important; }
}

/* ---------- Custom dropdown (l90-dd) ---------- */

/* Container establishes positioning and stacking */
.l90-dd{
  position: relative;
  width: 100%;
}

/* Keep the native select for state, but hide it visually */
.l90-dd__native{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Button is ALWAYS a pill */
.l90-dd__btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 9999px !important;

  cursor: pointer;
  line-height: 1.2;
  box-sizing: border-box;
}

.l90-dd__btn:focus{
  outline: none;
}

/* Focus ring without changing geometry */
.l90-dd__btn:focus-visible{
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.14);
}

/* Optional active polish when open */
.l90-dd__btn[aria-expanded="true"]{
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.l90-dd__btnText{
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l90-dd__chev{
  font-size: 0.85rem;
  opacity: 0.65;
}

/* Panel becomes a separate floating card with a gap */
.l90-dd__panel{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 0.85rem;
  line-height: 1.2;
  width: auto !important; /* override inline width: 448px */
  max-width: 100%;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);

  padding: 0.25rem;
  z-index: 1000;

  /* Make long dropdowns (e.g. Departure) scrollable */
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Respect the hidden attribute (JS toggles this) */
.l90-dd__panel[hidden]{
  display: none !important;
}

/* Options look like a modern menu */
.l90-dd__opt{
   font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 500;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;

  padding: 0.85rem 0.9rem;
  border-radius: 12px;

  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.l90-dd__opt:hover{
  background: rgba(0,0,0,0.05);
}

.l90-dd__opt.is-selected,
.l90-dd__opt[aria-selected="true"]{
  background: rgba(0,0,0,0.08);
}

/* Mobile: keep it floating (do NOT switch to static). 
   Add a little extra spacing so stacked filters don't feel cramped. */
@media (max-width: 720px){
  .l90-dd__panel{
    top: calc(100% + 10px) !important;
  }
}

.l90-filters__label{
  display: block;
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 0.35rem;
}

.l90-filters__hint{
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #777;
}

/* Inputs */
.l90-filters__select,
.l90-filters__range{
  width: 100%;
}

.l90-filters__select{
  appearance: none;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: #fff;
  font: inherit;
  line-height: 1.1;
  transform: none !important;
}

.l90-filters__select:focus{
  outline: none;
  border-color: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}


.l90-filters__range{
  accent-color: #111;
}

/* Transport mode: segmented control */
.l90-filters__legend{
  font-size: 0.8rem;
  color: #555;
  margin: 0 0 0.35rem;
}

/* Transport mode placement is handled by the desktop grid-placement rules.
   Do not force grid-column here (it can cause overflow/squashing). */

.l90-filters__group[aria-label="Transport mode"]{
  background: #f7f7f7;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  padding: 0.55rem; /* was 0.7rem */
}

/* Transport mode: segmented control (fieldset + legend behave more reliably with flex than grid) */
.l90-filters__group--mode{
  padding: 0.45rem;
  align-self: start;

  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

/* Legend on its own row */
.l90-filters__group--mode > .l90-filters__legend{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0 0 0.25rem;
}

/* 3 equal options on the next row */
.l90-filters__group--mode .l90-filters__option{
  flex: 1 1 0;
  min-width: 0;
}

/* Tighten legend spacing inside Transport mode */
.l90-filters__group--mode .l90-filters__legend{
  margin: 0 0 0.25rem;
}

.l90-filters__option{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.83rem;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

/* Transport-mode pills: keep them equal width and allow shrinking inside the grid */
.l90-filters__group--mode .l90-filters__option{
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.84rem;
}

.l90-filters__option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* Visual selected state */
.l90-filters__option:has(input:checked){
  background: #111;
  color: #fff;
}

.l90-filters__option:has(input:focus-visible){
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

/* Slider group: label row top, slider slightly raised (not vertically centred) */
.l90-filters__group:has(.l90-filters__range){
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0.25rem;

  /* Don’t force a tall block (this was creating the big vertical gap) */
  min-height: 56px;
}

@media (max-width: 520px){
  .l90-filters__group:has(.l90-filters__range){
    min-height: 48px;
  }
}

/* The row with "Max travel time" + output stays at the top */
.l90-filters__group:has(.l90-filters__range) .l90-filters__row{
  align-self: start;
}

/* Raise the slider within the available space */
.l90-filters__group:has(.l90-filters__range) .l90-filters__range{
  align-self: start;
  margin-top: 0.15rem;
}

/* Time output row (you already have ids in markup) */
.l90-filters__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.l90-filters__output{
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}


/* Results layout (template uses .l90-layout / .l90-results__list) */
.l90-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 960px){
  .l90-layout{
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

.l90-results__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}

.l90-results__count{
  font-size: 0.9rem;
  color: #555;
}

.l90-results__label{
  font-size: 0.75rem;
  color: #666;
  margin-right: 0.35rem;
}

.l90-results__select{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  background: #fff;
  font: inherit;
}

/* List reset */
.l90-results__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Map panel (works whether the element is .l90-map__canvas or #l90-map) */
.l90-map__canvas,
#l90-map{
  min-height: 360px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden; /* keep Mapbox clipped to rounded corners */
}

/* Mobile: collapsed/shorter map so it doesn’t dominate */
@media (max-width: 720px){
  .l90-map__canvas,
  #l90-map{
    min-height: 220px;
    height: 220px;
    max-height: 50vh;
  }
}

/* Desktop: keep the map visible while scrolling results */
@media (min-width: 960px){
  /* Make the whole map panel sticky (more reliable than sticking the Mapbox canvas) */
  .l90-map{
    position: sticky;
    top: 12px;
    align-self: start;
  }

  /* Keep the canvas constrained to the viewport */
  .l90-map__canvas,
  #l90-map{
    max-height: calc(100vh - 24px);
  }
}

/* Methodology */
.l90__methodology{
  margin-top: 1.75rem;
}

.l90-methodology{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 0.9rem 1rem;
}

.l90-methodology__summary{
  cursor: pointer;
  font-weight: 600;
}

.l90-methodology__body{
  margin-top: 0.75rem;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========================================================
   Chip width hard override (beats global style.css)
   ========================================================= */

/* Only affect the result-card chips row */
.l90-card__chips .l90-chip{
  box-sizing: border-box;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Loader (results + quick filter loading)
   ========================================================= */

/* Respect the HTML hidden attribute */
.l90-loader[hidden]{
  display: none !important;
}

.l90-loader{
  padding: 1.25rem 1rem;
  margin: 0.75rem 0 0;
  text-align: center;
  color: #444;

  /* Make the loader visually present even for very short loads */
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l90-loader__inner{
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  animation: l90FadeIn 0.15s ease-out both;
}

@keyframes l90FadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brand/logo holder (JS will clone the site logo into here) */
.l90-loader__brand{
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.l90-loader__brand img,
.l90-loader__brand svg{
  width: 84px;
  height: auto;
  display: block;
}

.l90-loader__text{
  font-size: 0.85rem;
  color: #666;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Simple “fill” bar (<= 1s) */
.l90-loader__bar{
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: #eee;
  overflow: hidden;
}

.l90-loader__bar span{
  display: block;
  height: 100%;
  width: 0;
  background: #111;
  animation: l90LoadFill 0.9s ease-out forwards;
}

@keyframes l90LoadFill{
  from { width: 0; }
  to   { width: 100%; }
}

/* Slightly tighter on small screens */
@media (max-width: 520px){
  .l90-loader{ min-height: 96px; }
  .l90-loader__brand{ width: 72px; height: 72px; }
  .l90-loader__brand img,
  .l90-loader__brand svg{ width: 72px; }
}

/* =========================================================
   Map legend (London in 90)
   ========================================================= */

.l90-map__legend{
  /* Force horizontal legend even if markup is a <ul>/<li> or stacked <div>s */
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;

  font-size: 0.72rem;
  line-height: 1.1;
  color: #555;
}

/* If the legend is a list, reset list styling */
.l90-map__legend,
.l90-map__legend ul{
  list-style: none;
  padding: 0;
  margin-left: 0;
}

/* Make direct children behave inline (covers div/span/li/p) */
.l90-map__legend > *{
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

/* Individual legend item */
.l90-legend__item{
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
}

/* Icon dots */
.l90-legend__icon{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Colours aligned with map markers */
.l90-legend__icon--dep{ background: #111; }
.l90-legend__icon--vine{ background: #2f7d32; }
.l90-legend__icon--station{ background: #f2c94c; }

/* Separator */
.l90-legend__sep{
  display: inline-block !important;
  color: #bbb;
  font-weight: 400;
  line-height: 1;
  margin: 0 0.1rem;
}

/* Hide arrival station by default (JS will reveal for Train + Taxi / Either) */
.l90-legend__item[data-requires="pt"]{ display: none; }

/* On very small screens, let it wrap neatly and reduce type slightly */
@media (max-width: 520px){
  .l90-map__legend{ font-size: 0.68rem; gap: 0.45rem 0.6rem; }
}
/* Facilities + Good for wrapper (mobile + tablet defaults) */
@media (max-width: 1099px){
  body.l90-page .l90-filterPills{
    display: block;
  }
}

@media (min-width: 720px) and (max-width: 1099px){
  body.l90-page .l90-filterPills{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  /* Constrain each group to its column to prevent visual overlap */
  body.l90-page .l90-filterPills > .l90-filters__group{
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
}

@media (max-width: 719px){
  body.l90-page .l90-filterPills{
    display: block;
  }
}

/* Desktop (>=1100px): sizing safety only (layout is handled in the main wide-desktop grid block above) */
@media (min-width: 1100px){
  body.l90-page .l90-adv__body .l90-filterPills,
  body.l90-page .l90-filterPills{
    width: 100%;
    min-width: 0;
  }

  body.l90-page .l90-adv__body .l90-filterPills > .l90-filters__group,
  body.l90-page .l90-filterPills > .l90-filters__group{
    min-width: 0;
    max-width: 100%;
  }
}

/* Desktop/tablet: 3-across Facilities and 2-across Good for, without overflow */
@media (min-width: 720px) and (max-width: 1099px){
  body.l90-page .l90-filterPills .l90-toggles{
    max-width: 100%;
  }

  /* Facilities = 3 across (fill available space so labels don't squash) */
  body.l90-page .l90-filterPills .l90-filters__group--toggles:not(.l90-filters__group--goodfor) .l90-toggles{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: start;
  }

  /* Good for = 2 across (fill available space so labels don't squash) */
  body.l90-page .l90-filterPills .l90-filters__group--goodfor .l90-toggles{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: start;
  }

  /* Pills fill their grid cell */
  body.l90-page .l90-filterPills .l90-toggle{
    width: 100% !important;
  }
}

@media (min-width: 1100px){
  body.l90-page .l90-filterPills .l90-filters__group--goodfor .l90-toggle{
    width: auto !important;
  }
}
/* =========================================================
   Filter toggles: "Only show vineyards with:" (Restaurant/Cafe/Accommodation)
   ========================================================= */

.l90-filters__group--toggles{
  display: grid;
  gap: 0.45rem;
}




.l90-filters__group--toggles .l90-filters__legend{
  margin: 0;
}

/* Any direct child wrapper inside the group should not force vertical stacking */
.l90-filters__group--toggles > *{
  max-width: 100%;
}

/* Base: keep the toggles container tidy */
body.l90-page .l90-filters__group--toggles .l90-toggles{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}


@media (max-width: 719px){
  /* Mobile: hard 3-across grid for these pills */
  body.l90-page .l90-filters__group--toggles .l90-toggles{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  body.l90-page .l90-filters__group--toggles .l90-toggle{
    width: 100%;
    justify-content: center;
  }
}

/* If each option is wrapped (e.g. <li> or <div> per option), stop wrappers being full-width */
.l90-filters__group--toggles :where(ul, ol) > li,
.l90-filters__group--toggles :where(.l90-toggles, .l90-filters__toggles, .l90-filters__options, .l90-filters__row, .l90-filters__controls) > *{
  width: auto !important;
  max-width: none !important; /* allow mobile 3-across max-width to win */
  display: inline-flex !important;
}

/* The clickable pill (label wrapping a hidden checkbox) */
body.l90-page .l90-filters__group--toggles .l90-toggle{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  width: auto !important;
  max-width: 100%;

  padding: 0.48rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;

  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  min-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hide the native checkbox (we still use it for state). No visible checkbox square. */
.l90-filters__group--toggles input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.l90-filters__group--toggles label::before{
  content: none !important;
}

/* Selected = black pill */
body.l90-page .l90-filters__group--toggles .l90-toggle:has(input[type="checkbox"]:checked){
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Keyboard focus */
body.l90-page .l90-filters__group--toggles .l90-toggle:has(input[type="checkbox"]:focus-visible){
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

/* Slightly tighter on small screens */
@media (max-width: 520px){
  .l90-filters__group--toggles :where(
    .l90-toggles,
    .l90-filters__toggles,
    .l90-filters__options,
    .l90-filters__row,
    .l90-filters__controls,
    .l90-options,
    .l90-checkboxes,
    ul,
    ol
  ){
    gap: 0.45rem;
  }

  body.l90-page .l90-filters__group--toggles .l90-toggle{
    padding: 0.32rem 0.5rem;
    font-size: 0.78rem;
    min-height: 28px;
  }
}

@media (max-width: 520px){
  .l90-filters{
    padding: 0.7rem;
    gap: 0.5rem;
    border-radius: 12px;
  }

  .l90-filters__label{
    font-size: 0.74rem;
    margin-bottom: 0.2rem;
  }

  .l90-filters__legend{
    font-size: 0.74rem;
    margin-bottom: 0.2rem;
  }
}

@media (max-width: 520px){
  .l90-dd__btn{
    padding: 0.5rem 0.75rem;
  }

  .l90-dd__btnText{
    font-size: 0.82rem;
  }

  .l90-filters__output{
    font-size: 0.82rem;
  }
}

@media (max-width: 520px){
  .l90-filters__group[aria-label="Transport mode"]{
    padding: 0.4rem;
    gap: 0.35rem;
  }

  .l90-filters__group--mode .l90-filters__legend{
    margin-bottom: 0.2rem;
  }

  /* Mobile: slimmer transport mode pills */
  .l90-filters__group--mode .l90-filters__option{
    padding: 0.38rem 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
    gap: 0.35rem;
  }
}

@media (max-width: 720px) {
  .l90-mapToggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    /* Fixed, centered button (avoid left+right conflicts that can push it off-screen) */
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    /* Keep it from stretching full-width */
    width: max-content !important;
    max-width: calc(100% - 24px) !important;

    padding: 10px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.12);

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);

    font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: 0.2px;
    color: #111;

    transition:
      opacity 220ms ease,
      transform 220ms ease,
      box-shadow 220ms ease;

    touch-action: manipulation;
  }

  .l90-mapToggle:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  }

  .l90-mapToggle:active {
    transform: translateX(-50%) scale(0.97);
  }
}

.l90-mapToggle.is-open {
  background: #111;
  color: #fff;
  border-color: rgba(0,0,0,0.2);
}
/* Featured card border: make it clearly distinct from the default 1px grey border */
.l90-card.l90-card--featured{
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #f2c94c !important; /* site gold */
}

/* Match "Nearest station" typography */
.l90-card__metaRow {
  font-size: var(--l90-summary-font-size, 0.875rem);
  line-height: 1.4;
  color: var(--l90-summary-color, #4b5563); /* same muted grey */
  margin-top: 0.25rem;
}

/* Featured vineyard text should NOT look like a badge */
.l90-card__featuredText {
  font-weight: 500; /* matches summary emphasis */
}

/* Separator spacing */
.l90-card__sep {
  margin: 0 0.25rem;
}

/* Website link styling to match summary links */
.l90-card__site {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   FAQ (match Methodology styling)
   ========================================================= */

.l90__faq{
  margin-top: 1.75rem;
}

.l90__faq .l90__h2{
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Outer panel like Methodology */
.l90-faq{
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  padding: 0.6rem 0.75rem;
}

/* Each item behaves like an accordion row */
.l90-faq__item{
  padding: 0.55rem 0.25rem;
}

.l90-faq__item + .l90-faq__item{
  border-top: 1px dashed #ddd;
}

.l90-faq__q{
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.l90-faq__item summary::-webkit-details-marker{ display: none; }
.l90-faq__item summary::marker{ content: ""; }

.l90-faq__a{
  margin-top: 0.6rem;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========================================================
   Return to filters button (JS will toggle [hidden])
   ========================================================= */

.l90-backToFilters[hidden]{
  display: none !important;
}

@media (max-width: 720px) {
  .l90-backToFilters{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;

    /* Sit ABOVE the map toggle button */
    bottom: calc(16px + env(safe-area-inset-bottom) + 52px);

    padding: 10px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.12);

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);

    font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    letter-spacing: 0.2px;
    color: #111;

    touch-action: manipulation;
  }
@media (max-width: 720px) {
  .l90-backToFilters.l90-backToFilters--top{
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
  }
}
  .l90-backToFilters:active{
    transform: translateX(-50%) scale(0.97);
  }
}

@media (min-width: 721px){
  /* Desktop: keep it subtle and sticky near the top of the results column */
  .l90-backToFilters{
    position: sticky;
    top: 12px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.5rem 0.75rem;
    border-radius: 999px;

    background: #fff;
    border: 1px solid #e6e6e6;

    font: 600 0.85rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #111;
  }
}
/* Ellipsis protection for label text inside pills */
.l90-filters__option span{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   SAFETY — Ensure card blurbs are visible
   (JS renders .l90-card__blurb; if it disappears it's a CSS cascade issue)
   ========================================================= */
body.l90-page .l90-card__blurb{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;

  margin-top: 0.4rem;
  color: #555;
}

/* If a layout rule collapses card children, neutralise it for the blurb */
body.l90-page .l90-card > .l90-card__blurb{
  float: none !important;
  clear: none !important;
}

/* Prevent brief layout flash on desktop load: hide results meta until JS completes first render */
body.l90-page.l90-ui-pending .l90-results__meta {
  visibility: hidden;
}

/* Once JS has rendered, reveal normally */
body.l90-page.l90-ui-ready .l90-results__meta {
  visibility: visible;
}