/* ========== ГОЛОВНИЙ БЛОК СТОРІНКИ НАПРЯМКИ ========== */
/* Тут налаштовується верхня частина сторінки з заголовком */
.directions-hero {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--white) 100%);
    padding: 140px 5% 80px; /* Відступ зверху враховує висоту хедера */
    text-align: center;
}

/* ========== КОНТЕЙНЕР ДЛЯ КАРТОК ========== */
/* Основний контейнер що містить всі картки напрямків */
.directions-container {
    max-width: 1400px; /* Максимальна ширина контейнера */
    margin: 0 auto;
    padding: 80px 5%; /* Відступи зверху/знизу та з боків */
    position: relative;
}

/* ========== ХАОТИЧНА СІТКА ========== */
/* Тут налаштовується розташування карток - ГОЛОВНИЙ елемент для хаотичності */
.chaotic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Автоматичні колонки мінімум 300px */
    gap: 2rem; /* Відстань між картками */
    position: relative;
}

/* ========== БАЗОВІ СТИЛІ КАРТОК ========== */
/* Основні властивості для всіх карток напрямків */
.direction-card {
    background: var(--white); /* Білий фон */
    border-radius: 20px; /* Закруглені кути */
    padding: 2rem; /* Внутрішні відступи */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Тінь */
    transition: all 0.3s ease; /* Плавні переходи */
    position: relative;
    overflow: hidden; /* Приховує вміст що виходить за межі */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ НА КАРТКУ */
/* Картка підіймається та трохи повертається при ховері */
.direction-card:hover {
    transform: translateY(-10px) rotate(2deg); /* Підйом на 10px та поворот на 2 градуси */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* Більша тінь */
}

/* ========== РОЗМІРИ КАРТОК ========== */
/* Ці класи роблять картки різного розміру для хаотичності */

/* ВЕЛИКА КАРТКА - займає 2x2 клітинки */
.card-large {
    grid-column: span 2; /* Займає 2 колонки */
    grid-row: span 2; /* Займає 2 рядки */
}

/* ШИРОКА КАРТКА - займає 2x1 клітинки */
.card-wide {
    grid-column: span 2; /* Займає 2 колонки */
}

/* ВИСОКА КАРТКА - займає 1x2 клітинки */
.card-tall {
    grid-row: span 2; /* Займає 2 рядки */
}

/* ========== КОЛЬОРОВІ ТЕМИ КАРТОК ========== */
/* Різні кольорові схеми для створення різноманітності */

/* ЗЕЛЕНА ТЕМА */
.card-green {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Світло-блакитний градієнт */
    border-left: 5px solid var(--primary-color); /* Зелена лівша границя */
}

/* ЗОЛОТИСТА ТЕМА */
.card-gold {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); /* Жовтий градієнт */
    border-left: 5px solid var(--accent-color); /* Золотиста лівша границя */
}

/* РОЖЕВА ТЕМА */
.card-pink {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); /* Рожевий градієнт */
    border-left: 5px solid #ec4899; /* Рожева лівша границя */
}

/* ФІОЛЕТОВА ТЕМА */
.card-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); /* Фіолетовий градієнт */
    border-left: 5px solid #8b5cf6; /* Фіолетова лівша границя */
}

/* ========== ЗАГОЛОВКИ КАРТОК ========== */
/* Стилі для заголовків h3 в картках */
.direction-card h3 {
    color: var(--primary-color); /* Зелений колір тексту */
    font-size: 1.5rem; /* Розмір шрифту */
    margin-bottom: 1rem; /* Відступ знизу */
    display: flex; /* Для розташування іконки та тексту в ряд */
    align-items: center; /* Вирівнювання по центру вертикально */
    gap: 0.5rem; /* Відстань між іконкою та текстом */
}

/* ІКОНКИ В ЗАГОЛОВКАХ */
.direction-card .icon {
    font-size: 2rem; /* Розмір іконки */
}

/* ========== СПИСКИ В КАРТКАХ ========== */
/* Стилі для списків ul та li в картках */
.direction-card ul {
    list-style: none; /* Прибираємо стандартні маркери */
    padding: 0; /* Прибираємо відступи */
}

.direction-card li {
    padding: 0.5rem 0; /* Відступи зверху та знизу */
    border-bottom: 1px solid #f0f0f0; /* Тонка лінія знизу */
    position: relative; /* Для позиціонування галочки */
    padding-left: 1.5rem; /* Відступ зліва під галочку */
}

/* ГАЛОЧКИ ПЕРЕД ПУНКТАМИ СПИСКУ */
.direction-card li:before {
    content: "✓"; /* Символ галочки */
    position: absolute; /* Абсолютне позиціонування */
    left: 0; /* Розташування зліва */
    color: var(--primary-color); /* Зелений колір */
    font-weight: bold; /* Жирний шрифт */
}

/* ========== КНОПКИ В КАРТКАХ ========== */
/* Стилі для кнопок всередині карток */
.card-button {
    background: var(--primary-color); /* Зелений фон */
    color: white; /* Білий текст */
    border: none; /* Без рамки */
    padding: 0.8rem 1.5rem; /* Внутрішні відступи */
    border-radius: 25px; /* Закруглені кути */
    cursor: pointer; /* Курсор-рука */
    margin-top: 1rem; /* Відступ зверху */
    transition: all 0.3s; /* Плавні переходи */
    text-decoration: none; /* Без підкреслення для посилань */
    display: inline-block; /* Для правильного відображення посилань */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ НА КНОПКУ */
.card-button:hover {
    background: #1e3f1a; /* Темніший зелений */
    transform: scale(1.05); /* Збільшення на 5% */
}

/* ========== ВІДЕО КОНТЕЙНЕР ========== */
/* Стилі для превью відео в картках */
.video-preview {
    background: #f8f9fa; /* Світло-сірий фон */
    border-radius: 10px; /* Закруглені кути */
    padding: 1rem; /* Внутрішні відступи */
    margin: 1rem 0; /* Відступи зверху та знизу */
    text-align: center; /* Центрування тексту */
    border: 2px dashed var(--primary-color); /* Пунктирна рамка */
}

/* ІКОНКА ВІДТВОРЕННЯ */
.video-preview .play-icon {
    font-size: 3rem; /* Великий розмір іконки */
    color: var(--accent-color); /* Золотистий колір */
    margin-bottom: 0.5rem; /* Відступ знизу */
    display: block; /* Блоковий елемент */
}

/* ========== РЕЦЕПТИ ========== */
/* Контейнер для інгредієнтів рецептів */
.recipe-ingredients {
    background: #f9fafb; /* Світлий фон */
    padding: 1rem; /* Внутрішні відступи */
    border-radius: 10px; /* Закруглені кути */
    margin: 1rem 0; /* Відступи зверху та знизу */
}

/* ЗАГОЛОВКИ В РЕЦЕПТАХ */
.recipe-ingredients h4 {
    color: var(--primary-color); /* Зелений колір */
    margin-bottom: 0.5rem; /* Відступ знизу */
}