/*
 * Variant-driven styling for the core Container widget (see functions.php).
 *
 * The "Variant" dropdown stamps redteam-container--{default|section} on the wrapper, and the
 * padding presets stamp a size class (redteam-container-{section-pt|section-pb}--<size>).
 * This file owns:
 *
 *   - PADDING mapping: <size> class -> Elementor's own --padding-* vars, from the --spacer-* tokens.
 *   - SECTION: fixed left/right (inline) padding + the positional first-child nav clearance.
 *   - SECTION masks: the SVG mask + blend treatment (a complex treatment, not a single native var).
 *
 * The native Padding control is hidden unless variant=default, so nothing competes and no
 * !important is needed anywhere below.
 */


/* ---------- PADDING (size class -> --spacer token) ---------- */

/*
 * Size keyword -> token. The controls only pick a keyword; the value lives here, so change what
 * "Medium" means once. Scoped to .e-con to beat Elementor's own `.e-con { --padding-*: … }`
 * default (0,2,0 > 0,1,0) — no !important. "custom" has no rule: the native Padding control
 * drives it instead.
 */
.e-con.redteam-container-section-pt--none   { --padding-top: var(--s0); }
.e-con.redteam-container-section-pt--small  { --padding-top: var(--s7); }
.e-con.redteam-container-section-pt--medium { --padding-top: var(--s8); }
.e-con.redteam-container-section-pt--large  { --padding-top: var(--s9); }

.e-con.redteam-container-section-pb--none   { --padding-bottom: var(--s0); }
.e-con.redteam-container-section-pb--small  { --padding-bottom: var(--s7); }
.e-con.redteam-container-section-pb--medium { --padding-bottom: var(--s8); }
.e-con.redteam-container-section-pb--large  { --padding-bottom: var(--s9); }

/* Linked (redteam_container_section_padding — "Link Top & Bottom Padding" on, the default):
 * same mapping, both sides from one class. */
.e-con.redteam-container-section-pad--none   { --padding-top: var(--s0); --padding-bottom: var(--s0); }
.e-con.redteam-container-section-pad--small  { --padding-top: var(--s7); --padding-bottom: var(--s7); }
.e-con.redteam-container-section-pad--medium { --padding-top: var(--s8); --padding-bottom: var(--s8); }
.e-con.redteam-container-section-pad--large  { --padding-top: var(--s9); --padding-bottom: var(--s9); }



/* ---------- GAP (size class -> --gap / --row-gap / --column-gap) ---------- */

/*
 * The container applies `gap: var(--row-gap) var(--column-gap)`, so set those (plus --gap for
 * parity, as the native control does). Scoped to .e-con to beat Elementor's `.e-con { --row-gap:
 * … }` default (0,2,0 > 0,1,0); the native Gaps control is hidden unless "custom", so nothing
 * competes. "custom" has no rule here.
 */
.e-con.redteam-container-gap--small {
	--gap: var(--spacer-small);
	--row-gap: var(--spacer-small);
	--column-gap: var(--spacer-small);
}
.e-con.redteam-container-gap--medium {
	--gap: var(--spacer-medium);
	--row-gap: var(--spacer-medium);
	--column-gap: var(--spacer-medium);
}
.e-con.redteam-container-gap--large {
	--gap: var(--spacer-large);
	--row-gap: var(--spacer-large);
	--column-gap: var(--spacer-large);
}



/* ---------- HORIZONTAL SCROLL (mobile card scroller) ---------- */

