/* Стили для страницы виртуальной выставки */

/* === HERO PARALLAX === */
.hero-parallax{position:relative;height:100vh;overflow:hidden;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(0.35)}
.hero-parallax::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1}


.hero-content{z-index:2}
.parallax-layer{position:absolute;top:0;left:0;width:100%;height:100%}
.parallax-layer img{width:110%;height:130%;object-fit:cover}
.hero-parallax .hero-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px}
.hero-title{font-size:2.8rem;font-weight:700;margin-bottom:10px;text-shadow:0 3px 8px rgba(0,0,0,.6)}
.hero-subtitle{font-size:1.2rem;margin-bottom:20px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.cta-btn{display:inline-block;padding:12px 30px;background:#ffac33;color:#1a1a1a;border-radius:30px;font-weight:600;transition:.3s}
.cta-btn:hover{background:#ffc766}

/* === ZONES BANNERS === */
.zone-block{display:block;position:relative;width:100%;min-height:460px;margin-bottom:80px;background-image:var(--bg);background-size:cover;background-position:center;border-radius:20px;overflow:hidden;color:#fff;text-decoration:none;transition:transform .4s box-shadow .4s}
.zone-block::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 100%);transition:opacity .4s}
.zone-block.alt::after{background:linear-gradient(-90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,0) 100%)}
.zone-block:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 18px 35px rgba(0,0,0,.25)}
.zone-content{position:absolute;top:50%;left:80px;transform:translateY(-50%);max-width:480px;z-index:2}
.zone-block.alt .zone-content{right:80px}
.zone-block.alt .zone-content{left:auto;right:60px;text-align:right}
.zone-title{font-size:2.4rem;font-weight:700;margin:0 0 15px}
.zone-desc{font-size:1.2rem;margin-bottom:20px}
.zone-count{display:block;font-size:.9rem;margin-bottom:20px}
/* скрываем старую сетку если осталась */
.zones-grid{display:none}

/* === ZONES GRID === */
.zones-section{padding:60px 0}
.zones-section .container{max-width:1400px;padding:0 40px}
.section-title{text-align:center;font-size:2rem;margin-bottom:40px}
.zones-toolbar{display:flex;justify-content:flex-end;margin:-10px 0 30px}
.zones-toolbar input[type=search]{width:100%;max-width:420px;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-size:.95rem;outline:none;transition:border-color .2s, box-shadow .2s;background:#fff}
.zones-toolbar input[type=search]:focus{border-color:#1a3e6f;box-shadow:0 0 0 3px rgba(26,62,111,.1)}
.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,400px));grid-auto-rows:1fr;gap:50px;justify-content:center}
.zone-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:transform .4s box-shadow .4s;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative}
.zone-card::before{content:"";position:absolute;inset:0;border:2px solid #ffac33;border-radius:15px;opacity:0;transition:opacity .3s}
.zone-card:hover::before{opacity:1}
.zone-card:hover{transform:translateY(-15px) scale(1.03);box-shadow:0 15px 30px rgba(0,0,0,.15)}
.zone-card:hover{transform:translateY(-8px);box-shadow:0 12px 25px rgba(0,0,0,.1)}
.zone-card img{width:100%;height:260px;object-fit:cover}
.zone-info{padding:20px;flex:1;display:flex;flex-direction:column}
.zone-info h3{margin-top:0;margin-bottom:10px;font-size:1.5rem;color:#1a3e6f}
.zone-info p{font-size:.9rem;flex:1;color:#555;margin-bottom:15px}
.zone-btn{align-self:flex-start;padding:8px 18px;background:#1a3e6f;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:.3s;font-weight:500}
.zone-btn:hover{background:#2e6cb5}
.exhibits-count{display:block;font-size:.8rem;color:#888;margin-bottom:8px}

/* === STATS === */
.stats-section{background:#f8f9fb;padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;text-align:center}
.stat-number{font-size:2rem;font-weight:700;color:#1a3e6f}
.stat-label{font-size:.9rem;color:#555}

/* === HOW TO === */
.howto-section{padding:60px 0}
.howto-steps{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-bottom:40px}
.step{flex:1 1 200px;text-align:center}
.step-icon{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;background:#1a3e6f;color:#fff;font-weight:700;margin-bottom:10px}
.howto-video{text-align:center}

/* MEDIA */
@media(max-width:768px){
  .hero-title{font-size:2rem}
  .hero-parallax .hero-content{padding:0 10px}
  .zones-grid{grid-template-columns:1fr}
  .howto-steps{flex-direction:column;align-items:center}
}

/* Общие стили для выставки */
.exhibition-intro {
    padding: 50px 0;
    background-color: #e9f0f9;
}

.intro-text {
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 1.2rem;
}

/* Карта выставки */
.exhibition-map {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.exhibition-map h3 {
    text-align: center;
    margin-bottom: 30px;
}

.map-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    position: relative;
}

.map-container:after {
    content: '';
    position: absolute;
    width: 80%;
    height: 2px;
    background-color: #ddd;
    top: 50%;
    left: 10%;
    z-index: 1;
}

.hall {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
}

.hall:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hall-3 {
    grid-column: 1 / span 2;
    width: 70%;
    margin: 0 auto;
}

.hall h4 {
    color: #1a3e6f;
    margin-bottom: 10px;
}

.hall p {
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.hall-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #1a3e6f;
    color: white;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.hall-link:hover {
    background-color: #2e6cb5;
    color: white;
}

/* Залы выставки */
.exhibition-hall {
    display: none; /* Скрыто по умолчанию */
    padding: 50px 0;
}

.hall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.back-to-map {
    padding: 8px 16px;
    background-color: #1a3e6f;
    color: white;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.back-to-map:hover {
    background-color: #2e6cb5;
    color: white;
}

.hall-description {
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 1.1rem;
}

/* Экспонаты */
.exhibits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.exhibit {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exhibit:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.exhibit img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.exhibit h3 {
    padding: 15px 15px 5px;
    font-size: 1.2rem;
}

.exhibit p {
    padding: 0 15px 15px;
    font-size: 0.9rem;
    color: #666;
}

.exhibit-link {
    display: block;
    padding: 10px 15px;
    background-color: #e9f0f9;
    text-align: center;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.exhibit-link:hover {
    background-color: #d0e0f7;
}

/* Детальное описание экспоната */
.exhibit-details {
    display: none; /* Скрыто по умолчанию */
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.exhibit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.back-to-hall {
    padding: 8px 16px;
    background-color: #1a3e6f;
    color: white;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.back-to-hall:hover {
    background-color: #2e6cb5;
    color: white;
}

.exhibit-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.exhibit-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.exhibit-info h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.exhibit-info p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.exhibit-interactive {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.audio-guide-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1a3e6f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.audio-guide-btn:hover {
    background-color: #2e6cb5;
}

.interactive-model {
    margin-top: 20px;
}

.model-placeholder {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
}

.model-placeholder img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    margin-bottom: 10px;
}

.model-placeholder p {
    font-size: 0.9rem;
    color: #666;
}

/* Адаптивные стили */
@media (max-width: 992px) {
    .exhibits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .exhibit-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .map-container {
        grid-template-columns: 1fr;
    }
    
    .map-container:after {
        display: none;
    }
    
    .hall-3 {
        grid-column: auto;
        width: 100%;
    }
    
    .exhibits-grid {
        grid-template-columns: 1fr;
    }
    
    .hall-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .exhibit-header {
        flex-direction: column;
        gap: 15px;
    }
}