/* One venue, given room.
 *
 * A reader arrives here from a DETAILS button on a finder card, carrying one question:
 * do I go? So the page is the card opened out — the same photograph, the same serif name,
 * the same two deciding facts — and never a second visual world.
 *
 * THE SHAPE THE DATA FORCED. Of 140 venues, 93 carry a photograph, 60 record who may play,
 * 9 publish an open-play schedule. A layout built from labelled rows would render most of
 * these pages as a form with the values missing. So the body is a sequence of STATEMENTS:
 * each block's heading is a sentence assembled from the facts that venue actually holds,
 * and a block with nothing to say does not exist. A page carrying three facts reads as
 * three things worth knowing rather than as thirty blanks.
 *
 * Tokens are the site's own --gd-* (lc-guide.css), the finder's control vocabulary is
 * reused verbatim, and the closing band is lc-guide.css's .lcgf-cta. Square corners,
 * hairline rules, no shadows.
 */

.lc-rqs {
  --rqs-ink: var(--gd-ink, #2d2e33);
  --rqs-muted: var(--gd-muted, #6c6d74);
  --rqs-line: var(--gd-line, #e5e5e7);
  --rqs-paper: var(--gd-paper, #f7f6f4);
  --rqs-well: var(--gd-well, #14161a);
  --rqs-accent: var(--gd-accent, #e44e56);
  --rqs-serif: var(--gd-serif, 'Playfair Display', 'PT Serif', Georgia, serif);
  --rqs-sans: var(--gd-sans, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

  color: var(--rqs-ink);
  font-family: var(--rqs-sans);
  background: #fff;
}
/* Scoped, never global: a bare `*` reset renders links wider than asked on this site. */
.lc-rqs *, .lc-rqs *::before, .lc-rqs *::after { box-sizing: border-box; }

/* The theme's default single-post furniture. This template renders its own title, so the
   theme's article title and the container padding would both duplicate and box it. */
.lc-rqs-page #tm-main.uk-section { padding: 0 !important; }
.lc-rqs-page #tm-main .uk-container { max-width: none !important; padding: 0 !important; }
.lc-rqs-page #tm-main .uk-article-title,
.lc-rqs-page #tm-main .tm-page-title,
.lc-rqs-page #tm-main .uk-breadcrumb { display: none !important; }
/* The theme inserts a spacer so page content clears an overlapping header. Here the hero
   owns the top of the viewport, so that spacer would only push the photograph back down. */
.lc-rqs-page .tm-header-placeholder { display: none !important; }

/* ==========================================================================
   THE HERO

   Two versions, because 47 venues have no photograph and a grey rectangle is not an
   opening. The composed one is shorter on purpose — it is a title card, and a title card
   stretched to photograph height reads as a picture that failed to load.
   ========================================================================== */

.lc-rqs__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(500px, 72vh, 820px);
  /* Keeps the title clear of the overlaid navigation on a short viewport, where the box
     grows past its min-height instead of bottom-aligning inside it. */
  padding-top: 104px;
  background: var(--rqs-well) center / cover no-repeat;
}
/* Two scrims: the lower one carries the title, the upper one keeps the overlaid
   navigation legible over a bright photograph. */
.lc-rqs__hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 14, 18, .66), rgba(12, 14, 18, 0) 230px),
    linear-gradient(to top, rgba(12, 14, 18, .84), rgba(12, 14, 18, .22) 56%, rgba(12, 14, 18, .06));
}
/* A photographed sports hall throws its brightest values along the top edge, exactly where
   the overlaid navigation sits, so the upper scrim carries the links rather than the image. */
.lc-rqs__hero--card {
  min-height: clamp(380px, 50vh, 540px);
  background: var(--rqs-well);
}

.lc-rqs__heroinner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px) clamp(34px, 4.4vw, 58px);
  color: #fff;
}
/* The house mark — the same tick that opens a department rule on the guide fronts. */
.lc-rqs__heroinner::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--rqs-accent);
}

