/* Court detail pages (/courts/<slug>) — shared by all 90 generated pages.
   Content is server-rendered at build time (scripts/build-court-pages.mjs);
   this file is purely presentation. See /courts/court-detail-enhance.js for
   the client-side bits (map plate, live conditions, live availability,
   favorite button) that mount on top of this markup. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}

.cd-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line)}
.cd-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.cd-brand-name{font-family:var(--font-label);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.cd-back{font-family:var(--font-label);font-size:13px;letter-spacing:var(--track-label,.28em);text-transform:uppercase;color:var(--accent);text-decoration:none;transition:color .2s}
.cd-back:hover{color:var(--text)}

.cd-breadcrumb{max-width:640px;margin:0 auto;padding:14px 22px 0;font-family:var(--font-label);font-size:13px;letter-spacing:.08em;color:color-mix(in srgb, var(--text) 55%, transparent)}
.cd-breadcrumb a{color:color-mix(in srgb, var(--text) 55%, transparent);text-decoration:none}
.cd-breadcrumb a:hover{color:var(--text);text-decoration:underline}
@media(min-width:720px){.cd-breadcrumb{padding:18px 32px 0}}

.cd-wrap{max-width:640px;margin:0 auto;padding:20px 22px 80px}
@media(min-width:720px){.cd-wrap{padding:28px 32px 100px}}

.cd-eyebrow{font-family:var(--font-label);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
/* Court name: Zodiak roman, not italic — italic is for the one line
   you'd say out loud, not a title. See /courts/_kit "Type". */
.cd-h{font-family:var(--font-display);font-weight:300;font-style:normal;font-size:36px;line-height:1.1;color:var(--text);margin:0 0 6px;letter-spacing:-0.01em}
@media(min-width:720px){.cd-h{font-size:44px}}
.cd-sub{font-family:var(--font-label);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 55%, transparent);margin-bottom:28px;font-weight:400}

.cd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.cd-chip{font-family:var(--font-label);font-size:13px;letter-spacing:.22em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid}
.cd-chip-public{border-color:color-mix(in srgb, var(--brand) 45%, transparent);color:var(--brand);background:color-mix(in srgb, var(--brand) 10%, transparent)}
.cd-chip-membership{border-color:color-mix(in srgb, var(--text) 25%, transparent);color:var(--text-soft);background:color-mix(in srgb, var(--text) 5%, transparent)}
.cd-chip-indoor{border-color:color-mix(in srgb, var(--text) 25%, transparent);color:var(--text-soft);background:color-mix(in srgb, var(--text) 5%, transparent)}
.cd-chip-lights{border-color:color-mix(in srgb, var(--text) 25%, transparent);color:var(--text-soft);background:color-mix(in srgb, var(--text) 5%, transparent)}
.cd-chip-neutral{border-color:var(--border);color:color-mix(in srgb, var(--text) 60%, transparent);background:transparent}

.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
@media(max-width:480px){.cd-grid{grid-template-columns:1fr}}
.cd-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.cd-cell-k{font-family:var(--font-label);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cd-cell-v{font-family:var(--font-sans);font-style:normal;font-size:16px;color:var(--text)}

.cd-cond-status{font-family:var(--font-sans);font-style:normal;font-size:16px}
.cd-cond-dry{color:var(--brand)}
.cd-cond-likely{color:var(--text-soft)}
.cd-cond-damp{color:color-mix(in srgb, var(--rust) 70%, var(--text))}
.cd-cond-wet{color:color-mix(in srgb, var(--danger) 55%, var(--text))}
.cd-cond-meta{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 55%, transparent);margin-top:5px;line-height:1.6}

.cd-avail-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:2px;padding:0}
.cd-avail-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cd-avail-row:last-child{border-bottom:0;padding-bottom:0}
.cd-avail-time{font-family:var(--font-sans);font-style:normal;font-size:17px;color:var(--text)}
.cd-avail-courts{font-family:var(--font-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);white-space:nowrap;text-align:right}
.cd-avail-court-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent);text-underline-offset:2px}
.cd-avail-court-link:hover{text-decoration-color:var(--brand)}
.cd-avail-walkon{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-top:12px;line-height:1.6}
.cd-avail-meta{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 45%, transparent);margin-top:12px;line-height:1.6}