/*
 * Flattens the container into one non-wrapping flex row of content-width children with x
 * scroll-snap — one card per screen, swipeable. Both --yes (Mobile Only) and --desktop (Desktop &
 * Mobile) share this <=960px treatment; only --desktop also gets the >960px block further down
 * (60%-wide children). Desktop therefore implies mobile; the reverse never happens.
 *
 * Drives Elementor's OWN container vars (--display / --overflow / --flex-direction / --flex-wrap),
 * per the theme styling rule. Setting --display: flex is what makes this work on GRID containers
 * too — the grid template vars simply stop applying, so there's nothing to fight.
 *
 * REQUIRES a Full Width container (.e-con-full): the children must be DIRECT children, and a boxed
 * container interposes .e-con-inner.
 *
 * Constraints, all load-bearing:
 *  1. #content prefix (1,2,0) — Elementor bakes per-instance control values into
 *     `.elementor-{page} .elementor-element.elementor-element-{id}` (0,3,0), which beats a plain
 *     two-class selector. Same trick as the section nav clearance below. No !important needed.
 *  2. --flex-wrap-mobile must be set too: frontend.css has
 *     `@media (max-width: 767px) { .e-con.e-flex { --flex-wrap: var(--flex-wrap-mobile) } }` with
 *     that var defaulting to `wrap`, which would re-wrap the row at phone widths.
 *  3. --overflow is the `overflow` SHORTHAND, so this scrolls both axes (CSS forces overflow-y to
 *     auto once overflow-x is set anyway). Don't combine with a container that intentionally
 *     overflows, e.g. one carrying a Section Mask.
 *  4. FULL-BLEED TRACK: the --width, --margin and --padding values are interdependent — Elementor
 *     sets an explicit `width: var(--width)`, and negative margins don't expand an explicitly-sized
 *     block, so the width must grow to 100vw and the padding must bring the CONTENT box back to
 *     exactly 100%. That identity is what makes `flex-basis: 100%` equal one content width.
 *     Viewport-relative on purpose: sections are boxed, so the real inset is section padding plus a
 *     centring margin that only exists above ~496px — `50vw - 50%` tracks both at any nesting depth.
 *  5. NO scroll-padding: `%` there resolves against the SCROLLPORT (not the containing block), so
 *     `calc(50vw - 50%)` computes to ~0 and mandatory snapping yanks cards to the viewport edge.
 *     Children snap on `center` instead — the bleed is symmetric, so that lands on the content edge.
 *  6. overflow-x: clip on the owning section — `100vw` includes the classic scrollbar in some
 *     browsers, which would give the PAGE a horizontal scrollbar. `clip` is the one overflow value
 *     that does not force the other axis to `auto`. :has() keeps the clipping context off every
 *     other section.
 *
 * While on, this deliberately overrides any left/right padding set via the native Padding control
 * — the bleed padding is structural, not decorative.
 */
@media (width <= 960px) {
	#content .e-con:is(.redteam-container-hscroll--yes, .redteam-container-hscroll--desktop) {
		--display: flex;
		--flex-direction: row;
		--flex-wrap: nowrap;
		--flex-wrap-mobile: nowrap;
		--overflow: auto;

		/* Bleed the track to both viewport edges, then pad the content box back to exactly 100%
		 * (the original content width). Interdependent — see constraint 4. */
		--width: 100vw;
		--margin-left: calc(50% - 50vw);
		--margin-right: calc(50% - 50vw);
		--padding-left: calc(50vw - 50%);
		--padding-right: calc(50vw - 50%);

		/* No scroll-padding — see constraint 5; the children snap on `center` instead. */
		scroll-snap-type: x mandatory;
		/* Keep a horizontal swipe from bubbling up into page scroll / browser back-nav. */
		overscroll-behavior-x: contain;
		/* The snap points are the affordance; the scrollbar itself is just noise here. */
		scrollbar-width: none;
		/* Mouse-drag affordance (drag-scroll.js); harmless on touch, which ignores `cursor`. */
		cursor: grab;
	}

	#content .e-con:is(.redteam-container-hscroll--yes, .redteam-container-hscroll--desktop)::-webkit-scrollbar {
		display: none;
	}

	/*
	 * One card per screen. 100% resolves against the flex container's CONTENT box, which the bleed
	 * keeps equal to the section's content width. `center`, not `start` — see constraint 5.
	 */
	#content .e-con:is(.redteam-container-hscroll--yes, .redteam-container-hscroll--desktop) > :is(.elementor-widget, .e-con) {
		flex: 0 0 100%;
		scroll-snap-align: center;
		/*
		 * One card per gesture. `mandatory` only guarantees the scroll LANDS on a snap point, not
		 * that it can't fly past several en route; `always` stops at each in turn. Trade-off: no
		 * fast-flick from first card to last — correct for a 3-4 card strip.
		 */
		scroll-snap-stop: always;
	}

	/* Absorb sub-pixel/scrollbar overshoot from the 100vw track — see constraint 6. */
	section.e-con.redteam-container--section:has(.redteam-container-hscroll--yes, .redteam-container-hscroll--desktop) {
		overflow-x: clip;
	}
}



