/* --- ВНУТРЕННИЙ HERO --- */
.inner-hero { position: relative; height: 55vh; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; }
.inner-hero-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; }
.inner-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%); }
.inner-hero-content { position: relative; z-index: 3; color: var(--white); padding: 0 20px; text-shadow: 0 4px 20px rgba(0,0,0,0.5); margin-top: 50px; }
.breadcrumbs { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; opacity: 0.8; font-weight: 600; }
.breadcrumbs a { color: var(--white); transition: var(--transition); }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs span { margin: 0 10px; opacity: 0.5; }
.inner-hero h1 { font-size: clamp(36px, 5vw, 64px); font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px; margin: 0; }

/* --- ФИЛЬТРЫ --- */
.gallery-section { padding: 80px 0 120px 0; background: var(--bg-sand); }
.gallery-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 50px; flex-wrap: wrap; }
.filter-btn {
    background: transparent; border: 2px solid rgba(51, 35, 21, 0.3); padding: 12px 25px; font-family: var(--sans);
    font-weight: 600; font-size: 13px; text-transform: uppercase; color: var(--dark-brown); cursor: pointer;
    border-radius: 30px; transition: var(--transition); letter-spacing: 1px;
}
.filter-btn:hover { border-color: var(--red); color: var(--red); }
.filter-btn.active { background: var(--red); color: var(--white); border-color: var(--red); box-shadow: 0 10px 20px rgba(168,0,25,0.2); pointer-events: none; }

/* --- СЕТКА ГАЛЕРЕИ (Исправлены отступы и заполнение) --- */
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

.gal-item { 
    border-radius: 8px; 
    overflow: hidden; 
    position: relative; 
    cursor: pointer; 
    display: block; 
    width: 100%;
    background: #e0dcd0;
}

.real-img { 
    position: absolute; /* Отвязываем от глобальных правил темы */
    top: 0;
    left: 0;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; /* Жестко заставляем заполнить блок, обрезая лишнее */
    transition: transform 0.8s ease; 
    margin: 0 !important;
    padding: 0 !important;
}

.gal-item:hover .real-img { 
    transform: scale(1.05); 
}

/* Наложение при наведении */
.gal-overlay { position: absolute; inset: 0; background: rgba(51, 35, 21, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); color: var(--white); backdrop-filter: blur(2px); pointer-events: none; }
.gal-item:hover .gal-overlay { opacity: 1; }
.gal-overlay i { font-size: 32px; color: var(--gold); margin-bottom: 12px; transform: translateY(15px); transition: 0.4s ease; }
.gal-item:hover .gal-overlay i { transform: translateY(0); }
.gal-overlay span { font-family: var(--sans); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; transform: translateY(15px); transition: 0.4s ease; transition-delay: 0.05s; }
.gal-item:hover .gal-overlay span { transform: translateY(0); }

/* Анимация появления при фильтрации */
.gal-item.fade-in { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* --- ПРОМО БЛОК --- */
.social-promo { background: var(--dark-brown); color: var(--white); padding: 100px 0; text-align: center; }
.social-promo-inner { max-width: 700px; margin: 0 auto; }
.social-promo h2 { color: var(--gold); margin-bottom: 20px; font-family: var(--serif); font-size: clamp(28px, 4vw, 42px); }
.social-promo p { font-size: 15px; font-weight: 400; line-height: 1.6; margin-bottom: 40px; opacity: 0.9; }
.social-promo-btns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* --- АДАПТИВ (ДВЕ КОЛОНКИ НА МОБИЛЬНОМ) --- */
@media(max-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media(max-width: 768px) {
    .gallery-section { padding: 60px 0; }
    .gallery-filters { gap: 8px; margin-bottom: 30px; }
    .filter-btn { padding: 10px 18px; font-size: 11px; flex-grow: 1; text-align: center; }
    
    /* 2 колонки на телефонах + отступы 15px (чтобы не было слишком тесно) */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* Делаем квадратные превьюшки для экономии места на мобильных (по желанию) */
    
    
    .social-promo { padding: 60px 20px; }
    .social-promo-btns { flex-direction: column; }
}