.lc-rqs__title {
  margin: 0;
  font-family: var(--rqs-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.028em;
  color: #fff;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 1px 26px rgba(10, 14, 12, .34);
}
.lc-rqs__where {
  margin: .5em 0 0;
  font-family: var(--rqs-serif);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 16px rgba(10, 14, 12, .4);
}
/* The two facts that decide whether a reader goes, and the only thing allowed to sit in
   the label voice up here. A venue recording neither renders no line at all. */
.lc-rqs__terms {
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.lc-rqs__terms span + span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 12px 4px;
  background: rgba(255, 255, 255, .42);
}

/* ==========================================================================
   THE ACTION BAR — the finder's button vocabulary, unchanged.
   Only the actions a venue can actually honour appear: most of these are free municipal
   courts you turn up to, and a Book button pointing at a parks homepage is a promise
   the page cannot keep.
   ========================================================================== */

.lc-rqs__actions {
  position: sticky;
  z-index: 20;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--rqs-line);
}
/* The desktop navigation stays stuck at 80px tall, so the bar parks beneath it. The
   mobile header scrolls away with the page, so below the breakpoint top:0 is right. */
@media (min-width: 960px) { .lc-rqs__actions { top: 80px; } }

.lc-rqs__actionsinner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px clamp(18px, 4vw, 40px);
}

.lc-rqs__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 17px;
  border: 1px solid var(--rqs-ink);
  background: #fff;
  color: var(--rqs-ink);
  font-family: var(--rqs-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--gd-ease, ease), color .18s var(--gd-ease, ease),
              border-color .18s var(--gd-ease, ease);
}
.lc-rqs__btn:hover { background: var(--rqs-ink); color: #fff; }
.lc-rqs__btn:focus-visible { outline: 2px solid var(--rqs-accent); outline-offset: 2px; }
/* Exactly one action is filled, on every venue. Where a venue takes bookings it is the
   booking; where it does not it is the phone or the directions, because a row of identical
   outlines gives a reader arriving at speed nothing to aim at. */
.lc-rqs__btn--lead { background: var(--rqs-ink); color: #fff; }
.lc-rqs__btn--lead:hover { background: var(--rqs-accent); border-color: var(--rqs-accent); }
/* The way back is a route, not an action, so it is set as a link and parked at the far end
   of the bar rather than boxed alongside the things a reader came here to do. */
.lc-rqs__btn--quiet {
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px;
  border-color: transparent;
  color: var(--rqs-muted);
}
.lc-rqs__btn--quiet:hover {
  background: none;
  color: var(--rqs-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ==========================================================================
   THE BODY
   ========================================================================== */

.lc-rqs__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 58px) clamp(18px, 4vw, 40px) clamp(44px, 6vw, 76px);
}
/* Most venues record a name, a town, coordinates and a phone number and nothing else. Held
   in the sidebar those become marginalia in the smallest type on the page while the reading
   column stands empty beside them — the shape that reads as a form with its values missing.
   With no reading column the facts take the full measure and the map becomes the picture. */
.lc-rqs__body--sole { grid-template-columns: minmax(0, 1fr); }

/* A venue that has not opened, or has stopped. Stated plainly and once. */
.lc-rqs__notice {
  margin: 0 0 30px;
  padding: 16px 20px;
  background: var(--rqs-paper);
  border-top: 2px solid var(--rqs-accent);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rqs-ink);
}
.lc-rqs__notice b { font-weight: 600; }

/* The one piece of voice on the page: what is worth knowing about playing here. */
.lc-rqs__lede {
  margin: 0 0 clamp(28px, 3.4vw, 42px);
  font-family: var(--rqs-serif);
  font-size: clamp(1.14rem, 1.6vw, 1.32rem);
  line-height: 1.62;
  letter-spacing: -.004em;
  max-width: 60ch;
  color: var(--rqs-ink);
}

/* --- a statement block ----------------------------------------------------
   The heading IS the fact, assembled from what this venue records. That is what keeps a
   thin page honest: no block exists to introduce a value that is missing. */
.lc-rqs__b {
  padding-top: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--rqs-line);
}
.lc-rqs__b:last-child { margin-bottom: 0; }

.lc-rqs__st {
  margin: 0;
  font-family: var(--rqs-serif);
  font-weight: 400;
  font-size: clamp(1.32rem, 2.1vw, 1.72rem);
  line-height: 1.24;
  letter-spacing: -.016em;
  color: var(--rqs-ink);
  max-width: 30ch;
  text-wrap: balance;
}
.lc-rqs__d {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.66;
  max-width: 62ch;
  color: var(--rqs-muted);
}
.lc-rqs__d + .lc-rqs__d { margin-top: 7px; }
.lc-rqs__d strong { color: var(--rqs-ink); font-weight: 600; }
.lc-rqs__d a { color: var(--rqs-ink); text-decoration: underline; text-underline-offset: 3px; }
.lc-rqs__d a:hover { color: var(--rqs-accent); }

