/* =========================================
   LOCATION DETAIL — WORLD ATLAS THEME
========================================= */

.location-world {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding: 118px var(--page-padding) clamp(80px, 9vw, 120px);
    background: radial-gradient(circle at 50% 7%, rgba(244,212,124,.11), transparent 32%), linear-gradient(180deg,#101827 0%,#182438 50%,#101827 100%);
}
.location-shell { position: relative; z-index: 2; width: min(1120px,100%); margin-inline:auto; }
.location-page { color:#3b2618; }
.location-loading { color:#f4d47c; text-align:center; font-family:var(--title-font); font-size:22px; padding:80px 20px; }

.location-particles { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.location-particles span { position:absolute; bottom:-35px; border-radius:50%; background:#f4d47c; box-shadow:0 0 9px rgba(244,212,124,.85),0 0 22px rgba(244,212,124,.42); animation:locationParticleFloat linear infinite; }
@keyframes locationParticleFloat { 0%{bottom:-35px;transform:translateX(0) scale(.55);opacity:0} 8%{opacity:.55} 50%{transform:translateX(18px) scale(.85);opacity:.45} 88%{opacity:.35} 100%{bottom:calc(100% + 35px);transform:translateX(-14px) scale(1.1);opacity:0} }

.location-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 20px; font-family:var(--title-font); font-size:15px; letter-spacing:.5px; }
.location-breadcrumb a { color:#f4d47c; text-decoration:none; padding:9px 16px; border:1px solid rgba(244,212,124,.38); border-radius:24px; background:rgba(255,255,255,.035); transition:.25s ease; }
.location-breadcrumb a:hover { transform:translateY(-2px); color:#fff0ad; border-color:#f4d47c; box-shadow:0 0 16px rgba(244,212,124,.16); }
.location-breadcrumb span { color:#d9ad4d; }

.location-intro-section { position:relative; padding:clamp(26px,4vw,46px); background:linear-gradient(rgba(248,237,202,.74),rgba(232,211,164,.82)),url("../images/parchment.png"); background-size:cover; background-position:center; border:1px solid rgba(198,156,74,.65); border-radius:12px; box-shadow:0 20px 45px rgba(0,0,0,.30); }
.location-name-header { position:relative; margin-bottom:30px; padding:5px 4px 20px; border-bottom:2px solid rgba(198,156,74,.48); }
.location-name-header::after { content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:linear-gradient(90deg,#9c6a25,#d9ad4d,#fff0ad,#f4d47c); box-shadow:0 0 8px rgba(244,212,124,.45); transition:width .55s ease; }
.location-name-header::before { content:"✦"; position:absolute; right:0; bottom:-10px; color:#fff0ad; opacity:0; transform:scale(.3) rotate(-35deg); text-shadow:0 0 12px #f4d47c; transition:.35s ease .15s; }
.location-name-header:hover::after { width:100%; }
.location-name-header:hover::before { opacity:1; transform:scale(1) rotate(0); }
.location-type { display:block; margin-bottom:10px; font-family:var(--title-font); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; color:#936421; }
.location-name-header h1 { margin:0 0 8px; font-family:var(--title-font); font-size:clamp(58px,8vw,92px); line-height:.98; color:#56351a; transition:.3s ease; }
.location-name-header:hover h1 { transform:translateX(3px); color:#6c431b; text-shadow:0 2px 12px rgba(198,156,74,.22); }
.location-full-name { margin:0; font-family:var(--title-font); font-size:clamp(17px,2vw,22px); color:#936421; }

.location-intro-body { display:grid; grid-template-columns:minmax(300px,1.15fr) minmax(260px,.85fr); gap:clamp(28px,4vw,46px); align-items:stretch; }
.location-image-card { position:relative; overflow:hidden; display:block; width:100%; padding:7px; cursor:zoom-in; appearance:none; background:linear-gradient(145deg,#d9ad4d,#8a591d); border:2px solid rgba(244,212,124,.76); border-radius:13px; box-shadow:0 12px 28px rgba(55,34,14,.27); transition:.3s ease; }
.location-image-frame { display:block; overflow:hidden; border-radius:8px; background:#101827; }
.location-image-card img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:7px; transition:transform .45s ease,filter .45s ease; }
.location-image-card::after { content:""; position:absolute; z-index:2; top:-20%; left:-85%; width:45%; height:140%; pointer-events:none; background:linear-gradient(115deg,transparent,rgba(244,212,124,.10),rgba(255,239,179,.44),rgba(244,212,124,.12),transparent); transform:skewX(-18deg); transition:left .75s ease; }
.location-image-card:hover { transform:translateY(-5px); border-color:#f4d47c; box-shadow:0 18px 36px rgba(55,34,14,.34),0 0 20px rgba(244,212,124,.24); }
.location-image-card:hover::after { left:135%; }
.location-image-card:hover img { transform:scale(1.025); filter:brightness(1.035); }
.location-image-hint { position:absolute; z-index:3; right:16px; bottom:15px; padding:6px 10px; border-radius:18px; background:rgba(16,24,39,.82); color:#fff0ad; font-family:var(--title-font); font-size:11px; letter-spacing:.5px; opacity:0; transform:translateY(5px); transition:.25s ease; }
.location-image-card:hover .location-image-hint { opacity:1; transform:none; }

.location-intro-details { display:flex; flex-direction:column; gap:18px; }
.location-description-card { position:relative; overflow:hidden; flex:1; padding:24px; background:rgba(255,250,229,.76); border:1px solid rgba(111,76,36,.25); border-left:4px solid #b8862c; border-radius:10px; box-shadow:0 9px 22px rgba(70,45,20,.12); transition:.28s ease; }
.location-description-card::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(244,212,124,.18),rgba(255,255,255,.22),transparent); transform:skewX(-22deg); transition:left .7s ease; }
.location-description-card:hover { transform:translateY(-3px); border-color:#e5c46e; border-left-color:#f4d47c; box-shadow:0 14px 28px rgba(70,45,20,.18); }
.location-description-card:hover::after { left:135%; }
.location-description-card p { position:relative; z-index:1; margin:0; font-size:clamp(19px,2vw,22px); line-height:1.72; color:#55402e; }
.location-sector-card { position:relative; overflow:hidden; display:block; padding:18px 20px; text-align:center; text-decoration:none; background:linear-gradient(145deg,#101827,#182438); border:1px solid rgba(244,212,124,.62); border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.22); transition:.25s ease; }
.location-sector-card strong { display:block; margin-bottom:5px; color:#e5c46e; font-family:var(--title-font); font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.location-sector-card span { color:#fff0ad; font-family:var(--title-font); font-size:21px; }
.location-sector-card:hover { transform:translateY(-4px); border-color:#fff0ad; box-shadow:0 12px 25px rgba(0,0,0,.28),0 0 14px rgba(244,212,124,.16); }

.location-content-section { position:relative; overflow:hidden; margin-top:34px; padding:clamp(28px,4vw,42px); background:rgba(255,250,229,.95); border:1px solid rgba(198,156,74,.44); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18); transition:.3s ease; }
.location-content-section:hover { transform:translateY(-3px); border-color:rgba(244,212,124,.84); box-shadow:0 16px 36px rgba(0,0,0,.23),0 0 16px rgba(244,212,124,.10); }
.location-content-section h2 { position:relative; margin:0 0 20px; padding-bottom:11px; font-family:var(--title-font); font-size:clamp(28px,3vw,35px); color:#65401c; border-bottom:1px solid rgba(139,93,31,.22); }
.location-content-section h2::after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:linear-gradient(90deg,#b8862c,#f4d47c,transparent); transition:width .55s ease; }
.location-content-section:hover h2::after { width:100%; }
.location-content-section p { margin:0; font-size:20px; line-height:1.8; color:#4d3928; }

.location-facts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.location-fact { position:relative; overflow:hidden; padding:18px 20px; text-align:center; background:linear-gradient(145deg,#101827,#182438); border:1px solid rgba(244,212,124,.58); border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.20); transition:.25s ease; }
.location-fact::after { content:""; position:absolute; top:0; left:-120%; width:70%; height:100%; background:linear-gradient(120deg,transparent,rgba(244,212,124,.20),rgba(255,255,255,.18),transparent); transform:skewX(-22deg); transition:left .65s ease; }
.location-fact:hover { transform:translateY(-4px); border-color:#fff0ad; box-shadow:0 12px 25px rgba(0,0,0,.28),0 0 14px rgba(244,212,124,.16); }
.location-fact:hover::after { left:135%; }
.location-fact strong,.location-fact span { position:relative; z-index:1; display:block; }
.location-fact strong { margin-bottom:7px; color:#e5c46e; font-family:var(--title-font); font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.location-fact span { color:#fff0ad; font-family:var(--title-font); font-size:20px; line-height:1.3; }

.location-connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.location-connection-card { display:flex; align-items:center; min-height:88px; padding:10px 18px 10px 10px; color:#fff0ad; text-decoration:none; background:linear-gradient(145deg,#101827,#182438); border:1px solid rgba(244,212,124,.55); border-radius:48px 12px 12px 48px; box-shadow:0 8px 18px rgba(0,0,0,.20); transition:.28s ease; }
.location-connection-card:hover { transform:translateY(-4px); border-color:#f4d47c; box-shadow:0 13px 26px rgba(0,0,0,.28),0 0 15px rgba(244,212,124,.14); }
.location-connection-image { flex:0 0 68px; width:68px; height:68px; margin-right:15px; overflow:hidden; display:grid; place-items:center; border-radius:50%; border:2px solid #d9ad4d; background:radial-gradient(circle,#28364d,#101827); box-shadow:0 0 0 3px rgba(244,212,124,.08); }
.location-connection-image img { width:100%; height:100%; object-fit:cover; }
.location-connection-image.image-missing::after { content:"✦"; color:#f4d47c; font-size:24px; }
.location-connection-name { font-family:var(--title-font); font-size:18px; line-height:1.2; }

.location-area-grid,.location-archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.location-area-card,.location-archive-card { display:flex; align-items:center; gap:12px; padding:17px 20px; border:1px solid rgba(198,156,74,.55); border-radius:10px; background:rgba(248,237,202,.58); color:#65401c; text-decoration:none; font-size:18px; transition:.25s ease; }
.location-area-card span,.location-archive-card span { color:#b8862c; }
.location-archive-card strong { font-family:var(--title-font); font-size:17px; }
.location-archive-card:hover { transform:translateY(-3px); border-color:#d9ad4d; background:#fff6d9; box-shadow:0 8px 18px rgba(70,45,20,.12); }
.location-secret-section details { border:1px solid rgba(116,82,134,.55); border-radius:10px; background:rgba(78,47,90,.06); }
.location-secret-section summary { cursor:pointer; padding:18px 20px; color:#674474; font-family:var(--title-font); font-size:18px; }
.location-secret-section details p { padding:0 20px 20px; }

.location-navigation { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-top:38px; }
.location-button { display:inline-flex; align-items:center; padding:11px 20px; border:1px solid rgba(244,212,124,.45); border-radius:28px; color:#fff0ad; background:rgba(255,255,255,.045); text-decoration:none; font-family:var(--title-font); font-size:14px; transition:.25s ease; }
.location-button:hover { transform:translateY(-3px); border-color:#f4d47c; background:rgba(244,212,124,.10); box-shadow:0 0 16px rgba(244,212,124,.12); }

.location-lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:35px; background:rgba(4,8,15,.92); opacity:0; visibility:hidden; transition:.25s ease; }
.location-lightbox.is-open { opacity:1; visibility:visible; }
.location-lightbox img { display:block; max-width:min(1400px,94vw); max-height:90vh; border:3px solid #d9ad4d; border-radius:10px; box-shadow:0 0 0 6px rgba(244,212,124,.08),0 25px 70px rgba(0,0,0,.65); }
.location-lightbox-close { position:fixed; top:22px; right:28px; width:48px; height:48px; border:1px solid #f4d47c; border-radius:50%; background:#101827; color:#fff0ad; font-size:30px; line-height:1; cursor:pointer; }
body.lightbox-open { overflow:hidden; }

@media(max-width:760px) {
    .location-world { padding:128px 15px 70px; }
    .location-intro-section { padding:25px 20px; }
    .location-name-header { text-align:center; }
    .location-name-header h1 { font-size:clamp(44px,13vw,64px); }
    .location-intro-body,.location-facts-grid,.location-connection-grid,.location-area-grid,.location-archive-grid { grid-template-columns:1fr; }
    .location-image-card { max-width:620px; margin-inline:auto; }
    .location-content-section { padding:28px 20px; }
    .location-content-section p { font-size:18px; }
    .location-connection-name { font-size:17px; }
    .location-lightbox { padding:18px; }
}