/* ========================================
 * PAGE-RECETTE-SIMILAR.CSS
 * Styles spécifiques pour la section des recettes similaires
 * Importe les styles des cartes depuis components/recipe-card.css
 * ======================================== */

/* Import des styles centralisés des cartes */
@import url('components/recipe-card.css');

/* ======================================
 * SECTION RECETTES SIMILAIRES
 * ====================================== */

/* Titre de la section */
.recette-similar-section h2 {
    position: relative;
    margin-bottom: 20px !important;
    padding-bottom: 10px;
}

/* Trait de soulignement du titre */
.recette-similar-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

/* ======================================
 * GRILLE SPÉCIFIQUE - 6 RECETTES (3x2)
 * ====================================== */

.recette-similar-section .recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 0;
}

/* ======================================
 * AJUSTEMENTS SPÉCIFIQUES
 * ====================================== */

/* La hauteur par défaut de 280px définie dans recipe-card.css convient parfaitement pour cette section */

/* ======================================
 * MODE SOMBRE
 * ====================================== */

.dark-mode .recette-similar-section h2 {
    color: var(--text-color-dark);
}

/* ======================================
 * MEDIA QUERIES - GRILLES RESPONSIVES
 * ====================================== */

/* Grande taille d'écran (1200px et plus) - 3 colonnes */
@media (min-width: 1200px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Entre 1024px et 1199px (Ordinateurs standards) - 3 colonnes */
@media (max-width: 1199px) and (min-width: 1025px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

}

/* Entre 769px et 1024px (Tablettes larges) - 3 colonnes */
@media (max-width: 1024px) and (min-width: 769px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

}

/* Entre 481px et 768px (Tablettes moyennes) - 2 colonnes */
@media (max-width: 768px) and (min-width: 481px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .recette-similar-section h2 {
        font-size: 1.5rem;
    }

}

/* Entre 321px et 480px (Petits mobiles) - 2 colonnes serrées */
@media (max-width: 480px) and (min-width: 321px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

}

/* 320px et moins (Très petits mobiles) - 1 colonne */
@media (max-width: 320px) {
    .recette-similar-section .recipes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

}