/* ---------- HORIZONTAL SCROLL (desktop) ---------- */

/*
 * Above 960px ONLY --desktop gets the scroller; --yes stays inert here. Same mechanism and same
 * constraints 1-6 as the mobile block, except each child is 60% of the content width instead of
 * 100% (multiple cards peek into view). Kept as a separate block so the mobile treatment that
 * existing --yes instances depend on never has to change.
 */
@media (width > 960px) {
	#content .e-con.redteam-container-hscroll--desktop {
		--display: flex;
		--flex-direction: row;
		--flex-wrap: nowrap;
		--overflow: auto;

		--width: 100vw;
		--margin-left: calc(50% - 50vw);
		--margin-right: calc(50% - 50vw);
		--padding-left: calc(50vw - 50%);
		--padding-right: calc(50vw - 50%);

		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Mouse-drag affordance (drag-scroll.js) — a mouse has no horizontal wheel axis without
		 * Shift, so dragging is the primary way a desktop user scrolls this. */
		cursor: grab;
	}

	#content .e-con.redteam-container-hscroll--desktop::-webkit-scrollbar {
		display: none;
	}

	/* 60% of the content width per card, vs. 100% on mobile. */
	#content .e-con.redteam-container-hscroll--desktop > :is(.elementor-widget, .e-con) {
		flex: 0 0 60%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	section.e-con.redteam-container--section:has(.redteam-container-hscroll--desktop) {
		overflow-x: clip;
	}
}

/*
 * Active-drag state, stamped by drag-scroll.js for the duration of a confirmed mouse drag only
 * (never on load, never for touch/pen). Unscoped by breakpoint on purpose: the class can only be
 * present where scrolling is already active.
 */
.redteam-container-hscroll--dragging {
	cursor: grabbing;
	user-select: none;
}

/*
 * Backstop for the native-drag hijack drag-scroll.js handles: card widgets (post-card,
 * featured-post) make nearly the whole card one `<a>`, and links/images are draggable by default.
 * The script's pointerdown preventDefault() is the real fix; this covers it failing to load.
 */
.redteam-container-hscroll--yes a,
.redteam-container-hscroll--yes img,
.redteam-container-hscroll--desktop a,
.redteam-container-hscroll--desktop img {
	-webkit-user-drag: none;
	user-drag: none;
}



/* ---------- CUSTOM BACKGROUNDS ---------- */

.bg-white-200--pearl-200 {background: var(--color-white-200--pearl-200);}
.bg-white-200--red-200 {background: var(--color-white-200--red-200);}



/* ---------- ALT IMAGE MASK (manual utility — no control; dev types "alt-img-mask" into the
   Container's own CSS Classes field) ---------- */

/*
 * Full-image-card shape: rounded rectangle with a small diagonal notch near the top edge. External
 * SVG as mask-image, since `clip-path: url()` on a file is Firefox-only. The mask keeps its
 * proportions only near its own 513:1671 (~1:3.26) ratio — pair with a container of that shape.
 */