/* Upcoming open times — one block per cached day, server-rendered at request
   time (netlify/edge-functions/court-availability-snapshot.js). */
.cd-upcoming-day{margin-top:16px}
.cd-upcoming-day:first-of-type{margin-top:0}
.cd-upcoming-day-label{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

.cd-cell-v-note{color:var(--text-muted);font-weight:400}

.cd-section{margin-top:30px}
.cd-section-title{font-family:var(--font-label);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:500;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--line)}

.cd-note{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-soft);margin:0 0 14px}
.cd-note-small{font-family:var(--font-sans);font-style:normal;font-size:13px;line-height:1.55;color:color-mix(in srgb, var(--text) 55%, transparent);margin:0 0 10px}

.cd-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;text-decoration:none;font-family:var(--font-label);font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;transition:opacity .2s;cursor:pointer;border:none;width:100%;border-radius:var(--radius-action, 4px)}
.cd-cta-primary{background:var(--accent);color:var(--night)}
.cd-cta-primary:hover{opacity:.88}
.cd-cta-secondary{background:transparent;color:var(--text-soft);border:1px solid color-mix(in srgb, var(--text) 22%, transparent)}
.cd-cta-secondary:hover{border-color:color-mix(in srgb, var(--text) 40%, transparent);color:var(--text)}
.cd-cta-ext{font-size:13px}

.cd-actions{display:flex;flex-direction:column;gap:9px;margin-top:28px}

/* "Lock in a time with a partner" + the real booking CTA — the primary pair,
   directly under the title block. Same structure as .cd-actions, flipped to
   bottom margin since it sits above the map plate instead of below the page. */
.cd-primary-actions{display:flex;flex-direction:column;gap:9px;margin-bottom:28px}

.cd-quiet-form{margin:0}
.cd-quiet-label{display:block;font-family:var(--font-sans);font-size:13.5px;line-height:1.5;color:var(--text-soft);margin:0 0 10px}
.cd-quiet-row{display:flex;gap:8px}
.cd-quiet-input{flex:1;min-width:0;padding:11px 14px;font-family:var(--font-sans);font-size:14px;background:transparent;color:var(--text);border:1px solid color-mix(in srgb, var(--text) 22%, transparent)}
.cd-quiet-input:focus{outline:none;border-color:var(--accent)}
.cd-quiet-submit{padding:11px 18px;font-family:var(--font-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;background:var(--accent);color:var(--night);border:none;border-radius:var(--radius-action, 4px);cursor:pointer;white-space:nowrap}
.cd-quiet-submit:hover{opacity:.88}
.cd-quiet-submit:disabled{opacity:.6;cursor:default}
.cd-quiet-msg{margin:10px 0 0;font-family:var(--font-sans);font-size:13px;color:var(--text-soft)}
.cd-quiet-msg-error{color:#d86a5c}
@media(max-width:480px){.cd-quiet-row{flex-direction:column}}

.cd-source{font-family:var(--font-label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 55%, transparent);margin-top:28px}
.cd-source a{color:var(--text-soft);text-decoration:none}
.cd-source a:hover{color:var(--text)}

.cd-nearby{display:flex;flex-direction:column;gap:8px}
.cd-nearby-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:color-mix(in srgb, var(--text) 4%, transparent);border:1px solid var(--line-soft);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:background .15s,border-color .15s}
.cd-nearby-row:hover{background:color-mix(in srgb, var(--text) 7%, transparent);border-color:color-mix(in srgb, var(--text) 25%, transparent)}
.cd-nearby-name{font-family:var(--font-sans);font-style:normal;font-size:14px;flex:1}
.cd-nearby-area{font-family:var(--font-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 55%, transparent);flex-shrink:0}

.cd-map-plate{width:100%;min-height:200px;margin-bottom:24px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.cd-map-plate svg{width:100%;height:auto;display:block}

.cd-foot{padding:28px 22px 48px;border-top:1px solid var(--line);margin-top:48px;text-align:center}
.cd-foot-note{font-family:var(--font-sans);font-style:normal;font-size:13px;color:color-mix(in srgb, var(--text) 55%, transparent);margin:0}
.cd-foot-note a{color:var(--text-soft);text-decoration:underline;text-underline-offset:2px}
.cd-foot-note a:hover{color:var(--text)}