/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — services (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   7. Services
   Balisage : .services-slider[data-services-layout] > article.services-slider-item(.populare)
              > .service-item > .service-badge? + .service-header + .service-body + .service-footer
   (`cards` = rendu historique, services.css)
   ========================================================================== */

/* Gabarits à une offre par ligne */
#portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="index"], [data-services-layout="feature"]) {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap, 20px);
}

#portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="index"], [data-services-layout="feature"]) > * {
    flex: 0 0 auto;
    width: 100%;
}

/* Lignes : nom et prix à gauche, contenu au centre, bouton à droite */
#portfolio_page .services-slider[data-services-layout="list"] .service-item {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: calc(2rem * var(--pf-density-gap, 1));
}

#portfolio_page .services-slider[data-services-layout="list"] .service-badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
}

#portfolio_page .services-slider[data-services-layout="list"] :is(.service-header, .service-body) {
    margin: 0;
    padding: 0;
    border: 0;
}

#portfolio_page .services-slider[data-services-layout="list"] .service-footer {
    margin: 0;
}

/* Carte de restaurant : nom …… prix, contenu en petit, sans cadre */
#portfolio_page .services-slider[data-services-layout="index"] {
    gap: calc(1.5rem * var(--pf-density-gap, 1));
}

#portfolio_page .services-slider[data-services-layout="index"] .service-item {
    padding: 0;
}

#portfolio_page .services-slider[data-services-layout="index"] .service-header {
    display: flex;
    align-items: baseline;
    gap: calc(0.75rem * var(--pf-density-gap, 1));
    margin: 0 0 0.35rem;
    padding: 0;
    border: 0;
}

#portfolio_page .services-slider[data-services-layout="index"] .service-header::after {
    content: "";
    order: 1;
    flex: 1;
    border-bottom: max(2px, var(--pf-rule-width)) dotted currentColor;
    opacity: 0.4;
}

#portfolio_page .services-slider[data-services-layout="index"] .service-title {
    order: 0;
    margin: 0;
}

#portfolio_page .services-slider[data-services-layout="index"] .pricing-container {
    order: 2;
}

#portfolio_page .services-slider[data-services-layout="index"] .price-main {
    font-size: calc(var(--portfolios-font-size-base) * 1.3);
}

#portfolio_page .services-slider[data-services-layout="index"] .service-body {
    margin-bottom: 0.5rem;
    font-size: calc(var(--portfolios-font-size-base) * 0.9);
    opacity: 0.8;
}

#portfolio_page .services-slider[data-services-layout="index"] .features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(1.25rem * var(--pf-density-gap, 1));
}

#portfolio_page .services-slider[data-services-layout="index"] .feature-item {
    margin-bottom: 0.25rem;
}

#portfolio_page .services-slider[data-services-layout="index"] .service-badge {
    margin-bottom: 0.5rem;
    padding: calc(2px * var(--portfolios-badge-pad, 1)) calc(10px * var(--portfolios-badge-pad, 1));
}

#portfolio_page .services-slider[data-services-layout="index"] .full-width-btn {
    display: inline-block;
    width: auto;
    padding: calc(8px * var(--pf-density-pad, 1)) calc(18px * var(--pf-density-pad, 1));
}

/* Pleine largeur : bandeau par offre, prix en très grand */
#portfolio_page .services-slider[data-services-layout="feature"] .service-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(1rem * var(--pf-density-gap, 1)) calc(3rem * var(--pf-density-gap, 1));
    /* Marge latérale seulement si la fiche est cadrée (--pf-card-framed) : sinon le texte s'aligne sur le titre. */
    padding: calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1))
        calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1) * var(--pf-card-framed, 0));
}

#portfolio_page .services-slider[data-services-layout="feature"] .service-badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
}

#portfolio_page .services-slider[data-services-layout="feature"] .service-header {
    grid-row: span 2;
    margin: 0;
    padding: 0;
    border: 0;
}

#portfolio_page .services-slider[data-services-layout="feature"] .service-title {
    font-size: calc(var(--portfolios-font-size-base) * 2);
}

#portfolio_page .services-slider[data-services-layout="feature"] .price-main {
    font-size: calc(var(--portfolios-font-size-base) * 3);
}

#portfolio_page .services-slider[data-services-layout="feature"] .service-body {
    margin: 0;
}

/* Minimal : sans fond ni cadre, centré */
#portfolio_page .services-slider[data-services-layout="minimal"] .service-item {
    padding: calc(0.5rem * var(--pf-density-pad, 1)) 0;
    text-align: center;
}

#portfolio_page .services-slider[data-services-layout="minimal"] .service-header {
    text-align: center;
}

#portfolio_page .services-slider[data-services-layout="minimal"] :is(.pricing-container, .feature-item) {
    justify-content: center;
}

#portfolio_page .services-slider[data-services-layout="minimal"] .service-badge {
    align-self: center;
}

@media (max-width: 1100px) {
    /* Une offre par ligne sur tablette et mobile, quel que soit le gabarit. */
    /* display / flex : l'aperçu mobile de l'éditeur tourne dans une fenêtre large, où services.css
       passe la liste en flex sur trois colonnes. */
    #portfolio_page .services-slider {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    #portfolio_page .services-slider > * {
        flex: none;
        width: auto;
        max-width: none;
    }

    /* Empilé : aligné à gauche (le centrage vertical de l'ordinateur centrait tout), centré avec
       « Alignement : centré » des offres ; la pastille « Populaire » suit. */
    #portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="feature"]) .service-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: calc(1rem * var(--pf-density-gap, 1));
    }

    #portfolio_page .services-slider.services-slider--align-center:is([data-services-layout="list"], [data-services-layout="feature"]) .service-item {
        align-items: center;
        text-align: center;
    }

    #portfolio_page .services-slider.services-slider--align-center:is([data-services-layout="list"], [data-services-layout="feature"]) .service-badge {
        align-self: center;
        justify-self: center;
    }
}
}