.e-con.alt-img-mask {
	-webkit-mask-image: url("../../assets/masks/mask-full_image_card.svg");
	mask-image: url("../../assets/masks/mask-full_image_card.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top left;
	mask-position: top left;
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
}



/* ---------- 404 MASK (manual utility — no control; dev types "mask-404" into the
   Container's own CSS Classes field) ---------- */

/*
 * 404-page wrapper shape: rounded rectangle with a diagonal notch cut out of the bottom-right
 * corner. Same external-SVG-as-mask idiom as alt-img-mask above. Keep the container near the
 * mask's own 770:421 (~1.83:1) ratio so the notch's angle reads as designed.
 */
.e-con.mask-404 {
	-webkit-mask-image: url("../../assets/masks/mask-404.svg");
	mask-image: url("../../assets/masks/mask-404.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top center;
	mask-position: top center;
	-webkit-mask-size: cover;
	mask-size: cover;
}



/* ---------- SECTION ---------- */

/*
 * Fixed horizontal padding (top/bottom come from the size classes above). Not user-editable by
 * design, other than the "Disable Default Horizontal Padding" toggle below.
 */
section.e-con.redteam-container--section {
	--padding-left: var(--s5);
	--padding-right: var(--s5);
}

/*
 * "Disable Default Horizontal Padding" (redteam_container_section_disable_h_padding, responsive
 * SWITCHER, Desktop+Tablet). Deliberately UNSCOPED by breakpoint: a SWITCHER stamps no class for
 * its unset state, so Desktop-on with Tablet untouched must also zero the padding at Tablet —
 * the "unset = same as Desktop" convention this extension uses throughout. The Tablet-tier rule
 * below only matters when Tablet is toggled independently.
 */
section.e-con.redteam-container--section.redteam-container-section-no-h-padding--yes {
	--padding-left: var(--s0);
	--padding-right: var(--s0);
}

/*
 * The first top-level section sits under the fixed nav, so it overrides the Section Padding Top
 * control for clearance. Scoped to #content (never a header/footer Theme Builder location) and to
 * .e-parent (top-level containers only). The id out-specifies the control's per-instance rule.
 */
#content section.e-con.e-parent.redteam-container--section:first-child {
	--padding-top: calc(var(--s8) * 2);
}


@media (width <= 960px) {
	/*
	 * <=960px the fluid rem-as-px scaling is off (style.css pins html font-size to 1px), so the
	 * fixed inline padding steps down explicitly. Top/bottom stay control-driven.
	 */
	section.e-con.redteam-container--section {
		--padding-left: var(--s4);
		--padding-right: var(--s4);
	}

	#content section.e-con.e-parent.redteam-container--section:first-child {
		--padding-top: calc(73rem + var(--s6));
	}

	/*
	 * Step-down for "small"/"medium" only ("large"/"none" keep their desktop values). Same .e-con
	 * specificity as the desktop rules — wins on source order, so these must stay after them.
	 * Applies when the Tablet tier is left unset (Elementor stamps no "-tablet--" class then).
	 *
	 * Both step to the SAME --s5 on purpose: they are intentionally indistinguishable below this
	 * breakpoint, and still differ on desktop (--s7 vs --s8).
	 */
	.e-con.redteam-container-section-pt--small  { --padding-top: var(--s5); }
	.e-con.redteam-container-section-pt--medium { --padding-top: var(--s5); }

	.e-con.redteam-container-section-pb--small  { --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pb--medium { --padding-bottom: var(--s5); }

	/* Linked equivalent (redteam_container_section_padding): same step-down, both sides at once. */
	.e-con.redteam-container-section-pad--small  { --padding-top: var(--s5); --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pad--medium { --padding-top: var(--s5); --padding-bottom: var(--s5); }

	/*
	 * Explicit Tablet-tier choices ("-tablet--" classes, auto-generated by add_responsive_control).
	 * These always win at this breakpoint regardless of the Desktop value — same specificity, later
	 * source order — and cover real mobile widths too, since no narrower "-mobile--" tier exists.
	 * No rule for "custom" (the native padding_tablet field drives it) or "" (Same as Desktop).
	 */
	.e-con.redteam-container-section-pt-tablet--none   { --padding-top: var(--s0); }
	.e-con.redteam-container-section-pt-tablet--small  { --padding-top: var(--s5); }
	.e-con.redteam-container-section-pt-tablet--medium { --padding-top: var(--s5); }
	.e-con.redteam-container-section-pt-tablet--large  { --padding-top: var(--s9); }

	.e-con.redteam-container-section-pb-tablet--none   { --padding-bottom: var(--s0); }
	.e-con.redteam-container-section-pb-tablet--small  { --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pb-tablet--medium { --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pb-tablet--large  { --padding-bottom: var(--s9); }

	/* Linked equivalent (redteam_container_section_padding's own Tablet-tier sibling). */
	.e-con.redteam-container-section-pad-tablet--none   { --padding-top: var(--s0); --padding-bottom: var(--s0); }
	.e-con.redteam-container-section-pad-tablet--small  { --padding-top: var(--s5); --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pad-tablet--medium { --padding-top: var(--s5); --padding-bottom: var(--s5); }
	.e-con.redteam-container-section-pad-tablet--large  { --padding-top: var(--s9); --padding-bottom: var(--s9); }

	/*
	 * "Disable Default Horizontal Padding", Tablet tier. Only reached when Tablet is toggled
	 * independently of Desktop — Desktop alone is already handled by the unscoped rule above.
	 */
	section.e-con.redteam-container--section.redteam-container-section-no-h-padding-tablet--yes {
		--padding-left: var(--s0);
		--padding-right: var(--s0);
	}
}


/* ---------- SECTION MASKS ---------- */

/*
 * "Section Mask" stamps redteam-container-section-mask--{none|bottom-right|bottom-left}; "none"
 * intentionally has no rules. Both presets clip the container to an SVG in assets/masks/ applied
 * as a CSS mask (external-file `clip-path: url()` is Firefox-only). URLs are relative to this
 * stylesheet.
 *
 * Sizing: width 100% + 48rem, centered, so the mask overflows the container by 24rem per side —
 * the container's own edges sit under the solid interior of the shape, never its SVG edges. Height
 * `auto` (intrinsic 2560:30448) keeps the notch's proportions, anchored bottom so the notch lands
 * on the container's bottom edge while the solid part runs past the top.
 */

section.e-con.redteam-container-section-mask--bottom-right,
section.e-con.redteam-container-section-mask--bottom-left {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: calc(100% + 48rem) auto;
	mask-size: calc(100% + 48rem) auto;

	/*
	 * Rendered depth of the notch — the single source of truth for the blend below: the masked
	 * section's extra bottom padding and the next section's pull-up + top padding all derive from
	 * it, so they stay matched to the notch.
	 *
	 * Desktop is width-derived, matching the `auto` mask height: the SVGs are 2560 wide with a
	 * 100-unit bottom indent, so the notch is mask width * 100/2560. <=960px pins it flat (see the
	 * media query below, which also resizes the mask to match).
	 */
	--redteam-mask-indent: calc((100% + 48rem) * 100 / 2560);

	/*
	 * The next section is pulled up into this one's notch; without a stacking context it would
	 * paint on top (later in the DOM) and hide the notch. Painting this section above it is what
	 * makes the transparent notch reveal the section beneath.
	 */
	position: relative;
	z-index: 1;

	/*
	 * One indent's worth of extra bottom padding so the content clears the notch. Adding it to
	 * --padding-block-end (rather than --padding-bottom, which the control owns) keeps it additive
	 * and lands on the element Elementor pads — .e-con-inner boxed, .e-con-full full-width.
	 */
	--padding-block-end: calc(var(--padding-bottom, 0rem) + var(--redteam-mask-indent));
}

/*
 * Blend the section FOLLOWING a masked one into the notch: pull it up by one indent and add the
 * same indent to its top padding, so its background slides into the notch while its content stays
 * put and later sections are unaffected (margin and padding cancel over the box height). The
 * indent is recomputed from the same formula because siblings don't inherit it.
 */
section.e-con.redteam-container-section-mask--bottom-right + section.e-con,
section.e-con.redteam-container-section-mask--bottom-left + section.e-con {
	--redteam-mask-indent: calc((100% + 48rem) * 100 / 2560);
	margin-top: calc(var(--redteam-mask-indent) * -1);
	--padding-block-start: calc(var(--padding-top, 0rem) + var(--redteam-mask-indent));
}

/*
 * A "small" top padding on the following section leaves its content too close under the notch, so
 * add --s5 on top of the overlap. Only the padding grows; the pull-up is unchanged. One extra
 * class beats the rule above.
 *
 * UNSCOPED, which is right for "small at Desktop, Tablet unset" (the inherit case). The two rules
 * in the media query below cover what that can't: Tablet explicitly small when Desktop isn't, and
 * Desktop small with Tablet overridden away from small.
 */
section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt--small,
section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt--small,
section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad--small,
section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad--small {
	--padding-block-start: calc(var(--padding-top, 0rem) + var(--redteam-mask-indent) + var(--s5));
}

@media (width <= 960px) {
	/* Tablet EXPLICITLY "small", whatever Desktop is — the unscoped rule above only sees the
	 * Desktop-tier class. */
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt-tablet--small,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt-tablet--small,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad-tablet--small,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad-tablet--small {
		--padding-block-start: calc(var(--padding-top, 0rem) + var(--redteam-mask-indent) + var(--s5));
	}

	/*
	 * Cancel: Desktop "small" (so the unscoped rule fired) but Tablet overridden away from small,
	 * so the effective value here isn't small any more. Two classes beat the one above, and this
	 * is scoped, so desktop keeps its bonus.
	 */
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--none,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--none,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--medium,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--medium,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--large,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--large,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--custom,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pt--small.redteam-container-section-pt-tablet--custom,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--none,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--none,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--medium,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--medium,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--large,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--large,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--custom,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con.redteam-container-section-pad--small.redteam-container-section-pad-tablet--custom {
		--padding-block-start: calc(var(--padding-top, 0rem) + var(--redteam-mask-indent));
	}
}

/*
 * Mobile: pin the notch to a flat 39rem rather than letting the width-derived value keep shrinking.
 * Both halves are needed —
 *  - the indent var, on masked sections AND their following siblings (siblings don't inherit it),
 *    so the padding/pull-up geometry lands at 39rem;
 *  - a matching mask resize, via WIDTH with height left `auto` so the SVG keeps its ratio. Notch
 *    depth is always mask width * 100/2560, so width = indent * 2560/100. Pinning the HEIGHT
 *    instead holds the depth but vertically stretches the shape.
 */
@media (width <= 960px) {
	section.e-con.redteam-container-section-mask--bottom-right,
	section.e-con.redteam-container-section-mask--bottom-left,
	section.e-con.redteam-container-section-mask--bottom-right + section.e-con,
	section.e-con.redteam-container-section-mask--bottom-left + section.e-con {
		--redteam-mask-indent: 39rem;
	}

	section.e-con.redteam-container-section-mask--bottom-right,
	section.e-con.redteam-container-section-mask--bottom-left {
		-webkit-mask-size: calc(var(--redteam-mask-indent) * 2560 / 100) auto;
		mask-size: calc(var(--redteam-mask-indent) * 2560 / 100) auto;
	}

	/*
	 * Slide each notch into its corner so it covers ~25% of the width instead of ~half. The mask is
	 * far wider than a phone viewport, so mask-position picks which slice of the fixed-depth notch
	 * shows. Percentages (not lengths) keep the mask covering both container edges at every width.
	 * Coverage grows somewhat toward 960px — an exact fixed 25% would need a mobile SVG.
	 */
	section.e-con.redteam-container-section-mask--bottom-right {
		-webkit-mask-position: 35% bottom;
		mask-position: 35% bottom;
	}

	section.e-con.redteam-container-section-mask--bottom-left {
		-webkit-mask-position: 65% bottom;
		mask-position: 65% bottom;
	}
}

section.e-con.redteam-container-section-mask--bottom-right {
	-webkit-mask-image: url("../../assets/masks/mask-section-bottom_right.svg");
	mask-image: url("../../assets/masks/mask-section-bottom_right.svg");
}

section.e-con.redteam-container-section-mask--bottom-left {
	-webkit-mask-image: url("../../assets/masks/mask-section-bottom_left.svg");
	mask-image: url("../../assets/masks/mask-section-bottom_left.svg");
}