/**
 * Article Hero Module - Styles
 * Стили для Hero-секции на страницах одиночных статей (single article)
 *
 * @package GamblingTheme
 * @subpackage Modules/Article_Hero
 * @version 1.0.0
 *
 * СТРУКТУРА:
 * .article-hero-section (внешняя секция, фон на 100% ширины)
 *   └── .container (ограничение ширины контейнера)
 *       └── .article-hero (основная обёртка Hero статьи)
 *           ├── .article-hero__breadcrumbs
 *           ├── .article-hero__topics
 *           ├── .article-hero__title
 *           ├── .article-hero__excerpt
 *           ├── .article-hero__meta
 *           └── .article-hero__image
 */

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

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

/* ============================================
   📦 ОСНОВНАЯ КАРТОЧКА HERO
   ============================================ */

.article-hero {
    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);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* ============================================
   🍞 ХЛЕБНЫЕ КРОШКИ
   ============================================ */

.article-hero__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--spacing-sm, 12px);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #B8B8B8);
}

.article-hero__breadcrumb-link {
    color: var(--text-secondary, #B8B8B8);
    text-decoration: none;
    transition: color var(--transition-base);
}

.article-hero__breadcrumb-link:hover {
    color: var(--link-hover, var(--primary));
}

.article-hero__breadcrumb-separator {
    color: var(--text-muted, #7A7A7A);
    opacity: 0.8;
}

.article-hero__breadcrumb-current {
    color: var(--text-primary, #FFFFFF);
}

/* ============================================
   🏷️ ТЕМАТИЧЕСКИЕ ПЛАШКИ
   ============================================ */

.article-hero__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-sm, 12px);
}

.article-hero__topic-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--primary, #D4AF37);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base);
}

.article-hero__topic-chip:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--primary, #D4AF37);
    color: var(--text-on-dark, #FFFFFF);
    transform: translateY(-1px);
}

/* ============================================
   📝 ЗАГОЛОВОК И КРАТКОЕ ОПИСАНИЕ
   ============================================ */

.article-hero__title {
    font-family: var(--font-headings);
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-weight);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm, 12px) 0;
    text-transform: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-hero__excerpt {
    margin-bottom: var(--spacing-sm, 12px);
    color: var(--text-secondary, #B8B8B8);
    font-size: var(--font-base, 16px);
    line-height: var(--line-height-relaxed, 1.7);
}

.article-hero__excerpt p {
    margin: 0 0 var(--spacing-xs, 8px) 0;
}

.article-hero__excerpt p:last-child {
    margin-bottom: 0;
}

/* ============================================
   📅 META-ИНФОРМАЦИЯ
   ============================================ */

.article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-md, 16px);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #B8B8B8);
}

