/* =========================================================
   PROJECTS MAP VERSION
   map · pins · announcement card · header dropdown · grid
========================================================= */

/* ---------- map frame ---------- */
.pmap{
    position:relative;
    height:clamp(460px, 42vw, 620px);
    margin-top:36px;
    border-radius:20px;
    overflow:hidden;
    background:#0A1322;
    border:1px solid rgba(120,185,255,.22);
    box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 30px 70px rgba(0,0,0,.45);
}

.pmap-canvas{ position:absolute; inset:0; }

/* the Yandex tiles, recoloured into the site's dark blue */
.pmap [class*="ground-pane"]{
    filter:invert(1) hue-rotate(185deg) saturate(.45) brightness(.78) contrast(.92);
}

/* soft vignette so the map melts into the frame */
.pmap::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;
    border-radius:inherit;
    box-shadow:inset 0 0 90px rgba(5,10,20,.75);
}

/* ---------- pins ---------- */
.pmap-pin{
    position:relative;
    width:22px;
    height:22px;
    transform:translate(-50%, -50%);
    cursor:pointer;
}
.pmap-pin-core{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#167BFF;
    border:3px solid #E8F2FF;
    box-shadow:0 0 0 4px rgba(22,123,255,.25), 0 0 18px rgba(22,123,255,.8);
    transition:transform .25s ease, background .25s ease;
}
.pmap-pin-ring{
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:2px solid rgba(67,183,255,.8);
    animation:pmapPulse 2.2s ease-out infinite;
    pointer-events:none;
}
.pmap-pin:hover .pmap-pin-core,
.pmap-pin.is-active .pmap-pin-core{
    transform:scale(1.25);
    background:#43B7FF;
}
@keyframes pmapPulse{
    0%   { transform:scale(1);   opacity:.9; }
    75%  { transform:scale(2.4); opacity:0; }
    100% { transform:scale(2.4); opacity:0; }
}

/* ---------- hint ---------- */
.pmap-hint{
    position:absolute;
    left:24px;
    bottom:24px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:10px;
    background:rgba(9,16,30,.85);
    border:1px solid rgba(120,185,255,.22);
    color:#C3CEDC;
    font-size:14px;
    pointer-events:none;
}
.pmap-hint[hidden]{ display:none; }
.pmap-hint-dot{
    width:10px; height:10px; border-radius:50%;
    background:#167BFF; box-shadow:0 0 10px rgba(22,123,255,.9);
}

