:root{
  --bg:#F6F7FB; --panel:#fff; --ink:#10211F; --muted:#5E6A6D; --accent:#185144;
  --chipbg:#EDF4F2; --chipbr:#D5E6E0; --br:#E6ECEA;
  --radius:20px; --radius-lg:24px; --shadow:0 20px 40px rgba(16,33,31,.08);
}

.aol-container{ max-width:1200px; margin:0 auto; padding:16px; }
.aol-spec{ background:var(--bg); border-radius:var(--radius-lg); }
.aol-top{ padding:16px; }

/* Search */
.aol-searchwrap{ display:flex; gap:12px; align-items:center; }
.aol-searchbox{ position:relative; flex:1; }
.aol-searchbox input{ width:100%; padding:14px 46px; padding-right:76px; border-radius:999px; border:1px solid var(--br); background:#fff; font-size:16px; box-shadow: inset 0 6px 12px rgba(0,0,0,.03); }
.aol-mag{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:#7a8a88; }
.aol-clear{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:#EFF3F2; border:1px solid var(--br); width:34px; height:34px; border-radius:50%; cursor:pointer; }
.aol-searchactions{ display:flex; gap:8px; }
.btn{ border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.ghost{ background:#F1F6F5; color:var(--accent); border:1px solid #D9E7E2; }

.aol-autocomplete{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--br); border-radius:12px; box-shadow:var(--shadow); max-height:280px; overflow:auto; display:none; z-index:30; }
.aol-autocomplete[aria-hidden="false"]{ display:block; }
.ac-item{ padding:10px 12px; cursor:pointer; }
.ac-item:hover{ background:#F6F8F7; }

/* Chips */
.aol-chips{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.chip{ background:var(--chipbg); border:1px solid var(--chipbr); color:var(--accent); padding:6px 12px; border-radius:999px; cursor:pointer; font-size:14px; }

/* Grid */
.aol-grid{ display:grid; grid-template-columns: 1.25fr 0.75fr; gap:24px; padding:16px; }
.aol-col.left{ background:var(--panel); border:1px solid var(--br); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:16px; }
.aol-col.right{ background:var(--panel); border:1px solid var(--br); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:12px; position:sticky; top:90px; height:calc(100vh - 140px); }
.aol-map{ height:100%; min-height:620px; border-radius:16px; overflow:hidden; }

/* Status label */
.label{ color:var(--muted); font-size:14px; margin: 2px 2px 12px; }

/* Card grid — Frame 397 style */
.cardgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; max-height:560px; overflow:auto; padding-right:6px; }
.cardgrid .card.spec397{ background:#fff; border:1px solid #EEF2F1; border-radius:18px; overflow:hidden; display:grid; grid-template-columns: 120px 1fr; column-gap:16px; padding:14px; }
.cardgrid .card .media{ background:#F3F4F6; border-radius:12px; width:100%; height:120px; }
.cardgrid .card .body{ display:flex; flex-direction:column; }
.cardgrid .card .title{ font-size:18px; font-weight:800; color:var(--ink); margin:2px 0 4px; }
.cardgrid .card .subtitle{ color:#6A7A75; font-weight:700; margin-bottom:6px; }
.cardgrid .card .addr{ color:#22312F; margin:6px 0 6px; }
.cardgrid .card .row{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.cardgrid .card .ico{ width:18px; height:18px; display:inline-block; }
.cardgrid .card a{ color:var(--accent); text-decoration:none; }
.cardgrid .actions{ margin-top:10px; }
.btn.cta{ background: linear-gradient(135deg, #FFB86B, #FF9966); color:#fff; border:none; padding:10px 16px; border-radius:999px; font-weight:800; box-shadow:0 8px 18px rgba(255,153,102,.25); cursor:pointer; }

/* Workshops */
.workshops{ margin-top:16px; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.ws-card{ background:#fff; border:1px solid #EEF2F1; border-radius:12px; padding:12px; }

/* Debug */
.aol-debug{ margin: 10px 16px 16px; color:#667; font-size:12px; }

/* Map tweaks (Frame 423 vibe) */
.leaflet-control-zoom a{ border-radius:10px !important; box-shadow:none; }
.leaflet-control-zoom{ border:none !important; box-shadow:none !important; }

@media (max-width: 980px){
  .aol-grid{ grid-template-columns: 1fr; }
  .aol-col.right{ position:static; height:auto; }
  .aol-map{ min-height:420px; }
  .cardgrid{ grid-template-columns:1fr; max-height:420px; }
}