/* ==========================================================================
   Surface padding — the gap an edge implies
   ==========================================================================

   Added 2026-09-14 (step 7). When a surface effect moved off a media part's
   outermost box and onto the box that is actually the object — see
   Plexa_Part::surface_target() — the hero's border landed on
   `.plexa-hero__content`, whose base rule is `padding: 0 1rem`. Zero vertical
   padding is invisible on a box with no edge and wrong the instant it has one:
   the eyebrow sat ON the top line and the button ON the bottom one.

   So a content box that carries a surface gets a gap between the edge and what
   it contains. `Plexa_Part::surface_classes()` adds this class, and only for a
   'content' target — a 'media' target must NOT be padded, because a frame
   should hug its photograph and padding there would show a band of ground
   between the frame and the picture.

   One custom property so a composition can tighten or loosen it without
   authoring a length at the call site.
   ========================================================================== */

:root {
    --surface-fx-pad: 2rem;
    --surface-fx-pad-glow: 3rem;
}

/* Doubled deliberately. A part's own $base_css is injected in wp_footer, AFTER
   every stylesheet, so `.plexa-hero__content { padding: 0 1rem }` beats a
   single-class rule of equal specificity no matter what this file says. The
   doubled class raises this to 0,2,0 without naming any part, which is what
   keeps it a general rule rather than a list of exceptions. */
.surface-fx-pad.surface-fx-pad {
    padding: var(--surface-fx-pad);
}

/* A GLOW NEEDS MORE ROOM THAN AN EDGE.
   
   Rick, 2026-09-14, on the hero: "top and bottom padding issues with borders".
   Measured rather than assumed — the class IS applied and 2rem IS painted on
   all four sides. The gap only LOOKS short on the glow presets, because
   glow-*, neon-* and the shadow glows paint OUTSIDE the border box: the visual
   edge sits well beyond the padding box, so the text appears to crowd an edge
   that is not where the padding thinks it is.

   So the fix is not more padding everywhere — that would loosen every flat
   surface to solve a problem only the glows have. It is more padding where
   there is a glow to clear. */
.surface-fx-pad.surface-fx-pad[class*="glow"],
.surface-fx-pad.surface-fx-pad[class*="neon"] {
    padding: var(--surface-fx-pad-glow);
}

@media (max-width: 767px) {
    :root {
        --surface-fx-pad: 1.25rem;
        --surface-fx-pad-glow: 1.75rem;
    }
}