/* Police station detail page */
.st-hero{position:relative;color:#fff;background:linear-gradient(115deg,#073a7d,#0a4da2 55%,#14b8d4);min-height:clamp(220px,28vw,340px);display:flex;align-items:flex-end;overflow:hidden}
.st-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08)}
.st-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,40,92,.9) 0%,rgba(7,40,92,.45) 55%,rgba(7,40,92,.15) 100%)}
.st-hero-in{position:relative;z-index:1;padding:28px 0 72px}
.st-hero .crumb,.st-hero .crumb a{color:rgba(255,255,255,.85)}
.st-hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin:6px 0;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.st-addr{margin:0;opacity:.95}
.st-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:22px;margin-top:-48px;position:relative;z-index:2;align-items:start}
.st-main,.st-side{display:grid;gap:18px}
.st-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.st-card h2{font-size:1.15rem;color:var(--blue-d);margin:0 0 12px}
.st-inc{display:flex;gap:22px;align-items:center}
.st-inc-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;flex:none;border:5px solid #fff;box-shadow:0 0 0 3px var(--blue),var(--shadow-lg)}
.st-inc-ph{background:linear-gradient(135deg,#dbe8fb,#bcd3f5);color:var(--blue);display:grid;place-items:center}
.st-inc-txt small{color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}
.st-inc-txt h2{font-size:1.5rem;margin:2px 0 12px;color:var(--ink)}
.st-actions{display:flex;gap:10px;flex-wrap:wrap}
.st-map iframe{width:100%;height:340px;border:0;border-radius:14px;margin-bottom:14px;background:var(--sky)}
.st-info dl{margin:0;display:grid;gap:10px}
.st-info dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.st-info dd{margin:0;overflow-wrap:anywhere}
.st-patil{background:linear-gradient(135deg,#fff8e6,#fff);border-color:#f3dba0}
.st-patil p{margin:0 0 12px;font-size:.92rem}
.st-quick{display:grid;gap:8px}
.st-quick h2{margin-bottom:4px}
.st-quick a{background:var(--sky2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);font-weight:600;transition:.2s}
.st-quick a:hover{background:var(--blue);color:#fff;text-decoration:none;transform:translateX(4px)}
.st-others{padding:34px 0 10px}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;color:var(--ink);font-size:.92rem;transition:.2s}
.st-chips a:hover{background:var(--blue);color:#fff;border-color:var(--blue);text-decoration:none}
@media (max-width:900px){.st-body{grid-template-columns:1fr;margin-top:-36px}}
@media (max-width:560px){.st-inc{flex-direction:column;text-align:center}.st-actions{justify-content:center}.st-inc-photo{width:128px;height:128px}.st-map iframe{height:260px}.st-hero-in{padding-bottom:58px}}

/* ---- design v3 overrides: flat editorial ---- */
.st-hero{background:var(--ink);border-radius:0}
.st-hero::before{display:none}
.st-hero.has-img::after{background:linear-gradient(0deg,rgba(15,20,26,.92),rgba(15,20,26,.35))}
.st-hero h1{font-family:var(--serif);text-shadow:none}
.st-hero .crumb,.st-hero .crumb a{color:#b9b3a3}
.st-card{border-radius:0;box-shadow:none;border:1px solid var(--line);background:var(--card)}
.st-card h2{font-size:1.1rem}
.st-inc-photo{box-shadow:none;border:1px solid var(--line)}
.st-inc-ph{background:var(--paper);color:var(--muted)}
.st-inc-txt small{color:var(--crimson)}
.st-map iframe{border-radius:2px;border:1px solid var(--line);background:var(--paper)}
.st-patil{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold)}
.st-quick a{border-radius:2px;background:var(--paper);border:1px solid var(--line)}
.st-quick a:hover{background:var(--ink);color:#fff;transform:none}
.st-chips a{border-radius:2px;background:var(--card)}
.st-chips a:hover{background:var(--ink);border-color:var(--ink);color:#fff}




/* ===== Save as assets/css/stations.css (new file, loaded via $extraCss) ===== */

/* smooth page-to-page transition (Chrome/Edge/Safari; others just ignore it) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: stFadeOut .25s ease both; }
::view-transition-new(root) { animation: stFadeIn .35s ease both; }
@keyframes stFadeOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes stFadeIn  { from { opacity: 0; transform: translateY(10px); } }

/* search box */
#sfilter { transition: box-shadow .25s ease, border-color .25s ease; }
#sfilter:focus { outline: none; border-color: #1f4e9c; box-shadow: 0 0 0 4px rgba(31,78,156,.15); }

/* ---------- Card ---------- */
.st-card {
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
  animation: stIn .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}
@keyframes stIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.st-card::before {                      /* accent bar that grows on hover */
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; z-index: 3;
  background: linear-gradient(90deg, #1f4e9c, #0f8b8d);
  transition: width .4s ease;
}
.st-card:hover, .st-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 18px 38px rgba(15,30,60,.2);
}
.st-card:hover::before, .st-card:focus-within::before { width: 100%; }

/* whole card is clickable (stretched link) – buttons stay above it */
.st-link { color: inherit; text-decoration: none; transition: color .25s ease; }
.st-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-card:hover .st-link, .st-link:focus-visible { color: #1f4e9c; }
.st-link:focus-visible { outline: none; }
.st-card:focus-within { outline: 3px solid rgba(31,78,156,.35); outline-offset: 2px; }
.st-acts .btn { position: relative; z-index: 2; }

/* ---------- Station image (small, on top) ---------- */
.st-img {
  position: relative; height: 140px; margin-bottom: 14px;
  border-radius: 10px; overflow: hidden; background: #e9eef6;
}
.st-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.st-card:hover .st-img img { transform: scale(1.12); filter: brightness(.85) saturate(1.1); }

.st-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 46px;
         background: linear-gradient(135deg, #dfe8f5, #f3f6fb); transition: transform .4s ease; }
.st-card:hover .st-ph { transform: scale(1.15) rotate(-4deg); }

.st-view {                              /* "View details →" pill over the image */
  position: absolute; left: 50%; bottom: 12px; z-index: 2;
  transform: translate(-50%, 14px); opacity: 0; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.96); color: #14213d; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.st-card:hover .st-view { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Buttons ---------- */
.st-acts .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.st-acts .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.st-go i { display: inline-block; font-style: normal; transition: transform .25s ease; }
.st-go:hover i, .st-card:hover .st-go i { transform: translateX(5px); }

@media (hover: none) {
  .st-card:hover { transform: none; box-shadow: none; }
  .st-card:hover .st-img img { transform: none; filter: none; }
  .st-view { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-card, .st-card::before, .st-img img, .st-ph, .st-view, .st-acts .btn, .st-go i { transition: none !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}