/* ===== Скриншоты — в стиле канона (тёмный, #131313, красный #cf2929) ===== */
.screenshots{
    display:flex;align-items:center;justify-content:center;
    margin-top:120px;position:relative;z-index:99999
}
.screenshots_block{
    max-width:1200px;width:100%;display:flex;flex-direction:column;gap:24px
}
.screenshots_label{
    display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%
}
.screenshots_label h1{
    width:50%;font-family:montserrat;font-size:32px;font-weight:600;
    line-height:38.4px;text-align:left;color:#fff
}
.screenshots_label p{
    width:50%;font-family:inter;font-size:16px;font-weight:400;
    line-height:22.4px;text-align:left;color:#8e8e8e
}
@media screen and (max-width:1220px){
    .screenshots{margin-top:80px}
    .screenshots_label{flex-direction:column;gap:16px}
    .screenshots_label h1,.screenshots_label p{width:100%;text-align:center}
}

.screenshots_grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%
}
@media screen and (max-width:1220px){.screenshots_grid{grid-template-columns:repeat(2,1fr);padding:0 16px}}
@media screen and (max-width:600px){.screenshots_grid{grid-template-columns:1fr}}

.screenshots_item{
    position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
    cursor:pointer;background-color:#131313;border:1px solid rgba(255,255,255,.06);
    transition:all .3s ease-in-out
}
.screenshots_item img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(.3) brightness(.88);transition:all .45s ease
}
.screenshots_item::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));
    opacity:.65;transition:opacity .3s
}
.screenshots_item:hover{
    border-color:#cf2929;box-shadow:0 0 22px rgba(207,41,41,.35);transform:translateY(-4px)
}
.screenshots_item:hover img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.screenshots_item:hover::after{opacity:.25}

/* значок-лупа в углу */
.screenshots_item .zoom{
    position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);
    opacity:0;transform:translateY(6px);transition:all .3s ease;z-index:2
}
.screenshots_item:hover .zoom{opacity:1;transform:translateY(0)}
.screenshots_item .zoom svg{width:16px;height:16px;stroke:#fff}

/* ===== Лайтбокс ===== */
.lightbox{
    position:fixed;inset:0;z-index:9999999;display:none;
    align-items:center;justify-content:center;
    background:rgba(5,5,5,.93);backdrop-filter:blur(6px)
}
.lightbox.open{display:flex}
.lightbox img{
    max-width:88vw;max-height:84vh;border-radius:12px;
    box-shadow:0 24px 70px rgba(0,0,0,.65);user-select:none
}
.lightbox_close{
    position:absolute;top:22px;right:30px;width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;
    font-family:inter;font-size:24px;line-height:1;display:flex;align-items:center;
    justify-content:center;transition:all .2s ease-in-out
}
.lightbox_close:hover{background:#cf2929;border-color:#cf2929}
.lightbox_arrow{
    position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
    border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);
    color:#fff;font-family:inter;font-size:28px;line-height:1;display:flex;
    align-items:center;justify-content:center;transition:all .2s ease-in-out
}
.lightbox_arrow:hover{background:#cf2929;border-color:#cf2929}
.lightbox_arrow-prev{left:26px}
.lightbox_arrow-next{right:26px}
.lightbox_counter{
    position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    font-family:inter;font-size:14px;color:#8e8e8e
}
@media screen and (max-width:600px){
    .lightbox_arrow{width:40px;height:40px;font-size:22px}
    .lightbox_arrow-prev{left:12px}.lightbox_arrow-next{right:12px}
    .lightbox_close{top:14px;right:14px}
    .lightbox img{max-width:94vw}
}

/* ===== доработки: подпанель под заголовком + журнальная сетка ===== */
.screenshots_label{gap:16px;align-items:stretch}
.screenshots_titlecard{
    background:#131313;border-radius:16px;border-left:3px solid #cf2929;
    padding:22px 30px;display:flex;align-items:center;flex:0 0 auto
}
.screenshots_titlecard h1{width:auto}
.screenshots_textcard{
    background:#131313;border-radius:16px;padding:22px 30px;
    display:flex;align-items:center;flex:1 1 auto
}
.screenshots_textcard p{width:auto}
@media screen and (max-width:1220px){
    .screenshots_titlecard,.screenshots_textcard{justify-content:center;text-align:center}
}
.screenshots_grid{grid-template-columns:repeat(3,1fr)}
.screenshots_item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media screen and (max-width:1220px){
    .screenshots_grid{grid-template-columns:repeat(2,1fr)}
    .screenshots_item:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
}
@media screen and (max-width:600px){
    .screenshots_grid{grid-template-columns:1fr}
    .screenshots_item:first-child{grid-column:auto}
}

/* ===== карусель скриншотов со стрелками ===== */
.screenshots_carousel{position:relative;width:100%}
.screenshots_track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
    padding:6px 4px;scrollbar-width:none;-ms-overflow-style:none}
.screenshots_track::-webkit-scrollbar{display:none}
.screenshots_track .screenshots_item{flex:0 0 auto;width:clamp(260px,31%,400px);aspect-ratio:16/9 !important;
    grid-column:auto !important;grid-row:auto !important;scroll-snap-align:center}
@media screen and (max-width:900px){.screenshots_track .screenshots_item{width:80%}}
.sc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;
    background:rgba(15,15,16,.82);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:inter;font-size:26px;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:background .2s ease,border-color .2s ease,transform .2s ease}
.sc-arrow:hover{background:#cf2929;border-color:#cf2929}
/* пейджер: стрелки по бокам за сеткой */
.screenshots_pager{position:relative}
.sc-prev{left:-60px}.sc-next{right:-60px}
@media screen and (max-width:1330px){.sc-prev{left:6px}.sc-next{right:6px}}
@media screen and (max-width:600px){.sc-arrow{width:40px;height:40px;font-size:22px}.sc-prev{left:2px}.sc-next{right:2px}}