/* --- open play ------------------------------------------------------------
   A real table. Nine venues publish a schedule and for those nine it is the most useful
   thing on the page, so it gets rows and columns rather than a paragraph. */
.lc-rqs__table {
  width: 100%;
  margin: 16px 0 0;
  border-collapse: collapse;
  font-size: 14.5px;
}
.lc-rqs__table th {
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--rqs-line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--rqs-muted);
}
.lc-rqs__table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rqs-line);
  line-height: 1.4;
  vertical-align: top;
  color: var(--rqs-ink);
}
.lc-rqs__table td:last-child, .lc-rqs__table th:last-child { padding-right: 0; }
.lc-rqs__table .lc-rqs__when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-rqs__table .lc-rqs__band { color: var(--rqs-muted); }

/* ==========================================================================
   THE ASIDE — where it is, and how to reach it.
   Nearly every venue has coordinates, so this column is the one part of the page that is
   never empty. It is headed by the town, which is a name rather than a label.
   ========================================================================== */

.lc-rqs__side { min-width: 0; }
.lc-rqs__sidehead {
  margin: 0 0 14px;
  padding-top: 4px;
  font-family: var(--rqs-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -.016em;
  color: var(--rqs-ink);
}
.lc-rqs__map {
  height: 260px;
  background: var(--rqs-paper);
  border: 1px solid var(--rqs-line);
}
.lc-rqs__map .leaflet-container { font: inherit; }

.lc-rqs__facts { margin: 18px 0 0; }
.lc-rqs__fact { padding: 11px 0; border-top: 1px solid var(--rqs-line); }
.lc-rqs__fact:first-child { border-top: 0; padding-top: 0; }
.lc-rqs__fact dt {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rqs-muted);
}
.lc-rqs__fact dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rqs-ink);
  overflow-wrap: anywhere;
}
.lc-rqs__fact a { color: var(--rqs-ink); text-decoration: underline; text-underline-offset: 3px; }
.lc-rqs__fact a:hover { color: var(--rqs-accent); }
.lc-rqs__fact a:focus-visible { outline: 2px solid var(--rqs-accent); outline-offset: 2px; }

.lc-rqs__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.lc-rqs__tag {
  padding: 6px 10px;
  border: 1px solid var(--rqs-line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rqs-muted);
  text-decoration: none;
}
.lc-rqs__tag:hover { border-color: var(--rqs-ink); color: var(--rqs-ink); }

/* --- the same facts, holding the page on their own ------------------------
   Not the sidebar widened. The heading becomes the sentence it was always a label for, the
   map runs the measure as the one picture a venue with no photograph has, and the facts sit
   in a rule-divided row at reading size — a section shaped unlike the statement stack above
   it, so a thin page still has two different things on it. */
.lc-rqs__body--sole .lc-rqs__sidehead {
  margin-bottom: clamp(20px, 2.6vw, 28px);
  font-size: clamp(1.46rem, 2.7vw, 2.05rem);
  line-height: 1.2;
  max-width: 24ch;
  text-wrap: balance;
}
.lc-rqs__body--sole .lc-rqs__map {
  height: auto;
  min-height: 300px;
  aspect-ratio: 12 / 5;
}
/* Sized to their content, never stretched to fill the measure: two facts spread across a
   1040px row read as two items marooned either side of a rule standing in open space. */
.lc-rqs__body--sole .lc-rqs__facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  border-top: 1px solid var(--rqs-line);
}
.lc-rqs__body--sole .lc-rqs__fact {
  flex: 0 1 auto;
  min-width: 180px;
  max-width: 34ch;
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.8vw, 34px);
  border-top: 0;
  border-left: 1px solid var(--rqs-line);
}
.lc-rqs__body--sole .lc-rqs__fact:first-child { padding-left: 0; border-left: 0; }
.lc-rqs__body--sole .lc-rqs__fact dt { margin-bottom: 7px; }
.lc-rqs__body--sole .lc-rqs__fact dd { font-size: 1.06rem; line-height: 1.45; }
.lc-rqs__body--sole .lc-rqs__tags { margin-top: clamp(22px, 2.6vw, 30px); }

