/* Decorative Stripes
   Thin band carrying the yellow-stripes graphic (unscaled, right-aligned) plus
   a gold rule running edge to edge. Background color + padding come from the
   block's color/spacing supports; the left/right field flips the anchoring.
   Height: 60px mobile, 120px desktop (a minimum — block padding adds to it). */

.decorative-stripes--section {
	position: relative;
	min-height: 60px;
	background-image: url('../../images/yellow-stripes.png');
	background-repeat: no-repeat;
	background-size: auto;           /* no scaling — render at natural size */
	overflow: hidden;
}

/* Left: stripes anchored to the top-right corner. */
.decorative-stripes--section.position-left-mod {
	background-position: top right;
}

/* Right: stripes rotated 180° in the bottom-right corner. CSS can't rotate a
   background image directly, so paint it on ::before and transform that. The
   image is anchored top-left before the turn so the 180° rotation lands it back
   in the bottom-right (rotation maps top-left -> bottom-right). */
.decorative-stripes--section.position-right-mod {
	background-image: none;
}

.decorative-stripes--section.position-right-mod::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url('../../images/yellow-stripes.png');
	background-repeat: no-repeat;
	background-size: auto;            /* no scaling */
	background-position: top left;
	transform: rotate(180deg);
}

/* Gold rule across the full width, sitting over the stripes. */
.decorative-stripes--section::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-gold);
}

/* Left -> ~30% up from the bottom. Right -> ~30% down from the top. */
.decorative-stripes--section.position-left-mod::after {
	bottom: 30%;
}

.decorative-stripes--section.position-right-mod::after {
	top: 30%;
}

@media (min-width: 992px) {
	.decorative-stripes--section {
		min-height: 120px;
	}
}