/**
 * HP Magazine Blocks — shared style/spacing/typography vars.
 *
 * Every advi/hp-* block is wrapped in `.rsb-block-hp.rsb-block-hp--<slug>`.
 * The wrapper exposes CSS custom properties (--rsb-hp-*) populated from the
 * editor controls (PHP: advi_hp_wrapper_attrs / advi_hp_responsive_vars,
 * JS: window.adviHpControls.wrapperStyle).
 *
 * This file MUST be loaded AFTER the theme's main stylesheet so the
 * --rsb-hp-* vars override the theme defaults where set.
 */

/* ============================================================
 * Wrapper — base reset & responsive vars cascade
 * Doubled selector (.rsb-block-hp.rsb-block-hp) bumps specificity
 * over WP layout reset rules (e.g. `.is-layout-flow > *`) that would
 * otherwise zero our margin-block-start/end at the same specificity
 * but later in the cascade.
 * ============================================================ */
.rsb-block-hp.rsb-block-hp {
    /* Spacing fallbacks (0 default) */
    --rsb-hp-pt-active: var(--rsb-hp-pt-desktop, 0px);
    --rsb-hp-pr-active: var(--rsb-hp-pr-desktop, 0px);
    --rsb-hp-pb-active: var(--rsb-hp-pb-desktop, 0px);
    --rsb-hp-pl-active: var(--rsb-hp-pl-desktop, 0px);
    --rsb-hp-mt-active: var(--rsb-hp-mt-desktop, 0px);
    --rsb-hp-mb-active: var(--rsb-hp-mb-desktop, 0px);
    --rsb-hp-gap-active: var(--rsb-hp-gap-desktop, 16px);
    /* Typography fallbacks */
    --rsb-hp-title-fs-active: var(--rsb-hp-title-fs-desktop);
    --rsb-hp-body-fs-active:  var(--rsb-hp-body-fs-desktop);
    --rsb-hp-title-lh-active: var(--rsb-hp-title-lh-desktop);
    --rsb-hp-body-lh-active:  var(--rsb-hp-body-lh-desktop);
    --rsb-hp-title-ls-active: var(--rsb-hp-title-ls-desktop);

    padding-top: var(--rsb-hp-pt-active);
    padding-right: var(--rsb-hp-pr-active);
    padding-bottom: var(--rsb-hp-pb-active);
    padding-left: var(--rsb-hp-pl-active);
    /* margin must beat WP layout reset (`.is-layout-flow > *`) */
    margin-top: var(--rsb-hp-mt-active) !important;
    margin-bottom: var(--rsb-hp-mb-active) !important;
    margin-block-start: var(--rsb-hp-mt-active) !important;
    margin-block-end: var(--rsb-hp-mb-active) !important;
}

@media (max-width: 1024px) {
    .rsb-block-hp.rsb-block-hp {
        --rsb-hp-pt-active: var(--rsb-hp-pt-tablet, var(--rsb-hp-pt-desktop, 0px));
        --rsb-hp-pr-active: var(--rsb-hp-pr-tablet, var(--rsb-hp-pr-desktop, 0px));
        --rsb-hp-pb-active: var(--rsb-hp-pb-tablet, var(--rsb-hp-pb-desktop, 0px));
        --rsb-hp-pl-active: var(--rsb-hp-pl-tablet, var(--rsb-hp-pl-desktop, 0px));
        --rsb-hp-mt-active: var(--rsb-hp-mt-tablet, var(--rsb-hp-mt-desktop, 0px));
        --rsb-hp-mb-active: var(--rsb-hp-mb-tablet, var(--rsb-hp-mb-desktop, 0px));
        --rsb-hp-gap-active: var(--rsb-hp-gap-tablet, var(--rsb-hp-gap-desktop, 16px));
        --rsb-hp-title-fs-active: var(--rsb-hp-title-fs-tablet, var(--rsb-hp-title-fs-desktop));
        --rsb-hp-body-fs-active:  var(--rsb-hp-body-fs-tablet,  var(--rsb-hp-body-fs-desktop));
        --rsb-hp-title-lh-active: var(--rsb-hp-title-lh-tablet, var(--rsb-hp-title-lh-desktop));
        --rsb-hp-body-lh-active:  var(--rsb-hp-body-lh-tablet,  var(--rsb-hp-body-lh-desktop));
        --rsb-hp-title-ls-active: var(--rsb-hp-title-ls-tablet, var(--rsb-hp-title-ls-desktop));
    }
}

