/* AI Page Pattern Importer v8 responsive controls
   Important: desktop/tablet/mobile rules are isolated.
   Desktop values DO NOT cascade into tablet/mobile unless those fields are set too. */

/* Selected block outline in editor only */
.editor-styles-wrapper .block-editor-block-list__block.aipp-responsive-block.is-selected,
.editor-styles-wrapper .block-editor-block-list__block.aipp-responsive-block.has-child-selected,
.editor-styles-wrapper .aipp-responsive-block.is-selected,
.editor-styles-wrapper .aipp-responsive-block.has-child-selected {
    outline: 1px dashed rgba(34, 113, 177, .7);
    outline-offset: 2px;
}

/* ---------- DESKTOP ONLY ---------- */
@media (min-width: 1025px) {
    .aipp-responsive-block {
        font-size: var(--aipp-font-desktop) !important;
        line-height: var(--aipp-line-desktop) !important;
        letter-spacing: var(--aipp-letter-desktop) !important;
        color: var(--aipp-color-desktop) !important;
        background-color: var(--aipp-bg-desktop) !important;
        padding-top: var(--aipp-pt-desktop) !important;
        padding-right: var(--aipp-pr-desktop) !important;
        padding-bottom: var(--aipp-pb-desktop) !important;
        padding-left: var(--aipp-pl-desktop) !important;
        margin-top: var(--aipp-mt-desktop) !important;
        margin-right: var(--aipp-mr-desktop) !important;
        margin-bottom: var(--aipp-mb-desktop) !important;
        margin-left: var(--aipp-ml-desktop) !important;
        width: var(--aipp-width-desktop) !important;
        max-width: var(--aipp-maxw-desktop) !important;
        min-height: var(--aipp-minh-desktop) !important;
        gap: var(--aipp-gap-desktop) !important;
        border-radius: var(--aipp-radius-desktop) !important;
    }

    .wp-block-button.aipp-responsive-block .wp-block-button__link,
    .aipp-responsive-block.wp-block-button .wp-block-button__link {
        font-size: var(--aipp-font-desktop) !important;
        line-height: var(--aipp-line-desktop) !important;
        letter-spacing: var(--aipp-letter-desktop) !important;
        color: var(--aipp-color-desktop) !important;
        background-color: var(--aipp-bg-desktop) !important;
        padding-top: var(--aipp-pt-desktop) !important;
        padding-right: var(--aipp-pr-desktop) !important;
        padding-bottom: var(--aipp-pb-desktop) !important;
        padding-left: var(--aipp-pl-desktop) !important;
        border-radius: var(--aipp-radius-desktop) !important;
    }

    .aipp-hide-desktop { display: none !important; }
}

/* ---------- TABLET ONLY ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .aipp-responsive-block {
        font-size: var(--aipp-font-tablet) !important;
        line-height: var(--aipp-line-tablet) !important;
        letter-spacing: var(--aipp-letter-tablet) !important;
        color: var(--aipp-color-tablet) !important;
        background-color: var(--aipp-bg-tablet) !important;
        padding-top: var(--aipp-pt-tablet) !important;
        padding-right: var(--aipp-pr-tablet) !important;
        padding-bottom: var(--aipp-pb-tablet) !important;
        padding-left: var(--aipp-pl-tablet) !important;
        margin-top: var(--aipp-mt-tablet) !important;
        margin-right: var(--aipp-mr-tablet) !important;
        margin-bottom: var(--aipp-mb-tablet) !important;
        margin-left: var(--aipp-ml-tablet) !important;
        width: var(--aipp-width-tablet) !important;
        max-width: var(--aipp-maxw-tablet) !important;
        min-height: var(--aipp-minh-tablet) !important;
        gap: var(--aipp-gap-tablet) !important;
        border-radius: var(--aipp-radius-tablet) !important;
    }

    .wp-block-button.aipp-responsive-block .wp-block-button__link,
    .aipp-responsive-block.wp-block-button .wp-block-button__link {
        font-size: var(--aipp-font-tablet) !important;
        line-height: var(--aipp-line-tablet) !important;
        letter-spacing: var(--aipp-letter-tablet) !important;
        color: var(--aipp-color-tablet) !important;
        background-color: var(--aipp-bg-tablet) !important;
        padding-top: var(--aipp-pt-tablet) !important;
        padding-right: var(--aipp-pr-tablet) !important;
        padding-bottom: var(--aipp-pb-tablet) !important;
        padding-left: var(--aipp-pl-tablet) !important;
        border-radius: var(--aipp-radius-tablet) !important;
    }

    .aipp-hide-tablet { display: none !important; }
}

/* ---------- MOBILE ONLY ---------- */
@media (max-width: 767px) {
    .aipp-responsive-block {
        font-size: var(--aipp-font-mobile) !important;
        line-height: var(--aipp-line-mobile) !important;
        letter-spacing: var(--aipp-letter-mobile) !important;
        color: var(--aipp-color-mobile) !important;
        background-color: var(--aipp-bg-mobile) !important;
        padding-top: var(--aipp-pt-mobile) !important;
        padding-right: var(--aipp-pr-mobile) !important;
        padding-bottom: var(--aipp-pb-mobile) !important;
        padding-left: var(--aipp-pl-mobile) !important;
        margin-top: var(--aipp-mt-mobile) !important;
        margin-right: var(--aipp-mr-mobile) !important;
        margin-bottom: var(--aipp-mb-mobile) !important;
        margin-left: var(--aipp-ml-mobile) !important;
        width: var(--aipp-width-mobile) !important;
        max-width: var(--aipp-maxw-mobile) !important;
        min-height: var(--aipp-minh-mobile) !important;
        gap: var(--aipp-gap-mobile) !important;
        border-radius: var(--aipp-radius-mobile) !important;
    }

    .wp-block-button.aipp-responsive-block .wp-block-button__link,
    .aipp-responsive-block.wp-block-button .wp-block-button__link {
        font-size: var(--aipp-font-mobile) !important;
        line-height: var(--aipp-line-mobile) !important;
        letter-spacing: var(--aipp-letter-mobile) !important;
        color: var(--aipp-color-mobile) !important;
        background-color: var(--aipp-bg-mobile) !important;
        padding-top: var(--aipp-pt-mobile) !important;
        padding-right: var(--aipp-pr-mobile) !important;
        padding-bottom: var(--aipp-pb-mobile) !important;
        padding-left: var(--aipp-pl-mobile) !important;
        border-radius: var(--aipp-radius-mobile) !important;
    }

    .aipp-hide-mobile { display: none !important; }
}