/**
 * bp-carousel-sc.css
 * Styles communs pour les carrousels shortcode Blooming Pets
 * Utilisé par [sc_animaux_semaine], [sc_animaux_anniversaire],
 *             [sc_petsitter_souvenirs], [sc_petsitter_avis]
 */

/* === Section wrapper === */
.bp-carousel-section {
    max-width: 1220px;
    margin: 40px auto;
    padding: 0 16px;
}
/* Carousels fiche petsitter : alignés à gauche, sans marge auto */
.bp-carousel-section--souvenir,
.bp-carousel-section--avis {
    max-width: 100%;
    margin: 10px;
    padding: 0;
}
.bp-carousel-title {
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1.2;
}
/* Liseré vert sous le titre */
.bp-carousel-title-underline {
    display: block;
    width: 80px;
    height: 4px;
    background: var(--e-global-color-accent, #44A1A0);
    border-radius: 2px;
    margin: 6px auto 24px;
}

/* === Carousel wrapper (arrows + track) === */
.bp-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.bp-carousel-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 8px 25px;
    scrollbar-width: none;
    width: 100%;
}
.bp-carousel-track::-webkit-scrollbar { display: none; }

/* === Cards === */
.bp-carousel-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
}
.bp-carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.bp-carousel-card-img {
    width: 100%;
    height: 170px;
    overflow: hidden;
}
.bp-carousel-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bp-carousel-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    font-size: 3em;
}
.bp-carousel-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* === Flèches style Elementor === */
.bp-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--e-global-color-primary);
    font-size: 30px;
    transition: color .15s, opacity .15s;
    opacity: .8;
    background: none;
    border: none;
    padding: 0;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
.bp-carousel-arrow:hover { opacity: 1; color: var(--e-global-color-cd1c9dc, #54595F); }
.bp-carousel-prev { left: -18px; }
.bp-carousel-next { right: -18px; }

/* === Pagination dots === */
.bp-carousel-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.bp-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--e-global-color-cd1c9dc);
    opacity: .35;
    cursor: pointer;
    transition: opacity .2s, background .2s, transform .2s;
}
.bp-carousel-dot-active {
    opacity: 1;
    background: var(--e-global-color-primary);
    transform: scale(1.25);
}

