/* =========================
   ACTIVE NAVIGATION
========================= */

.nav-link{
    position:relative;
}

.nav-link.active{
    color:#d9b45b;
}

.nav-link.active::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:-18px;

    width:72px;
    height:1px;

    background:#d9b45b;

    transform:translateX(-50%);
}

.nav-link.active::before{
    content:"◇";
    position:absolute;

    left:50%;
    bottom:-25px;

    transform:translateX(-50%);

    color:#d9b45b;
    background:#07111f;

    padding:0 6px;

    font-size:13px;
    line-height:14px;

    z-index:2;
}


/* =========================
   PAGE
========================= */

body{
    margin:0;
    background-color:#07111f;
}

.places-page{
    position:relative;

    height:calc(100vh - 118px);

    background-image:url("images/backgrounds/hero.png");
    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;

    background-color:#07111f;

    overflow:hidden;
}


/* =========================
   PLACE MARKER
========================= */

.place-marker{
    position:absolute;

    width:280px;

    display:flex;
    flex-direction:column;
    align-items:center;

    cursor:pointer;

    z-index:5;
}


/* =========================
   MARKER POSITIONS
========================= */

.agora-marker{
    left:30%;
    top:58%;

    transform:translate(-50%, -50%);
}

.mushroom-marker{
    left:10%;
    top:78%;

    transform:translate(-50%, -50%);
}

.asur-marker{
    left:60%;
    top:70%;

    transform:translate(-50%, -50%);
}


/* =========================
   GOLDEN SYMBOL
========================= */

.marker-symbol{
    display:block;

    width:95px;
    height:95px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 5px rgba(255,210,100,.65))
        drop-shadow(0 0 12px rgba(217,180,91,.35));

    transition:
        transform .3s ease,
        filter .3s ease;

    animation:markerFloat 3s ease-in-out infinite;
}


/* =========================
   MARKER LABEL
========================= */

.marker-label{
    position:relative;

    width:280px;

    margin-top:-6px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.marker-label img{
    display:block;

    width:100%;
    height:auto;

    pointer-events:none;
}

.marker-label span{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    width:82%;

    text-align:center;
    white-space:nowrap;

    color:#f1d58a;

    font-family:Georgia, serif;
    font-size:15px;

    letter-spacing:.3px;

    text-shadow:
        0 1px 2px #000,
        0 0 5px rgba(217,180,91,.35);

    pointer-events:none;
}


/* =========================
   MARKER HOVER
========================= */

.place-marker:hover .marker-symbol{
    transform:scale(1.08);

    filter:
        drop-shadow(0 0 7px rgba(255,220,120,.9))
        drop-shadow(0 0 18px rgba(217,180,91,.65));
}

.place-marker:hover .marker-label{
    filter:brightness(1.12);
}


/* =========================
   MARKER ANIMATION
========================= */

@keyframes markerFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }
}


/* =========================
   LOCATION PANEL
========================= */

/*
   Размер панели теперь задаётся высотой.
   Ширина автоматически рассчитывается
   по пропорциям новой frame.png.
*/

.location-panel{
    position:absolute;

    right:0;
    top:50%;

    height:100%;
    aspect-ratio:1024 / 1536;

    transform:translateY(-50%);

    z-index:20;

    display:none;

    overflow:hidden;
}

.location-panel.open{
    display:block;
}


/* =========================
   PHOTO AREA
========================= */

/*
   Фотография занимает ВЕСЬ тот же
   прямоугольник, что и frame.png.
*/

.location-content{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    color:#eee2c4;

    z-index:1;
}


/* =========================
   GALLERY
========================= */

.location-gallery{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    margin:0;

    overflow:hidden;

    z-index:1;

    /* фигурная маска по внутреннему краю рамки */
    -webkit-mask-image:url("images/backgrounds/frame-inner-mask.svg");
    mask-image:url("images/backgrounds/frame-inner-mask.svg");

    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-mode:alpha;
    mask-mode:alpha;
}


