/* =====================================
   Archive CPT Tutos
   Grille responsive + Image hover zoom
   ===================================== */


/* =====================================
   Grille fixe responsive
   ===================================== */

.tutos-grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Desktop moyen */
@media (max-width: 1400px) {
    .tutos-grid .wp-block-post-template {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .tutos-grid .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .tutos-grid .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------
   Image mise en avant (16:9)
--------------------------------- */
/* Image mise en avant */
.tutos-grid .wp-block-post-featured-image {
    overflow: hidden;
}

.tutos-grid .wp-block-post-featured-image img {
    width: 100%;
    height: auto; /* important */
    display: block; /* supprime les petits décalages inline */
    transition: transform 0.35s ease;
}

/* Supprimer les angles arrondis dans la grille tutos */
.tutos-grid .wp-block-post-featured-image,
.tutos-grid .wp-block-post-featured-image img {
    border-radius: 0 !important;
}

/* Zoom hover */
.tutos-grid .wp-block-post-featured-image:hover img {
    transform: scale(1.06);
}


/* ------------------------------
   Effet zoom moderne uniquement sur l'image
--------------------------------- */
.tutos-grid .wp-block-post-featured-image:hover img {
    transform: scale(1.06);
}


/* ------------------------------
   Léger overlay subtil (optionnel mais élégant)
--------------------------------- */
.tutos-grid .wp-block-post-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
    pointer-events: none;
    padding-bottom: 0;
}

.tutos-grid .wp-block-post-featured-image:hover::after {
    background: rgba(0, 0, 0, 0.05);
}


/* ------------------------------
   Titre sous l'image
--------------------------------- */
.tutos-grid .wp-block-post-title {
    margin-top: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.tutos-grid .wp-block-post-title a {
    text-decoration: none;
}

.tutos-grid .wp-block-post-title a:hover {
    text-decoration: underline;
}


/* Lien retour archive */
.tuto-back-link {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.tuto-back-link a {
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.tuto-back-link a:hover {
    opacity: 1;
    text-decoration: underline;
}