/* ---------- announcement card ---------- */
.pmap-card{
    position:absolute;
    left:24px;
    top:24px;
    bottom:24px;
    z-index:5;
    width:min(380px, calc(100% - 48px));
    display:flex;
    opacity:0;
    transform:translateX(-14px);
    transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.pmap-card[hidden]{ display:none; }
.pmap-card.is-open{ opacity:1; transform:none; }

.pmap-card-link{
    display:flex;
    flex-direction:column;
    width:100%;
    overflow:hidden;
    border-radius:16px;
    background:rgba(9,16,30,.96);
    border:1px solid rgba(120,185,255,.28);
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 30px rgba(22,123,255,.12);
    color:#FFFFFF;
    text-decoration:none;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.pmap-card-link:hover{
    border-color:rgba(22,123,255,.7);
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(22,123,255,.3);
}

.pmap-card-photo{
    position:relative;
    display:block;
    flex:0 0 auto;
    aspect-ratio:16 / 10;
    overflow:hidden;
}
.pmap-card-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.pmap-card-photo::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:45%;
    background:linear-gradient(180deg, rgba(9,16,30,0), rgba(9,16,30,.95));
}

.pmap-card-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px 22px 22px;
    overflow:auto;
}
.pmap-card-cat{
    color:#4DA3FF;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}
.pmap-card-title{ font-size:19px; font-weight:700; line-height:1.3; }
.pmap-card-lead{ color:#AEBACB; font-size:14px; line-height:1.6; }
.pmap-card-meta{ color:#7C8BA1; font-size:13px; }
/* "Подробнее о проекте": the "Узнать больше" button (dir-panel-cta) —
   same outline, fill, glow, shine and arrow turn */
.pmap-card-body{ flex:1 1 auto; min-height:0; }
html body .pmap-card .pmap-card-more{
    display:flex !important;
    align-self:stretch;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:auto !important;
    min-height:50px;
    padding:0 20px !important;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    color:#FFFFFF;
}

.pmap-card-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border-radius:10px;
    border:1px solid rgba(120,185,255,.35);
    background:rgba(9,16,30,.8);
    color:#FFFFFF;
    cursor:pointer;
    transition:background .25s ease;
}
.pmap-card-close:hover{ background:#167BFF; }

/* ---------- fallback ---------- */
.pmap-fallback{
    position:absolute;
    inset:0;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    text-align:center;
    color:#AEBACB;
    font-size:15px;
    background:
        radial-gradient(600px 300px at 50% 40%, rgba(22,123,255,.12), transparent 70%),
        #0A1322;
}
.pmap-fallback[hidden]{ display:none; }

/* ---------- project grid ---------- */
.pgrid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:18px;
    margin-top:28px;
}
.pgrid-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:14px;
    background:rgba(12,20,36,.7);
    border:1px solid rgba(120,185,255,.16);
    color:#FFFFFF;
    text-decoration:none;
    transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pgrid-card:hover{
    border-color:rgba(22,123,255,.6);
    box-shadow:0 0 28px rgba(22,123,255,.2);
}
.pgrid-photo{ display:block; aspect-ratio:16 / 10; overflow:hidden; }
.pgrid-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.pgrid-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.pgrid-cat{ color:#4DA3FF; font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }
.pgrid-title{ font-size:14.5px; font-weight:600; line-height:1.35; }
.pgrid-meta{ color:#7C8BA1; font-size:12.5px; }

@media (max-width:1199px){
    .pgrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:767px){
    .pmap{ height:auto; margin-top:24px; }
    .pmap-canvas{ position:relative; height:360px; }
    .pmap-hint{ left:12px; right:12px; bottom:auto; top:312px; justify-content:center; font-size:13px; }
    /* on phones the card sits under the map, not over it */
    .pmap-card{ position:relative; left:auto; top:auto; bottom:auto; width:100%; transform:none; }
    .pmap-card-link{ border-radius:0 0 16px 16px; border-left:none; border-right:none; border-bottom:none; }
    .pmap-card-photo{ aspect-ratio:16 / 9; }
    .pgrid{ grid-template-columns:1fr 1fr; gap:12px; }
    .pgrid-title{ font-size:13.5px; }
}

/* =========================================================
   The projects section keeps the site's own one-screen layout:
   label + title + map fit the screen and are centred like every
   other section. The map height adapts to the screen height.
   The project cards live in their own block right after it.
========================================================= */
html body .projects.projects--map .pmap{
    height:clamp(340px, calc(100vh - 470px), 640px);
    margin-top:28px;
}

.projects-cards{
    position:relative;
    z-index:1;
    /* the cards start below the fold when the map is in view */
    padding:130px 0 170px;
}
.projects-cards .pgrid{ margin-top:0; }

@media (max-width:1199px){
    .projects-cards{ padding:10px 0 140px; }
}
@media (max-width:767px){
    html body .projects.projects--map .pmap{ height:auto; }
    .projects-cards{ padding:6px 0 110px; }
}


/* =========================================================
   HEADER DROPDOWN "Проекты" — same look as the directions
   catalog: numbered rows, thin dividers, round arrow, blue
   gradient and bar on the row under the pointer.
========================================================= */
.nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-dd > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-dd-chevron{ transition:transform .25s ease; opacity:.8; }
.nav-dd.is-open .nav-dd-chevron{ transform:rotate(180deg); }

.nav-dd-panel{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    z-index:1200;
    width:520px;
    padding:18px 20px 12px;
    border-radius:18px;
    background:#070D18;
    border:1px solid rgba(120,185,255,.22);
    box-shadow:0 28px 70px rgba(0,0,0,.6), 0 0 30px rgba(22,123,255,.10);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, 8px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav-dd-panel::before{ content:""; position:absolute; left:0; right:0; top:-20px; height:20px; }
.nav-dd.is-open .nav-dd-panel{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
}

.nav-dd-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 4px 14px;
    color:#FFFFFF;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}
.nav-dd-head::before{ content:""; width:34px; height:2px; background:#167BFF; border-radius:2px; }

.nav-dd-list{ border-top:1px solid rgba(255,255,255,.10); }

html body .header .nav .nav-dd-panel a.nav-dd-row{
    position:relative;
    display:grid !important;
    grid-template-columns:1fr 36px;
    align-items:center !important;
    gap:14px;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:16px 10px 16px 18px !important;
    border:none !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:left !important;
    white-space:normal !important;
    transform:none !important;
    transition:background .25s ease !important;
}
html body .header .nav .nav-dd-panel a.nav-dd-row::after{ display:none !important; }
html body .header .nav .nav-dd-panel a.nav-dd-row::before{
    content:"" !important;
    display:block !important;
    position:absolute;
    left:0; top:0; bottom:0;
    width:2px;
    background:#167BFF;
    opacity:0;
    transition:opacity .25s ease;
}
html body .header .nav .nav-dd-panel a.nav-dd-row:hover,
html body .header .nav .nav-dd-panel a.nav-dd-row:focus-visible{
    background:linear-gradient(90deg, rgba(22,123,255,.14), rgba(22,123,255,0) 88%) !important;
    outline:none;
}
html body .header .nav .nav-dd-panel a.nav-dd-row:hover::before,
html body .header .nav .nav-dd-panel a.nav-dd-row:focus-visible::before{ opacity:1; }

.nav-dd-num{
    padding-left:10px;
    color:#5E6979;
    font-size:13px;
    font-weight:700;
    letter-spacing:.52px;
    transition:color .25s ease;
}
.nav-dd-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.nav-dd-title{ color:#FFFFFF; font-size:15.5px; font-weight:700; line-height:1.3; }
.nav-dd-sub{ color:#5E6979; font-size:13px; font-weight:400; line-height:1.35; }
.nav-dd-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    color:#FFFFFF;
    transition:border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
html body .header .nav .nav-dd-panel a.nav-dd-row:hover .nav-dd-num{ color:#167BFF; }
html body .header .nav .nav-dd-panel a.nav-dd-row:hover .nav-dd-arrow{
    border-color:#167BFF;
    color:#5CA8FF;
    box-shadow:0 0 14px rgba(22,123,255,.45);
}

html body .header .nav .nav-dd-panel a.nav-dd-all{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px;
    width:auto !important;
    height:auto !important;
    margin:12px 0 4px !important;
    padding:8px 4px !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#4DA3FF !important;
    font-size:14px !important;
    font-weight:600 !important;
    transform:none !important;
}
html body .header .nav .nav-dd-panel a.nav-dd-all::before,
html body .header .nav .nav-dd-panel a.nav-dd-all::after{ display:none !important; }
html body .header .nav .nav-dd-panel a.nav-dd-all:hover{ color:#8ED6FF !important; }

/* the dropdown is a desktop feature — phones and tablets use the burger menu */
@media (hover:none) and (pointer:coarse){
    .nav-dd-panel, .nav-dd-chevron{ display:none !important; }
}


/* round arrow in the dropdown: the same pulsing ring as the catalog */
.nav-dd-arrow{ position:relative; }
.nav-dd-arrow::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    border:1px solid rgba(67,183,255,.75);
    opacity:0;
    pointer-events:none;
}
html body .header .nav .nav-dd-panel a.nav-dd-row:hover .nav-dd-arrow::after,
html body .header .nav .nav-dd-panel a.nav-dd-row:focus-visible .nav-dd-arrow::after{
    animation:geoRingPulse 1.6s ease-out infinite;
}

/* =========================================================
   Cards ribbon right under the map
========================================================= */
html body .projects.projects--map{
    height:auto !important;
    min-height:100vh;
    padding-bottom:170px !important;
}

.pgrid-viewport{
    position:relative;
    margin-top:28px;
    overflow:hidden;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.pgrid-viewport.is-dragging{ cursor:grabbing; }
.pgrid-viewport.is-dragging .pgrid-card{ pointer-events:none; }

html body .pgrid-viewport .pgrid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    gap:18px;
    width:max-content;
    margin:0 !important;
    will-change:transform;
}
html body .pgrid-viewport .pgrid-card{
    flex:0 0 300px;
    -webkit-user-drag:none;
}
.pgrid-viewport img{ pointer-events:none; -webkit-user-drag:none; }

@media (max-width:767px){
    .pgrid-viewport{ margin-top:18px; }
    html body .pgrid-viewport .pgrid-card{ flex-basis:240px; }
    html body .projects.projects--map{ min-height:0; padding-bottom:110px !important; }
}

/* "Подробнее о проекте" across the whole card width */
html body .pmap-card .pmap-card-more,
html body .pmap-card .pmap-card-more.dir-panel-cta{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    box-sizing:border-box;
}