/**
 * Momentum Pro Editor v6.0 - Frontend Styles
 *
 * v6 policy: mobile shows EXACTLY what the code says.
 * No automatic font clamping, no forced flex-wrap, no padding scaling.
 * The only mobile rules here are the OPT-IN per-element overrides
 * (--mob-fs / --mob-w) that the user sets explicitly from the editor —
 * they affect nothing unless an element carries those variables.
 */

.momentum-html-output {
    position: relative;
    width: 100%;
}

/* ============================================
   PER-ELEMENT MOBILE OVERRIDES (opt-in only)
   Set from the 📱 buttons in the visual editor.
   ============================================ */
@media screen and (max-width: 767px) {
    .momentum-html-output [style*="--mob-fs"] {
        font-size: var(--mob-fs) !important;
    }

    .momentum-html-output img[style*="--mob-w"] {
        width: var(--mob-w) !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Link hover (cosmetic, unchanged from v5) */
.momentum-html-output a {
    transition: opacity 0.2s ease;
}

.momentum-html-output a:hover {
    opacity: 0.85;
}

/* Print styles */
@media print {
    .momentum-html-output {
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
    }
}