/* 
  Файл: portfolio.css
  Описание: Пользовательские стили для страниц портфолио (детальная страница проекта и прайс-лист).
  Включает оформление изображений, контейнеров карточек, мета-информации и боковой панели.
*/

/* Стили для заголовка на детальной странице портфолио */
.portfolio-detail-header {
    background: var(--gradient-dark); /* Темный градиент для фона заголовка */
    padding: 4rem 0; /* Внутренние отступы сверху и снизу для создания пространства */
    border-bottom: 1px solid var(--color-glass-border); /* Темная нижняя граница для визуального разделения */
    margin-bottom: 3rem; /* Отступ снизу до основного контента */
}

/* Контейнер главного изображения проекта */
.portfolio-image-container {
    border-radius: var(--radius-lg); /* Крупное скругление углов контейнера */
}

/* Главное изображение проекта на детальной странице */
.portfolio-image-detail, .portfolio-hero-image {
    width: 100%; /* Изображение занимает всю ширину контейнера */
    height: auto; /* Автоматическая высота для сохранения пропорций */
    max-height: 550px; /* Ограничиваем максимальную высоту изображения, чтобы оно не занимало весь экран */
    object-fit: cover; /* Обрезаем изображение, чтобы оно заполняло область без искажений */
}

/* Специальное изображение для старого формата карточек (legacy support) */
.portfolio-image-detail {
    max-height: 600px; 
    border-radius: var(--radius-lg); /* Закругление углов изображения */
    box-shadow: var(--shadow-lg); /* Большая тень для придания глубины */
    margin-bottom: 2rem; /* Отступ снизу */
}

/* Затемняющий градиент поверх главного изображения (для лучшей читаемости текста) */
.portfolio-hero-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.85)); /* Плавный переход от прозрачного к почти черному цвету снизу */
}

/* Стили для текстового содержимого (описания) проекта */
.portfolio-content {
    font-size: 1.15rem; /* Увеличенный размер шрифта для лучшей читаемости лонгридов */
    line-height: 1.8; /* Увеличенный межстрочный интервал (1.8) для "дыхания" текста */
    color: var(--color-text-main); /* Основной цвет текста, берется из глобальных переменных */
}

/* Отступы между абзацами внутри описания проекта */
.portfolio-content p {
    margin-bottom: 1.75rem; /* Отступ снизу для каждого абзаца */
}

/* Блок мета-информации (соцсети, кнопки "назад", доп. детали) */
.portfolio-meta-detail {
    background: var(--color-glass); /* Полупрозрачный фон (эффект стекла) */
    border: 1px solid var(--color-glass-border); /* Обводка блока в стиле "стекло" */
    border-radius: var(--radius-md); /* Среднее скругление углов */
    padding: 2rem; /* Обильные внутренние отступы */
    margin-bottom: 2rem; /* Внешний отступ снизу */
    color: var(--color-text-muted); /* Приглушенный цвет текста */
}

/* Блок для оформления заказа, когда проект доступен */
.portfolio-available-box {
    border: 1px solid rgba(40, 167, 69, 0.3); /* Легкая зеленая обводка, сигнализирующая о доступности (успехе) */
}

/* Блок для проекта, который временно недоступен для заказа */
.portfolio-unavailable-box {
    border: 1px solid rgba(220, 53, 69, 0.3); /* Легкая красная обводка (сигнал опасности/недоступности) */
}

/* Полупрозрачная кнопка для состояния "недоступно" */
.portfolio-btn-disabled {
    opacity: 0.7; /* Уменьшаем непрозрачность, визуально выключая элемент */
}

/* Карточка похожего (связанного) проекта в рекомендациях */
.related-portfolio-card {
    background: var(--color-glass); /* Фоновый цвет со стеклянным эффектом */
    border: 1px solid var(--color-glass-border); /* Граница карточки */
    border-radius: var(--radius-md); /* Закругление углов */
    overflow: hidden; /* Скрываем вылезающие за края элементы (например, углы изображения) */
    transition: var(--transition-normal); /* Плавная анимация при изменении состояния (например, наведении) */
    height: 100%; /* Карточка занимает 100% высоты своего родителя */
}

/* Эффект при наведении курсора на карточку похожего проекта */
.related-portfolio-card:hover {
    transform: translateY(-5px); /* Слегка приподнимаем карточку вверх */
    background: var(--color-glass-hover); /* Немного осветляем фон карточки */
    border-color: var(--color-glass-border-bright); /* Делаем границу ярче */
    box-shadow: var(--shadow-md); /* Увеличиваем тень под карточкой */
}

/* Изображение внутри карточки похожего проекта */
.related-portfolio-image {
    height: 200px; /* Фиксированная высота для ровной сетки карточек */
    object-fit: cover; /* Обрезка изображения без искажений пропорций */
    width: 100%; /* Занимает 100% ширины карточки */
    transition: var(--transition-smooth); /* Плавная анимация для эффекта зума (приближения) */
}

/* Эффект зума (увеличения) изображения при наведении на всю карточку */
.related-portfolio-card:hover .related-portfolio-image {
    transform: scale(1.05); /* Увеличиваем изображение на 5% */
}

/* Ценник или плашка с ценой */
.price-tag {
    font-family: 'Outfit', sans-serif; /* Используем отдельный шрифт (Outfit) для выделения цифр */
    font-weight: 700; /* Делаем шрифт жирным */
    color: var(--color-secondary); /* Используем вторичный (акцентный) цвет из переменных */
}

/* Информационный блок об услуге */
.service-info-box {
    background: var(--color-glass); /* Фон карточки-информации */
    border-left: 4px solid var(--color-primary); /* Яркая левая граница-акцент приоритетным цветом */
    padding: 1.5rem; /* Внутренние отступы (воздух) со всех сторон */
    border-radius: var(--radius-sm); /* Небольшое закругление */
    margin: 2rem 0; /* Внешние отступы сверху и снизу (2rem), по бокам - ноль */
}

/* Закрепленная (sticky) боковая навигация на странице прайс-листа */
.price-sidebar-sticky {
    top: 100px; /* Отступ сверху при прилипании (чтобы не перекрывалась шапкой сайта) */
}

/* Изображение конкретной услуги в прайс-листе */
.price-service-image {
    height: 200px; /* Фиксированная высота картинки услуги */
    object-fit: cover; /* Плотное заполнение контейнера изображением */
}

/* АДАПТИВНОСТЬ: стили для планшетов и мобильных устройств (ширина экрана 768px и меньше) */
@media (max-width: 768px) {
    /* Уменьшаем высоту главного изображения на маленьких экранах */
    .portfolio-image-detail, .portfolio-hero-image {
        max-height: 350px; /* Достаточная высота для телефона, чтобы видеть контекст и картинку */
    }
    
    /* Слегка уменьшаем размер шрифта описания проекта для экономии места на экране телефона */
    .portfolio-content {
        font-size: 1.05rem; /* Переходим от 1.15rem к 1.05rem */
    }
}

/* Анимации при наведении для карточек портфолио */
.glass-card-premium { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.glass-card-premium:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0,0,0,0.3) !important; }
.glass-card-premium:hover .portfolio-img { transform: scale(1.1); }
.glass-card-premium:hover .portfolio-view-case i { transform: translateX(8px); }
.glass-card-premium:hover .hover-primary { color: var(--bs-primary) !important; }