/* Ortonville Driving Tour — Dark Clean Theme v1.5.7.4 */

:root{
  --bg:#0b1623;          /* deep slate */
  --panel:#0f2236;       /* dark blue panel */
  --ink:#e9f0f7;         /* light text */
  --muted:#b7c6d8;       /* muted text */
  --accent:#5fb0ff;      /* primary buttons */
  --accent-2:#86c5ff;    /* secondary buttons */
  --line:#1e3a56;
  --shadow:0 10px 26px rgba(3,12,24,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:16px;}

/* Header hero */
.header{position:relative;border-radius:22px;overflow:hidden;margin:16px 0 24px;background:#06121e;}
.header img{width:100%;display:block;filter:brightness(.5) saturate(.9);}
.header .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,18,.2),rgba(2,10,18,.85));}
.header .title{position:absolute;bottom:26px;left:24px;right:24px;color:#fff;}
h1{margin:0;font-size:clamp(28px,4vw,44px);line-height:1.05;}
.badges{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}

/* Sections */
.section{margin:20px 0;}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:stretch}

/* Cards */
.card{display:flex;flex-direction:column;justify-content:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow);min-height:560px}
.card h3{margin:10px 0 6px;font-size:20px;font-weight:700}
.meta{font-size:13.5px;color:var(--muted);min-height:38px}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:linear-gradient(135deg,#0b2a49,#0b3158)}

/* Placeholder image style (no tiny text) */
.card img[data-placeholder="1"]{
  background: conic-gradient(from 180deg at 60% 40%, #0b3158, #0b2a49 30%, #0c2e54 60%, #0b3158);
}

/* Action rows */
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:#001c33;background:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.25);font-weight:600}
.btn.secondary{background:var(--accent-2)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* TTS bar */
.tts-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.voice-select{min-width:220px;border-radius:10px;border:1px solid var(--line);background:#113a62;color:#fff;padding:10px 12px}

/* Transcripts */
details{background:#0c1c2d;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:auto}
details > div{max-height:220px;overflow:auto;color:var(--ink);font-size:14px;line-height:1.55}
summary{cursor:pointer;font-weight:700;color:#a7d1ff}

/* Map container */
#map{height:520px;min-height:360px;width:100%;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#0b2440}
.leaflet-control-container,.leaflet-top,.leaflet-bottom,.leaflet-pane{z-index:500;}
@media (max-width:600px){ #map{height:420px;} }