/* =========================================================================
   СТИЛИ ДЛЯ КОМПОНЕНТА КАТАЛОГА КОМАНД (teams-grid.php)
   ========================================================================= */
.cs-home-teams-grid-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.cs-home-team-card-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 25px 15px 15px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.cs-home-team-card-item:hover { border-color: #e67e22 !important; box-shadow: 0 4px 15px rgba(230, 126, 34, 0.03) !important; }
.cs-ht-card-top-link { text-decoration: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }

.cs-ht-logo-wrap { width: 85px !important; height: 85px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 15px !important; }
.cs-ht-logo-wrap img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; }
.cs-ht-team-name { font-size: 15px !important; color: #0f172a !important; font-weight: 700 !important; margin: 0 0 15px 0 !important; text-align: center !important; }

.cs-ht-roster-row-mini { display: flex !important; gap: 4px !important; justify-content: center !important; width: 100% !important; margin-top: auto !important; }
.cs-ht-player-dot-avatar { width: 24px !important; height: 24px !important; border-radius: 50% !important; overflow: hidden !important; background: #e2e8f0 !important; border: 1px solid #ffffff !important; display: flex !important; }
.cs-ht-player-dot-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.cs-ht-player-dot-avatar.empty { border: 1px dashed #cbd5e1 !important; background: #f8fafc !important; }

/* =========================================================================
   СТИЛИ ДЛЯ КОМПОНЕНТА ГАЙДОВ И БЛОГА (blog-posts.php)
   ========================================================================= */
.cs-home-blog-posts-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
.cs-home-blog-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
.cs-h-blog-thumb { width: 100% !important; height: 160px !important; background: #cbd5e1 !important; overflow: hidden !important; }
.cs-h-blog-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.cs-h-blog-content { padding: 20px !important; }
.cs-h-blog-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 10px 0 !important; line-height: 1.4 !important; }
.cs-h-blog-title a { color: #0f172a !important; text-decoration: none !important; }
.cs-h-blog-excerpt { font-size: 13px !important; color: #475569 !important; line-height: 1.5 !important; margin: 0 !important; }

/* =========================================================================
   МОБИЛЬНАЯ АДАПТИВНОСТЬ ДЛЯ ВСЕХ МОДУЛЕЙ
   ========================================================================= */
@media screen and (max-width: 992px) {
    .cs-home-hero-section { grid-template-columns: 1fr !important; gap: 20px !important; padding: 25px !important; }
    .cs-home-split-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
    .cs-home-teams-grid-container { grid-template-columns: repeat(2, 1fr) !important; }
    .cs-home-blog-posts-grid { grid-template-columns: 1fr !important; }
}

@media screen and (max-width: 768px) {
    .cs-home-teams-grid-container { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .cs-home-team-card-item { padding: 15px 8px 10px 8px !important; }
    .cs-ht-logo-wrap { width: 60px !important; height: 60px !important; }
    .cs-ht-team-name { font-size: 13px !important; }
}

@media screen and (max-width: 576px) {
    .cs-hero-main-title { font-size: 26px !important; }
    .cs-home-hero-section { padding: 20px 15px !important; }
    .cs-home-widget-block { padding: 20px 15px !important; }
}