/**
 * Styles de base pour l'affichage public du plugin CVI - BTT Calls
 *
 * Ce fichier contient uniquement les styles de structure de base.
 * Les styles liés à l'apparence (couleurs, tailles, etc.) sont gérés 
 * dynamiquement par les classes PHP pour assurer la cohérence entre
 * les réglages admin et l'affichage frontend.
 *
 * @since      2.0.0
 */

/* ========== Structure de base ========== */

/* Conteneur principal */
.cvi-bttcalls-products {
    box-sizing: border-box;
    margin: 20px 0;
    position: relative;
    width: 100%;
}

/* Règle globale pour assurer box-sizing cohérent */
.cvi-bttcalls-products *,
.cvi-bttcalls-products *:before,
.cvi-bttcalls-products *:after {
    box-sizing: border-box;
}

/* Structure de base de la grille */
.cvi-bttcalls-grid {
    display: grid;
    width: 100%;
    align-items: stretch; /* s'assurer que chaque item prend toute la hauteur disponible */
}

/* Structure du produit */
.cvi-bttcalls-product {
    background: #fff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}


/* Structure interne du produit (flexbox pour disposition verticale) */
.cvi-bttcalls-product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #eaeaea;
}

/* Container de l'image du produit */
.cvi-bttcalls-product-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f9f9f9;
}

/* Image elle-même (dimensions fluides, ratio géré ailleurs si besoin) */
.cvi-bttcalls-product-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* Container des détails du produit */
.cvi-bttcalls-product-details {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Structure de base du titre */
.cvi-bttcalls-product-title {
    margin: 0 0 10px;
    line-height: 1.4;
    /* Uniformiser la hauteur d'affichage du titre à 3 lignes */
    min-height: calc(1.4em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Structure de base du lien du titre */
.cvi-bttcalls-product-title a {
    text-decoration: none;
}

/* Structure de base de la description */
.cvi-bttcalls-product-description {
    margin-bottom: 15px;
    line-height: 1.6;
    flex-grow: 1;
}

/* Structure de base du prix */
.cvi-bttcalls-product-price {
    margin-bottom: 15px;
    font-weight: bold;
}

/* Conteneur du bouton avec flexbox pour centrage */
.cvi-bttcalls-product-action {
    margin-top: auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Structure de base du bouton */
.cvi-bttcalls-button {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== Styles du carousel ========== */
/* Styles Slick supprimés (dépendance retirée) */

/* (règles de position des flèches déplacées dans cvi-bttcalls-slider.css) */

/* ========== Responsive layout ========== */

@media screen and (max-width: 1024px) {
    /* Ajustement grille sur tablettes */
    .cvi-bttcalls-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur tablettes */
    }
}

@media screen and (max-width: 767px) {
    /* Ajustement grille sur mobile */
    .cvi-bttcalls-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
    
    /* Réduction des marges intérieures sur mobile */
    .cvi-bttcalls-product-details {
        padding: 10px;
    }
    
    /* Optimisation du bouton pour toucher sur mobile */
    .cvi-bttcalls-button {
        padding: 10px 16px;
        width: 100%;
        text-align: center;
    }
}

/* Swiper Carousel personnalisation */
.cvi-bttcalls-swiper {
    padding-bottom: 40px;
}

.cvi-bttcalls-swiper .swiper-pagination {
    bottom: 0;
}

.cvi-bttcalls-swiper .swiper-pagination-bullet-active {
    background: #2271b1;
}

.cvi-bttcalls-swiper .swiper-button-next,
.cvi-bttcalls-swiper .swiper-button-prev {
    color: #2271b1;
}

/* Message d'erreur */
.cvi-bttcalls-error {
    padding: 15px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Responsive */
@media screen and (max-width: 767px) {
    .cvi-bttcalls-product-title {
        font-size: 16px;
    }
    
    .cvi-bttcalls-product-description {
        font-size: 13px;
    }
    /* Sur mobile/tablette, on peut réduire à 2 lignes pour gagner de la place */
    .cvi-bttcalls-product-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        min-height: calc(1.4em * 2);
    }
    
    .cvi-bttcalls-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
}

@media screen and (max-width: 480px) {
    .cvi-bttcalls-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    
    .cvi-bttcalls-product-details {
        padding: 10px;
    }
    
    .cvi-bttcalls-button {
        padding: 6px 12px;
        font-size: 13px;
    }
}