/**
 * Block Padding Extension – Frontend + Editor styles
 *
 * Padding values are stored as CSS custom properties on each element.
 * .mestari-{p|h}-padded activates them.
 * .mestari-{p|h}-desktop-only zeros them out on mobile.
 */

/* ── Paragraph ─────────────────────────────────────────────── */
.mestari-p-padded,
.editor-styles-wrapper .mestari-p-padded {
    padding-top:    var( --mestari-p-pt, 0px );
    padding-bottom: var( --mestari-p-pb, 0px );
    padding-left:   var( --mestari-p-pl, 0px );
    padding-right:  var( --mestari-p-pr, 0px );
}

@media screen and ( max-width: 768px ) {
    .mestari-p-padded.mestari-p-desktop-only {
        padding-top:    0 !important;
        padding-bottom: 0 !important;
        padding-left:   0 !important;
        padding-right:  0 !important;
    }
}

/* ── Heading ───────────────────────────────────────────────── */
.mestari-h-padded,
.editor-styles-wrapper .mestari-h-padded {
    padding-top:    var( --mestari-h-pt, 0px );
    padding-bottom: var( --mestari-h-pb, 0px );
    padding-left:   var( --mestari-h-pl, 0px );
    padding-right:  var( --mestari-h-pr, 0px );
}

@media screen and ( max-width: 768px ) {
    .mestari-h-padded.mestari-h-desktop-only {
        padding-top:    0 !important;
        padding-bottom: 0 !important;
        padding-left:   0 !important;
        padding-right:  0 !important;
    }
}