/* Les polices sont chargées une seule fois depuis functions.php
   (un @import ici bloquerait le rendu). */

/* Reset minimal */
.wp-block-post-template.portfolio-bw {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0 !important;
}

/* Chaque post : conteneur pour superposer image + titre */
.wp-block-post-template.portfolio-bw .wp-block-post {
    position: relative;
    overflow: hidden;
    margin: 0;
}

/* Image en N&B par défaut */
.wp-block-post-template.portfolio-bw .wp-block-post-featured-image {
    margin: 0;
    height: 100%;
}

/* Le lien autour de l'image couvre toute la card pour qu'elle soit cliquable */
.wp-block-post-template.portfolio-bw .wp-block-post-featured-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.wp-block-post-template.portfolio-bw .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    /* Léger sur-zoom permanent : évite le liseré blanc au bord
       provoqué par les arrondis sub-pixel pendant la transition */
    transform: scale(1.02);
    transform-origin: center center;
    transition: filter 0.6s ease, transform 0.8s ease;
    backface-visibility: hidden;
}

/* Au survol : couleur + zoom marqué */
.wp-block-post-template.portfolio-bw .wp-block-post:hover .wp-block-post-featured-image img,
.wp-block-post-template.portfolio-bw .wp-block-post:focus-within .wp-block-post-featured-image img {
    filter: grayscale(0%);
    transform: scale(1.12);
}

/* Titre masqué par défaut, centré sur l'image, non cliquable
   (le clic passe à travers vers le lien de l'image) */
.wp-block-post-template.portfolio-bw .portfolio-bw-title {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(22, 41, 75, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.3;
    pointer-events: none;
}

/* Titre révélé au survol et au focus clavier */
.wp-block-post-template.portfolio-bw .wp-block-post:hover .portfolio-bw-title,
.wp-block-post-template.portfolio-bw .wp-block-post:focus-within .portfolio-bw-title {
    opacity: 1;
}

/* Pagination minimaliste */
.wp-block-query-pagination {
    margin-top: 60px;
    gap: 20px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    transition: opacity 0.3s ease;
}

.wp-block-query-pagination a:hover {
    opacity: 0.5;
}

/* ---------- Mobile : une colonne, en couleur, titres toujours visibles ----------

   Sur petit écran, la grille N&B au survol ne fonctionne plus : il n'y a pas de
   survol, donc ni couleur ni titre. Les vignettes seraient six carrés gris
   anonymes. On bascule donc sur une présentation autonome. */
@media (max-width: 768px) {
    .wp-block-post-template.portfolio-bw {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        /* La grille est en pleine largeur : on lui redonne les marges
           latérales du site. */
        padding-inline: var(--wp--style--root--padding-right, 24px);
        /* Respiration avant le pied de page. */
        margin-bottom: 24px;
    }

    .wp-block-post-template.portfolio-bw .wp-block-post {
        border-radius: var(--wp--custom--radius--image);
        overflow: hidden;
    }

    /* Photos en couleur, et sans le sur-zoom prévu pour la transition de
       survol — qui resterait collé après un appui sur écran tactile. */
    .wp-block-post-template.portfolio-bw .wp-block-post-featured-image img,
    .wp-block-post-template.portfolio-bw .wp-block-post:hover .wp-block-post-featured-image img,
    .wp-block-post-template.portfolio-bw .wp-block-post:focus-within .wp-block-post-featured-image img {
        filter: none;
        transform: none;
    }

    /* Titre permanent, posé en bas sur un dégradé plutôt que sur un voile
       plein : celui-ci masquerait la couleur qu'on vient de rétablir. */
    .wp-block-post-template.portfolio-bw .portfolio-bw-title {
        opacity: 1;
        inset: auto 0 0 0;
        padding: 3rem 1.25rem 1.25rem;
        align-items: flex-end;
        justify-content: flex-start;
        text-align: left;
        background: linear-gradient(to top,
                rgba(22, 41, 75, 0.85) 0%,
                rgba(22, 41, 75, 0.45) 45%,
                rgba(22, 41, 75, 0) 100%);
    }
}