/* ==========================================================
   TDH Rangée Block
   CSS Grid responsive via custom properties
   ========================================================== */

.tdh-row {
    display: grid;
    /* Mobile par défaut */
    grid-template-columns: repeat( var(--tdh-row-cols-mobile,  1), 1fr );
    gap: var(--tdh-row-gap, 16px);
    width: 100%;
    box-sizing: border-box;
}

/* Tablette : 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .tdh-row {
        grid-template-columns: repeat( var(--tdh-row-cols-tablet, 2), 1fr );
    }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
    .tdh-row {
        grid-template-columns: repeat( var(--tdh-row-cols-desktop, 3), 1fr );
    }
}

/* Alignements WordPress */
.tdh-row.alignwide,
.tdh-row.alignfull {
    max-width: none;
}

/* Chaque bloc enfant occupe toute la cellule de la grille */
.tdh-row > * {
    min-width: 0; /* évite le dépassement en grid */
}

/* ---- Aperçu éditeur ---- */
/* La grille est visible dans l'éditeur grâce aux CSS vars inline.
   On force l'affichage de la colonne desktop dans le canvas. */
.block-editor-block-list__layout.tdh-row {
    grid-template-columns: repeat( var(--tdh-row-cols-desktop, 3), 1fr ) !important;
}