/* Styles de base - comportement desktop conservé */
.wp-block-query .wp-block-post-template .is-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--style--block-gap, 1.5rem);
}

/* Styles pour mobile - scroll horizontal */
@media (max-width: 768px) {
    div:not(.not-horizontal).wp-block-query {
        overflow: visible;
        position: relative;
    }
    
    div:not(.not-horizontal).wp-block-query .wp-block-post-template {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE et Edge */
        gap: 20px;
        padding: 10px 20px 40px 20px; /* Padding bottom pour éviter la coupure */
        margin: 0!important; /*margin: 0 -20px;*/
    }
    
    /* Masquer la scrollbar sur WebKit */
    div:not(.not-horizontal).wp-block-query .wp-block-post-template::-webkit-scrollbar {
        display: none;
    }
    /* Titre au dessus du bloc */
	section.wp-block-group:has(.wp-block-heading), section .wp-block-group{
		padding-left : var(--wp--preset--spacing--20)!important;
		padding-right : var(--wp--preset--spacing--20)!important;

	}
	/* Spacer entre les sections */
	.wp-block-spacer{
		height : 20px!important;
	}
    /* Chaque article prend une largeur fixe avec aperçu de la suivante */
    div:not(.not-horizontal).wp-block-query .wp-block-post-template .wp-block-group {
        flex: 0 0 calc(100vw - 80px); /* Prendre presque toute la largeur */
        min-width: calc(100vw - 80px);
        max-width: 320px; /* Largeur max sur grands mobiles */
        height: auto;
        min-height: 100%; /* Assurer la hauteur complète */
    }
    
    /* Première carte avec aperçu de la seconde */
    div:not(.not-horizontal).wp-block-query .wp-block-post-template .wp-block-group:first-child {
        margin-left: 0;
    }
    
    /* Dernière carte avec marge pour finir proprement */
    div:not(.not-horizontal).wp-block-query .wp-block-post-template .wp-block-group:last-child {
        margin-right: 20px;
    }
    
    /* Ajustements pour les très petits écrans */
    @media (max-width: 480px) {
        div:not(.not-horizontal).wp-block-query .wp-block-post-template .wp-block-group {
            flex: 0 0 calc(100vw - 60px);
            min-width: calc(100vw - 60px);
            max-width: 280px;
        }
        
        div:not(.not-horizontal).wp-block-query .wp-block-post-template {
            padding: 0 15px 20px 15px;
            margin: 0 -15px;
            gap: 15px;
        }
    }
    
    /* Technique pour montrer l'aperçu de la carte suivante */
    div:not(.not-horizontal).wp-block-query :not(.not-horizontal) .wp-block-post-template {
        /* Ajuster pour montrer 15-20% de la carte suivante */
        padding-right: calc(20vw + 20px); /* 20% de la largeur d'écran + gap */
    }
    
    div:not(.not-horizontal).wp-block-query .wp-block-post-template .wp-block-group {
        flex: 0 0 calc(80vw - 40px); /* 80% de la largeur pour laisser voir la suivante */
        min-width: calc(80vw - 40px);
        max-width: 300px;
    }
}

/* Indicateurs de scroll (optionnel) */
/*@media (max-width: 768px) {
    .wp-block-query::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    .wp-block-query.has-scroll::after {
        opacity: 1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
    }
}*/

/* Amélioration de l'apparence des cartes sur mobile */
@media (max-width: 768px) {
    div:not(.not-horizontal).wp-block-query .wp-block-group {
        /* Conserver les styles existants de vos cartes */
        border-radius: 15px;
        padding: 30px;
        box-shadow: var(--wp--preset--shadow--natural);
        background: white;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: fit-content;
    }
    
    /* Effet hover adapté pour mobile */
    div:not(.not-horizontal).wp-block-query .wp-block-group:active {
        transform: scale(0.98);
    }
    
    /* Ajustements pour les images */
    div:not(.not-horizontal).wp-block-query .wp-block-post-featured-image {
        margin-bottom: 15px;
    }
    
    div:not(.not-horizontal).wp-block-query .wp-block-post-featured-image img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
        display: block;
    }
    
    /* Ajustements pour les titres */
    div:not(.not-horizontal).wp-block-query .wp-block-post-title {
        font-size: 1.1em;
        line-height: 1.3;
        margin: 0 0 10px 0;
        flex-shrink: 0;
    }
    
    /* Ajustements pour les extraits */
    div:not(.not-horizontal).wp-block-query .wp-block-post-excerpt {
        font-size: 0.9em;
        line-height: 1.4;
        color: #666;
        margin: 0;
        flex-grow: 1;
    }
    
    /* S'assurer que les éléments à l'intérieur ne débordent pas */
    div:not(.not-horizontal).wp-block-query .wp-block-group * {
        max-width: 100%;
        box-sizing: border-box;
    }
}