/* =====================================================
   КАРУСЕЛЬ (десктопная, слева)
   ===================================================== */

/* =====================================================
   ПЕРЕМЕННЫЕ
   ===================================================== */

:root {
    /* --- Размеры шрифтов (единые для всех типов) --- */
    --card-title-size: 0.9rem;
    --card-text-size: 0.75rem;
    --card-source-size: 0.5rem;
    --card-badge-size: 0.65rem;
    --card-meta-size: 0.7rem;
    --card-detail-size: 0.7rem;

    /* --- Отступы --- */
    --card-padding: 6px;
    --card-gap: 16px;
    --card-border-radius: 12px;
    --card-image-radius: 10px;
    --badge-border-radius: 6px;

    /* --- Цвета --- */
    /* ВНИМАНИЕ: токен объявлен на :root, а подстановка var(--surface)
       в custom property не пересчитывается под тёмной темой,
       поэтому .card берёт фон напрямую из --surface */
    --card-bg: var(--surface, #ffffff);
    --card-border: var(--border-color, var(--line-soft, #e8e8e8));
    --card-title-color: var(--text-primary, #111);
    --card-text-color: var(--text-secondary, #374151);
    --card-source-color: var(--text-tertiary, #9ca3af);

    /* --- Изображение (единый ratio для всех типов) --- */
    /* Горизонтальное изображение / квадрат */
    --card-image-ratio: 4 / 3;
    /* Вертикальное изображение (высота > ширина) */
    --card-image-ratio-portrait: 3 / 4;
    /* Цвет фона под изображением (виден при загрузке
       и у карточек без изображения) */
    --card-image-fill: var(--bg-muted, #f3f4f6);

    /* --- Прозрачность бейджей --- */
    --badge-opacity: 20%;

    /* --- Цвета бейджей --- */
    --badge-ad: #e17055;
    --badge-ad-text: #e17055;

    --badge-post: #0984e3;
    --badge-post-text: #ffffff;

    --badge-fact: #00b894;
    --badge-fact-text: #00b894;

    --badge-motivation: #fdcb6e;
    --badge-motivation-text: #2d3436;

    --badge-training: #6c5ce7;
    --badge-training-text: #ffffff;

    --badge-diet: #00b894;
    --badge-diet-text: #ffffff;

    --badge-recipe: #fd79a8;
    --badge-recipe-text: #ffffff;

    --badge-product: #4a6cf7;
    --badge-product-text: #ffffff;

    --badge-exercise: #e17055;
    --badge-exercise-text: #ffffff;

    --badge-complex: #2d3436;
    --badge-complex-text: #ffffff;

    --badge-default: #636e72;
    --badge-default-text: #ffffff;
}

/* =====================================================
   КОНТЕЙНЕР КАРУСЕЛИ
   ===================================================== */

.home-carousel {
    width: 20%;
    min-width: 280px;
    max-width: 360px;
    /* Высота — по родителю (.home-main), который уже сдвинут вниз
       на высоту хедера, поэтому 100vh здесь перекрывал бы хедер */
    height: 100%;
    /* Фон берём из темы: в тёмных разделах карусель тоже тёмная */
    background: var(--bg-primary, #ffffff);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.carousel {
    width: 100%;
    height: 100%;
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.carousel-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    padding: 10px 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* =====================================================
   ОБЩИЕ СТИЛИ КАРТОЧЕК
   ===================================================== */

.card {
    background: var(--surface, var(--card-bg));
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    margin: 0 8px 0 12px;
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    min-height: 140px;
    height: auto;
}

.card.has-image {
    min-height: 220px;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--border-strong, #d0d0d0);
}

.card.hidden {
    opacity: 0;
    pointer-events: none;
}

.card:not(.has-image) {
    min-height: 120px;
}

.card:not(.has-image) .card-title {
    margin-top: 4px;
}

/* =====================================================
   HISTORY-КАРТОЧКИ
   ===================================================== */

.history-card {
    opacity: 0.85;
    pointer-events: none;
}

/* =====================================================
   ЗАГОЛОВОК КАРТОЧКИ (только если нет изображения)
   ===================================================== */

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    flex-shrink: 0;
    gap: 8px;
    flex-wrap: wrap;
}

/* Скрываем хедер у карточек с изображением */
.card.has-image .card-header {
    display: none;
}

/* Показываем хедер только у карточек без изображения */
.card:not(.has-image) .card-header {
    display: flex;
}

/* =====================================================
   БЕЙДЖ ТИПА (общий)
   ===================================================== */

/* Бейдж в хедере (для карточек без изображения) */
.card-type-badge {
    display: inline-block;
    font-size: var(--card-badge-size);
    font-weight: 600;
    color: #ffffff;
    padding: 3px 12px;
    border-radius: var(--badge-border-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Бейдж поверх изображения (для карточек с изображением) */
.card-type-badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-block;
    font-size: var(--card-badge-size);
    font-weight: 600;
    color: #ffffff;
    padding: 3px 6px;
    border-radius: var(--badge-border-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.6);
}

/* Цвета бейджей (для обоих вариантов) */
.card-type-badge.ad,
.card-type-badge-overlay.ad {
    background: color-mix(in srgb, var(--badge-ad) var(--badge-opacity), transparent);
    color: var(--badge-ad-text);
}

.card-type-badge.posts,
.card-type-badge-overlay.posts {
    background: color-mix(in srgb, var(--badge-post) var(--badge-opacity), transparent);
    color: var(--badge-post-text);
}

.card-type-badge.facts,
.card-type-badge-overlay.facts {
    background: color-mix(in srgb, var(--badge-fact) var(--badge-opacity), transparent);
    color: var(--badge-fact-text);
}

.card-type-badge.motivation,
.card-type-badge-overlay.motivation {
    background: color-mix(in srgb, var(--badge-motivation) var(--badge-opacity), transparent);
    color: var(--badge-motivation-text);
}

.card-type-badge.training,
.card-type-badge-overlay.training {
    background: color-mix(in srgb, var(--badge-training) var(--badge-opacity), transparent);
    color: var(--badge-training-text);
}

.card-type-badge.diet,
.card-type-badge-overlay.diet {
    background: color-mix(in srgb, var(--badge-diet) var(--badge-opacity), transparent);
    color: var(--badge-diet-text);
}

.card-type-badge.recipes,
.card-type-badge-overlay.recipes {
    background: color-mix(in srgb, var(--badge-recipe) var(--badge-opacity), transparent);
    color: var(--badge-recipe-text);
}

.card-type-badge.products,
.card-type-badge-overlay.products {
    background: color-mix(in srgb, var(--badge-product) var(--badge-opacity), transparent);
    color: var(--badge-product-text);
}

.card-type-badge.exercises,
.card-type-badge-overlay.exercises {
    background: color-mix(in srgb, var(--badge-exercise) var(--badge-opacity), transparent);
    color: var(--badge-exercise-text);
}

.card-type-badge.complex,
.card-type-badge-overlay.complex {
    background: color-mix(in srgb, var(--badge-complex) var(--badge-opacity), transparent);
    color: var(--badge-complex-text);
}

.card-type-badge.default,
.card-type-badge-overlay.default {
    background: color-mix(in srgb, var(--badge-default) var(--badge-opacity), transparent);
    color: var(--badge-default-text);
}

/* =====================================================
   ИЗОБРАЖЕНИЕ
   ===================================================== */

.card-image {
    width: 100%;
    aspect-ratio: var(--card-image-ratio);
    border-radius: var(--card-image-radius);
    background: var(--card-image-fill);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/*
 * Портретное изображение (height > width) — вертикальный контейнер.
 * Класс is-portrait вешает Carousel после загрузки изображения.
 */
.card-image.is-portrait {
    aspect-ratio: var(--card-image-ratio-portrait);
}

/*
 * cover: изображение заполняет контейнер целиком,
 * лишнее обрезается по краям (пустот нет).
 */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--card-image-fill);
    color: #999;
    font-size: 0.7rem;
}

/* =====================================================
   ЗАГОЛОВОК И ТЕКСТ
   ===================================================== */

.card-title {
    font-size: var(--card-title-size);
    font-weight: 600;
    color: var(--card-title-color);
    margin-bottom: 4px;
    line-height: 1.3;
    max-height: 2.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-text {
    font-size: var(--card-text-size);
    color: var(--card-text-color);
    line-height: 1.4;
    margin-bottom: 4px;
    max-height: 7rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.card-source,
.card-author {
    font-size: var(--card-source-size);
    color: var(--card-source-color);
    font-style: italic;
    max-height: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.card-source::before,
.card-author::before {
    content: "— ";
}

/* =====================================================
   МЕТА-ИНФОРМАЦИЯ (общая для всех типов)
   ===================================================== */

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: var(--card-meta-size);
    color: var(--text-secondary, #636e72);
}

.card-meta span {
    background: var(--bg-muted, #ffffff);
    padding: 2px 8px;
    border-radius: 10px;
}

.card-nutrition {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: var(--card-meta-size);
    color: var(--text-secondary, #636e72);
}

.card-nutrition span {
    background: var(--bg-muted, #ffffff);
    padding: 2px 8px;
    border-radius: 10px;
}

.card-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.65rem;
    color: var(--text-secondary, #636e72);
}

.card-macros span {
    background: var(--warning-soft, rgba(240, 194, 116, 0.16));
    padding: 2px 8px;
    border-radius: 10px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.card-tags span {
    font-size: 0.55rem;
    color: var(--text-tertiary, #6c757d);
    background: var(--bg-muted, #f1f3f5);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Ссылка «Подробнее» */
.card-detail-link {
    margin-top: 8px;
    font-size: var(--card-detail-size);
}

.card-detail-link a {
    text-decoration: none;
    font-weight: 500;
}

.card-detail-link a:hover {
    text-decoration: underline;
}

/* Ссылка на источник (для фактов, мотивации) */
.card-source-url {
    font-size: 0.65rem;
    margin-top: 4px;
}

.card-source-url a {
    color: #0984e3;
    text-decoration: none;
}

.card-source-url a:hover {
    text-decoration: underline;
}

/* =====================================================
   НАСТРОЙКИ ДЛЯ КАЖДОГО ТИПА
   ===================================================== */

/*
 * Все размеры шрифтов, отступы, скругления и aspect-ratio
 * задаются глобально в :root.
 *
 * Если для типа нужно переопределить значение — добавь
 * переменную в соответствующий .X-card блок ниже.
 *
 * Ratio выбирается автоматически по ориентации изображения:
 *   --card-image-ratio          — горизонтальное / квадрат
 *   --card-image-ratio-portrait — вертикальное (height > width)
 * Лишнее обрезается (object-fit: cover); цвет фона под
 * изображением — --card-image-fill.
 *
 * Пример:
 *   .ad-card { --card-image-ratio: 1 / 1; }
 */

/* 1. Реклама (ad) */
.ad-card {
}

/* 2. Пост (post) */
.post-card {
}

/* 3. Факт (fact) */
.fact-card {
}

/* 4. Мотивация (motivation) */
.motivation-card {
}

/* 5. Тренировка (training) */
.training-card {
}

/* 6. Диета (diet) */
.diet-card {
}

/* 7. Рецепт (recipe) */
.recipe-card {
}

/* 8. Продукт (product) */
.product-card {
}

/* 9. Упражнение (exercise) */
.exercise-card {
}

/* 10. Комплекс (complex) */
.complex-card {
}

/* =====================================================
   СТИЛИ ДЛЯ КАЖДОГО ТИПА (специфичные элементы)
   ===================================================== */

/* ---------- 1. РЕКЛАМА (ad) ---------- */

.ad-card .card-image-badge.erid-badge {
    bottom: 10px;
    left: 10px;
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: none;
    font-family: monospace;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 10px;
    border-radius: 4px;
    opacity: 0.8;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-card .card-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.ad-card .target-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--bg-muted, #f1f3f5);
    color: var(--text-secondary, #495057);
}

.ad-card .target-badge.gender {
    background: var(--info-soft, rgba(59, 130, 246, 0.16));
    color: #1a73e8;
}

.ad-card .target-badge.goal {
    background: var(--success-soft, rgba(127, 214, 168, 0.16));
    color: #2e7d32;
}

.ad-card .card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-tertiary, #6c757d);
    margin-bottom: 8px;
    padding: 4px 0;
}

.ad-card .card-location .location-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    flex-shrink: 0;
    object-fit: contain;
}

.ad-card .card-location span {
    line-height: 1.2;
}

.ad-card .card-footer {
    background: var(--bg-muted, #ffffff);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 4px;
    border: 1px solid var(--line-soft, #e9ecef);
}

.ad-card .card-organization {
    font-size: 0.7rem;
    color: #495057;
    font-weight: 500;
    margin-bottom: 2px;
}

.ad-card .card-inn {
    font-size: 0.6rem;
    color: #868e96;
    font-family: monospace;
    margin-bottom: 4px;
}

.ad-card .card-disclaimer {
    font-size: 0.6rem;
    color: #adb5bd;
    font-style: italic;
    line-height: 1.4;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color, #dee2e6);
}

.ad-card .card-actions {
    margin-top: 10px;
}

.ad-card .card-button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    background: #e17055;
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.ad-card .card-button:hover {
    background: #c0392b;
    transform: scale(1.01);
}

.ad-card .card-button:active {
    transform: scale(0.98);
}

/* ---------- 2. ПОСТ (post) ---------- */

.post-card .post-date {
    font-size: 0.65rem;
    color: #b2bec3;
}

.post-card .card-author-block {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.post-card .author-name {
    font-size: 0.75rem;
    color: #2d3436;
    font-weight: 500;
}

.post-card .card-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary, #636e72);
}

.post-card .likes {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------- 3. ФАКТ (fact) ---------- */

.fact-card .card-title {
    font-weight: 700;
    color: #00b894;
    margin-bottom: 8px;
}

.fact-card .card-text {
    line-height: 1.6;
}

.fact-card .card-source-url a {
    color: #0984e3;
}

/* ---------- 4. МОТИВАЦИЯ (motivation) ---------- */

.motivation-card .card-quote {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 4px;
    color: #fdcb6e;
    line-height: 1;
}

.motivation-card .card-title {
    color: #2d3436;
    text-align: center;
}

.motivation-card .card-text {
    color: #2d3436;
    text-align: center;
    font-style: italic;
}

.motivation-card .card-author {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary, #636e72);
}

.motivation-card .card-source-url {
    text-align: center;
}

.motivation-card .card-source-url a {
    color: #0984e3;
}

/* ---------- 5. ТРЕНИРОВКА (training) ---------- */

.training-card .difficulty-badge {
    font-size: 0.6rem;
    color: #6c5ce7;
    background: var(--purple-soft, rgba(169, 182, 240, 0.16));
    padding: 2px 8px;
    border-radius: 10px;
}

.training-card .card-detail-link a {
    color: #6c5ce7;
}

/* ---------- 6. ДИЕТА (diet) ---------- */

.diet-card .duration-badge {
    font-size: 0.6rem;
    color: #00b894;
    background: var(--success-soft, rgba(127, 214, 168, 0.16));
    padding: 2px 8px;
    border-radius: 10px;
}

.diet-card .card-detail-link a {
    color: #00b894;
}

/* ---------- 7. РЕЦЕПТ (recipe) ---------- */

.recipe-card .meal-badge {
    font-size: 0.6rem;
    color: #fd79a8;
    background: rgba(240, 138, 128, 0.16);
    padding: 2px 8px;
    border-radius: 10px;
}

.recipe-card .card-detail-link a {
    color: #fd79a8;
}

/* ---------- 8. ПРОДУКТ (product) ---------- */

.product-card .card-brand {
    font-size: 0.75rem;
    color: var(--text-secondary, #636e72);
    margin-bottom: 2px;
    font-weight: 500;
}

.product-card .card-quantity {
    font-size: 0.7rem;
    color: var(--text-tertiary, #6c757d);
    margin-bottom: 4px;
}

/* Питательная ценность — 3 строки (вертикально) */
.product-card .card-nutrition {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 0;
    border-top: 1px solid var(--line-soft, #f0f0f0);
    border-bottom: 1px solid var(--line-soft, #f0f0f0);
}

.product-card .nutrition-item {
    font-size: 0.6rem;
    font-weight: 400;
    color: #495057;
    padding: 1px 0;
    line-height: 1.4;
    background: none;
    border-radius: 0;
}

.product-card .nutrition-item.energy {
    font-weight: 600;
    color: #1a1a2e;
}

.product-card .nutrition-item.bju {
    font-weight: 500;
    color: #2d3436;
}

.product-card .nutrition-item.extras {
    font-weight: 400;
    color: #868e96;
    font-size: 0.55rem;
}

.product-card .card-detail-link a {
    color: #4a6cf7;
}

/* ---------- 9. УПРАЖНЕНИЕ (exercise) ---------- */

.exercise-card .difficulty-badge {
    font-size: 0.6rem;
    color: #e17055;
    background: var(--warning-soft, rgba(240, 194, 116, 0.16));
    padding: 2px 8px;
    border-radius: 10px;
}

.exercise-card .card-video-link {
    margin-top: 6px;
    font-size: 0.7rem;
}

.exercise-card .card-video-link a {
    color: #e17055;
    text-decoration: none;
    font-weight: 500;
}

.exercise-card .card-video-link a:hover {
    text-decoration: underline;
}

.exercise-card .card-detail-link a {
    color: #0984e3;
}

/* ---------- 10. КОМПЛЕКС (complex) ---------- */

.complex-card .difficulty-badge {
    font-size: 0.6rem;
    color: var(--text-primary, #2d3436);
    background: var(--bg-muted, #dfe6e9);
    padding: 2px 8px;
    border-radius: 10px;
}

.complex-card .card-detail-link a {
    color: #2d3436;
}

/* =====================================================
   СКЕЛЕТОНЫ
   ===================================================== */

@keyframes skeleton-pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.6;
    }
}

.skeleton {
    background: var(--bg-hover, #e8e8e8);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-card {
    pointer-events: none;
    min-height: 120px !important;
}

.skeleton-card .card-header {
    height: 24px;
    margin-bottom: 8px;
}

.skeleton-card .card-type {
    width: 60px;
    height: 18px;
}

.skeleton-card .card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--bg-hover, #e8e8e8);
}

.skeleton-card .card-title {
    width: 85%;
    height: 18px;
    margin-bottom: 6px;
    background: var(--bg-hover, #e8e8e8);
}

.skeleton-card .card-text {
    width: 100%;
    height: 12px;
    margin-bottom: 4px;
    background: var(--bg-hover, #e8e8e8);
}

.skeleton-card .card-text-small {
    width: 60%;
    height: 12px;
    background: var(--bg-hover, #e8e8e8);
}

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

@media (max-width: 1024px) {
    .home-carousel {
        display: none;
    }
}

@media (max-width: 1400px) {
    .home-carousel {
        min-width: 240px;
        max-width: 300px;
    }
}