/* ===== ELIXAR PORTFOLIO ===== */
.plx-page { background: #F4F3F0; color: #111; }

/* Заголовок раздела */
.plx-head { padding: 32px 32px 64px; border-bottom: 1px solid #111; }
.plx-head-label { font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: rgba(17,17,17,.5); margin: 0 0 16px; }
.plx-head-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; margin: 0; }
.plx-head-title i { color: #FF4500; }
@media (min-width: 768px) { .plx-head { padding: 64px 64px 64px; } }

/* Шапка колонок */
.plx-cols { display: none; }
@media (min-width: 768px) {
    .plx-cols {
        display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
        padding: 16px 32px; border-bottom: 1px solid #111;
        background: rgba(17,17,17,.05);
        font-family: 'Space Mono', monospace; font-size: 10px;
        text-transform: uppercase; letter-spacing: .15em; opacity: .5;
    }
    .plx-cols > div:nth-child(1) { grid-column: span 2; }
    .plx-cols > div:nth-child(2) { grid-column: span 4; }
    .plx-cols > div:nth-child(3) { grid-column: span 3; }
    .plx-cols > div:nth-child(4) { grid-column: span 3; text-align: right; }
}

/* Строки проектов */
.plx-row {
    display: grid; grid-template-columns: 1fr; gap: 24px;
    padding: 32px; border-bottom: 1px solid #111;
    cursor: pointer; align-items: center; transition: background .2s;
}
@media (min-width: 768px) {
    .plx-row { grid-template-columns: repeat(12, 1fr); gap: 32px; }
    .plx-cell-id    { grid-column: span 2; }
    .plx-cell-title { grid-column: span 4; }
    .plx-cell-specs { grid-column: span 3; }
    .plx-cell-img   { grid-column: span 3; display: flex; justify-content: flex-end; }
}
.plx-row:hover { background: #fff; }

.plx-cell-id { font-family: 'Space Mono', monospace; display: flex; flex-direction: column; gap: 4px; }
.plx-id { color: #FF4500; font-weight: 700; }
.plx-meta { font-size: 10px; text-transform: uppercase; opacity: .5; }

.plx-cell-title h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.875rem; line-height: 1.1; margin: 0 0 8px; transition: color .2s; }
.plx-row:hover .plx-cell-title h2 { color: #FF4500; }
.plx-cell-title p { font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; opacity: .7; margin: 0; }

.plx-cell-specs { font-family: 'Space Mono', monospace; font-size: 12px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid rgba(17,17,17,.2); padding-left: 16px; }
.plx-specs-label { text-transform: uppercase; opacity: .5; margin-bottom: 4px; }

.plx-img { width: 100%; max-width: 192px; height: 128px; object-fit: cover; border: 1px solid #111; background: rgba(17,17,17,.05); filter: grayscale(100%); transition: all .3s; }
.plx-row:hover .plx-img { filter: grayscale(0); border-color: #FF4500; }
.plx-img-placeholder { display: flex; align-items: center; justify-content: center; }
.plx-img-placeholder span { font-family: 'Space Mono', monospace; font-size: 10px; opacity: .4; }

.plx-empty { padding: 32px; text-align: center; font-family: 'Space Mono', monospace; font-size: 14px; opacity: .5; }

/* ===== МОДАЛКА ===== */
.plx-modal {
    position: fixed; inset: 0; z-index: 9990;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.plx-modal.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
.plx-modal-overlay { position: absolute; inset: 0; background: rgba(17,17,17,.9); backdrop-filter: blur(6px); }
.plx-modal-box {
    position: relative; background: #F4F3F0; border: 1px solid #111;
    width: 100%; max-width: 1280px; max-height: 100%;
    display: flex; flex-direction: column;
    transform: scale(.95); transition: transform .3s;
    box-shadow: 0 0 50px rgba(0,0,0,.5);
}
.plx-modal.is-open .plx-modal-box { transform: scale(1); }

.plx-modal-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #111; flex-shrink: 0; }
.plx-sys { font-family: 'Space Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(17,17,17,.7); display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.plx-sys .dot { color: #FF4500; animation: plx-pulse 1.5s infinite; }
@keyframes plx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.plx-sys .qid { color: #FF4500; font-weight: 700; }
.plx-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; color: #111; cursor: pointer; margin-left: 16px; flex-shrink: 0; transition: all .2s; }
.plx-close:hover { color: #FF4500; border-color: #111; }
.plx-close svg { transition: transform .2s; }
.plx-close:hover svg { transform: rotate(90deg); }

.plx-modal-body {
    flex-grow: 1; overflow-y: auto;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(17,17,17,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,17,17,.05) 1px, transparent 1px);
}
.plx-modal-body::-webkit-scrollbar { width: 8px; }
.plx-modal-body::-webkit-scrollbar-track { background: #F4F3F0; border-left: 1px solid #111; }
.plx-modal-body::-webkit-scrollbar-thumb { background: #111; }

.plx-modal-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
    .plx-modal-grid { grid-template-columns: 1fr 1fr; }
    .plx-media { border-right: 1px solid #111; border-bottom: 0; }
}

/* Левая колонка: медиа + миниатюры */
.plx-media { border-bottom: 1px solid #111; padding: 32px; display: flex; flex-direction: column; justify-content: center; min-height: 50vh; }
.plx-stage { position: relative; width: 100%; aspect-ratio: 4/3; border: 1px solid #111; background: rgba(17,17,17,.05); display: flex; align-items: center; justify-content: center; padding: 16px; }
.plx-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
.plx-stage.has-img img { display: block; }
.plx-stage.has-img .plx-stage-label { display: none; }
.plx-stage-label { font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; opacity: .4; }
.plx-mark { position: absolute; width: 32px; height: 32px; }
.plx-mark-tl { top: 16px; left: 16px; border-top: 1px solid #111; border-left: 1px solid #111; }
.plx-mark-br { bottom: 16px; right: 16px; border-bottom: 1px solid #111; border-right: 1px solid #111; }
.plx-cross-h { position: absolute; width: 16px; height: 1px; background: rgba(17,17,17,.2); }
.plx-cross-v { position: absolute; width: 1px; height: 16px; background: rgba(17,17,17,.2); }

/* Миниатюры галереи под главным изображением */
.plx-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plx-thumbs:empty { display: none; }
.plx-thumb { width: 72px; height: 54px; object-fit: cover; border: 1px solid #111; cursor: pointer; filter: grayscale(100%); opacity: .6; transition: all .2s; }
.plx-thumb:hover { opacity: 1; }
.plx-thumb.is-active { border-color: #FF4500; filter: grayscale(0); opacity: 1; }

.plx-file-note { font-family: 'Space Mono', monospace; font-size: 10px; text-transform: uppercase; color: rgba(17,17,17,.4); margin-top: 16px; text-align: right; }

/* Правая колонка: данные */
.plx-data { padding: 32px; display: flex; flex-direction: column; background: rgba(244,243,240,.8); }
.plx-data-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1; margin: 0 0 16px; }
.plx-data-client { font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin: 0 0 48px; }
.plx-data-client b { color: #111; }
.plx-specs { font-family: 'Space Mono', monospace; font-size: 14px; border-top: 1px solid #111; padding-top: 32px; margin-bottom: 32px; flex-grow: 1; }
.plx-spec-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(17,17,17,.2); }
@media (min-width: 640px) {
    .plx-spec-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .plx-spec-row > span:last-child { grid-column: span 2; }
}
.plx-spec-label { opacity: .5; text-transform: uppercase; font-size: 12px; }
.plx-spec-bold { font-weight: 700; }
.plx-spec-opt { color: #FF4500; }
.plx-desc-label { font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; opacity: .5; display: block; margin-bottom: 24px; }
.plx-desc { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; line-height: 1.6; opacity: .9; margin: 0; }
.plx-cta { display: block; width: 100%; background: #111; color: #F4F3F0; padding: 20px; font-family: 'Space Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .15em; border: 1px solid #111; margin-top: 32px; text-align: center; text-decoration: none; transition: all .2s; }
.plx-cta:hover { background: #FF4500; color: #111; }

@media (max-width: 768px) {
    .plx-media, .plx-data { padding: 20px; }
    .plx-modal-top { padding: 12px 16px; }
    .plx-sys { font-size: 9px; }
}
/* ===== ФИЛЬТРЫ ===== */
.plx-filters {
    padding: 16px 32px;
    border-bottom: 1px solid #111;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(17, 17, 17, 0.03);
}
.plx-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.plx-filter-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .5;
    margin-right: 8px;
}
.plx-filter-btn {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid #111;
    background: none;
    color: #111;
    padding: 6px 12px;
    cursor: pointer;
    transition: all .2s;
}
.plx-filter-btn:hover { background: rgba(17, 17, 17, .08); }
.plx-filter-btn.is-active { background: #111; color: #F4F3F0; }
.plx-filter-count {
    padding: 8px 32px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: .5;
    border-bottom: 1px solid #111;
}
@media (max-width: 768px) {
    .plx-filters, .plx-filter-count { padding-left: 20px; padding-right: 20px; }
}