/**
 * Archive Hero Module - Styles
 * Стили для Hero-секции на страницах архивов (slots, casinos, providers и т.д.)
 * 
 * @package GamblingTheme
 * @subpackage Modules/Archive_Hero
 * @version 2.0.0
 * 
 * СТРУКТУРА:
 * .archive-hero-section (внешняя секция, фон на 100% ширины)
 *   └── .container (ограничение ширины 1400px)
 *       └── .archive-hero-wrapper (обёртка контента)
 *           └── .archive-hero-inner (flexbox: контент слева, картинка справа)
 *               ├── .archive-hero-content (H1 + подпись)
 *               └── .archive-hero-image-block (картинка + подпись + кнопки)
 */

/* ============================================
   🎭 HERO СЕКЦИЯ - ОСНОВНАЯ ОБЁРТКА
   ============================================ */

.archive-hero-section {
    width: 100%;
    background: var(--bg-primary);
    padding: 0;
    overflow-x: hidden;
}

/* Модификатор для fallback (когда нет данных из ACF) */
.archive-hero-section--fallback {
    padding: var(--spacing-2xl, 48px) 0;
    text-align: center;
}

.archive-hero-section--fallback .archive-title {
    font-size: var(--h1-size, 48px);
    font-weight: var(--h1-weight, 700);
    color: var(--text-primary, #FFFFFF);
    margin: 0;
}

/* ============================================
   📦 КОНТЕЙНЕР И ОБЁРТКИ
   ============================================ */

.archive-hero-wrapper {
    background-color: var(--bg-blok);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    padding-bottom: 10px;
    box-shadow: var(--shadow-md);
}

.archive-hero-inner {
    display: flex;
    gap: var(--spacing-2xl, 48px);
    align-items: flex-start;
    flex-wrap: wrap; /* Для адаптивности */
}

/* ============================================
   📝 БЛОК КОНТЕНТА (H1 + Подпись)
   ============================================ */

.archive-hero-content {
    flex: 1 1 50%; /* Занимает 50% ширины на больших экранах */
    min-width: 300px; /* Минимальная ширина для мобильных */
    text-align: center;
}

.archive-hero-title {
    font-family: var(--font-headings);
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    color: var(--text-primary);
    text-transform: uppercase;
    margin: 0;
}

.archive-hero-subtitle {
    font-size: var(--font-md, 20px);
    line-height: var(--line-height-relaxed, 1.7);
    color: var(--text-secondary, #B8B8B8);
    margin: 0;
}

.archive-hero-subtitle p {
    margin: 0 0 var(--spacing-sm, 12px) 0;
}

.archive-hero-subtitle p:last-child {
    margin-bottom: 0;
}

/* ============================================
   🖼️ БЛОК ИЗОБРАЖЕНИЯ (Картинка + Кнопки)
   ============================================ */

.archive-hero-image-block {
    flex: 1 1 40%; /* Занимает 40% ширины */
    min-width: 280px;
}

.archive-hero-image-block img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    display: block;
}

/* Подпись под изображением */
.archive-hero-image-caption {
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    margin-top: var(--spacing-xxs);
}

/* ============================================
   🔘 КНОПКИ В HERO-БЛОКЕ
   ============================================ */

/* Основная кнопка (золотая) */
.archive-hero-button-wrapper .button--primary,
.archive-hero-button-wrapper .gt-button--primary {
    background: var(--primary, #D4AF37);
    color: var(--text-on-dark, #FFFFFF);
    border: 2px solid var(--primary, #D4AF37);
}

.archive-hero-button-wrapper .button--primary:hover,
.archive-hero-button-wrapper .gt-button--primary:hover {
    background: var(--primary-hover, #F4CF5A);
    border-color: var(--primary-hover, #F4CF5A);
    box-shadow: var(--shadow-gold, 0 4px 12px rgba(212, 175, 55, 0.3));
}

/* Вторичная кнопка (обводка) */
.archive-hero-button-wrapper .button--secondary,
.archive-hero-button-wrapper .gt-button--secondary {
    background: transparent;
    color: var(--primary, #D4AF37);
    border: 2px solid var(--primary, #D4AF37);
}

.archive-hero-button-wrapper .button--secondary:hover,
.archive-hero-button-wrapper .gt-button--secondary:hover {
    background: var(--primary, #D4AF37);
    color: var(--text-on-dark, #FFFFFF);
}

/* ============================================
   📱 АДАПТИВНОСТЬ: ПЛАНШЕТЫ (≤1024px)
   ============================================ */

@media (max-width: 1024px) {
    .archive-hero-section {
        padding: var(--spacing-2xl, 48px) 0;
    }

    .archive-hero-wrapper {
        padding: var(--spacing-lg, 24px);
    }

    .archive-hero-inner {
        gap: var(--spacing-xl, 32px);
    }

    .archive-hero-title {
        font-size: var(--h1-size-tablet, 40px);
    }

    .archive-hero-subtitle {
        font-size: var(--font-base, 16px);
    }
}

/* ============================================
   📱 АДАПТИВНОСТЬ: МОБИЛЬНЫЕ (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .archive-hero-section {
        padding: var(--spacing-xl, 32px) 0;
    }

    .archive-hero-wrapper {
        padding: var(--spacing-md, 16px);
    }

    .archive-hero-inner {
        flex-direction: column; /* Вертикальная раскладка */
        gap: var(--spacing-lg, 24px);
    }

    .archive-hero-content,
    .archive-hero-image-block {
        flex: 1 1 100%; /* На всю ширину */
        min-width: 0;
    }

    .archive-hero-title {
        font-size: var(--h1-size-mobile, 32px);
    }

    .archive-hero-subtitle {
        font-size: var(--font-base, 16px);
    }

    .archive-hero-button-wrapper {
        flex-direction: column;
    }

    .archive-hero-button-wrapper .button,
    .archive-hero-button-wrapper .gt-button {
        width: 100%; /* Кнопки на всю ширину */
        justify-content: center;
    }
}

/* ============================================
   🔍 DEBUG MODE (для разработки)
   ============================================ */

/* Раскомментируйте для отладки границ блоков */
/*
.archive-hero-section { outline: 3px solid red; }
.archive-hero-wrapper { outline: 2px solid blue; }
.archive-hero-inner { outline: 2px solid green; }
.archive-hero-content { outline: 1px solid yellow; }
.archive-hero-image-block { outline: 1px solid cyan; }
*/