/* =====================================================================
   HARROGATE RACQUETS CLUB · COURTS AT A GLANCE
   Styles for courts.html only. Colours come from the :root block in
   site.css, so retuning the palette there retunes this page too.
   ===================================================================== */

.page-hero.courts-hero { min-height: 0; }
.page-hero.courts-hero .hero-inner { padding-bottom: clamp(30px, 4vw, 44px); }
.page-hero.courts-hero h1 { max-width: 18ch; }

.courts-section { padding-top: clamp(24px, 3vw, 40px); }

.cg { display: grid; gap: 18px; }

.cg-banner {
  background: var(--brass-soft); color: #5A4511; border-radius: var(--radius-lg);
  padding: 12px 16px; font-size: 14.5px; line-height: 1.45;
}

/* ---------- days ---------- */
.cg-days {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.cg-day {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 66px; min-height: 78px; padding: 8px 6px;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px;
  cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.cg-day:hover { border-color: var(--ink); }
.cg-day-dow { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cg-day-num { font-family: var(--font-display); font-size: 25px; line-height: 1; font-weight: 600; }
.cg-day-mon { font-size: 11.5px; color: var(--ink-3); }
.cg-day.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.cg-day.is-current .cg-day-dow, .cg-day.is-current .cg-day-mon { color: var(--brass); }
.cg-day.is-view { background: var(--paper); border-style: dashed; }
.cg-day.is-view.is-current { background: var(--navy-2); border-style: solid; }
.cg-days-divider {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 4px;
}
.cg-days-divider span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  border-left: 2px solid var(--line-2); padding-left: 6px;
}

/* ---------- sport tabs ---------- */
.cg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cg-tab {
  min-height: 60px; padding: 10px 12px; text-align: left; cursor: pointer;
  display: grid; align-content: center; gap: 2px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink);
  border-top: 4px solid var(--tab-accent, var(--navy));
}
.cg-tab:hover { border-color: var(--ink); border-top-color: var(--tab-accent, var(--navy)); }
.cg-tab-name { font-weight: 600; font-size: 16px; }
.cg-tab-sub { font-size: 13px; color: var(--ink-3); }
.cg-tab.is-current { background: var(--navy); border-color: var(--navy); border-top-color: var(--tab-accent, var(--brass)); color: #fff; }
.cg-tab.is-current .cg-tab-sub { color: rgba(255,255,255,.78); }
.cg-tab-all { --tab-accent: var(--brass); }
.cg-tab-tennis { --tab-accent: var(--tennis); }
.cg-tab-badminton { --tab-accent: var(--badminton); }
.cg-tab-table-tennis { --tab-accent: var(--table-tennis); }
.cg-tab.is-current.cg-tab-tennis { border-top-color: #2E8A5E; }

/* ---------- day bar ---------- */
.cg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cg-bar-day { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cg-date { font-size: clamp(24px, 2.6vw, 32px); }
.cg-status { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.cg-status.is-open { background: #E3EFE8; color: var(--tennis-ink); }
.cg-status.is-view { background: var(--brass-soft); color: #5A4511; }
.cg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.cg-legend li { display: flex; align-items: center; gap: 6px; }
.cg-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.k-free { background: #fff; border: 1px solid #8DB6E6; }
.k-part { background: #EAF2FC; border: 1px dashed #8DB6E6; }
.k-full { background: #E4E8EF; }
.k-club { background: var(--navy); }
.k-coaching { background: #D9EADF; border: 1px solid #9CC6AE; }
.k-closed { background: repeating-linear-gradient(135deg, #E4E8EF 0 4px, #F4F6F9 4px 8px); border: 1px solid #D5DAE3; }

/* ---------- board ---------- */
.cg-board-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(12px, 2vw, 22px); }
.cg-board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 36px; flex-wrap: wrap; }
.cg-book { white-space: nowrap; }
.cg-book.is-disabled { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line-2); cursor: not-allowed; }
.cg-hint { font-size: 13.5px; color: var(--ink-3); margin-left: auto; text-align: right; }
.cg-back { white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 8px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink);
}
.cg-back svg { width: 18px; height: 18px; }
.cg-back:hover { border-color: var(--ink); }
.cg-board { overflow-x: auto; }
.cg-loading { padding: 40px 0; text-align: center; color: var(--ink-3); }

.cg-grid { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(34px, auto); gap: 4px; min-width: 640px; }
.cg-grid-sport { grid-auto-rows: minmax(38px, auto); }
.cg-grid-sport, .cg-grid-agg { min-width: 0; }
.cg-group {
  text-align: center; font-weight: 600; font-size: 15px; padding: 4px 0 8px;
  border-bottom: 3px solid var(--head-accent, var(--navy)); margin-bottom: 2px;
}
.cg-court, .cg-head {
  text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 0 8px;
}
.cg-head { font-size: 13.5px; color: var(--ink); border-bottom: 3px solid var(--head-accent, var(--navy)); margin-bottom: 4px; }
.cg-grid-sport .cg-court { color: var(--ink); font-size: 14px; border-bottom: 3px solid var(--head-accent, var(--navy)); margin-bottom: 4px; }
.cg-head-tennis { --head-accent: var(--tennis); }
.cg-head-badminton { --head-accent: var(--badminton); }
.cg-head-table-tennis { --head-accent: var(--table-tennis); }

.cg-time { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.cg-time.is-hour { color: var(--ink); font-weight: 600; }

.cg-cell {
  height: 34px; border-radius: 6px; border: 1px solid transparent; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
button.cg-cell { cursor: pointer; width: 100%; font: inherit; font-size: 12.5px; font-weight: 600; }
.cg-grid .cg-cell.is-span, .cg-grid button.cg-cell.is-span { height: auto; align-self: stretch; white-space: normal; text-align: center; line-height: 1.2; padding: 4px 6px; overflow-wrap: break-word; hyphens: auto; }
.cg-grid-sport .cg-cell { height: 38px; }
.c-free { background: #fff; border-color: #8DB6E6; color: var(--royal); }
button.c-free:hover, a.c-free:hover { background: #EAF2FC; border-color: var(--royal); }
a.cg-cell { text-decoration: none; }
a.c-part:hover { border-style: solid; border-color: var(--royal); }
.c-part { background: #EAF2FC; border: 1px dashed #8DB6E6; color: var(--royal-2); }
button.c-part:hover { border-style: solid; border-color: var(--royal); }
.c-full { background: #E4E8EF; color: #4A5468; font-weight: 500; }
.c-past { background: repeating-linear-gradient(135deg, #F3F5F9 0 6px, #EDF0F5 6px 12px); }
.c-session.c-club { background: var(--navy); color: #fff; }
.c-session.c-coaching { background: #D9EADF; border-color: #9CC6AE; color: var(--tennis-ink); }
.c-session.c-hire { background: #E4E8EF; color: #4A5468; font-weight: 500; }
.c-session.c-closed { background: repeating-linear-gradient(135deg, #E4E8EF 0 4px, #F4F6F9 4px 8px); color: #6B7385; font-weight: 500; }
button.c-full:hover, button.c-session:hover { outline: 2px solid var(--line-2); }
.cg-cell.is-picked { background: var(--brass); border-color: #D9AE45; color: var(--navy); }

/* ---------- picker ---------- */
.cg-pick { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(16px, 2.4vw, 24px); display: grid; gap: 16px; scroll-margin-top: calc(var(--header-h) + 12px); }
.cg-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cg-pick-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.cg-pick-title { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.15; margin-top: 4px; }
.cg-pick-close { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.cg-pick-close svg { width: 18px; height: 18px; }
.cg-pick-close:hover { border-color: #fff; }
.cg-pick-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: end; }
.cg-pick-rows { display: grid; gap: 12px; }
.cg-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cg-pick-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); min-width: 52px; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); font-variant-numeric: tabular-nums;
}
.cg-chip:hover { border-color: #fff; }
.cg-chip.is-current { background: #fff; color: var(--navy); border-color: #fff; }
.cg-pick-hint { font-size: 12.5px; color: rgba(255,255,255,.65); }
.cg-pick-action { display: grid; gap: 8px; justify-items: end; text-align: right; }
.cg-pick-note { font-size: 13px; color: rgba(255,255,255,.78); margin: 0; max-width: 36ch; }
.cg-pick .is-disabled { cursor: not-allowed; opacity: .75; }

.cg-foot { margin: 0; }

/* ---------- fallback (no live data) ---------- */
.cg-fallback { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); display: grid; gap: 14px; justify-items: start; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .cg-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cg-tab { padding: 8px 8px; min-height: 64px; text-align: center; justify-items: center; }
  .cg-tab-name { font-size: 14.5px; }
  .cg-tab-sub { font-size: 11.5px; line-height: 1.3; }
  .cg-tab-all { grid-column: 1 / -1; order: 2; min-height: 44px; border-top-width: 1px; }
  .cg-tab-all .cg-tab-name { font-size: 14px; }
  .cg-tab-all .cg-tab-sub { display: none; }
  .cg-legend { gap: 4px 12px; font-size: 12px; }
  .cg-grid { grid-template-columns: 46px repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
  .cg-cell, button.cg-cell { font-size: 12px; }
  .cg-grid-sport .cg-cell { height: 42px; }
  .cg-grid-sport .cg-cell.is-span { font-size: 11px; padding: 4px 3px; }
  .cg-grid-sport { grid-auto-rows: minmax(42px, auto); }
  .cg-grid-agg .cg-cell { height: 40px; }
  .cg-grid-agg { grid-auto-rows: minmax(40px, auto); }
  .cg-hint { font-size: 12.5px; text-align: left; margin-left: 0; flex: 1 1 100%; order: 3; }
  .cg-book { margin-left: auto; }
  .cg-pick-body { grid-template-columns: minmax(0, 1fr); }
  .cg-pick-action { justify-items: stretch; text-align: left; }
  .cg-pick-action .btn { width: 100%; white-space: normal; text-align: center; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .cg-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}