/* =========================================================
   cartography.css — page accents + maps, 3D, slider
   ========================================================= */

.page-cartography{
    --accent:#7c3aed;
    --accent-2:#a546c2;
    --ink-on-accent:#fff;       /* white text is the readable one on this purple */
}

.page-card img{
    width:75%;
    margin:10px auto;
    cursor:zoom-in;
    transition:transform .25s ease;
}

.page-card img:hover{
    transform:scale(1.01);
}

.side-by-side-images{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.image-box{
    text-align:center;
}

.image-box p{
    font-size:11px;
    color:#475569;
}

.map-frame{
    display:block;
    width:100%;
    height:400px;
    border:1px solid #ccc;
    margin:10px 0;
    background:#f3f3f3;
}

/* ---------- 3D model ---------- */

.three-d{
    position:relative;
    text-align:center;
}

.three-d img{
    max-width:100%;
    border-radius:12px;
    cursor:pointer;
}

.activate-3d{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:0;
    background:#111;
    color:#fff;
    padding:10px 20px;
    border-radius:999px;
    font-family:inherit;
    font-size:12px;
    cursor:pointer;
    transition:background .25s ease;
}

.activate-3d:hover{
    background:#b246c2;
}

/* ---------- Featured project slider ---------- */

.project-accordion summary{
    display:flex;
    align-items:center;
    gap:10px;
}

.project-tag{
    background:#7c3aed;
    color:#fff;
    padding:3px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:600;
}

.accordion-section[open] .project-tag{
    background:rgba(255,255,255,.2);
}

.project-viewer{
    background:rgba(255,255,255,.92);
    padding:18px;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.project-viewer p{
    color:#444;
    font-size:.85rem;
    margin-bottom:12px;
}

.project-slider{
    position:relative;
    width:100%;
}

.slider-header{
    text-align:right;
    font-size:12px;
    color:#555;
    margin-bottom:5px;
}

.slide-container{
    display:flex;
    justify-content:center;
    align-items:center;
    touch-action:pan-y;
}

.project-slide{
    width:75%;
    display:none;
    cursor:zoom-in;
    aspect-ratio:16 / 9;
    object-fit:contain;
    background:#f3f3f3;
}

.project-slide.active{
    display:block;
    animation:slideFade .35s ease;
}

@keyframes slideFade{
    from{ opacity:.3; }
    to{ opacity:1; }
}

.slide-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:35px;
    height:35px;
    border:none;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    z-index:5;
    transition:background .25s ease;
}

.slide-arrow:hover{
    background:#a546c2;
}

.slide-arrow.left{ left:10px; }
.slide-arrow.right{ right:10px; }

@media (max-width:768px){

    .side-by-side-images{
        grid-template-columns:1fr;
    }

    .map-frame{
        height:280px;
    }

    .project-viewer{
        padding:12px;
    }

    .project-viewer p{
        font-size:.8rem;
        margin-bottom:10px;
    }

    .slider-header{
        text-align:center;
        margin-bottom:10px;
    }

    .project-slide{
        width:100%;
    }

    .slide-arrow{
        width:34px;
        height:34px;
        font-size:22px;
    }

    .slide-arrow.left{ left:5px; }
    .slide-arrow.right{ right:5px; }

    .project-tag{
        font-size:9px;
        padding:3px 8px;
    }

    .project-accordion summary{
        flex-wrap:wrap;
        gap:8px;
        font-size:.8rem;
        line-height:1.4;
    }
}