/* Workforce model section (Educate / Develop / Deploy) — self-contained styles.
   Layout uses theme Tailwind utilities; this file holds the section's own
   theming + reveal animation so the part is portable across templates. */

.te-workforce {
	background: #F8F6F3;
}

/* Card theming (shared by the mobile body blocks and the desktop cards). */
/* Educate: #8e673a (the About education-panel tan) — the old #A8845B gave
   the white/85 body text ~2.9:1 (AA needs 4.5). Full-white body on this
   tan reads 4.8:1; Develop/Deploy already pass (4.6/5.2). */
.te-wf-educate { background: #8e673a; }
.te-wf-educate p { color: #ffffff; }
.te-wf-develop { background: #2263C5; }
.te-wf-deploy  { background: #2d6a2d; }

/* Desktop only: outer cards angle inward (perspective). The mobile blocks are
   hidden at md+, so these transforms only affect the desktop layout. */
@media (min-width: 768px) {
	.te-wf-educate { transform: perspective(700px) rotateY(7deg); transform-origin: right center; }
	.te-wf-deploy  { transform: perspective(700px) rotateY(-7deg); transform-origin: left center; }
}

/* Subtext: one line on full desktop only — below 1320px the sentence is wider
   than the viewport and nowrap clips it, so let it wrap naturally there. */
@media (min-width: 1320px) {
	.te-wf-subtext { white-space: nowrap; }
}

/* Closing line: on desktop the connector SVG above it provides the gap; on
   mobile that SVG is hidden, so add the spacing here instead. */
.te-wf-closing { margin-top: 2.5rem; }
@media (min-width: 768px) {
	.te-wf-closing { margin-top: 0; }
}

/* Scroll reveal — namespaced so it never collides with a page's own .te-fade.
   Stagger is set per element via the .te-wf-reveal--d{1,2,3} modifiers below. */
.te-wf-reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	will-change: opacity, transform;
}
.te-wf-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.te-wf-reveal { opacity: 1; transform: none; transition: none; }
}

/* Reveal stagger (was inline transition-delay:60/120/180ms). */
.te-wf-reveal--d1 { transition-delay: 60ms; }
.te-wf-reveal--d2 { transition-delay: 120ms; }
.te-wf-reveal--d3 { transition-delay: 180ms; }

/* Eyebrow + heading typography (was inline). */
.te-wf-eyebrow { color: #BF4E00; } /* AA on cream (4.52:1) */
.te-wf-heading {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	color: #0d1f3c;
}

/* Card media: fixed 11rem band shared by every card image/photo block. The
   object-position varies per image, so it stays on the per-image modifiers. */
.te-wf-card-media { height: 11rem; }
.te-wf-card-media--top    { object-position: center top; }
.te-wf-card-media--center { object-position: center center; }
.te-wf-card-media--50     { object-position: center 50%; }

/* Deploy card photo block — rendered as a background image (was fully inline). */
.te-wf-deploy-img {
	height: 11rem;
	flex-shrink: 0;
	background-image: url(../images/card-deploy.webp);
	background-size: 140%;
	background-position: 55% 40%;
}

/* Mobile stacked cards: show the photos at their full natural height —
   no fixed-strip cropping (the cards aren't in a row, so heights can vary).
   The Deploy background block gets its source image's intrinsic ratio. */
@media (max-width: 767.98px) {
	.te-wf-card-media { height: auto; }
	.te-wf-deploy-img { height: auto; aspect-ratio: 2752 / 1536; background-size: cover; background-position: 55% 22%; }
}

/* Desktop connector SVG between the cards and the closing line. */
.te-wf-connector { height: 80px; }
.te-wf-connector svg {
	width: 100%;
	height: 80px;
	display: block;
}
/* Tablet/narrow desktop (3-across cards): the 0.5px hairline connector fades
   out where the curves run vertical — thicken just below full desktop. */
@media (min-width: 768px) and (max-width: 1319.98px) {
	.te-wf-connector svg path { stroke-width: 1; }
}

/* Stacked-cards-only tweaks (side-by-side layouts keep the original design):
   larger body copy (14→16px) and half the space above the card headings
   (the pt-11/44px utility; 22px isn't in the compiled Tailwind build,
   hence the scoped override). */
@media (max-width: 767.98px) {
	.te-wf-educate p, .te-wf-develop p, .te-wf-deploy p { font-size: 16px; line-height: 1.45; }
	.te-wf-educate.pt-11, .te-wf-develop.pt-11, .te-wf-deploy.pt-11 { padding-top: 22px; }
}

/* Mobile: stacked Educate/Develop/Deploy cards run wider — pull them out of
   half of the section's 32px side padding. */
@media (max-width: 767.98px) {
	.te-workforce .md\:hidden { margin-left: -16px; margin-right: -16px; }
}

/* -1px overlap kills the subpixel row of page background that Safari can
   expose between this part and the section above it (fractional section
   heights) — same fix as every other section junction. */
.te-workforce { margin-top: -1px; }

/* Mobile: H2 matches the homepage section headings' 30px/1.15 (site-wide pass). */
@media (max-width: 767.98px) {
	.te-wf-heading { font-size: 30px; line-height: 1.15; }
}

/* Mobile: Educate card zooms in on the student (origin at her face; the
   card's overflow-hidden clips the side/top spill). The transformed img
   paints above later plain siblings, so the text panel goes positioned to
   win the paint order — otherwise the zoom spill covers the icon + title. */
@media (max-width: 767.98px) {
	.te-wf-card-media--educate { transform: translateY(-15px) scale(1.3); transform-origin: 42% 30%; }
	.te-wf-educate { position: relative; }
	/* Deploy: 3/2 box equalizes its height with the Educate/Develop photos
	   (its source is wider, so it rendered ~40px shorter); the background
	   zooms in on the two people, shifted up so they sit higher in frame. */
	.te-wf-deploy-img { aspect-ratio: 3 / 2; background-size: 135%; background-position: 55% 60%; }
}