/* === Variantes spécifiques : Semaine === */
.bp-carousel-section--semaine .bp-carousel-card-type {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.bp-carousel-section--semaine .bp-carousel-card-title {
    margin: 6px 0 0;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.3;
}

/* === Variantes spécifiques : Anniversaire === */
.bp-carousel-section--birthday .bp-carousel-card-img {
    height: 200px;
}
.bp-carousel-section--birthday .bp-carousel-card-title {
    margin: 0;
    font-size: clamp(13px, 4vw, 1.15em);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-carousel-section--birthday .bp-carousel-card-race {
    font-size: clamp(10px, 3vw, 12px);
    color: #9ca3af;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-carousel-section--birthday .bp-carousel-card-age {
    font-size: clamp(10px, 3.2vw, 12px);
    font-weight: 600;
    color: var(--e-global-color-primary, #6EC1E4);
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Responsive === */
@media (max-width: 768px) {
    .bp-carousel-card { flex: 0 0 220px; }
    .bp-carousel-card-img { height: 140px; }
    .bp-carousel-section--birthday .bp-carousel-card-img { height: 160px; }
    .bp-carousel-prev { left: -15px; }
    .bp-carousel-next { right: -15px; }
}

/* Titre aligné à gauche pour les carousels de la fiche petsitter */
.bp-carousel-section--souvenir .bp-carousel-title,
.bp-carousel-section--avis .bp-carousel-title {
    text-align: left;
}
.bp-carousel-section--souvenir .bp-carousel-title-underline,
.bp-carousel-section--avis .bp-carousel-title-underline {
    margin-left: 0;
    margin-right: auto;
}

/* ================================================================
   Variante : Souvenir  [sc_petsitter_souvenirs]
   ================================================================ */
.bp-carousel-section--souvenir .bp-carousel-card--souvenir {
    flex: 0 0 370px; /* ~3 cartes visibles sur PC */
    scroll-snap-align: start;
}
.bp-carousel-section--souvenir .bp-carousel-card--souvenir.has-picture .bp-carousel-card-img {
    height: 200px;
}
.bp-carousel-section--souvenir .bp-carousel-card--souvenir.no-picture .bp-carousel-card-img {
    height: 100px;
    background: var(--e-global-color-143e2eb, #F9F5F0);
}
.bp-carousel-section--souvenir .bp-carousel-card-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-carousel-section--souvenir .bp-carousel-card-date {
    font-size: 11px;
    color: #9ca3af;
    display: block;
    margin-bottom: 8px;
}
.bp-carousel-section--souvenir .bp-carousel-card-excerpt {
    font-size: 13px;
    color: var(--e-global-color-text, #333);
    line-height: 1.5;
    margin: 0;
    /* Pas de line-clamp : le texte complet est toujours affiché */
}

/* La carte souvenir et la carte avis grandissent librement selon le contenu */
.bp-carousel-section--souvenir .bp-carousel-card--souvenir,
.bp-carousel-section--avis .bp-carousel-card--avis {
    overflow: visible;
}

/* ================================================================
   Variante : Avis  [sc_petsitter_avis]
   ================================================================ */
.bp-carousel-section--avis .bp-carousel-card--avis {
    flex: 0 0 520px; /* ~2 cartes visibles sur PC — texte complet */
    scroll-snap-align: start;
    justify-content: space-between;
    background: var(--e-global-color-143e2eb, #F9F5F0);
    border: none;
    border-left: 4px solid var(--e-global-color-accent, #44A1A0);
}
.bp-carousel-section--avis .bp-carousel-card--avis:hover {
    border-left-color: var(--e-global-color-primary);
}
/* Grand guillemet décoratif */
.bp-avis-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}
.bp-avis-quote-icon {
    font-family: Georgia, serif;
    font-size: 60px;
    line-height: 1;
    color: var(--e-global-color-accent, #44A1A0);
    opacity: .4;
    margin-bottom: -10px;
    user-select: none;
}
.bp-carousel-section--avis .bp-carousel-card-excerpt {
    font-size: 14px;
    font-style: italic;
    color: var(--e-global-color-text, #333);
    line-height: 1.6;
    margin: 0;
    /* Pas de line-clamp : le texte complet est toujours affiché */
}
/* Footer auteur */
.bp-avis-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 8px;
}
.bp-avis-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--e-global-color-cd1c9dc, #E0E0E0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-avis-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bp-avis-initial {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.bp-avis-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bp-avis-author {
    font-weight: 700;
    font-size: 13px;
    color: var(--e-global-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-avis-date {
    font-size: 11px;
    color: #9ca3af;
}
.bp-avis-date-sep {
    opacity: 0.5;
    margin: 0 2px;
}
.bp-avis-stars {
    display: flex;
    gap: 1px;
    align-self: flex-start;
}
.bp-avis-star {
    position: relative;
    font-size: 37px;
    line-height: 1;
    display: inline-block;
    width: 37px;
}
.bp-avis-star-base,
.bp-avis-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    line-height: 1;
}
.bp-avis-star-base {
    color: #d1d5db;
}
.bp-avis-star-fill {
    color: var(--e-global-color-accent, #44A1A0);
    overflow: hidden;
    white-space: nowrap;
}

/* Responsive souvenir + avis */
@media (max-width: 768px) {
    .bp-carousel-section--souvenir .bp-carousel-card--souvenir {
        flex: 0 0 260px; /* 1-2 cartes sur mobile */
    }
    .bp-carousel-section--avis .bp-carousel-card--avis {
        flex: 0 0 300px; /* 1 carte avis pleine largeur sur mobile */
    }
    .bp-carousel-section--souvenir .bp-carousel-card--souvenir.has-picture .bp-carousel-card-img {
        height: 160px;
    }
}

/* ================================================================
   Variante : Galerie photos  blooming_get_petsitter_gallerie_HTML
   Miniatures carrées 100×100, ~4 visibles, slider horizontal
   ================================================================ */
.bp-carousel-section--gallery {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.bp-carousel-section--gallery .bp-carousel-track {
    gap: 4px;
    padding: 4px 0;
}
/* Reset card styles — la carte gallery est un simple lien image */
.bp-carousel-card--gallery {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    scroll-snap-align: start;
    border-radius: 5px;
    overflow: hidden;
    display: block;
    cursor: zoom-in;
    text-decoration: none !important;
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
}
.bp-carousel-card--gallery:hover {
    transform: none;
    box-shadow: none;
    opacity: .85;
}
.bp-carousel-card--gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .bp-carousel-section--gallery .bp-carousel-prev { left: -5px; }
    .bp-carousel-section--gallery .bp-carousel-next { right: -5px; }
}