/* =========================================
   1. LA GRILLE (PARENT)
   ========================================= */

/* 
   On cible :
   1. .qba-cards-grid-container -> Le bloc sur le site (Front)
   2. .block-editor-block-list__layout -> Le conteneur interne de Gutenberg (Back)
      (On cible via .qba-cards-grid-wrapper pour être sûr de ne pas casser tout WordPress)
*/

.qba-cards-grid-container,
.qba-cards-grid-wrapper .block-editor-inner-blocks .block-editor-block-list__layout {
    display: grid;
    /* Ta règle : Max 300px et centré */
    grid-template-columns: repeat(auto-fit, minmax(280px, 300px));
    justify-content: center;
    gap: 30px;
    margin: 3rem 0;
    align-items: start;
    width: 100%; /* Important pour que ça prenne la place dans l'éditeur */

    color: #333;
}

/* =========================================
   2. LA CARTE (ENFANT)
   ========================================= */

/* 
   On cible :
   1. .qba-card-container -> La carte sur le site
   2. .qba-card-editor -> La carte dans l'éditeur
*/

.qba-card-container,
.qba-card-editor {
    display: flex;
    flex-direction: column;
    background-color: #ffffff; /* Sera écrasé par le style inline du bloc si défini */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    border: 1px solid transparent; /* Pour éviter un saut si on ajoute une bordure au hover */
    height: 100%; /* S'assurer que ça remplit la case de la grille */
}

/* Effet au survol (Uniquement sur le front pour ne pas gêner l'édition, ou les deux si tu veux) */
.qba-card-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* =========================================
   3. L'IMAGE
   ========================================= */

.qba-card-img-natural {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0; /* Reset Gutenberg */
}

/* Wrapper de l'image (nécessaire pour le centrage vertical si besoin) */
.qba-card-image-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* Évite les espaces fantômes sous l'image */
}

/* =========================================
   4. LE CORPS DU TEXTE
   ========================================= */

.qba-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre le titre et le texte */
}

/* Ajustements typographiques pour que ça ressemble partout */
.qba-card-body h1, .qba-card-body h2, .qba-card-body h3, 
.qba-card-body p {
    margin-top: 0;
    margin-bottom: 0.5em;
    word-break: break-word; /* Évite que les longs mots cassent la carte */
}

/* =========================================
   5. CORRECTIFS SPÉCIFIQUES BACKOFFICE
   ========================================= */

/* Enlève la bordure par défaut de Gutenberg sur le wrapper parent pour que ce soit propre */
.qba-cards-grid-wrapper {
    border: 1px dashed transparent; /* Invisible sauf au survol */
    padding: 10px; /* Un peu d'espace pour pouvoir cliquer autour */
}

/* On montre les pointillés uniquement quand on clique sur le bloc parent pour se repérer */
.qba-cards-grid-wrapper.is-selected {
    border-color: #ccc;
}