/* =====================================================
   Prestations Grid – Frontend Styles
   Layout par rows de 3, alternance normal/inversé
   ===================================================== */

/* ── Conteneur global ── */
.pg-container {
    padding: 20px;
    font-family: 'Barlow', sans-serif;
    max-width: 960px;
    margin: 0 auto;
}

/* ── Row (groupe de 3 cartes) ── */
.pg-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.pg-row + .pg-row {
    margin-top: 20px;
}

/* Row inversée : 1fr | 2fr */
.pg-row--inverted {
    grid-template-columns: 1fr 2fr;
}

/* Row 1 seule carte : pleine largeur */
.pg-row--full {
    grid-template-columns: 1fr;
}

.pg-row--full .card-h-il {
    min-height: 280px;
}

.pg-row--full .card-h-il .img {
    width: 33.33%;
}

/* Row 2 cartes : côte à côte */
.pg-row--duo {
    grid-template-columns: 1fr 1fr;
}

/* ── Cellule ── */
.pg-cell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ══════════════════════════════
   Carte de base
══════════════════════════════ */
.card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

.card h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #111;
    margin-bottom: 8px;
}

.card p {
    font-size: 0.76rem;
    line-height: 1.65;
    color: #3a3a3a;
}

/* Miniatures */
.thumbs {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

.thumbs img {
    width: 78px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.thumbs img:hover {
    opacity: 0.75;
}

/* Image dans une carte */
.card .img {
    flex-shrink: 0;
    overflow: hidden;
}

.card .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Corps texte */
.card .body {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ══════════════════════════════
   Carte horizontale : image à gauche
══════════════════════════════ */
.card-h-il {
    min-height: 320px;
    flex: 1;
}

.card-h-il .img {
    width: 42%;
}

.card-h-il .body {
    flex: 1;
}

/* ══════════════════════════════
   Carte horizontale : image à droite
══════════════════════════════ */
.card-h-ir {
    min-height: 320px;
    flex: 1;
}

.card-h-ir .body {
    flex: 1;
}

.card-h-ir .img {
    width: 42%;
    flex-shrink: 0;
}

/* ══════════════════════════════
   Carte verticale haute : image en haut
══════════════════════════════ */
.card-v-top {
    flex: 1;
    flex-direction: column;
}

.card-v-top .img {
    width: 100%;
    height: 45%;
    flex-shrink: 0;
}

.card-v-top .body {
    flex: 1;
    justify-content: flex-start;
}

.card-v-top .body .thumbs {
    margin-top: 0;
    margin-bottom: 12px;
}

/* ══════════════════════════════
   État vide
══════════════════════════════ */
.pg-empty {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 24px;
}

/* ══════════════════════════════
   Responsive — Tablette
══════════════════════════════ */
@media (max-width: 768px) {
    .pg-container {
        padding: 14px;
    }

    .pg-row,
    .pg-row--inverted,
    .pg-row--duo {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pg-row + .pg-row {
        margin-top: 14px;
    }

    .pg-cell {
        gap: 14px;
    }

    /* Toutes les cartes passent en colonne */
    .card-h-il,
    .card-h-ir {
        flex-direction: column;
        min-height: auto;
    }

    .card-h-il .img,
    .card-h-ir .img {
        width: 100% !important;
        height: 200px;
    }

    /* card-h-ir : l'image est après le body dans le HTML, on la remonte */
    .card-h-ir .img {
        order: -1;
    }

    /* Carte pleine largeur aussi en colonne */
    .pg-row--full .card-h-il .img {
        width: 100% !important;
        height: 220px;
    }

    /* Carte verticale haute : pas de hauteur fixe, tout le texte visible */
    .card-v-top {
        min-height: auto;
    }

    .card-v-top .img {
        height: 200px;
    }

    /* Cartes : pas de troncature, hauteur adaptée au contenu */
    .card {
        overflow: visible;
    }

    /* Corps texte : toujours visible intégralement */
    .card .body {
        padding: 16px 14px;
        justify-content: flex-start;
    }

    /* Ordre uniforme dans le body : miniatures, titre, texte */
    .card .body .thumbs {
        order: 1;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .card .body h3 {
        order: 2;
    }

    .card .body p {
        order: 3;
    }

    /* Titres légèrement réduits */
    .card h3 {
        font-size: 16px;
    }

    /* Thumbs adaptées */
    .thumbs img {
        width: 64px;
        height: 48px;
    }
}

/* ══════════════════════════════
   Responsive — Mobile
══════════════════════════════ */
@media (max-width: 480px) {
    .pg-container {
        padding: 10px;
    }

    .pg-row,
    .pg-row--inverted,
    .pg-row--duo,
    .pg-row--full {
        gap: 10px;
    }

    .pg-row + .pg-row {
        margin-top: 10px;
    }

    .pg-cell {
        gap: 10px;
    }

    .card-h-il .img,
    .card-h-ir .img,
    .pg-row--full .card-h-il .img,
    .card-v-top .img {
        height: 160px;
    }

    .card .body {
        padding: 14px 12px;
    }

    .card h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .card p {
        font-size: 0.72rem;
        line-height: 1.55;
    }

    .thumbs {
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
    }

    .thumbs img {
        width: 56px;
        height: 42px;
    }
}