/*
 * SAS Services & Membership Plans — Responsive Layout
 * Kept as its own file on purpose (not merged into sas-service-style.css).
 *
 * How this avoids !important:
 * Each card grid's column count comes from a shortcode's "columns"
 * attribute, written inline as a --sas-cols custom property (NOT as
 * grid-template-columns directly). Because the actual grid-template-columns
 * declaration then only ever lives in stylesheet rules (never inline), a
 * plain media query can override it through normal cascade rules — no
 * !important required anywhere in this file.
 *
 * The "body " prefix on every selector below adds one extra element
 * selector, bumping specificity just enough to reliably beat the
 * single-class base rule (e.g. ".sas-fgrid") no matter where that base
 * rule's <style> block happens to sit in the page.
 */

/* Default Membership Plans grid — [sas_membership_plans] (style="default") */
body .sas-service-plans-grid { grid-template-columns: repeat(var(--sas-cols, 3), minmax(0, 1fr)); }

/* Services / All Services / Smart List grid — [sas_services], [sas_all_services], [sas_smart_list] */
body .sas-fgrid { grid-template-columns: repeat(var(--sas-cols, 3), minmax(230px, 1fr)); }

/* Elegant Membership Plans grid — [sas_membership_plans style="elegant"] */
body .fb-plans-grid { grid-template-columns: repeat(var(--sas-cols, 3), 1fr); }

/* Pro-style grid — [sas_membership_plans style="pro"], [sas_services_pro] */
body .sas-procard-grid { grid-template-columns: repeat(var(--sas-cols, auto-fill), minmax(260px, 1fr)); }

/* Buttonless feature cards — [sas_feature_cards] */
body .sas-feature-grid { grid-template-columns: repeat(var(--sas-cols, 2), minmax(0, 1fr)); }

/* ---------- Tablets & small laptops (<=1024px): cap every grid at 2 columns ---------- */
@media (max-width: 1024px) {
    body .sas-service-plans-grid,
    body .sas-fgrid,
    body .fb-plans-grid,
    body .sas-procard-grid,
    body .sas-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* ---------- Mobile phones — iPhone & Android (<=640px): single column ---------- */
@media (max-width: 640px) {
    body .sas-service-plans-grid,
    body .sas-fgrid,
    body .fb-plans-grid,
    body .sas-procard-grid,
    body .sas-feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Card text/UI shrink to fit small screens; buttons go full-width for easy tapping. */
    body .sas-service-plan-card,
    body .sas-fcard,
    body .fb-plan-card,
    body .sas-procard,
    body .sas-feature-card {
        width: 100%;
    }
    body .sas-service-plan-title,
    body .sas-fcard-title,
    body .sas-procard-title,
    body .sas-feature-title {
        font-size: 17px;
    }
    body .sas-service-plan-button,
    body .sas-fcard-btn,
    body .sas-procard-btn,
    body .fb-plan-btn,
    body .sas-feature-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    /* Prevent iOS Safari from auto-zooming the page when a form input is focused. */
    body .sas-flt input[type=text],
    body .sas-flt input[type=number],
    body .sas-flt select {
        font-size: 16px;
    }
}

/* ---------- Very small phones (<=400px): tighten card padding further ---------- */
@media (max-width: 400px) {
    body .sas-service-plan-card,
    body .fb-plan-card,
    body .sas-feature-card {
        padding: 16px;
    }
}