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

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


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

    .directions-hero {
        padding: 120px 4% 50px;
    }

    /* Великі та широкі картки — зменшуємо span */
    .card-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .card-wide {
        grid-column: span 1;
    }

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


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

    .directions-hero {
        padding: 130px 5% 40px;
    }

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

    .directions-container {
        padding: 40px 4%;
    }

    /* Всі картки в один стовпець */
    .chaotic-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    /* Скасовуємо всі span — всі картки однакового розміру */
    .card-large,
    .card-wide,
    .card-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Прибираємо поворот при ховері на телефоні */
    .direction-card:hover {
        transform: translateY(-5px);
    }

    .direction-card {
        padding: 1.5rem;
    }

    .direction-card h3 {
        font-size: 1.2rem;
    }
}


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

    .directions-hero {
        padding: 140px 4% 30px;
    }

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

    .directions-container {
        padding: 30px 4%;
    }

    .direction-card {
        padding: 1.2rem;
    }

    .direction-card h3 {
        font-size: 1.1rem;
    }

    /* Прибираємо ефект при ховері */
    .direction-card:hover {
        transform: none;
    }
}


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

    .direction-card h3 {
        font-size: 1rem;
    }

    .direction-card {
        padding: 1rem;
    }
}

/* ================================================
   АДАПТАЦІЯ ПІДСТОРІНОК РОЗДІЛУ "ДОГЛЯД"
   (seasonal-care та всі інші на styles-sections.css)
   ================================================ */

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

    .seasonal-hero, .video-hero, .detox-hero, .masks-hero {
        padding: 120px 5% 50px;
    }

    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .seasonal-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mask-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* --- ТЕЛЕФОНИ до 768px --- */
@media (max-width: 768px) {

    .seasonal-hero, .video-hero, .detox-hero, .masks-hero {
        padding: 130px 5% 40px;
    }

    .seasonal-container, .video-container,
    .detox-container, .masks-container {
        padding: 30px 4%;
    }

    .season-selector {
        gap: 0.5rem;
    }

    .season-tab {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }

    .season-header {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .season-icon {
        font-size: 3rem;
    }

    .season-header h2 {
        font-size: 1.5rem;
    }

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

    .tip-card {
        padding: 1.5rem;
    }

    .tip-card:hover {
        transform: none;
    }

    .seasonal-products {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .video-player {
        height: 250px;
        font-size: 3rem;
    }

    .mask-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .routine-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .weather-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-of-day {
        padding: 2rem 1.5rem;
    }

    .calendar-month {
        gap: 0.3rem;
    }

    .calendar-day {
        font-size: 0.75rem;
    }
}


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

    .seasonal-hero, .video-hero, .detox-hero, .masks-hero {
        padding: 140px 4% 30px;
    }

    .seasonal-container, .video-container,
    .detox-container, .masks-container {
        padding: 20px 4%;
    }

    .season-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .season-header {
        padding: 1.5rem 1rem;
    }

    .season-icon {
        font-size: 2.5rem;
    }

    .season-header h2 {
        font-size: 1.3rem;
    }

    .tip-card {
        padding: 1.2rem;
    }

    .tip-icon {
        font-size: 2rem;
    }

    .seasonal-products {
        grid-template-columns: 1fr;
    }

    .product-emoji {
        font-size: 2.5rem;
    }

    .mask-categories {
        grid-template-columns: 1fr;
    }

    .routine-steps {
        grid-template-columns: 1fr;
    }

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

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

    .video-player {
        height: 200px;
        font-size: 2.5rem;
    }

    .recipe-content {
        padding: 1.2rem;
    }

    .progress-items {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

    .season-tab {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .tip-card {
        padding: 1rem;
    }

    .progress-items {
        grid-template-columns: 1fr;
    }

    .beauty-calendar {
        padding: 1rem;
    }
}