/* Torp Block Transitions — Frontend */

.torp-has-transitions {
    position: relative !important;
    overflow: visible !important;
}

/* Override WP is-layout-constrained max-width on transition divs */
.torp-has-transitions > .torp-transition {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.torp-transition {
    pointer-events: none;
    z-index: 10;
}

.torp-transition svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Full-width override ──────────────────────────────────────
 * Breaks H transitions out to viewport width.
 * Works when the containing block is horizontally centered
 * (the standard case with is-layout-constrained).
 * ────────────────────────────────────────────────────────── */
.torp-transition--top.is-fullwidth,
.torp-transition--bottom.is-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    left: calc(50% - 50vw) !important;
    right: auto !important;
}

/* ── Responsive height ──────────────────────────────────────────
 * SVGs use preserveAspectRatio="none", so a fixed px height on a
 * much narrower mobile block squashes the shape (waves look denser
 * and jagged). Below 600px viewport width, switch each transition
 * over to its (usually smaller) --torp-h-m value, set per-instance
 * inline by PHP as a percentage of the desktop height.
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .torp-transition--top,
    .torp-transition--bottom {
        height: var(--torp-h-m) !important;
    }
    .torp-transition--left,
    .torp-transition--right {
        width: var(--torp-h-m) !important;
    }
}