/* Suomen Tallit — tyylit */
:root{
  --navy:#111e34; --navy-2:#1b2b47; --navy-3:#0b1424;
  --gold:#c6a058; --gold-lt:#e8cf96;
  --bg:#f6f4f0; --card:#ffffff; --line:#e3ded5;
  --text:#1b2330; --muted:#6b7482; --soft:#8b94a3;
  --accent:#8a5a34; --accent-lt:#f0e6da;
  --ok:#2f7d5d; --shadow:0 1px 2px rgba(18,26,40,.06), 0 8px 24px rgba(18,26,40,.07);
  --r:14px; --rs:10px;
  --head:64px;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg:#0d1421; --card:#141d2e; --line:#243248;
  --text:#e8ecf3; --muted:#9aa6b8; --soft:#7b8698;
  --accent:#d09a63; --accent-lt:#22304a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input,select{font:inherit; color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:99}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--head);
  display:flex; align-items:center; gap:16px; padding:0 16px;
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-3) 100%);
  color:#eef1f6; box-shadow:0 1px 0 rgba(0,0,0,.25), 0 6px 18px rgba(9,16,30,.18);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{border-radius:50%; box-shadow:0 0 0 1px rgba(230,200,140,.35)}
.brand-text strong{display:block;font-size:15px;letter-spacing:.14em;font-weight:700}
.brand-text strong span{color:var(--gold-lt)}
.brand-text small{display:block;font-size:11px;letter-spacing:.06em;color:#9fb0c8}

.searchwrap{
  position:relative; flex:1 1 auto; max-width:720px;
  display:flex; align-items:center;
}
.searchwrap svg{position:absolute;left:12px;width:18px;height:18px;fill:#8fa0b8}
.searchwrap input{
  width:100%; height:40px; padding:0 36px 0 38px; border-radius:20px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.09);
  color:#fff; outline:none;
}
.searchwrap input::placeholder{color:#93a3ba}
.searchwrap input:focus{border-color:var(--gold); background:rgba(255,255,255,.14)}
#qclear{position:absolute;right:8px;width:26px;height:26px;border:0;border-radius:50%;
  background:transparent;color:#9fb0c8;cursor:pointer;font-size:18px;line-height:1}
#qclear:hover{background:rgba(255,255,255,.12);color:#fff}

.topactions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.viewtoggle{display:flex;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.viewtoggle button{
  border:0;background:transparent;color:#c3cfe0;padding:6px 12px;border-radius:8px;
  cursor:pointer;font-size:13px
}
.viewtoggle button.on{background:var(--gold);color:#22190a;font-weight:600}
.icon{
  width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#dbe4f0;cursor:pointer
}
.icon:hover{background:rgba(255,255,255,.14)}
.filterbtn{
  width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 12px;
  font-size:13px;white-space:nowrap
}
body.filters-piilossa .filterbtn{background:var(--gold);color:#22190a;border-color:var(--gold)}
body.filters-piilossa .filterbtn:hover{background:var(--gold-lt)}

/* ---------- layout ---------- */
.layout{display:flex; align-items:flex-start; overflow:hidden}
.filters{
  position:sticky; top:var(--head); flex:0 0 268px; width:268px;
  height:calc(100vh - var(--head)); overflow:auto; padding:16px 14px 40px;
  border-right:1px solid var(--line); background:var(--card);
  margin-left:0; transition:margin-left .24s cubic-bezier(.4,0,.2,1);
}
/* liukuu vasemmalle piiloon — sisältö ottaa tilan haltuun */
body.filters-piilossa .filters{margin-left:-268px}

/* kahva jolla piilotetun paneelin saa takaisin */
.filtershow{
  position:fixed; left:0; top:calc(var(--head) + 18px); z-index:44;
  display:none; align-items:center; gap:6px;
  padding:12px 10px 12px 8px; border:1px solid var(--line); border-left:0;
  border-radius:0 12px 12px 0; background:var(--card); color:var(--accent);
  cursor:pointer; box-shadow:var(--shadow); font-size:12.5px; font-weight:600;
  writing-mode:vertical-rl; text-orientation:mixed;
}
.filtershow:hover{border-color:var(--gold);color:var(--text)}
.filtershow__ico{writing-mode:horizontal-tb;font-size:16px;line-height:1}
body.filters-piilossa .filtershow{display:flex}

.filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
.filters-head h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.filters-head__btns{display:flex;align-items:center;gap:6px}
#reset{border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:13px;text-decoration:underline}
.hidebtn{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);cursor:pointer;font-size:15px;line-height:1
}
.hidebtn:hover{border-color:var(--gold);color:var(--text)}
.fgroup{padding:12px 0;border-top:1px solid var(--line)}
.fgroup h3{margin:0 0 8px;font-size:13px;font-weight:700}
.chk{max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px}
.chk label{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:3px 6px;border-radius:7px;cursor:pointer}
.chk label:hover{background:var(--accent-lt)}
.chk input{accent-color:var(--accent)}
.chk .n{margin-left:auto;color:var(--soft);font-size:12px;font-variant-numeric:tabular-nums}
.rangerow{display:flex;gap:8px}
.rangerow label{flex:1;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.rangerow input{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--bg)}
.hint{margin:6px 0 0;font-size:11.5px;color:var(--soft)}
.sw{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 0;cursor:pointer}
.sw input{accent-color:var(--accent)}

.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;height:calc(100vh - var(--head))}
.resbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;border-bottom:1px solid var(--line);background:var(--card)
}
.count{font-size:14px}
.count b{font-size:16px}
.sortwrap{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sortwrap select{height:32px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:0 8px}

.content{flex:1 1 auto;display:flex;min-height:0}
/* Lista ja kartta ovat toisensa poissulkevat välilehdet — vain toinen näkyy */
.results{
  flex:1 1 100%; min-width:0; overflow:auto; padding:16px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:14px; align-content:start; align-items:start;
  grid-auto-rows:min-content;
}
.mapwrap{flex:1 1 100%; min-width:0}
#map{width:100%;height:100%;background:#dfe6e8}
body[data-view="list"] .mapwrap{display:none}
body[data-view="map"] .results{display:none}

/* ---------- kortit ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
  display:block; height:auto; min-height:0;
}
.card:hover{transform:translateY(-2px);border-color:var(--gold)}
.card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.thumb{height:132px;min-height:132px;flex:0 0 132px;background:var(--accent-lt);position:relative;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3))}
.thumb.noimg img{width:64px;height:64px;object-fit:contain;opacity:.85}
.badge{
  position:absolute;top:8px;left:8px;background:var(--gold);color:#241a08;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.03em
}
.cbody{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px}
.cbody h3{margin:0;font-size:15.5px;line-height:1.3}
.place{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{
  font-size:11px;padding:2px 8px;border-radius:999px;
  background:var(--accent-lt);color:var(--accent);white-space:nowrap
}
.tag.g{background:rgba(198,160,88,.18);color:#8a6a22}
[data-theme="dark"] .tag.g{color:var(--gold-lt)}
.facts{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.facts:empty{display:none}
.facts b{color:var(--text)}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(560px,100%);
  background:var(--card);z-index:60;transform:translateX(102%);
  transition:transform .22s ease;overflow:auto;box-shadow:-8px 0 40px rgba(10,18,32,.28)
}
.drawer.open{transform:none}
.drawer-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);font-size:20px;cursor:pointer;z-index:2
}
.scrim{position:fixed;inset:0;background:rgba(10,16,28,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}

.dhero{height:210px;background:var(--navy-2);position:relative}
.dhero img{width:100%;height:100%;object-fit:cover}
.dhero.noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy-2),var(--navy-3))}
.dhero.noimg img{width:110px;height:110px;object-fit:contain}
.dwrap{padding:18px 20px 60px}
.dwrap h2{margin:0 0 4px;font-size:23px;line-height:1.22}
.dsub{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.dsec{margin-top:20px}
.dsec h4{
  margin:0 0 8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px
}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.horses{display:flex;flex-wrap:wrap;gap:6px}
.horse{background:var(--accent-lt);color:var(--accent);border-radius:8px;padding:3px 9px;font-size:12.5px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal img{width:100%;height:88px;object-fit:cover;border-radius:8px;background:var(--accent-lt)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:13.5px;cursor:pointer
}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn:hover{border-color:var(--gold)}
.srclist{font-size:12px;color:var(--muted);margin:0;padding-left:18px}
.srclist a{color:var(--accent)}

.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px}
.empty img{width:88px;opacity:.45;margin-bottom:12px}

/* ---------- kartan popup ---------- */
.leaflet-popup-content{margin:10px 12px;font:14px/1.45 "Segoe UI",system-ui,sans-serif}
.leaflet-popup-content h4{margin:0 0 4px;font-size:15px}
.leaflet-popup-content .pp{color:#667;font-size:12.5px}
.leaflet-popup-content a{color:#8a5a34}
.pin{
  width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:linear-gradient(150deg,#c6a058,#8a5a34);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35)
}
.pin.srl{background:linear-gradient(150deg,#3f6ea8,#1b2b47)}
.pin.sel{background:linear-gradient(150deg,#ffd77a,#c6a058);width:32px;height:32px}

/* ---------- footer ---------- */
.foot{padding:22px 20px 34px;border-top:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px}
.foot p{margin:0 0 6px;max-width:1000px}
.foot .small{font-size:11.5px;color:var(--soft)}
.foot .src{font-size:12px}

/* ---------- responsiivisuus ---------- */
@media (max-width:860px){
  .brand-text{display:none}
  .filterbtn__txt{display:none}
  .filterbtn{width:36px;padding:0}
  /* kapealla näytöllä suodattimet liukuvat sisällön päälle */
  .filters{
    position:fixed;left:0;top:var(--head);z-index:45;margin-left:0;
    transform:translateX(0);transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:8px 0 30px rgba(10,18,32,.25)
  }
  body.filters-piilossa .filters{margin-left:0;transform:translateX(-102%)}
  .viewtoggle button{padding:6px 10px;font-size:12px}
}