/* ==========================================================================
   MORE IN THIS TOWN

   The route on. It is also what keeps a sparse page from being a dead end: a venue with
   three facts still sits in a town with ten others, and the next court is the most useful
   thing the page can offer once it has said everything it knows.
   ========================================================================== */

.lc-rqs__more {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px) clamp(40px, 5vw, 64px);
}
.lc-rqs__moreh {
  margin: 0 0 20px;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rqs-line);
  font-family: var(--rqs-serif);
  font-weight: 400;
  font-size: clamp(1.32rem, 2.1vw, 1.72rem);
  line-height: 1.24;
  letter-spacing: -.016em;
  color: var(--rqs-ink);
}
.lc-rqs__morelist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lc-rqs__card { display: block; text-decoration: none; color: inherit; }
.lc-rqs__cardfig {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rqs-paper);
  box-shadow: inset 0 0 0 1px var(--rqs-line);
}
.lc-rqs__cardfig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--gd-ease, ease);
}
.lc-rqs__card:hover .lc-rqs__cardfig img { transform: scale(1.04); }
/* A sibling with no photograph gets the page's own title-card treatment one size down —
   well tone, accent tick, the sport in the serif. Set faint on the paper tone it read as a
   frame whose image had failed; set as a card it reads as a deliberate second kind of tile. */
.lc-rqs__cardfig--card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: var(--rqs-well);
  box-shadow: none;
  font-family: var(--rqs-serif);
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
}
.lc-rqs__cardfig--card::before {
  content: "";
  width: 26px;
  height: 2px;
  margin-bottom: 10px;
  background: var(--rqs-accent);
}
.lc-rqs__cardt {
  margin: 10px 0 0;
  font-family: var(--rqs-serif);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.014em;
  color: var(--rqs-ink);
}
.lc-rqs__card:hover .lc-rqs__cardt { text-decoration: underline; text-underline-offset: 3px; }
.lc-rqs__card:focus-visible { outline: 2px solid var(--rqs-accent); outline-offset: 4px; }
.lc-rqs__cardm {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rqs-muted);
}

/* The closing band is lc-guide.css's .lcgf-cta, sat inside the page measure. */
.lc-rqs__cta { max-width: 1120px; margin: 0 auto clamp(24px, 3vw, 40px); padding: 0 clamp(18px, 4vw, 40px); }

/* ============================================================ breakpoints ==*/

@media (max-width: 1023px) {
  .lc-rqs__body { grid-template-columns: minmax(0, 1fr); }
  .lc-rqs__side { padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--rqs-line); }
  /* Sole-column pages have nothing above the facts to rule off from. */
  .lc-rqs__body--sole .lc-rqs__side { padding-top: 0; border-top: 0; }
  .lc-rqs__morelist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  /* dvh keeps the hero from resizing as a mobile browser's address bar collapses. */
  .lc-rqs__hero { min-height: clamp(420px, 62vh, 620px); min-height: clamp(420px, 62dvh, 620px); padding-top: 186px; }
  .lc-rqs__hero--card { min-height: clamp(340px, 46vh, 460px); min-height: clamp(340px, 46dvh, 460px); }
  .lc-rqs__heroinner::before { margin-bottom: 16px; }
}

@media (max-width: 639px) {
  .lc-rqs__title { max-width: none; }
  .lc-rqs__terms span { display: block; }
  .lc-rqs__terms span + span { margin-top: 5px; }
  .lc-rqs__terms span + span::before { display: none; }
  .lc-rqs__btn { flex: 1 1 auto; justify-content: center; }
  /* The actions share the row; the way back takes the line under them. */
  .lc-rqs__btn--quiet { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; padding-left: 0; }
  /* A 12:5 map is a letterbox on a phone, and the facts have no width to sit side by side. */
  .lc-rqs__body--sole .lc-rqs__map { aspect-ratio: 5 / 4; min-height: 0; }
  .lc-rqs__body--sole .lc-rqs__facts { flex-direction: column; }
  .lc-rqs__body--sole .lc-rqs__fact {
    max-width: none;
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--rqs-line);
  }
  .lc-rqs__body--sole .lc-rqs__fact:first-child { border-top: 0; padding-top: 0; }
  .lc-rqs__morelist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lc-rqs__table { font-size: 13.5px; }
  .lc-rqs__table td, .lc-rqs__table th { padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-rqs__btn, .lc-rqs__cardfig img { transition: none; }
  .lc-rqs__card:hover .lc-rqs__cardfig img { transform: none; }
}