/* ===== СЕТКА КАРТОЧЕК ===== */
/* Контейнер для всех карточек */
.cards {
    display: grid; /* используем CSS Grid для удобного расположения карточек */
    gap: 2rem; /* расстояние между карточками */

    max-width: 1200px; /* максимальная ширина контейнера */
    margin: 0 auto 3rem; /* центрирование + отступ снизу */
    padding: 0 1rem; /* небольшой внутренний отступ по бокам */
}


/* ===== MOBILE (телефоны) ===== */
@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr; 
        /* одна колонка — карточки идут вертикально */
    }
}


/* ===== TABLET (планшеты) ===== */
@media (min-width: 769px) and (max-width: 1199px) {
    .cards {
        grid-template-columns: repeat(2, 1fr); 
        /* две колонки одинаковой ширины */
    }
}


/* ===== DESKTOP (компьютеры) ===== */
@media (min-width: 1200px) {
    .cards {
        grid-template-columns: repeat(3, 1fr); 
        /* три колонки */
    }
}

{
/* ===== КАРТОЧКА ===== */
/* Стили отдельной карточки */
.card {
    background: #ffffff; /* белый фон */
    padding: 1.75rem; /* внутренний отступ */
    border-radius: 10px; /* скругление углов */

    /* тень для эффекта "карточки" */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

    display: flex; /* flex для вертикального расположения элементов */
    flex-direction: column; /* элементы идут сверху вниз */
    gap: 0.75rem; /* расстояние между элементами внутри карточки */

    min-width: 0; /* предотвращает переполнение в grid */

    /* плавная анимация при наведении */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: cardFade 0.6s ease forwards;
}

@keyframes cardFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== ЭФФЕКТ ПРИ НАВЕДЕНИИ ===== */
.card:hover {
    transform: translateY(-5px); 
    /* карточка немного поднимается вверх */

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); 
    /* увеличивается тень */
}


/* ===== ТИПОГРАФИЯ КАРТОЧКИ ===== */

/* Заголовок карточки */
.card-title {
    font-size: clamp(1.4rem, 3vw, 1.75rem); 
    /* адаптивный размер текста:
       минимум 1.4rem
       зависит от ширины экрана
       максимум 1.75rem */

    font-weight: 600; /* полужирный текст */
}


/* Текст карточки */
.card-text {
    font-size: clamp(1rem, 2.5vw, 1.125rem); 
    /* адаптивный размер текста */

    line-height: 1.5; /* межстрочный интервал */
    color: #555; /* более мягкий цвет текста */
}


/* ===== ЗАЩИТА ОТ ДЛИННЫХ СЛОВ ===== */
/* чтобы длинные слова или URL не ломали верстку */
.card-title,
.card-text {
    overflow-wrap: break-word; /* перенос длинных слов */
    word-break: break-word; /* принудительный перенос */
}