/* ============================================================
   KEMETI CALENDAR v5.0 — temples.css
   Temples Atlas + Map + 3D
   ============================================================ */

/* ============ TEMPLE ATLAS HERO ============ */
.temple-atlas-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:14px}

@media (max-width:900px){.temple-atlas-hero{grid-template-columns:1fr}}

.temple-atlas-banner{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;
  padding:24px;
  background:
    radial-gradient(circle at 80% 20%,rgba(212,175,55,.24),transparent 35%),
    linear-gradient(135deg,#17151a,#0a0b12);
  box-shadow:0 16px 45px rgba(0,0,0,.45);
}

.temple-atlas-banner h2{font-size:24px;color:var(--gold-bright);margin-bottom:8px}
.temple-atlas-banner p{color:var(--muted);font-size:13px;line-height:1.9}

.atlas-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}

.atlas-stat{
  padding:12px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);border-radius:8px;text-align:center;
}

.atlas-stat b{display:block;font-size:22px;color:var(--gold)}
.atlas-stat span{font-size:10px;color:var(--muted)}

.temple-source-box{
  border:1px solid var(--line-soft);border-radius:10px;
  padding:16px;background:var(--card2);
}

.temple-source-box .source-line{
  display:flex;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px dashed var(--line-soft);font-size:11px;
}

.temple-source-box .source-line:last-child{border-bottom:0}

.verified{color:#8fd18f}
.review{color:#e8c56a}
.recon{color:#e69b72}

/* ============ TOOLBAR ============ */
.temple-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

.temple-search{
  flex:1;min-width:220px;padding:12px 14px;
  border:1px solid var(--line-soft);background:var(--card2);
  color:var(--text);border-radius:7px;outline:none;
}

.temple-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.1)}

/* ============ ATLAS GRID ============ */
.temple-atlas-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}

@media (max-width:900px){.temple-atlas-grid{grid-template-columns:1fr}}

.temple-detail{position:sticky;top:12px}
.temple-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media (max-width:600px){.temple-detail-grid{grid-template-columns:1fr}}

.temple-photo{
  height:280px;border-radius:8px;overflow:hidden;
  background:#111;position:relative;
}

.temple-photo img{width:100%;height:100%;object-fit:cover}

.temple-photo .photo-caption{
  position:absolute;bottom:0;right:0;left:0;padding:10px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  font-size:10px;color:#eee;
}

.temple-facts{display:grid;gap:0}

.temple-fact{
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:11.5px;
}

.temple-fact .k{color:var(--muted)}
.temple-fact .v{color:var(--text);text-align:left}

.temple-description{
  font-size:12.5px;line-height:1.9;color:var(--text);
  padding:12px;border:1px solid var(--line-soft);
  background:rgba(212,175,55,.035);border-radius:8px;
}

.temple-reference{
  padding:10px 12px;border-radius:7px;
  background:rgba(127,176,212,.07);
  border:1px solid rgba(127,176,212,.2);
  font-size:10.5px;line-height:1.8;color:var(--muted);
  margin-top:10px;
}

.temple-reference a{color:var(--pray);text-decoration:none}
.temple-reference a:hover{text-decoration:underline}

/* ============ 3D VIEWER ============ */
.atlas-3d{
  height:560px;border-radius:10px;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 20%,#25334a,#0a0c12 70%);
  border:1px solid var(--line-soft);
}

.atlas-3d canvas{display:block;width:100%;height:100%}

.atlas-loading{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:var(--muted);
  background:rgba(7,8,12,.85);z-index:5;
}

