/* ================================================
   АДАПТИВНІ СТИЛІ ДЛЯ СТОРІНОК КУРСІВ
   Файл: responsive-courses.css
   Основний CSS: styles-courses.css

   Підключати в HTML ПІСЛЯ styles-courses.css:
   <link rel="stylesheet" href="css/responsive-courses.css">

   Охоплює сторінки:
   - basic.html, eyes.html, head.html
   - fasting.html, postava.html, weight-loss.html
   - та їх *-payment.html сторінки
   ================================================ */


/* ================================================
   ПЛАНШЕТИ — до 1024px
   ================================================ */
@media (max-width: 1024px) {

    .courses-hero {
        padding: 120px 4% 25px;
    }

    .hero-stats {
        gap: 2rem;
    }

    /* Картки курсів — менша мінімальна ширина */
    .courses-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Переваги — з 6 колонок на 3 */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}


/* ================================================
   ТЕЛЕФОНИ ТА МАЛЕНЬКІ ПЛАНШЕТИ — до 768px
   ================================================ */
@media (max-width: 768px) {

    /* --- HERO СЕКЦІЯ КУРСУ --- */
    .courses-hero {
        padding: 130px 5% 20px;
        min-height: auto;
    }

    .courses-hero h1 {
        font-size: 1.6rem;
    }

    .courses-hero p {
        font-size: 0.85rem;
    }

    .hero-stats {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    /* --- ФІЛЬТРИ --- */
    .courses-filters {
        gap: 0.6rem;
        margin: 1.5rem 0;
    }

    .filter-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    /* --- СІТКА КУРСІВ --- */
    .courses-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin: 1.5rem 0;
    }

    /* --- КАРТКА КУРСУ --- */
    .course-card:hover {
        transform: none; /* Прибираємо ефект на телефоні */
    }

    .course-image {
        height: 100px;
    }

    .course-content {
        padding: 1rem;
    }

    .course-content h3 {
        font-size: 1.1rem;
    }

    /* --- ПЕРЕВАГИ --- */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .learning-benefits {
        padding: 1.5rem 1rem;
    }

    .learning-benefits h2 {
        font-size: 1.4rem;
    }

    /* --- ВІДГУКИ --- */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-section h2 {
        font-size: 1.4rem;
    }

    /* --- FAQ --- */
    .faq-section h2 {
        font-size: 1.4rem;
    }

    .faq-question {
        font-size: 0.9rem;
        padding: 0.9rem 1rem;
    }

    .faq-answer {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* --- ЕТАПИ КУРСУ --- */
    .stage-item {
        padding: 0.8rem;
        gap: 0.8rem;
    }

    /* --- СТОРІНКА КОНКРЕТНОГО КУРСУ --- */
    /* Hero блок курсу (postava, eyes тощо) */
    .course-hero {
        padding: 130px 5% 30px;
        min-height: auto;
    }

    .course-hero h1 {
        font-size: 1.6rem;
    }

    /* Двоколонковий макет → одна колонка */
    .course-content-grid {
        grid-template-columns: 1fr;
    }

    /* Бічна панель іде після основного контенту */
    .course-sidebar {
        order: 2;
    }

    /* --- ПЛАТІЖНА СТОРІНКА --- */
    .payment-container,
    .payment-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .payment-form {
        padding: 1.5rem 1rem;
    }

    .payment-summary {
        order: -1; /* Підсумок іде першим */
    }

    /* --- ДАШБОРД КУРСУ --- */
    body[data-page="dashboard"] .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="dashboard"] .dashboard-sidebar {
        order: 2;
    }

    body[data-page="dashboard"] .materials-card,
    body[data-page="dashboard"] .support-card {
        max-width: 100%;
    }

    body[data-page="dashboard"] .lesson-item {
        grid-template-columns: 35px 1fr 50px;
        padding: 0.7rem 1rem;
    }

    body[data-page="dashboard"] .week-header {
        padding: 0.8rem 1rem;
    }

} 


/* ================================================
   СМАРТФОНИ — до 480px
   ================================================ */
@media (max-width: 480px) {

    .courses-hero {
        padding: 140px 4% 20px;
    }

    .courses-hero h1 {
        font-size: 1.3rem;
    }

    .hero-stats {
        gap: 1rem;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* Переваги — одна колонка */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .benefit-item {
        padding: 0.8rem 0.5rem;
    }

    .benefit-icon {
        font-size: 1.5rem;
    }

    .benefit-item h4 {
        font-size: 0.8rem;
    }

    .benefit-item p {
        font-size: 0.7rem;
    }

    /* Ціна */
    .course-price {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .price-current {
        font-size: 1.3rem;
    }

    /* Кнопка */
    .course-btn {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }

    /* Інфо-теги */
    .course-info {
        gap: 0.4rem;
    }

    .info-item {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    /* Дашборд */
    body[data-page="dashboard"] .lesson-item {
        grid-template-columns: 30px 1fr 45px;
        padding: 0.6rem 0.8rem;
    }

    body[data-page="dashboard"] .lesson-title {
        font-size: 0.8rem;
    }

    body[data-page="dashboard"] .notification {
        right: 10px;
        left: 10px;
        text-align: center;
    }
}


/* ================================================
   ДУЖЕ МАЛЕНЬКІ ЕКРАНИ — до 360px
   ================================================ */
@media (max-width: 360px) {

    .courses-hero h1 {
        font-size: 1.1rem;
    }

    .filter-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .course-content h3 {
        font-size: 1rem;
    }
}