.article-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-hero__meta-item strong {
    color: var(--text-primary, #FFFFFF);
    font-weight: 600;
}

.article-hero__meta-separator {
    color: var(--text-muted, #7A7A7A);
    opacity: 0.8;
}

/* ============================================
   🖼️ HERO-ИЗОБРАЖЕНИЕ
   ============================================ */

.article-hero__image {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: transparent;
}

.article-hero__image-tag {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
}

/* ============================================
   🔗 СОСТОЯНИЯ ФОКУСА ДЛЯ ДОСТУПНОСТИ
   ============================================ */

.article-hero__breadcrumb-link:focus-visible,
.article-hero__topic-chip:focus-visible {
    outline: 2px solid var(--primary, #D4AF37);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

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

@media (max-width: 1024px) {
    .article-hero-section {
        padding: var(--spacing-0);
    }

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

    .article-hero__title {
        font-size: var(--h1-size-tablet, 40px);
    }

    .article-hero__excerpt {
        font-size: var(--font-base, 16px);
    }

    .article-hero__meta {
        gap: 5px;
    }
}

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

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

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

    .article-hero__breadcrumbs {
        font-size: 11px;
        gap: 3px;
        margin-bottom: var(--spacing-xs, 8px);
    }

    .article-hero__topics {
        gap: 6px;
        margin-bottom: var(--spacing-xs, 8px);
    }

    .article-hero__topic-chip {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 12px;
    }

    .article-hero__title {
        font-size: var(--h1-size-mobile, 32px);
        margin-bottom: var(--spacing-xs, 8px);
    }

    .article-hero__excerpt {
        font-size: var(--font-base, 16px);
        margin-bottom: var(--spacing-xs, 8px);
    }

    .article-hero__meta {
        gap: 4px;
        font-size: 12px;
        margin-bottom: var(--spacing-sm, 12px);
    }

    .article-hero__meta-separator {
        display: none;
    }

    .article-hero__meta-item {
        width: 100%;
        gap: 3px;
    }
}

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

@media (max-width: 480px) {
    .article-hero {
        padding: 12px;
        padding-bottom: 12px;
    }

    .article-hero__breadcrumbs {
        font-size: 10px;
    }

    .article-hero__title {
        font-size: var(--h1-size-mobile, 32px);
        line-height: 1.15;
    }

    .article-hero__topic-chip {
        width: 100%;
        justify-content: center;
    }

    .article-hero__image-tag {
        border-radius: var(--radius-sm, 6px);
    }
}

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

/* Раскомментируйте для отладки границ блоков */
/*
.article-hero-section { outline: 3px solid red; }
.article-hero { outline: 2px solid blue; }
.article-hero__breadcrumbs { outline: 1px solid lime; }
.article-hero__topics { outline: 1px solid yellow; }
.article-hero__title { outline: 1px solid cyan; }
.article-hero__excerpt { outline: 1px solid orange; }
.article-hero__meta { outline: 1px solid pink; }
.article-hero__image { outline: 1px solid violet; }
*/


















/* ============================================
   НАВИГАЦИЯ (Предыдущая / Следующая новость)
   ============================================ */

.article-adjacent-nav {
/*    margin: var(--spacing-xl, 40px) 0;*/
/*    padding-top: var(--spacing-lg, 24px);*/
/*    padding: var(--spacing-lg) 0;*/
    padding-bottom: var(--spacing-lg);
/*    border-top: 1px solid var(--border-color, #2A2A35);*/
}

.article-adjacent-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md, 20px);
    align-items: stretch;
}

.article-adjacent-nav__item {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md, 20px);
    background: var(--bg-blok, #1E1E26);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color, #2A2A35);
    transition: 
        border-color var(--transition-base, 0.3s ease),
        transform var(--transition-base, 0.3s ease),
        box-shadow var(--transition-base, 0.3s ease);
    position: relative;
    overflow: hidden;
}

.article-adjacent-nav__item:hover {
    border-color: var(--primary, #D4AF37);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.article-adjacent-nav__item--next {
    text-align: right;
    align-items: flex-end;
    padding-top: 10px;
    padding-bottom: 10px;
}

.article-adjacent-nav__item--prev {
    text-align: left;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
}

.article-adjacent-nav__label {
    font-size: 12px;
    color: var(--text-muted, #7A7A7A);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.article-adjacent-nav__link {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition-base, 0.3s ease);
    display: block;
}

.article-adjacent-nav__link:hover {
    color: var(--primary, #D4AF37);
}


/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 1024px) {
    .article-adjacent-nav__grid {
        gap: var(--spacing-sm, 16px);
    }
    
    .article-adjacent-nav__item {
        padding: var(--spacing-sm, 16px);
    }
}

@media (max-width: 768px) {
    .article-adjacent-nav {
        margin: var(--spacing-lg, 24px) 0;
    }
    
    .article-adjacent-nav__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm, 12px);
    }
    
    .article-adjacent-nav__item--next {
        text-align: left;
        align-items: flex-start;
    }

    .article-related-section {
        margin-top: var(--spacing-lg, 24px);
        padding-top: var(--spacing-lg, 24px);
    }
    
    .article-related-section__title {
        font-size: 20px;
        margin-bottom: var(--spacing-md, 16px);
    }

    .article-related-section__list {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm, 16px);
    }
}

@media (max-width: 480px) {
    .article-adjacent-nav__item {
        padding: var(--spacing-xs, 12px);
    }
    
    .article-adjacent-nav__link {
        font-size: 14px;
    }
    
    .article-related-section__title {
        font-size: 18px;
    }
}