/* Archaeological Map of Elis v0.7.0
   Unified responsive presentation.
   One layout system only. No historical override stack. */

*,
.ame-app *,
.ame-mobilebar * { box-sizing:border-box; }

.ame-mobilebar { display:none; }

.ame-app{
  position:relative;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  width:100%;
  max-width:100%;
  height:calc(100vh - 155px);
  min-height:620px;
  margin-left:0;
  transform:none;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(35,45,40,.16);
  border-radius:12px;
}

/* SIDEBAR */
.ame-app > aside{
  position:relative;
  z-index:20;
  min-width:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fbfaf6;
  border-right:1px solid rgba(35,45,40,.14);
}

.ame-search{
  display:block;
  width:calc(100% - 24px);
  margin:12px;
  padding:10px 12px;
  border:1px solid #d8d4ca;
  border-radius:7px;
  background:#fff;
}

.ame-filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:0 12px 10px;
}
.ame-filterbar button{
  border:1px solid #d8d4ca;
  border-radius:15px;
  padding:5px 8px;
  background:#fff;
  cursor:pointer;
  font-size:11px;
}
.ame-filterbar button.active{
  background:#26332e;
  color:#fff;
  border-color:#26332e;
}

.ame-list{ padding-bottom:12px; }
.ame-list button{
  display:block;
  width:100%;
  margin:0;
  padding:11px 13px;
  border:0;
  border-bottom:1px solid #ece8df;
  background:#fff;
  text-align:left;
  cursor:pointer;
  font-family:Georgia,serif;
}
.ame-list button:hover{ background:#f5f1e9; }
.ame-list small{
  display:block;
  margin-top:3px;
  color:#777;
}

/* MAP: always owns its grid cell and is never resized by the drawer. */
.ame-app .ame-map,
.ame-app .leaflet-container{
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  height:100%;
  min-height:0;
}

/* DETAILS: overlay, never part of the grid flow. */
.ame-app .ame-drawer{
  position:absolute;
  z-index:1000;
  top:0;
  right:0;
  bottom:0;
  width:min(380px,48%);
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;
  border-left:1px solid rgba(35,45,40,.14);
  box-shadow:-8px 0 25px rgba(0,0,0,.14);
  transform:translateX(105%);
  transition:transform .25s ease;
  pointer-events:none;
}
.ame-app .ame-drawer.open{
  transform:translateX(0);
  pointer-events:auto;
}

.ame-close{
  position:sticky;
  top:8px;
  float:right;
  z-index:5;
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  margin:10px;
  border:0;
  border-radius:50%;
  background:#26332e;
  color:#fff;
  cursor:pointer;
}
.ame-detail header{
  padding:45px 30px 22px;
  background:#eee8dd;
}
.ame-detail header h2{
  margin:5px 0;
  font:500 30px/1.15 Georgia,serif;
}
.ame-detail main{
  padding:24px 30px;
  font:16px/1.65 Georgia,serif;
}
.ame-object{
  margin:15px 0;
  border:1px solid #ddd;
  background:#faf8f3;
}
.ame-object img{
  display:block;
  width:100%;
  max-height:250px;
  object-fit:contain;
  background:#eee;
}
.ame-object > div{ padding:16px; }
.ame-object h3{ margin:0 0 4px; font:500 21px Georgia,serif; }
.ame-object a{
  display:inline-block;
  padding:7px 10px;
  background:#26332e;
  color:#fff!important;
  text-decoration:none;
}

/* TABLET + PHONE LANDSCAPE
   Keep map visible. Sidebar becomes compact; details remain side overlay. */
@media (min-width:701px) and (max-width:1100px){
  .ame-app{
    grid-template-columns:250px minmax(0,1fr);
    width:100%;
    height:calc(100dvh - 110px);
    min-height:430px;
    border-radius:10px;
  }
  .ame-app .ame-drawer{
    width:min(380px,48%);
  }
  .ame-detail header{ padding:42px 24px 18px; }
  .ame-detail main{ padding:20px 24px; }
}

/* PHONE / NARROW MOBILE
   Map is full app canvas.
   Site list and details are bottom sheets and never replace the map. */
@media (max-width:700px){
  .ame-mobilebar{
    position:relative;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    height:48px;
    margin-left:0;
    padding:6px 10px;
    transform:none;
    overflow:hidden;
    background:#26332e;
    color:#fff;
    font-size:12px;
  }
  .ame-mobilebar button{
    flex:0 0 auto;
    margin:0;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    background:transparent;
    color:#fff;
    font:600 12px/1 Arial,sans-serif;
    cursor:pointer;
  }

  .ame-app{
    display:block;
    width:100%;
    height:calc(100dvh - 105px);
    min-height:440px;
    margin-left:0;
    transform:none;
    overflow:hidden;
    border:0;
    border-radius:0;
  }

  .ame-app .ame-map,
  .ame-app .leaflet-container{
    position:absolute;
    z-index:1;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }

  /* Closed list is completely outside the paint/touch layer. */
  .ame-app > aside{
    position:absolute;
    z-index:1100;
    left:7px;
    right:7px;
    bottom:7px;
    top:auto;
    width:auto;
    height:min(62%,520px);
    max-height:calc(100% - 70px);
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid rgba(35,45,40,.14);
    border-radius:17px;
    background:#fbfaf6;
    box-shadow:0 -8px 30px rgba(0,0,0,.22);
    transform:translateY(calc(100% + 30px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s;
  }
  .ame-app.ame-list-open > aside{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .24s ease,opacity .18s ease;
  }
  .ame-app .ame-search{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
  }

  /* Selected site: lower card. Top part of map always remains visible. */
  .ame-app .ame-drawer{
    z-index:1150;
    top:auto;
    left:7px;
    right:7px;
    bottom:7px;
    width:auto;
    height:56%;
    max-height:56%;
    border:1px solid rgba(35,45,40,.14);
    border-radius:18px 18px 12px 12px;
    box-shadow:0 -10px 34px rgba(0,0,0,.24);
    transform:translateY(calc(100% + 30px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s;
  }
  .ame-app .ame-drawer.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .24s ease,opacity .18s ease;
  }

  .ame-detail header{ padding:42px 20px 16px; }
  .ame-detail header h2{ font-size:24px; }
  .ame-detail main{ padding:18px 20px; }
}

/* LANDSCAPE PHONE v0.7.1:
   Keep the map dominant. Details become a shallow bottom card. */
@media (max-width:700px) and (orientation:landscape){
  .ame-app{
    height:calc(100dvh - 74px);
    min-height:300px;
  }
  .ame-mobilebar{
    height:42px;
    padding-top:4px;
    padding-bottom:4px;
  }

  /* Details occupy only the lower 42% of the landscape map. */
  .ame-app .ame-drawer{
    left:7px;
    right:7px;
    top:auto;
    bottom:7px;
    width:auto;
    height:42%;
    max-height:42%;
    border-radius:16px 16px 10px 10px;
    transform:translateY(calc(100% + 30px));
  }
  .ame-app .ame-drawer.open{
    transform:translateY(0);
  }

  /* Site list remains a compact left sheet. */
  .ame-app > aside{
    left:7px;
    right:auto;
    top:7px;
    bottom:7px;
    width:min(42vw,360px);
    height:auto;
    max-height:none;
    transform:translateX(calc(-100% - 30px));
  }
  .ame-app.ame-list-open > aside{
    transform:translateX(0);
  }

  .ame-detail header{
    padding:36px 18px 12px;
  }
  .ame-detail header h2{
    font-size:21px;
    line-height:1.1;
  }
  .ame-detail main{
    padding:14px 18px 18px;
    font-size:14px;
    line-height:1.5;
  }
}

/* Small portrait phones */
@media (max-width:390px) and (orientation:portrait){
  .ame-mobilebar span{ font-size:11px; }
  .ame-app .ame-drawer{
    left:5px;
    right:5px;
    bottom:5px;
    height:58%;
    max-height:58%;
  }
  .ame-app > aside{
    left:5px;
    right:5px;
    bottom:5px;
  }
}


/* =========================================================
   v0.9.0 — Museum visual identity
   VISUAL ONLY: no responsive geometry or application logic.
   ========================================================= */
:root{
  --ame-ink:#26332e;
  --ame-ink-soft:#46524d;
  --ame-paper:#f7f3ea;
  --ame-paper-2:#eee7da;
  --ame-stone:#d7cdbd;
  --ame-bronze:#8a6841;
  --ame-bronze-dark:#6f5233;
  --ame-line:rgba(55,48,39,.16);
}

/* App surface */
.ame-app{
  background:var(--ame-paper);
  border-color:var(--ame-line);
  box-shadow:0 16px 44px rgba(35,42,38,.12);
}

/* Catalogue */
.ame-app > aside{
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(247,243,234,.92)),
    var(--ame-paper);
  border-right-color:var(--ame-line);
}
.ame-search{
  color:var(--ame-ink);
  background:rgba(255,255,255,.9);
  border-color:var(--ame-stone);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  font-family:Georgia,"Times New Roman",serif;
}
.ame-search:focus{
  outline:2px solid rgba(138,104,65,.2);
  border-color:var(--ame-bronze);
}
.ame-filterbar{
  border-bottom:1px solid var(--ame-line);
}
.ame-filterbar button{
  color:var(--ame-ink-soft);
  background:rgba(255,255,255,.72);
  border-color:var(--ame-stone);
  letter-spacing:.01em;
}
.ame-filterbar button:hover{
  color:var(--ame-ink);
  border-color:var(--ame-bronze);
  background:#fff;
}
.ame-filterbar button.active{
  color:#fff;
  background:var(--ame-ink);
  border-color:var(--ame-ink);
  box-shadow:0 3px 9px rgba(38,51,46,.16);
}
.ame-list button{
  position:relative;
  color:var(--ame-ink);
  background:transparent;
  border-bottom-color:var(--ame-line);
  transition:background .16s ease,padding-left .16s ease;
}
.ame-list button:hover{
  padding-left:18px;
  background:rgba(138,104,65,.075);
}
.ame-list button:hover:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--ame-bronze);
}
.ame-list small{
  color:#80786d;
  font-family:Arial,sans-serif;
  font-size:10px;
  letter-spacing:.035em;
  text-transform:uppercase;
}

/* Map receives a slightly quieter museum tone without changing tiles/provider. */
.ame-map .leaflet-tile-pane{
  filter:saturate(.72) sepia(.08) contrast(.96) brightness(1.025);
}
.ame-map .leaflet-control-zoom a{
  color:var(--ame-ink)!important;
  background:rgba(255,255,255,.94)!important;
  border-color:var(--ame-line)!important;
}
.ame-map .leaflet-control-attribution{
  color:#625d55;
  background:rgba(247,243,234,.86)!important;
}

/* Leaflet marker/tooltip refinement without replacing the marker assets. */
.ame-map .leaflet-marker-icon{
  filter:saturate(.68) sepia(.14) drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.ame-map .leaflet-tooltip{
  padding:7px 10px;
  color:var(--ame-ink);
  background:rgba(250,247,240,.97);
  border:1px solid var(--ame-stone);
  border-radius:5px;
  box-shadow:0 4px 14px rgba(35,42,38,.14);
  font:600 12px/1.25 Georgia,serif;
}
.ame-map .leaflet-tooltip:before{
  border-top-color:var(--ame-stone);
}

/* Museum card */
.ame-app .ame-drawer{
  color:var(--ame-ink);
  background:#fcfaf5;
  border-color:var(--ame-line);
}
.ame-close{
  background:var(--ame-ink);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.ame-close:hover{ background:var(--ame-bronze-dark); }

.ame-detail header{
  position:relative;
  color:var(--ame-ink);
  background:
    linear-gradient(135deg,rgba(138,104,65,.08),transparent 55%),
    var(--ame-paper-2);
  border-bottom:1px solid var(--ame-line);
}
.ame-detail header:after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin-top:15px;
  background:var(--ame-bronze);
}
.ame-detail header small{
  color:var(--ame-bronze-dark);
  font-family:Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ame-detail header h2{
  color:var(--ame-ink);
  letter-spacing:-.015em;
}
.ame-detail header span{
  color:#746d63;
  font:11px/1.4 Arial,sans-serif;
  letter-spacing:.025em;
}
.ame-detail main{
  color:#393b38;
}
.ame-detail main > h2{
  margin-top:26px;
  color:var(--ame-ink);
  font:500 23px/1.2 Georgia,serif;
}
.ame-detail main hr{
  height:1px;
  margin:28px 0 24px;
  border:0;
  background:linear-gradient(90deg,var(--ame-bronze),rgba(138,104,65,0));
}

/* Exhibit cards */
.ame-object{
  overflow:hidden;
  border-color:var(--ame-line);
  border-radius:8px;
  background:#fffdf8;
  box-shadow:0 6px 18px rgba(43,42,37,.07);
}
.ame-object img{
  background:#e9e3d8;
}
.ame-object h3{
  color:var(--ame-ink);
}
.ame-object b{
  color:var(--ame-bronze-dark);
  font-size:12px;
}
.ame-object small{
  color:#746d63;
}
.ame-object a{
  border-radius:4px;
  background:var(--ame-ink);
  transition:background .15s ease;
}
.ame-object a:hover{
  background:var(--ame-bronze-dark);
}

/* Mobile bar: same dimensions/behavior, museum finish only. */
.ame-mobilebar{
  background:
    linear-gradient(90deg,#23302b,#34423b);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 3px 12px rgba(0,0,0,.16);
}
.ame-mobilebar button{
  border-color:rgba(226,215,197,.72);
  color:#fff;
}
.ame-mobilebar button:hover{
  background:rgba(255,255,255,.09);
}

/* Selection/focus accessibility */
.ame-app button:focus-visible,
.ame-app input:focus-visible,
.ame-mobilebar button:focus-visible{
  outline:2px solid var(--ame-bronze);
  outline-offset:2px;
}


/* =========================================================
   v1.0.0 — Period markers + museum legend
   Visual/cartographic enhancement only.
   ========================================================= */
.ame-period-marker{
  background:transparent!important;
  border:0!important;
}
.ame-period-marker > span,
.ame-legend-dot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:2px solid rgba(255,255,255,.96);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(26,31,28,.34);
  color:#fff;
  font:700 12px/1 Arial,sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
.ame-period-marker:hover > span{
  transform:scale(1.16);
  box-shadow:0 3px 11px rgba(26,31,28,.42);
}
.ame-period-marker > span{
  transition:transform .14s ease,box-shadow .14s ease;
}

/* restrained archaeological palette */
.ame-period-marker > span.ame-period-prehistoric,.ame-legend-dot.ame-period-prehistoric{background:#8a6841!important;}
.ame-period-marker > span.ame-period-ancient,.ame-legend-dot.ame-period-ancient{background:#334b43!important;}
.ame-period-marker > span.ame-period-roman,.ame-legend-dot.ame-period-roman{background:#7b5147!important;}
.ame-period-marker > span.ame-period-medieval,.ame-legend-dot.ame-period-medieval{background:#596270!important;}
.ame-period-marker > span.ame-period-byzantine,.ame-legend-dot.ame-period-byzantine{background:#765e34!important;}
.ame-period-marker > span.ame-period-museum,.ame-legend-dot.ame-period-museum{background:#252d2a!important;}

/* Remove the old image-marker filter from our new div markers. */
.ame-map .ame-period-marker{
  filter:none!important;
}

/* Legend */
.ame-map-legend{
  min-width:138px;
  padding:9px 10px;
  border:1px solid rgba(55,48,39,.16);
  border-radius:8px;
  background:rgba(250,247,240,.94);
  box-shadow:0 5px 18px rgba(35,42,38,.16);
  color:#26332e;
  font:11px/1.2 Arial,sans-serif;
  backdrop-filter:blur(3px);
}
.ame-map-legend > b{
  display:block;
  margin:0 0 6px;
  color:#6f5233;
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ame-map-legend > span{
  display:flex;
  align-items:center;
  gap:7px;
  margin:4px 0;
  white-space:nowrap;
}
.ame-map-legend .ame-legend-dot{
  flex:0 0 17px;
  width:17px;
  height:17px;
  border-width:1px;
  box-shadow:none;
  font-size:8px;
}

/* On phones the legend becomes a compact two-column key.
   It does not alter map/card geometry. */
@media(max-width:700px){
  .ame-map-legend{
    min-width:0;
    max-width:190px;
    padding:7px 8px;
    font-size:9px;
  }
  .ame-map-legend > b{margin-bottom:4px;font-size:8px}
  .ame-map-legend > span{
    display:inline-flex;
    width:50%;
    gap:4px;
    margin:2px 0;
    vertical-align:middle;
  }
  .ame-map-legend .ame-legend-dot{
    flex-basis:14px;
    width:14px;
    height:14px;
    font-size:7px;
  }
}
@media(max-width:700px) and (orientation:landscape){
  .ame-map-legend{
    max-width:155px;
    opacity:.9;
  }
}

/* v1.1 museum exhibit and site imagery: decorative only, no responsive geometry changes */
.ame-site-hero,.ame-exhibit-photo{margin:0;background:#ebe5d9;overflow:hidden}
.ame-site-hero img{display:block;width:100%;max-height:260px;object-fit:cover}
.ame-exhibit-photo img{display:block;width:100%;max-height:260px;object-fit:contain}
.ame-object-body{padding:17px}
.ame-object-museum{font-size:13px;color:#765e34;font-weight:600;margin:5px 0 12px}
.ame-object-facts{margin:14px 0;display:grid;gap:6px}
.ame-object-facts div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:9px;border-top:1px solid #e9e2d5;padding-top:6px}
.ame-object-facts dt{font-size:11px;color:#766d5f}.ame-object-facts dd{margin:0;font-size:13px;color:#26332e}
.ame-credit{font-size:11px;line-height:1.5;color:#726b60}
.ame-source-link a{color:#6f5233;text-decoration:underline;text-underline-offset:3px}

/* v1.2 accessible catalogue and editorial context */
.ame-result-count,.ame-empty{padding:10px 13px;color:#6f6455;font:12px/1.5 Arial,sans-serif}.ame-list button{display:flex;align-items:center;gap:10px;min-height:60px}.ame-list button.selected{background:#eee7da;box-shadow:inset 3px 0 #8a6841}.ame-list-thumb{width:58px;height:48px;object-fit:cover;border-radius:4px;flex:none}.ame-site-hero figcaption{padding:10px 18px;font:12px/1.5 Arial,sans-serif;color:#625b50}.ame-site-hero figcaption small{display:block}.ame-site-dating{font:14px/1.5 Arial,sans-serif;margin:12px 0;color:#6f5233}.ame-about{max-width:100%;padding:18px 4px;font:13px/1.6 Arial,sans-serif;color:#625b50}.ame-detail p{overflow-wrap:anywhere}.ame-app .ame-drawer:not(.open){visibility:hidden}.ame-app .ame-drawer.open{visibility:visible}

.ame-detail main h3{font:500 22px/1.3 Georgia,serif;color:#26332e;margin:24px 0 12px}.ame-detail main h4{font:600 16px/1.4 Arial,sans-serif;margin:22px 0 10px}.ame-mobilebar button{width:auto;min-width:82px}.ame-mobilebar span{line-height:1.3}

.ame-close{float:none;display:block;margin:10px 10px -48px auto}