/* =========================
   FULL IMAGE
========================= */

.location-image{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position: 60% center;

    border:none;
    box-shadow:none;

    z-index:1;
}


/* =========================
   DARK OVERLAY
========================= */

.location-gallery::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(4,10,18,.05) 0%,
            rgba(4,10,18,.08) 45%,
            rgba(4,10,18,.38) 70%,
            rgba(4,10,18,.68) 100%
        );

    pointer-events:none;

    z-index:2;
}


/* =========================
   LOCATION TITLE
========================= */

.location-title{
    position:absolute;

    top:4%;
    left:18%;
    right:7%;

    margin:0;

    font-family:Georgia, serif;
    font-size:30px;
    font-weight:normal;
    line-height:1.2;

    color:#f0cf78;

    text-align:center;

    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 10px rgba(0,0,0,.9);

    z-index:5;
}


/* =========================
   DESCRIPTION
========================= */

.location-description{
    position:absolute;

left: 22%;
right: 11%;
bottom: 12%;
max-height: 28%;

    margin:0;
    padding:0;

    box-sizing:border-box;

    overflow-y:auto;
    overflow-x:hidden;

    font-family:Georgia, serif;
font-size: 15px;
line-height: 1.6;

    color:#f2ead9;

    text-align:left;

    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 0 5px rgba(0,0,0,.75);

    z-index:5;
}

.location-description p{
    margin:0 0 18px;
}

.location-description p:last-child{
    margin-bottom:0;
}


/* =========================
   GALLERY ARROWS
========================= */

.gallery-arrow {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(217, 180, 91, 0.7);
    border-radius: 50%;
    background: rgba(7, 17, 31, 0.75);
    color: #f0cf78;

    /* Скрываем старый символ, рисуем ровную стрелку */
    font-size: 0;

    cursor: pointer;
    z-index: 6;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.gallery-arrow::before {
    content: "";
    width: 9px;
    height: 9px;

    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.gallery-prev {
    left: 8.4%;
}

.gallery-next {
    right: 7%;
}

.gallery-prev::before {
    transform: translateY(7px) translateX(2px) rotate(-135deg);
}

.gallery-next::before {
    transform: translateY(7px) translateX(-2px) rotate(45deg);
}

.gallery-arrow:hover {
    background: #382b13;
    border-color: #fff1ba;
}

.gallery-arrow:focus-visible {
    outline: 2px solid #fff1ba;
    outline-offset: 3px;
}


/* =========================
   TRANSPARENT GOLD FRAME
========================= */

/*
   Новая прозрачная frame.png
   занимает ТОЧНО тот же блок,
   что и фотография.
*/

.location-frame{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    object-fit:fill;

    pointer-events:none;

    z-index:10;
}


/* =========================
   CLOSE BUTTON
========================= */

.location-close {
    position: absolute;
    top: 2%;
    right: 8%;

    width: 44px;
    height: 44px;
    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid #d9b45b;
    border-radius: 50%;
    background: rgba(7, 17, 31, 0.9);
    color: #f0cf78;

    font-family: Arial, sans-serif;
    font-size: 30px;
    line-height: 1;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

    cursor: pointer;
    z-index: 20;

    transition: background 0.2s ease, color 0.2s ease;
}

.location-close:hover {
    background: #382b13;
    color: #fff1ba;
}

.location-close:focus-visible {
    outline: 2px solid #fff1ba;
    outline-offset: 3px;
}


/* =========================
   SMALLER WINDOWS
========================= */

@media (max-height:750px){

    .location-title{
        font-size:25px;
    }

    .location-description{
        font-size:14px;
        line-height:1.45;
    }

    .gallery-arrow{
        width:40px;
        height:58px;

        font-size:38px;
    }
}

.location-title {
    display: none;
}

.location-description {
    bottom: 15%;
    font-size: 16px;
    line-height: 1.65;

    color: #fff3df;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.95),
        0 0 12px rgba(0, 0, 0, 0.65);
}