/* Court finder — the racquet directory as an instrument.
 *
 * Operate, not persuade: a reader arrives knowing what they want and the page's job is to
 * get out of the way. So the type is quiet, the photograph does the identifying, and the
 * two facts that decide everything — how you get on court, and what it costs — are the only
 * things allowed to sit on their own line.
 *
 * The shell is the house directory contract (docs/DIRECTORY-UI-PATTERN.md): a masthead, a
 * topbar that only exists below 1200px, and .lc-shell[data-view] holding sidebar, results
 * and map. Class names match the other four directories exactly so the next reader can
 * diff them.
 *
 * Colour comes from the site's own :root tokens (--gd-*) rather than a private palette —
 * a second grey system is a second thing to keep in sync. Square corners, hairline rules
 * and no shadows are the house language, not a choice made here.
 */

.lc-app {
  /* Wide enough for "Guests and owners" to sit on one line at this type size. */
  --rqf-side: 300px;
  --rqf-pad: clamp(20px, 4vw, 48px);
  --rqf-ink: var(--gd-ink, #2d2e33);
  --rqf-muted: var(--gd-muted, #6c6d74);
  --rqf-line: var(--gd-line, #e5e5e7);
  --rqf-paper: var(--gd-paper, #f7f6f4);
  --rqf-well: var(--gd-well, #14161a);
  --rqf-accent: var(--gd-accent, #e44e56);

  color: var(--rqf-ink);
  background: #fff;
  font-family: var(--gd-sans, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.45;
}
/* Scoped, never global: a bare `*` reset renders links wider than asked on this site. */
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }

/* ---- the chrome voice ---------------------------------------------------
   One rule wherever a label, an eyebrow or a button appears, so the controls read as one
   family rather than as five separately-styled widgets. */
.lc-rqf__scope,
.lc-fgroup__head,
.lc-sidebar__title,
.lc-rqf__count,
.lc-sortwrap__label,
.lc-chip,
.lc-switch,
.lc-rqf__near,
.lc-clear,
.lc-btn,
.lc-viewtoggle button,
.lc-rqf-card__leadwhere,
.lc-rqf-btn {
  font-family: var(--gd-sans, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ==========================================================================
   THE MASTHEAD — what this covers, and the fastest way in.

   Two rows, and no more: the shell below measures the space it has left from its own top
   edge, so every pixel here is a pixel taken off the map and the list. The sport row is a
   real filter, not a decoration — three labels say what the directory holds more exactly
   than a paragraph would, and clicking one is the shortest route into 140 rows.

   A PHOTOGRAPH, NOT A TALL HERO

   The band carries a court behind it because a page that opens on nothing but type reads
   as unfinished next to every other page type here, and because a picture of people mid-
   point says what this page is for before a word of it is read. It is a background, not a
   hero: the map and the list are the product, so the band grew by 40px rather than by a
   viewport, and the picture earns that only because the crop was chosen to survive it.

   The crop matters more than the height. At this proportion the frame shows a strip about
   a fifth of the photograph tall, and the strip decides everything: too high and it is
   trees, too low and it is an empty court. The one used here holds two players in a ready
   position with the ball in the air, which is legible at a glance and at 210px.

   The scrim runs left-to-right rather than the usual top-to-bottom, because the type is
   in a column at the left and the picture's subject is at the right — so the two never
   compete for the same pixels, and the photograph stays a photograph instead of going
   grey under an even wash. A second, short scrim rises off the bottom edge to carry the
   sport row. Measured over the rendered frame: title 15.5:1, count 10.1:1, sport labels
   9.3:1 idle and 16.9:1 current.
   ========================================================================== */

.lc-rqf__head {
  position: relative;
  /* Confines the two negative-z pseudo-elements to this element, so the photograph cannot
     paint behind the page or the theme header. */
  isolation: isolate;
  padding: clamp(26px, 2.6vw, 38px) var(--rqf-pad) 0;
  /* Also the fallback: if the photograph 404s the band is a dark well, not white type on
     white, and every rule below still holds. */
  background: var(--rqf-well);
}
/* The largest frame in the library for this attachment is 1600px, so above roughly that
   width the band upscales. It is a heavily scrimmed background rather than a subject, so
   the softness does not read; a larger original would still be the better fix. */
.lc-rqf__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/wp-content/uploads/863818-sea-pines-racquet-club-1536x1024.jpg")
              50% 52% / cover no-repeat;
}
.lc-rqf__head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(20, 22, 26, .93) 0%, rgba(20, 22, 26, .86) 26%,
                           rgba(20, 22, 26, .46) 52%, rgba(20, 22, 26, .12) 78%,
                           rgba(20, 22, 26, .06) 100%),
    /* Pixel stops, not percentages: this one only has to clear the sport row, whose height
       is fixed, so a percentage would deepen it every time the band grows. */
    linear-gradient(to top, rgba(20, 22, 26, .66) 0px, rgba(20, 22, 26, .10) 62px,
                            rgba(20, 22, 26, 0) 108px);
}

/* A column, so the count reads as a caption to the title. Held apart at opposite ends of
   a wide row it was a label with nothing to attach itself to. */
.lc-rqf__headtop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: clamp(16px, 1.8vw, 24px);
}

.lc-rqf__h {
  margin: 0;
  font-family: var(--gd-serif, Georgia, serif);
  font-weight: 700;
  font-size: clamp(27px, 3.1vw, 40px);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: #fff;
  max-width: 24ch;
  text-wrap: balance;
}

.lc-rqf__scope { margin: 0; color: rgba(255, 255, 255, .78); white-space: nowrap; }

/* Translucent white rather than the line token, so the rule sits in the photograph
   instead of drawing a light bar across it. */
.lc-rqf__index { border-top: 1px solid rgba(255, 255, 255, .22); }
.lc-rqf__indexchips {
  gap: 0;
  /* Each label carries its own side padding so the whole cell is the target; the row is
     pulled back by that amount so the first one lines up with the heading above it. */
  margin-left: -15px;
  flex-wrap: wrap;
}
/* Prefixed to outrank the sidebar chip rules further down, which are page-scoped for the
   bottom-bar reveal and would otherwise fill this row's current item as a solid block. */
.lc-rqf-page .lc-rqf__indexchips .lc-chip {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgba(255, 255, 255, .72);
  padding: 13px 15px 11px;
  min-height: 0;
}
.lc-rqf-page .lc-rqf__indexchips .lc-chip:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .40);
  background: none;
}
/* .is-all.is-on is listed alongside .is-on rather than left to the sidebar rule further
   down. That rule fills the all-option with #fff to keep it from reading as a narrowing
   filter, which was invisible while this row was on white — on the photograph it paints a
   solid white block over the current label and the text disappears into it. */
.lc-rqf-page .lc-rqf__indexchips .lc-chip.is-on,
.lc-rqf-page .lc-rqf__indexchips .lc-chip.is-all.is-on {
  background: none;
  color: #fff;
  border-color: transparent;
  border-bottom-color: var(--rqf-accent);
}

/* ==========================================================================
   TOP CHROME BAR — below 1200px only.
   ========================================================================== */

.lc-topbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px var(--rqf-pad);
  background: #fff;
  border-top: 1px solid var(--rqf-line);
  border-bottom: 1px solid var(--rqf-line);
  position: relative;
  z-index: 500;
}
.lc-topbar__spacer { flex: 1 1 auto; }
.lc-filters-toggle,
.lc-maptoggle,
.lc-viewtoggle { display: none; }

.lc-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rqf-line);
  border-radius: 0;
  background: #fff;
  color: var(--rqf-ink);
  cursor: pointer;
  white-space: nowrap;
}
.lc-btn:hover { border-color: var(--rqf-ink); }
.lc-btn.is-on { background: var(--rqf-ink); border-color: var(--rqf-ink); color: #fff; }
.lc-btn:focus-visible { outline: 2px solid var(--rqf-accent); outline-offset: 2px; }

/* Page-scoped, like the filter controls: addAction moves this toggle into the bottom bar's
   tools row, which lives outside .lc-app. Left keyed on .lc-app the tokens stop resolving
   there and the current button renders white on white — present in the DOM, invisible on
   the screen, and only on a phone. */
/* Colour only — the display rules stay unprefixed above and in the mobile block, so the
   fallback path where no bottom bar mounts keeps showing the toggle in the topbar. */
.lc-rqf-page .lc-viewtoggle { border: 1px solid var(--gd-line, #e5e5e7); }
.lc-rqf-page .lc-viewtoggle button {
  border: 0;
  background: #fff;
  color: var(--gd-ink, #2d2e33);
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 17px;
  cursor: pointer;
}
.lc-rqf-page .lc-viewtoggle button + button { border-left: 1px solid var(--gd-line, #e5e5e7); }
.lc-rqf-page .lc-viewtoggle button.is-on { background: var(--gd-ink, #2d2e33); color: #fff; }
.lc-rqf-page .lc-viewtoggle button:focus-visible { outline: 2px solid var(--gd-accent, #e44e56); outline-offset: -2px; }

/* ==========================================================================
   THE THREE-COLUMN SHELL
   ========================================================================== */

.lc-shell {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 300px);   /* JS overrides with a measured value */
  min-height: 480px;
  border-top: 1px solid var(--rqf-line);
}

/* --- column 1: filters --- */
.lc-sidebar {
  flex: 0 0 var(--rqf-side);
  width: var(--rqf-side);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-right: 1px solid var(--rqf-line);
}

/* Two columns scroll side by side here, and the platform's default bars put two wide grey
   channels down the middle of the page. */
.lc-sidebar, .lc-results { scrollbar-width: thin; scrollbar-color: #cfcfd2 transparent; }
.lc-sidebar::-webkit-scrollbar, .lc-results::-webkit-scrollbar { width: 7px; }
.lc-sidebar::-webkit-scrollbar-thumb, .lc-results::-webkit-scrollbar-thumb { background: #cfcfd2; }
.lc-sidebar::-webkit-scrollbar-track, .lc-results::-webkit-scrollbar-track { background: transparent; }
/* Left edge lines up with the heading above it; the right side needs only enough air to
   keep a control off the column rule. */
.lc-sidebar__inner { padding: 20px 22px 40px var(--rqf-pad); }
/* The bottom bar's reveal panel supplies its own header and close affordance, so a second
   one inside the moved sidebar would be two headers for one panel. */
.lc-sidebar__head { display: none; }

/* --- column 2: results --- */
.lc-results {
  flex: 1 1 auto;
  /* Load-bearing: without it a wide card floors the flex item and squeezes the map out. */
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--rqf-paper);
}
.lc-results__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--rqf-line);
  background: var(--rqf-paper);
  position: sticky;
  top: 0;
  z-index: 5;
}
.lc-rqf__count { margin: 0; flex: 1 1 auto; color: var(--rqf-ink); min-width: 0; }
.lc-sortwrap { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lc-sortwrap__label { color: var(--rqf-muted); }
.lc-rqf__select--sort { width: auto; min-width: 170px; min-height: 36px; padding: 6px 28px 6px 10px; }

/* --- column 3: map --- */
.lc-map {
  flex: 0 0 38%;
  width: 38%;
  min-width: 380px;
  background: var(--rqf-paper);
  border-left: 1px solid var(--rqf-line);
}
.lc-map .leaflet-container { font: inherit; }
/* Leaflet puts its controls at z-index 1000 in the root stacking context, above the site
   bottom bar at 985 — so the zoom buttons and the tile attribution drew on top of the
   filter sheet whenever it was open over the map. 800 clears Leaflet's own panes, whose
   highest is the popup layer at 700, and stays under the bar. */
.lc-rqf-page .lc-map .leaflet-top,
.lc-rqf-page .lc-map .leaflet-bottom { z-index: 800; }
/* The marker under the pointer, so a card and its place on the map are the same thing. */
.lc-map .leaflet-interactive.is-hot { filter: brightness(1.35); }

/* ==========================================================================
   THE FILTER CONTROLS

   Scoped to the PAGE, not to .lc-app: the bottom bar's reveal moves this sidebar into a
   panel that lives at <body> level, outside .lc-app, where every .lc-app-prefixed rule
   stops reaching it. Prefixing with the page's body class instead means one set of rules
   covers both homes, and there is no second copy to drift.
   ========================================================================== */

.lc-rqf-page .lc-sidebar,
.lc-rqf-page .lc-sidebar *,
.lc-rqf-page .lc-sidebar *::before,
.lc-rqf-page .lc-sidebar *::after { box-sizing: border-box; }

.lc-rqf-page .lc-fgroup { margin-bottom: 20px; }
.lc-rqf-page .lc-fgroup__head {
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rqf-ink, #2d2e33);
  padding-bottom: 7px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--gd-line, #e5e5e7);
}

.lc-rqf-page .lc-rqf__input,
.lc-rqf-page .lc-rqf__select {
  font-family: var(--gd-sans, sans-serif);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gd-ink, #2d2e33);
  background: #fff;
  border: 1px solid var(--gd-line, #e5e5e7);
  border-radius: 0;
  padding: 9px 11px;
  min-height: 42px;          /* a comfortable target on a phone */
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.lc-rqf-page .lc-rqf__select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gd-muted, #6c6d74) 50%),
                    linear-gradient(135deg, var(--gd-muted, #6c6d74) 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.lc-rqf-page .lc-rqf__input::placeholder { color: var(--gd-muted, #6c6d74); }
.lc-rqf-page .lc-rqf__input:focus-visible,
.lc-rqf-page .lc-rqf__select:focus-visible {
  outline: 2px solid var(--gd-accent, #e44e56);
  outline-offset: 1px;
}

/* --- chips: every option visible at once ---------------------------------
   A reader asking "can I just turn up?" reads the answer off the sidebar instead of
   opening a select to find out what the options even are. Town stays a select because
   thirty of them will not fit. */
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-rqf-page .lc-chip {
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gd-ink, #2d2e33);
  background: #fff;
  border: 1px solid var(--gd-line, #e5e5e7);
  border-radius: 0;
  padding: 9px 11px;
  min-height: 36px;
  cursor: pointer;
  transition: background .18s var(--gd-ease, ease), border-color .18s var(--gd-ease, ease),
              color .18s var(--gd-ease, ease);
}
.lc-rqf-page .lc-chip:hover { border-color: var(--gd-ink, #2d2e33); }
.lc-rqf-page .lc-chip.is-on {
  background: var(--gd-ink, #2d2e33);
  border-color: var(--gd-ink, #2d2e33);
  color: #fff;
}
/* Current, but not a filter. A solid block on the all-option says something is narrowed
   when nothing is, which is the one thing this row exists to tell the reader. */
.lc-rqf-page .lc-chip.is-all.is-on {
  background: #fff;
  color: var(--gd-ink, #2d2e33);
  border-color: var(--gd-ink, #2d2e33);
}
.lc-rqf-page .lc-chip:focus-visible { outline: 2px solid var(--gd-accent, #e44e56); outline-offset: 2px; }

/* Stacked: the rows overlap by their own border so four controls draw one hairline list
   rather than four separate boxes with a gap between each. */
.lc-chips--stack { display: block; }
.lc-rqf-page .lc-chips--stack .lc-chip {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  margin-bottom: -1px;
  min-height: 38px;
}
.lc-rqf-page .lc-chips--stack .lc-chip.is-on,
.lc-rqf-page .lc-chips--stack .lc-chip:hover { z-index: 1; }

/* --- switches: a box that fills, so on and off are legible without colour --- */
.lc-rqf__switches { display: flex; flex-direction: column; gap: 2px; }
.lc-rqf-page .lc-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--gd-ink, #2d2e33);
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.lc-switch__box {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gd-line, #e5e5e7);
  background: #fff;
  transition: background .14s ease, border-color .14s ease;
}
.lc-rqf-page .lc-switch:hover .lc-switch__box { border-color: var(--gd-ink, #2d2e33); }
.lc-rqf-page .lc-switch.is-on .lc-switch__box {
  background: var(--gd-ink, #2d2e33);
  border-color: var(--gd-ink, #2d2e33);
}
.lc-switch__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .14s ease;
}
.lc-rqf-page .lc-switch.is-on .lc-switch__box::after { transform: rotate(45deg) scale(1); }
.lc-rqf-page .lc-switch:focus-visible { outline: 2px solid var(--gd-accent, #e44e56); outline-offset: 2px; }

.lc-rqf-page .lc-rqf__near {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--gd-ink, #2d2e33);
  border-radius: 0;
  background: #fff;
  color: var(--gd-ink, #2d2e33);
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--gd-ease, ease), color .18s var(--gd-ease, ease);
}
.lc-rqf-page .lc-rqf__near:hover { background: var(--gd-ink, #2d2e33); color: #fff; }
.lc-rqf-page .lc-rqf__near.is-on { background: var(--gd-ink, #2d2e33); border-color: var(--gd-ink, #2d2e33); color: #fff; }
.lc-rqf-page .lc-rqf__near[disabled] { opacity: .5; cursor: default; }
.lc-rqf-page .lc-rqf__near:focus-visible { outline: 2px solid var(--gd-accent, #e44e56); outline-offset: 2px; }

.lc-rqf-page .lc-clear {
  display: none;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gd-accent, #e44e56);
  font-family: var(--gd-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-rqf-page .lc-clear:hover { color: var(--gd-ink, #2d2e33); }

/* ==========================================================================
   A CARD

   Horizontal, photograph left. Deliberately NOT a uniform tile grid: a directory read at
   speed wants one column of rows whose left edge is a picture, so the eye runs down the
   photographs and the type stays on one measure.
   ========================================================================== */

.lc-rqf__grid { padding: 16px 22px 28px; display: flex; flex-direction: column; gap: 12px; }

.lc-rqf-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rqf-line);
  transition: border-color .18s var(--gd-ease, ease);
}
.lc-rqf-card:hover { border-color: var(--rqf-ink); }
/* One hairline, not a badge. A venue we have singled out is worth a mark, not a shout. */
.lc-rqf-card.is-featured { border-left: 1px solid var(--rqf-accent); }

.lc-rqf-card__media {
  display: block;
  position: relative;
  width: 168px;
  height: 126px;
  overflow: hidden;
  background: var(--rqf-paper);
}
.lc-rqf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--gd-ease, ease);
}
.lc-rqf-card:hover .lc-rqf-card__media img { transform: scale(1.04); }

/* A venue with no photograph gets a composed frame rather than an empty grey one: the
   sport set large on the well tone with the town beneath it, so the two facts a picture
   would have carried are the ones on show. This styles the gap. It does not close it —
   47 of these venues still need photographing. */
/* Paper rather than the well tone, because there are 47 of these against 93 photographs:
   a third of the list rendering as solid dark blocks is a wall, and the point of the frame
   is to be quiet about a gap, not to announce it. */
.lc-rqf-card__media.is-composed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--rqf-paper);
  box-shadow: inset 0 0 0 1px var(--rqf-line);
}
/* The court is the frame's whole content, so it takes the space a photograph would and is
   centred in it rather than parked in a corner.

   Ink, not the accent. Drawn in the accent these read as the most deliberate mark on the
   page while sitting on its least complete records — the accent's job here is to show which
   filter is current, and spending it on "no photograph yet" inverts the hierarchy. Held
   down to a blueprint weight the frame recedes, which is what a placeholder should do. */
.lc-rqf-card__court {
  display: block;
  width: 100%;
  max-width: 118px;
  color: var(--rqf-ink);
  opacity: .22;
}
.lc-rqf-card__court svg { display: block; width: 100%; height: auto; }
.lc-rqf-card:hover .lc-rqf-card__court { opacity: .34; transition: opacity .3s var(--gd-ease, ease); }

.lc-rqf-card__lead {
  font-family: var(--gd-serif, Georgia, serif);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--rqf-ink);
}
.lc-rqf-card__leadwhere {
  margin-top: 0;
  font-size: 9px;
  letter-spacing: .16em;
  text-align: center;
  color: var(--rqf-muted);
}

.lc-rqf-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 0 0; }

.lc-rqf-card__title {
  margin: 0;
  font-family: var(--gd-serif, Georgia, serif);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
}
.lc-rqf-card__title a { color: inherit; text-decoration: none; }
.lc-rqf-card:hover .lc-rqf-card__title a { text-decoration: underline; text-underline-offset: 3px; }
.lc-rqf-card__title a:focus-visible { outline: 2px solid var(--rqf-accent); outline-offset: 3px; }

.lc-rqf-card__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rqf-muted);
}

/* Two lines, clamped. The feed's blurbs run from a clause to a paragraph, and one long
   entry setting the height of every row it sits beside is the ragged edge that makes a
   list of real venues look like a rendering fault. */
.lc-rqf-card__blurb {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--gd-serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--rqf-ink);
}

/* How you get on and what it costs, on one line — the two facts that decide whether a
   reader goes. A venue that carries neither renders no line at all, so the card closes up
   instead of holding a space where a value would have been. */
.lc-rqf-card__terms {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--rqf-ink);
}

.lc-rqf-card__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rqf-muted);
}

.lc-rqf-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.lc-rqf-btn {
  text-decoration: none;
  padding: 10px 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rqf-ink);
  color: var(--rqf-ink);
  background: #fff;
  cursor: pointer;
  transition: background .18s var(--gd-ease, ease), color .18s var(--gd-ease, ease);
}
.lc-rqf-btn:hover { background: var(--rqf-ink); color: #fff; }
.lc-rqf-btn:focus-visible { outline: 2px solid var(--rqf-accent); outline-offset: 2px; }
.lc-rqf-btn--book { background: var(--rqf-ink); color: #fff; }
.lc-rqf-btn--book:hover { background: var(--rqf-accent); border-color: var(--rqf-accent); }
.lc-rqf-btn--quiet { border-color: var(--rqf-line); color: var(--rqf-muted); }
.lc-rqf-btn--quiet:hover { border-color: var(--rqf-ink); background: #fff; color: var(--rqf-ink); }

/* ---- loading, empty, failed --------------------------------------------- */

.lc-rqf-skel {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rqf-line);
}
.lc-rqf-skel__media { height: 126px; }
.lc-rqf-skel__body { padding-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.lc-rqf-skel__line { height: 11px; width: 100%; }
.lc-rqf-skel__line--title { height: 20px; width: 62%; }
.lc-rqf-skel__line--short { width: 38%; }
.lc-rqf-skel__media,
.lc-rqf-skel__line {
  background: linear-gradient(100deg, #eceae7 30%, #f6f4f2 50%, #eceae7 70%) 0 0 / 300% 100%;
  animation: lc-rqf-sheen 1.5s linear infinite;
}
@keyframes lc-rqf-sheen { to { background-position: -150% 0; } }

.lc-rqf__empty { padding: 44px 4px 32px; max-width: 46ch; }
.lc-rqf__empty-h {
  margin: 0 0 8px;
  font-family: var(--gd-serif, Georgia, serif);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--rqf-ink);
}
.lc-rqf__empty-p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--rqf-muted); }

/* ==========================================================================
   TABLET (960–1199px): the map moves behind a Show map toggle; sidebar stays.
   ========================================================================== */
@media (max-width: 1199px) {
  .lc-topbar { display: flex; }
  .lc-maptoggle { display: inline-flex; align-items: center; }

  .lc-shell[data-view="list"] .lc-map { display: none; }
  .lc-shell[data-view="map"] .lc-results { display: none; }
  .lc-shell[data-view="map"] .lc-map { display: block; flex: 1 1 auto; width: auto; }
}

/* ==========================================================================
   MOBILE (<960px): the sidebar is adopted by the site bottom bar; the map and the list
   are one pane each, sized from the measured --lc-shell-h.
   ========================================================================== */
@media (max-width: 959px) {
  .lc-maptoggle { display: none; }
  .lc-viewtoggle { display: inline-flex; }

  /* The site bottom bar took Filters and List/Map, so the topbar is left holding nothing
     but its own border. The class is added only after the handover succeeds, so with no
     bottom bar the topbar keeps rendering as the fallback. */
  .lc-app.lc-has-bottombar .lc-topbar { display: none; }

  .lc-rqf__head { padding-top: 16px; }
  /* A phone gets the 1024 frame: the band is 414px of a 1536px file otherwise, and this
     is the one image on the page that loads before anything a reader asked for. */
  .lc-rqf__head::before {
    background-image: url("/wp-content/uploads/863818-sea-pines-racquet-club-1024x683.jpg");
    background-position: 50% 46%;
  }
  /* Vertical here, not the desktop left-to-right: at this width the title runs the full
     band, so there is no clear right-hand side to keep for the picture. The scrim is
     deepest under the type and the sport row and lifts between them, which is the only
     window the photograph gets on a phone. */
  .lc-rqf__head::after {
    background: linear-gradient(180deg, rgba(20, 22, 26, .90) 0%, rgba(20, 22, 26, .66) 30%,
                                        rgba(20, 22, 26, .46) 62%, rgba(20, 22, 26, .78) 100%);
  }
  .lc-rqf__headtop { padding-bottom: 14px; }
  .lc-rqf__h { font-size: clamp(24px, 7vw, 32px); max-width: none; }
  /* Wraps rather than scrolls. Held on one line at 414 the row is 576px inside 374px, so
     "Padel 14" lost its count mid-label and "Sand volleyball 1" sat entirely off-screen --
     and with the scrollbar hidden there was nothing to say either existed. This row is the
     shortest route into 140 rows, so a route that hides two of its five options is broken.
     The second line costs 41px against 528px of headroom below the first card at 414,
     which is affordable where losing two sports is not. */
  .lc-rqf__indexchips { flex-wrap: wrap; overflow-x: visible; }
  .lc-rqf__indexchips .lc-chip { white-space: nowrap; padding: 12px 13px 10px; }

  .lc-shell { display: block; height: auto; min-height: 0; }
  .lc-sidebar { width: auto; border-right: 0; overflow: visible; }
  .lc-sidebar__inner { padding: 16px 18px 24px; }

  .lc-results, .lc-map { width: 100%; }
  /* --lc-shell-h is measured and published by sizeShell(): it accounts for the real shell
     offset AND the fixed bottom bar's height. The calc is a first-paint / no-JS fallback
     only, and it is wrong on purpose — it knows nothing about the bar. */
  .lc-shell[data-view="list"] .lc-results {
    display: block; height: var(--lc-shell-h, calc(100vh - 200px));
  }
  .lc-shell[data-view="map"] .lc-map {
    display: block; height: var(--lc-shell-h, calc(100vh - 200px));
    min-width: 0; border-left: 0;
  }

  .lc-results__head { padding: 13px 14px 11px; flex-wrap: wrap; row-gap: 8px; }
  .lc-results__head > * { min-width: 0; max-width: 100%; }
  .lc-sortwrap__label { display: none; }
  .lc-rqf__select--sort { min-width: 150px; }
  .lc-rqf__grid { padding: 14px; }

  /* The moved sidebar renders inside the bar's panel, which owns the scroll and the skin. */
  .lc-bottombar__panel .lc-sidebar { max-height: none; overflow: visible; border-right: 0; background: transparent; }
  .lc-bottombar__panel .lc-sidebar__inner { padding: 14px 16px 18px; }
  .lc-bottombar__panel .lc-sidebar__head { display: none; }
}

@media (max-width: 560px) {
  /* The photograph goes on top: 168px of picture plus a name and two facts does not fit
     a 414px screen without the title wrapping to four lines. */
  .lc-rqf-card,
  .lc-rqf-skel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lc-rqf-card__media { width: 100%; height: 190px; }
  .lc-rqf-skel__media { height: 190px; }
  .lc-rqf-card__lead { font-size: 30px; }
  .lc-rqf-card__title { font-size: 19px; }
  .lc-rqf-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-rqf-card,
  .lc-rqf-card__media img,
  .lc-chip, .lc-switch__box, .lc-switch__box::after,
  .lc-rqf__near, .lc-rqf-btn { transition: none; }
  .lc-rqf-card:hover .lc-rqf-card__media img { transform: none; }
  .lc-rqf-skel__media, .lc-rqf-skel__line { animation: none; }
}

/* ---- Map legend -------------------------------------------------------------
   The four access colours read as decoration without this: the geography lands but
   the code does not, and a reader cannot tell a members-only club from somewhere they
   can turn up and play. Sits bottom-left, above Leaflet's attribution, in the house
   language — square, hairline, paper, no shadow. */
.lc-rqf-legend {
  background: var(--rqf-paper);
  border: 1px solid var(--rqf-line);
  padding: 8px 10px;
  margin: 0 0 6px 6px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--rqf-ink);
  max-width: 168px;
}
.lc-rqf-legend__h {
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rqf-muted);
  margin-bottom: 5px;
}
.lc-rqf-legend__row { display: flex; align-items: center; gap: 7px; }
/* Square, like every other mark on the page, and ringed so a pale dot still reads on
   paper. The map draws circles; the legend is a key, not a copy of the pin. */
.lc-rqf-legend__row i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Below 1200px the map is a pane the reader toggles into rather than a permanent column,
   and at that width the legend costs more of it than it returns. */
@media (max-width: 599px) { .lc-rqf-legend { display: none; } }