/*
 * Findzle Vaults V14 — Pricing layout
 *
 * IMPORTANT:
 * /pricing peut être rendu dans le layout public:
 *     body.vaults-public-body
 * ou dans le layout connecté:
 *     body.vaults-body
 *
 * La grille historique utilisait 5 colonnes.
 * V14 affiche 4 offres et doit être centrée dans la page.
 */

body.vaults-public-body .pricing-page,
body.vaults-body .pricing-page {
    width: 100% !important;
}

body.vaults-public-body .pricing-grid,
body.vaults-body .pricing-grid {
    width: min(1120px, calc(100% - 40px)) !important;
    max-width: 1120px !important;

    margin-top: 28px !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;

    align-items: stretch !important;
    justify-content: center !important;
}

body.vaults-public-body .pricing-card,
body.vaults-body .pricing-card {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
}

@media (max-width: 1180px) {
    body.vaults-public-body .pricing-grid,
    body.vaults-body .pricing-grid {
        width: min(920px, calc(100% - 32px)) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 700px) {
    body.vaults-public-body .pricing-grid,
    body.vaults-body .pricing-grid {
        width: calc(100% - 28px) !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.vaults-public-body .pricing-card.highlight,
    body.vaults-body .pricing-card.highlight {
        transform: none !important;
    }
}