/**
 * Decorations v2 — reproduced from the Figma mockups (layers « 🔶 Décor »,
 * placed by ATEQ), brand elements only: origami shapes and the pixel
 * pattern (assets/img/decor/). Desktop only (≥ 1024px).
 *
 * Positions come from the 1440px mockups:
 * - shapes against a screen edge use calc(50% - 50vw ± offset) on centred
 *   sections, so they stay on the edge at any width;
 * - shapes near content use an offset from the centre (calc(50% ± …)).
 * Textures (pixel pattern) sit behind the content and are cropped by their
 * section, like in Figma; shapes placed on the page itself (not inside a
 * section) may straddle two sections.
 * Also in other files: Home hero texture (Hero divisions block), CTA band
 * shapes (components.css), About hero cubes (Page hero block).
 */

/* Shapes placed past the screen edge (e.g. the Careers CTA ribbon) must
   never create a horizontal scrollbar */
html,
body {
	overflow-x: clip;
}

@media (min-width: 1024px) {

	/* ---------- Common ---------- */

	/* Textures: behind the content, cropped by their section */
	.home .latest-news,
	:is(.blog, .archive, .search) .page-title,
	.ateq-page-careers .feature-cards,
	.ateq-page-careers .testimonials,
	.ateq-page-about-us .timeline,
	.ateq-page-about-us .division-cards,
	.ateq-page-about-us .feature-cards,
	.home .worldwide-teaser {
		position: relative;
		isolation: isolate;
		overflow: clip;
	}

	/* Shapes that straddle two sections */
	.home .about,
	:is(.blog, .archive, .search) .featured-news__inner,
	:is(.blog, .archive, .search) .site-main,
	.single-post .article-header,
	.single-post .article-body,
	.page-template-page-worldwide .ww-regions,
	.ateq-page-careers .page-hero,
	.ateq-page-careers .split-media,
	.ateq-page-about-us .split-media {
		position: relative;
	}

	.home .latest-news::before,
	:is(.blog, .archive, .search) .page-title::before,
	.ateq-page-careers .feature-cards::before,
	.ateq-page-careers .feature-cards::after,
	.ateq-page-careers .testimonials::before,
	.ateq-page-about-us .timeline::before,
	.ateq-page-about-us .division-cards::before,
	.ateq-page-about-us .feature-cards::before,
	.home .worldwide-teaser::before,
	.home .about::before,
	:is(.blog, .archive, .search) .featured-news__inner::after,
	:is(.blog, .archive, .search) .site-main::after,
	.single-post .article-header::before,
	.single-post .article-body::before,
	.page-template-page-worldwide .ww-regions::before,
	.ateq-page-careers .page-hero::after,
	.ateq-page-careers .split-media::before,
	.ateq-page-about-us .split-media::before {
		content: "";
		position: absolute;
		z-index: 2;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}

	/* Pixel textures: behind the content */
	.home .latest-news::before,
	:is(.blog, .archive, .search) .page-title::before,
	.ateq-page-careers .feature-cards::before,
	.ateq-page-careers .feature-cards::after,
	.ateq-page-careers .testimonials::before,
	.ateq-page-about-us .timeline::before,
	.ateq-page-about-us .feature-cards::before {
		z-index: -1;
		background-image: url(../img/decor/pixels-light.svg);
	}

	.ateq-page-about-us .timeline::before {
		background-image: url(../img/decor/pixels-dark.svg);
	}

	/* ---------- Home ---------- */

	/* « The Group »: chevron turned 90°, top left against the edge */
	.home .about::before {
		top: -28px;
		left: calc(50% - 50vw + 30px);
		width: 174px;
		height: 230px;
		background-image: url(../img/decor/origami-chevron.svg);
		transform: rotate(90deg);
	}

	/* News: pixel pattern, top right */
	.home .latest-news::before {
		top: -21px;
		right: calc(50% - 50vw + 3px);
		width: 750px;
		height: 386px;
	}

	/* Worldwide teaser: ribbon in the top right corner */
	.home .worldwide-teaser::before {
		top: 1px;
		right: calc(50% - 50vw);
		width: 300px;
		height: 118px;
		background-image: url(../img/decor/origami-ribbon.svg);
	}

	/* ---------- News, categories, search ---------- */

	/* Page title: pixel pattern, centre left */
	:is(.blog, .archive, .search) .page-title::before {
		top: -59px;
		left: calc(50% - 329px);
		width: 557px;
		height: 286px;
	}

	/* Featured article: ribbon under the bottom right corner of the image
	   (image = 59.375 % of the container width, ratio 760 / 480) */
	:is(.blog, .archive, .search) .featured-news__inner {
		--featured-width: min(var(--container), 100vw - 2 * var(--gutter));
	}

	:is(.blog, .archive, .search) .featured-news__inner::after {
		top: calc(var(--space-64) + var(--featured-width) * 0.375 - 2px);
		left: calc(var(--gutter) + var(--featured-width) * 0.59375 - 300px);
		width: 300px;
		height: 118px;
		background-image: url(../img/decor/origami-ribbon.svg);
	}

	/* Above the footer: chevron on the left, cut by the footer */
	:is(.blog, .archive, .search) .site-main {
		overflow: clip;
	}

	:is(.blog, .archive, .search) .site-main::after {
		bottom: -65px;
		left: -29px;
		width: 155px;
		height: 204px;
		background-image: url(../img/decor/origami-chevron.svg);
	}

	/* ---------- Article ---------- */

	/* Chevron on the left edge, level with the end of the header */
	.single-post .article-header::before {
		top: 307px;
		left: calc(50% - 50vw - 18px);
		width: 197px;
		height: 260px;
		background-image: url(../img/decor/origami-chevron.svg);
	}

	/* Zigzag flipped, on the right edge of the text */
	.single-post .article-body::before {
		top: 512px;
		right: calc(50% - 50vw - 32px);
		width: 190px;
		height: 482px;
		background-image: url(../img/decor/origami-zigzag.svg);
		transform: scaleX(-1);
	}

	/* ---------- World ---------- */

	/* Cubes on the right edge, peeking below the region tabs */
	.page-template-page-worldwide .ww-regions::before {
		top: -45px;
		right: calc(50% - 50vw - 6px);
		z-index: 1;
		width: 142px;
		height: 109px;
		background-image: url(../img/decor/origami-cubes.svg);
	}

	/* ---------- Careers ---------- */

	/* Hero: chevron flipped, bottom right */
	.ateq-page-careers .page-hero::after {
		top: 340px;
		right: calc(50% - 50vw - 35px);
		width: 318px;
		height: 420px;
		background-image: url(../img/decor/origami-chevron.svg);
		transform: scaleX(-1);
	}

	/* Values: pixel pattern top right and bottom left */
	.ateq-page-careers .feature-cards::before {
		top: 700px;
		left: calc(50% - 50vw - 160px);
		width: 750px;
		height: 386px;
	}

	.ateq-page-careers .feature-cards::after {
		top: -48px;
		right: calc(50% - 50vw - 88px);
		width: 732px;
		height: 376px;
	}

	/* Profiles: ribbon top right */
	.ateq-page-careers .split-media::before {
		top: -2px;
		right: calc(50% - 50vw - 29px);
		width: 320px;
		height: 126px;
		background-image: url(../img/decor/origami-ribbon.svg);
	}

	/* Testimonials: pixel pattern top left */
	.ateq-page-careers .testimonials::before {
		top: -89px;
		left: calc(50% - 50vw - 19px);
		width: 407px;
		height: 209px;
	}

	/* ---------- About us ---------- */

	/* History (black): faint white pixel pattern, top right */
	.ateq-page-about-us .timeline::before {
		top: -60px;
		right: calc(50% - 50vw - 57px);
		width: 937px;
		height: 483px;
	}

	/* Divisions: cubes top right */
	.ateq-page-about-us .division-cards::before {
		top: 86px;
		right: calc(50% - 50vw + 15px);
		width: 253px;
		height: 195px;
		background-image: url(../img/decor/origami-cubes.svg);
	}

	/* Commitments: pixel pattern top right */
	.ateq-page-about-us .feature-cards::before {
		top: -80px;
		right: calc(50% - 50vw - 103px);
		width: 703px;
		height: 362px;
	}

	/* Headquarters: chevron on the top left corner of the photo */
	.ateq-page-about-us .split-media::before {
		top: -96px;
		left: calc(50% - 50vw - 15px);
		width: 120px;
		height: 158px;
		background-image: url(../img/decor/origami-chevron.svg);
	}
}

/* About hero — cubes turned 90°, bottom right (Figma: 326 × 422 at 1023, 298
   in the 1440 × 720 hero). The rotation is on the drawing, not on the
   container, which keeps its entrance animation (motion.css). */
@media (min-width: 1280px) {

	.ateq-page-about-us .page-hero--origami .page-hero__origami {
		top: 298px;
		right: calc(50% - 50vw + 91px);
		bottom: auto;
		left: auto;
		width: 326px;
		height: 422px;
	}

	.ateq-page-about-us .page-hero--origami .page-hero__origami svg {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 422px;
		height: 326px;
		max-width: none;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}