/* ==========================================
   STATISTICS COMPONENT (Views, Likes, Comments)
   ========================================== */

/* Подредба на статистиките в редица */
.detail-stats {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 48px; /* Достатъчно въздух между колоните */
    margin: 40px 0;
    align-items: flex-start;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Числата */
.stat-value {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text-primary, #111);
    line-height: 1;
}

/* ЛАЙК БУТОН (Сърцето) */
.like-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* Разстояние между числото и сърцето */
    font-family: inherit;
    transition: transform 0.2s ease;
}

/* Сърцето по подразбиране - ПРАЗНО (Outline) и Сиво */
.like-icon {
    font-size: 1rem; /* 🔥 Това го смалява */
    color: var(--color-text-muted, #888);
    transition: color 0.2s ease;
    line-height: 1;
}

/* Hover ефект */
.like-button:hover {
    transform: translateY(-2px);
}

/* Когато ИМА лайк - става Бордо и плътно */
.like-button.liked .like-icon {
    color: var(--color-heart-active, #7a1f2a);
}

.like-button.liked .stat-value {
    color: var(--color-heart-active, #7a1f2a);
}

.like-button .stat-value {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
}

/* ==========================================
   TERMS HINT
========================================== */

.terms-hint {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);

    margin-top: -40px;
    margin-bottom: 40px;

    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* когато вече е скролнато */
.terms-hint.hidden {
    opacity: 0;
}

/* ==========================================
   STATISTICS MOBILE ADAPTIVITY
   ========================================== */

@media (max-width: 768px) {
    .detail-stats {
        /* Намаляваме разстоянието между Likes, Views и Comments */
        gap: 24px;
        margin: 30px 0;
        /* Правим ги да се подреждат в редица, която може да се пренася */
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .stat-item {
        gap: 8px; /* Малко по-сбито на мобилни */
    }

    .stat-value,
    .like-button .stat-value {
        font-size: 1.1rem; /* Леко смаляваме числата */
    }

    .like-icon {
        font-size: 0.95rem; /* И иконата */
    }
}

@media (max-width: 480px) {
    .detail-stats {
        gap: 20px;
        justify-content: space-between; /* Разпределя ги равномерно в ширината на телефона */
    }
}