.atlas-loading .sp{
  width:30px;height:30px;
  border:2px solid rgba(212,175,55,.2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.atlas-hud{
  position:absolute;top:10px;right:10px;z-index:4;
  display:flex;gap:5px;flex-wrap:wrap;
}

.atlas-hud button{
  padding:7px 9px;border:1px solid rgba(212,175,55,.3);
  background:rgba(8,10,15,.75);color:var(--gold);
  border-radius:6px;font-size:10px;font-weight:700;
  backdrop-filter:blur(6px);
}

.atlas-hud button.active{background:var(--gold);color:#111}

.atlas-legend{
  position:absolute;bottom:10px;right:10px;left:10px;z-index:4;
  display:flex;justify-content:space-between;gap:8px;
  color:#ddd;font-size:9px;pointer-events:none;
}

.atlas-legend span{
  background:rgba(8,10,15,.65);
  padding:5px 8px;border-radius:5px;
}

.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  border:2px solid #fff;background:var(--gold);color:#111;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;
  box-shadow:0 0 0 5px rgba(212,175,55,.12),0 4px 12px #000;
  z-index:6;
}

.hotspot:hover{transform:translate(-50%,-50%) scale(1.15)}

/* ============ CONFIDENCE BADGE ============ */
.confidence{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:999px;
  font-size:9px;font-weight:800;
}

.confidence.official{background:rgba(80,170,100,.12);color:#8fd18f;border:1px solid rgba(80,170,100,.25)}
.confidence.mixed{background:rgba(232,197,106,.1);color:#e8c56a;border:1px solid rgba(232,197,106,.25)}
.confidence.reconstruction{background:rgba(230,155,114,.1);color:#e69b72;border:1px solid rgba(230,155,114,.25)}

/* ============ MINI NAV ============ */
.temple-mini-nav{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:5px;
}

.temple-mini-nav button{
  flex:0 0 auto;padding:7px 10px;
  background:var(--card2);color:var(--muted);
  border:1px solid var(--line-soft);border-radius:5px;
  font-size:10px;font-weight:700;
}

.temple-mini-nav button.active{color:var(--gold);border-color:var(--gold)}

/* ============ FILTERS ============ */
.temples-filters{
  display:flex;gap:6px;margin:12px 0 0;
  overflow-x:auto;scrollbar-width:none;padding-bottom:3px;
}

.temples-filters::-webkit-scrollbar{display:none}

.temples-filters button{
  padding:7px 14px;border-radius:4px;
  border:1px solid var(--line-soft);
  background:var(--card2);color:var(--muted);
  font-size:11.5px;font-weight:700;
  white-space:nowrap;
}

.temples-filters button.active{
  background:linear-gradient(180deg,#e0835c,#8a3a24);
  color:#fff;border-color:var(--temple);
}

.kemeti-marker{background:transparent!important;border:none!important}

/* ============ MAP ============ */
#realMap{
  width:100%;height:420px;border-radius:8px;
  overflow:hidden;background:#0a1220;
}

@media (min-width:768px){#realMap{height:520px}}

.leaflet-container{background:var(--card2)!important;font-family:inherit!important}

.leaflet-popup-content-wrapper{
  background:var(--card2)!important;color:var(--text)!important;
  border-radius:6px!important;border:1.5px solid var(--gold)!important;
}

.leaflet-popup-content{margin:12px!important;font-size:12.5px!important}
.leaflet-tile{filter:brightness(.95) saturate(1.05)}

.leaflet-control-attribution{
  background:rgba(10,10,15,.7)!important;color:#a89876!important;font-size:9px!important;
}

.leaflet-control-attribution a{color:#d4af37!important}
.leaflet-bar a{background:#14141c!important;color:#d4af37!important;border-color:#5c4813!important}

.map-info-card{
  margin-top:12px;padding:0;background:var(--card2);
  border-radius:8px;border:1.5px solid var(--line-soft);
  display:none;overflow:hidden;
}

.map-info-card.on{display:block}

.map-info-card .mi-img-wrap{position:relative;width:100%;height:240px;overflow:hidden}
.map-info-card .mi-img{width:100%;height:100%;object-fit:cover;display:block}

.map-info-card .mi-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%);
  pointer-events:none;
}

.map-info-card .mi-title-wrap{position:absolute;bottom:0;right:0;left:0;padding:16px}

.map-info-card .mi-title{
  font-size:20px;color:#fff;font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

.map-info-card .mi-meta{font-size:11px;color:rgba(255,255,255,.85);margin-top:4px}
.map-info-card .mi-body{padding:16px}
.map-info-card .mi-desc{font-size:13px;color:var(--text);line-height:1.85}

.map-info-card .mi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

.map-info-card .mi-tags span{
  padding:5px 11px;border-radius:16px;
  background:rgba(201,102,74,.15);
  border:1px solid var(--temple);
  color:var(--temple);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;gap:4px;
}

/* ============ DENDERA 3D ============ */
#dendera3D{
  width:100%;height:520px;border-radius:8px;
  overflow:hidden;
  background:radial-gradient(ellipse at center,#1a1f33 0%,#0a0a0f 100%);
  position:relative;cursor:grab;touch-action:none;
}

#dendera3D:active{cursor:grabbing}

@media (min-width:768px){#dendera3D{height:620px}}

#dendera3D canvas{display:block;width:100%!important;height:100%!important}

.dendera-controls{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}

.dendera-controls button{
  flex:1;padding:9px 10px;border-radius:6px;
  border:1px solid var(--line-soft);background:var(--card2);
  color:var(--gold);font-size:11.5px;font-weight:800;
  transition:all .25s;white-space:nowrap;
}

.dendera-controls button:hover{border-color:var(--gold)}

.dendera-controls button.on{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 50%,var(--gold-dark));
  color:var(--on-gold);border-color:var(--gold-bright);
}