@media (max-width: 768px) {
    .rsb-block-hp.rsb-block-hp {
        --rsb-hp-pt-active: var(--rsb-hp-pt-mobile, var(--rsb-hp-pt-tablet, var(--rsb-hp-pt-desktop, 0px)));
        --rsb-hp-pr-active: var(--rsb-hp-pr-mobile, var(--rsb-hp-pr-tablet, var(--rsb-hp-pr-desktop, 0px)));
        --rsb-hp-pb-active: var(--rsb-hp-pb-mobile, var(--rsb-hp-pb-tablet, var(--rsb-hp-pb-desktop, 0px)));
        --rsb-hp-pl-active: var(--rsb-hp-pl-mobile, var(--rsb-hp-pl-tablet, var(--rsb-hp-pl-desktop, 0px)));
        --rsb-hp-mt-active: var(--rsb-hp-mt-mobile, var(--rsb-hp-mt-tablet, var(--rsb-hp-mt-desktop, 0px)));
        --rsb-hp-mb-active: var(--rsb-hp-mb-mobile, var(--rsb-hp-mb-tablet, var(--rsb-hp-mb-desktop, 0px)));
        --rsb-hp-gap-active: var(--rsb-hp-gap-mobile, var(--rsb-hp-gap-tablet, var(--rsb-hp-gap-desktop, 16px)));
        --rsb-hp-title-fs-active: var(--rsb-hp-title-fs-mobile, var(--rsb-hp-title-fs-tablet, var(--rsb-hp-title-fs-desktop)));
        --rsb-hp-body-fs-active:  var(--rsb-hp-body-fs-mobile,  var(--rsb-hp-body-fs-tablet,  var(--rsb-hp-body-fs-desktop)));
        --rsb-hp-title-lh-active: var(--rsb-hp-title-lh-mobile, var(--rsb-hp-title-lh-tablet, var(--rsb-hp-title-lh-desktop)));
        --rsb-hp-body-lh-active:  var(--rsb-hp-body-lh-mobile,  var(--rsb-hp-body-lh-tablet,  var(--rsb-hp-body-lh-desktop)));
        --rsb-hp-title-ls-active: var(--rsb-hp-title-ls-mobile, var(--rsb-hp-title-ls-tablet, var(--rsb-hp-title-ls-desktop)));
    }
}

/* Background / Text / Border (cascade) */
.rsb-block-hp[style*="--rsb-hp-bg"]      { background-color: var(--rsb-hp-bg); }
.rsb-block-hp[style*="--rsb-hp-text"]    { color: var(--rsb-hp-text); }
.rsb-block-hp[style*="--rsb-hp-border-w"] {
    border-style: solid;
    border-width: var(--rsb-hp-border-w, 0);
    border-color: var(--rsb-hp-border-c, transparent);
}
.rsb-block-hp[style*="--rsb-hp-radius"]  { border-radius: var(--rsb-hp-radius); overflow: hidden; }

/* Typography overrides applied to inner headings/body via cascade vars */
.rsb-block-hp h1,
.rsb-block-hp h2,
.rsb-block-hp h3,
.rsb-block-hp h4,
.rsb-block-hp h5 {
    font-size: var(--rsb-hp-title-fs-active, inherit);
    line-height: var(--rsb-hp-title-lh-active, inherit);
    letter-spacing: var(--rsb-hp-title-ls-active, inherit);
}
.rsb-block-hp[style*="--rsb-hp-title-ff"] h1,
.rsb-block-hp[style*="--rsb-hp-title-ff"] h2,
.rsb-block-hp[style*="--rsb-hp-title-ff"] h3,
.rsb-block-hp[style*="--rsb-hp-title-ff"] h4,
.rsb-block-hp[style*="--rsb-hp-title-ff"] h5 {
    font-family: var(--rsb-hp-title-ff);
}
.rsb-block-hp[style*="--rsb-hp-title"] h1 a,
.rsb-block-hp[style*="--rsb-hp-title"] h2 a,
.rsb-block-hp[style*="--rsb-hp-title"] h3 a,
.rsb-block-hp[style*="--rsb-hp-title"] h4 a,
.rsb-block-hp[style*="--rsb-hp-title"] h5 a,
.rsb-block-hp[style*="--rsb-hp-title"] h1,
.rsb-block-hp[style*="--rsb-hp-title"] h2,
.rsb-block-hp[style*="--rsb-hp-title"] h3,
.rsb-block-hp[style*="--rsb-hp-title"] h4,
.rsb-block-hp[style*="--rsb-hp-title"] h5 {
    color: var(--rsb-hp-title);
}
.rsb-block-hp p,
.rsb-block-hp li,
.rsb-block-hp .standfirst,
.rsb-block-hp .byline {
    font-size: var(--rsb-hp-body-fs-active, inherit);
    line-height: var(--rsb-hp-body-lh-active, inherit);
}

