/* ==================================================

	Posters

	Figma reports the rotated bbox; values here are the unrotated box re-centered on the same point, rotation reapplied in CSS.

	@related stacking_order

================================================== */

.poster-layer {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: var(--z-poster);

	width: var(--container-w);
	height: 0;

	transform: translateX(-50%);
	pointer-events: none;
}

.poster {
	position: absolute;

	pointer-events: none;

	transform: rotate(var(--poster-rotate));
	transition: transform 0.2s ease;
}

.poster__image {
	width: 100%;
	height: auto;
}

/* PNGs carry transparent padding + tape; hit area trimmed to the paper's alpha bbox */
.poster__hit {
	position: absolute;
	top: var(--paper-top);
	right: var(--paper-right);
	bottom: var(--paper-bottom);
	left: var(--paper-left);

	pointer-events: auto;
}

/* -------------------------------------
	Individual placements
------------------------------------- */

.poster--taste-tester {
	--poster-rotate: -4.5deg;
	--paper-top: 4.7%;
	--paper-right: 4.7%;
	--paper-bottom: 5.2%;
	--paper-left: 5.1%;

	top: 600px;
	left: -202px;

	width: 444px;
}

.poster--salary {
	--poster-rotate: 4deg;
	--paper-top: 6.2%;
	--paper-right: 3.9%;
	--paper-bottom: 4.1%;
	--paper-left: 4.9%;

	top: 362px;
	left: 641px;

	width: 493px;
}

.poster--apply-today {
	--poster-rotate: 4.5deg;
	--paper-top: 5.1%;
	--paper-right: 4%;
	--paper-bottom: 4.9%;
	--paper-left: 4.8%;

	top: 1265px;
	left: 659px;

	width: 428px;
}

/* -------------------------------------
	Hover tilt toward center
------------------------------------- */

.poster--taste-tester:hover {
	--poster-rotate: -3.5deg;
}

.poster--salary:hover {
	--poster-rotate: 2deg;
}

.poster--apply-today:hover {
	--poster-rotate: 3.5deg;
}

/* -------------------------------------
	=Mobile
------------------------------------- */

@media ( max-width: 1076px ) {

	.poster-layer {
		/* desktop post-1 copy wraps a line longer than the mobile frame's; two posters carry the offset. Delete if copy is ever split per breakpoint. */
		--poster-feed-drift: 13px;

		width: 100%;
		max-width: var(--mobile-col-w);
	}

	.poster--salary {
		top: -28px;
		left: 41.415%;  /* 144.95 / 350 */

		width: 67.857%; /* 237.5 / 350 */
	}

	.poster--taste-tester {
		top: calc(608.5px + var(--poster-feed-drift));
		left: 7.244%;   /* 25.35 / 350 */

		width: 66%;     /* 231 / 350 */
	}

	.poster--apply-today {

		top: calc(1637.5px + var(--poster-feed-drift));

		left: 45.701%;  /* 159.95 / 350 */

		width: 54.857%; /* 192 / 350 */
	}

	[data-milestone="8-27"] .poster--apply-today {
		top: calc(1547.5px + var(--poster-feed-drift));
	}

	[data-milestone="9-2"] .poster--apply-today {
		top: calc(1637.5px + var(--poster-feed-drift));
	}

	[data-milestone="9-7"] .poster--apply-today {
		top: calc(1637.5px + var(--poster-feed-drift));
	}

}