/**
 * Section wrapper v2 styles — supports inc/block-part-top-v2.php /
 * block-part-bottom-v2.php (Phase 3 of the FSE/theme.json migration).
 *
 * FIX, NOT A NEW FEATURE: the original wrapper referenced
 * var(--DefaultTopPadding)/var(--DefaultBottomPadding) via Tailwind
 * arbitrary-value syntax, but neither custom property was ever actually
 * DEFINED anywhere in either theme — confirmed by a full-repo grep before
 * writing this file. In the live site today, "default" padding silently
 * resolves to no padding at all. This file defines real values (using the
 * theme.json 40px spacing preset) for the first time. Flagging this
 * explicitly since it is a visible behavior change, not an invented one —
 * "default" padding did not actually apply any spacing before this file
 * existed.
 *
 * Breakpoint scope: Phase 0's real-usage inventory found only `lg` (and,
 * rarely, md/sm/xl) meaningfully used across the 9 blocks — the theoretical
 * custom b1024/b767/b480/etc. breakpoints in tailwind.config.js were
 * essentially dead in practice. This file uses a single lg breakpoint
 * (1024px, matching Tailwind's default `lg`) for the two-step
 * default/double padding scale, consistent with real usage rather than the
 * unused custom breakpoint scale.
 */

:root {
    --DefaultTopPadding: var(--wp--preset--spacing--40);
    --DefaultBottomPadding: var(--wp--preset--spacing--40);
}

.section-wrap {
    position: relative;
}

.section-wrap--disabled {
    display: none;
}

/* --- Background layers (structural — no theme.json equivalent) --- */

.section-wrap__bg-image {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.section-wrap__bg-image--animate {
    /* Reserved for the existing animate__bgimage watch-scroll behavior
       (driven by data-animate="1" + front-end JS, unchanged by this
       migration) — kept as its own class so that JS hook still has
       something to target without depending on Tailwind's animate-* class. */
}

.section-wrap__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.section-wrap__bg-video {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.section-wrap__bg-video-placeholder {
    position: absolute;
    display: flex;
    inset: 0;
    z-index: 1;
}

.section-wrap__bg-video-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.section-wrap__bg-video-el {
    background-color: #000;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Spacing (theme.json-driven, replaces Tailwind pt-*/pb-* utilities) --- */

.section-wrap__pt--default {
    padding-top: var(--DefaultTopPadding);
}

.section-wrap__pt--none {
    padding-top: 0;
}

.section-wrap__pt--double {
    padding-top: var(--wp--preset--spacing--60);
}

@media (min-width: 1024px) {
    .section-wrap__pt--double {
        padding-top: var(--wp--preset--spacing--100);
    }
}

.section-wrap__pb--default {
    padding-bottom: var(--DefaultBottomPadding);
}

.section-wrap__pb--none {
    padding-bottom: 0;
}

.section-wrap__pb--double {
    padding-bottom: var(--wp--preset--spacing--60);
}

@media (min-width: 1024px) {
    .section-wrap__pb--double {
        padding-bottom: var(--wp--preset--spacing--100);
    }
}

/* Original used Tailwind's max-md: (max-width: 767.98px) for this toggle —
   matching that breakpoint exactly, not WP admin-bar's 782px, to preserve
   the same behavior. */
@media (max-width: 767px) {
    .section-wrap__pt-mobile-reduce {
        padding-top: var(--wp--preset--spacing--30);
    }

    .section-wrap__pb-mobile-reduce {
        padding-bottom: var(--wp--preset--spacing--30);
    }
}

/**
 * renderImage() (inc/helper-render.php) — used for section backgrounds
 * (via block-part-top.php) and directly inside several blocks (hero,
 * image-text-side). Replaces its previous "w-full h-full" Tailwind classes.
 */
.dilate-render-image,
.dilate-render-image__img {
    width: 100%;
    height: 100%;
}