/* Title alignment helper */
.rsb-block-hp.rsb-hp-align-left   h1, .rsb-block-hp.rsb-hp-align-left   h2,
.rsb-block-hp.rsb-hp-align-left   h3, .rsb-block-hp.rsb-hp-align-left   h4 { text-align: left; }
.rsb-block-hp.rsb-hp-align-center h1, .rsb-block-hp.rsb-hp-align-center h2,
.rsb-block-hp.rsb-hp-align-center h3, .rsb-block-hp.rsb-hp-align-center h4 { text-align: center; }
.rsb-block-hp.rsb-hp-align-right  h1, .rsb-block-hp.rsb-hp-align-right  h2,
.rsb-block-hp.rsb-hp-align-right  h3, .rsb-block-hp.rsb-hp-align-right  h4 { text-align: right; }

/* Title weight helper */
.rsb-block-hp.rsb-hp-tw-300 h1, .rsb-block-hp.rsb-hp-tw-300 h2, .rsb-block-hp.rsb-hp-tw-300 h3, .rsb-block-hp.rsb-hp-tw-300 h4 { font-weight: 300; }
.rsb-block-hp.rsb-hp-tw-400 h1, .rsb-block-hp.rsb-hp-tw-400 h2, .rsb-block-hp.rsb-hp-tw-400 h3, .rsb-block-hp.rsb-hp-tw-400 h4 { font-weight: 400; }
.rsb-block-hp.rsb-hp-tw-500 h1, .rsb-block-hp.rsb-hp-tw-500 h2, .rsb-block-hp.rsb-hp-tw-500 h3, .rsb-block-hp.rsb-hp-tw-500 h4 { font-weight: 500; }
.rsb-block-hp.rsb-hp-tw-600 h1, .rsb-block-hp.rsb-hp-tw-600 h2, .rsb-block-hp.rsb-hp-tw-600 h3, .rsb-block-hp.rsb-hp-tw-600 h4 { font-weight: 600; }
.rsb-block-hp.rsb-hp-tw-700 h1, .rsb-block-hp.rsb-hp-tw-700 h2, .rsb-block-hp.rsb-hp-tw-700 h3, .rsb-block-hp.rsb-hp-tw-700 h4 { font-weight: 700; }
.rsb-block-hp.rsb-hp-tw-800 h1, .rsb-block-hp.rsb-hp-tw-800 h2, .rsb-block-hp.rsb-hp-tw-800 h3, .rsb-block-hp.rsb-hp-tw-800 h4 { font-weight: 800; }
.rsb-block-hp.rsb-hp-tw-900 h1, .rsb-block-hp.rsb-hp-tw-900 h2, .rsb-block-hp.rsb-hp-tw-900 h3, .rsb-block-hp.rsb-hp-tw-900 h4 { font-weight: 900; }

/* Body weight helper */
.rsb-block-hp.rsb-hp-bw-300 p, .rsb-block-hp.rsb-hp-bw-300 li { font-weight: 300; }
.rsb-block-hp.rsb-hp-bw-400 p, .rsb-block-hp.rsb-hp-bw-400 li { font-weight: 400; }
.rsb-block-hp.rsb-hp-bw-500 p, .rsb-block-hp.rsb-hp-bw-500 li { font-weight: 500; }
.rsb-block-hp.rsb-hp-bw-600 p, .rsb-block-hp.rsb-hp-bw-600 li { font-weight: 600; }
.rsb-block-hp.rsb-hp-bw-700 p, .rsb-block-hp.rsb-hp-bw-700 li { font-weight: 700; }

/* Accent color (es. delta positivo, kicker, link hover) */
.rsb-block-hp[style*="--rsb-hp-accent"] .accent,
.rsb-block-hp[style*="--rsb-hp-accent"] .adv-platform__delta:not(.adv-platform__delta--neg),
.rsb-block-hp[style*="--rsb-hp-accent"] .adv-hp-breaking__label,
.rsb-block-hp[style*="--rsb-hp-accent"] .adv-hp__most-read h3 span {
    color: var(--rsb-hp-accent);
}

/* Gap utility — applied to known flex/grid containers inside HP blocks */
.rsb-block-hp[style*="--rsb-hp-gap"] .adv-hp__sub-cards,
.rsb-block-hp[style*="--rsb-hp-gap"] .adv-hp__rubrics,
.rsb-block-hp[style*="--rsb-hp-gap"] .adv-platforms,
.rsb-block-hp[style*="--rsb-hp-gap"] .adv-charts,
.rsb-block-hp[style*="--rsb-hp-gap"] .adv-charts__bars {
    gap: var(--rsb-hp-gap-active);
}

/* Visibility helpers (already in theme but ensured here) */
@media (min-width: 1025px) { .rsb-hide-desktop { display: none !important; } }
@media (max-width: 1024px) and (min-width: 769px) { .rsb-hide-tablet { display: none !important; } }
@media (max-width: 768px) { .rsb-hide-mobile { display: none !important; } }