/*
 * Life At ThinkPalm — careers/culture banner (card + 3 team photos).
 *
 * Figma row, canvas y=6533, every item 343px tall / radius 24, gaps 16:
 *   card    2076:6152  x165  w464
 *   photo 1 1752:3944  x645  w229
 *   photo 2 1752:3945  x890  w229
 *   photo 3 1752:3946  x1135 w410  → right edge 1545, i.e. 105px past the
 *                                    1440 canvas.
 * x165 is the narrow container's left content edge on a 1440 page, so the row
 * is anchored to the container on the left and bleeds off the page on the
 * right. Widths below are therefore the literal Figma pixels with no shrink;
 * the page clips the overhang. This is the same rail treatment the AI carousel
 * uses, and it means only *how much* of photo 3 is visible changes with the
 * viewport — the first three items stay pixel-exact.
 */

.tp-life-at-thinkpalm {
	overflow: hidden; /* clips photo 3's overhang at the page edge */
}

/* The whole gap above this row is already paid for by the client-logo strip's
   148px padding-bottom (Figma: strip ends y=6385, this row starts y=6533), of
   which the #f4f7ff wash covers the first 68 and 80 stay white. `.tp-section`
   then adds its flat 64px on top, which is 64px Figma does not have — so at
   desktop the shared padding is dropped rather than the strip's being cut, and
   the boundary is owned by one rule instead of split across two. Scoped to
   >=1025: 769-1024 has no Figma frame and its 96+48 already lands on 144, and
   <=768 is tuned to the 360 frame (the strip's own comment explains how its
   24.26 and this section's 40 make up that rhythm). */
@media (min-width: 1025px) {
	.tp-life-at-thinkpalm {
		padding-top: 0;
	}
}

/* `100%` is the container's inner width (1112 at 1440); the second term is the
   gutter the container leaves on its right, so the sum reaches the page edge:
   1112 + 164 = 1276. Capped at the Figma row total so nothing stretches past
   the design on very wide pages. */
.tp-life-at-thinkpalm__row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	min-height: 343px;
	width: calc(100% + (100vw - 100% - 40px) / 2 + 20px);
	min-width: 100%;
	max-width: 1380px; /* 464 + 229 + 229 + 410 + 3x16 */
}

/* Card ---------------------------------------------------------------- */

/* Figma 2076:6124 — 464x343, flat #153a8f fill, radius 24, overflow clip,
   column layout centred vertically, padding 65 / 49 / 76 / 42. */
.tp-life-at-thinkpalm__card {
	flex: 0 0 464px;
	min-height: 343px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	border-radius: var(--tp-radius-lg);
	padding: 65px 49px 76px 42px;
	color: var(--tp-white);
	background: var(--tp-blue-dark);
}

/* Figma 2076:6112 / 2076:6113 — two #009DFF @ 66% ellipses behind the copy,
   bleeding off the card's edges.
   The exported SVGs resolve Figma's "layer blur 88" to a Gaussian
   stdDeviation of 44.15, and CSS `blur()` takes a standard deviation too, so
   44.15px is the matching value — 88px here would be twice the design's
   softness. */
.tp-life-at-thinkpalm__card::before,
.tp-life-at-thinkpalm__card::after {
	content: '';
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: rgba(0, 157, 255, 0.66);
	filter: blur(44.15px);
	pointer-events: none;
}

/* MOTION — Figma component set 2076:6123 ping-pongs Default (2076:6124) and
   Variant2 (2076:6126) with SMART_ANIMATE 4000ms OUT_CUBIC on a 1ms timeout,
   so the two glows drift back and forth on an 8s round trip. Only the ellipses
   move; the copy is identical in both variants.
     top glow    2076:6112 → 2076:6127:  x -151 → 139   (+290), y -96 → -116
     bottom glow 2076:6113 → 2076:6128:  x  -31 → -45,  y +30, width 587 → 341
   The keyframes below are that ping-pong; `alternate` supplies the return leg,
   which is why each runs for --tp-life-drift with 2x the count implied. */
.tp-life-at-thinkpalm__card::before {
	left: -151px;
	top: -96px;
	width: 496px;
	height: 191px;
	animation: tp-life-glow-top var(--tp-life-drift, 4000ms) var(--tp-ease) infinite alternate;
}

.tp-life-at-thinkpalm__card::after {
	left: -31px;
	top: 252px;
	width: 587px;
	height: 170px;
	animation: tp-life-glow-bottom var(--tp-life-drift, 4000ms) var(--tp-ease) infinite alternate;
}

@keyframes tp-life-glow-top {
	to {
		transform: translate(290px, -20px);
	}
}

@keyframes tp-life-glow-bottom {
	to {
		/* Figma also narrows this one 587 → 341; scaling the x axis by 0.581
		   animates on the compositor where a width change would not. */
		transform: translate(-14px, 30px) scaleX(0.581);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-life-at-thinkpalm__card::before,
	.tp-life-at-thinkpalm__card::after {
		animation: none;
	}
}

/* Figma 2076:6114 — 373px column, 12px between the heading and the block
   below it. Sits above the glows. */
.tp-life-at-thinkpalm__copy {
	position: relative;
	z-index: 1;
	width: 373px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Figma 2076:6116 — description and CTA, 24px apart. */
.tp-life-at-thinkpalm__copy-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

/* Figma 2076:6115 — SemiBold 40 / line-height normal, white, 337px text block,
   textCase TITLE. --tp-h2 is 600 40px/1, and `normal` on Plus Jakarta Sans is
   ~1.26, which is what puts this heading's two lines at the 100px Figma
   reports — so the line-height is restated rather than inherited. */
.tp-life-at-thinkpalm__heading {
	font: var(--tp-h2);
	line-height: normal;
	color: var(--tp-white);
	width: 337px;
	max-width: 100%;
	text-transform: capitalize;
}

/* Mobile-only line break — see the 768 block. */
.tp-life-at-thinkpalm__heading-break {
	display: none;
}

/* Figma 2076:6117 — Regular 16/24 at rgba(255,255,255,0.8), full 373px width.
   This node carries NO textCase, so it stays sentence case even though the
   heading directly above it is title-cased — the reset is explicit so a
   future container-level transform can't leak into it. */
.tp-life-at-thinkpalm__desc {
	font: var(--tp-body);
	color: rgba(255, 255, 255, 0.8);
	text-transform: none;
}

/* Figma 2076:6118 — this CTA is an INSTANCE of component set 1122:4556 ("new
   white"), the same one the standalone Contact Us Now pill is built from, so
   it now carries .tp-btn--outline rather than reimplementing it on top of
   .tp-btn--white. Everything structural — the 44px box, the 4px/50px padding
   swap, the transparent fill, textCase TITLE and the 300ms EASE_OUT timing —
   comes from base.css.
   The instance keeps three overrides for the blue card, and that is all this
   block is: stroke, disc fill and label are recoloured WHITE (the label also
   reads "Join Our Team" instead of "Contact Us Now", which lives in the PHP).
   The outline stays an inset box-shadow rather than a real border so it adds
   no layout box — the pill stays exactly 44px tall with the 4px disc inset
   base.css's geometry assumes. */
.tp-life-at-thinkpalm__cta {
	box-shadow: inset 0 0 0 1px var(--tp-white);
	color: var(--tp-white);
}

/* Instance override I2076:6118;1122:4545 — the disc is painted by the SVG
   itself (the arrow is booleaned out of it, so the card shows through the
   arrow), and that fill is white here rather than the component's blue. */
.tp-life-at-thinkpalm__cta .tp-btn__icon {
	color: var(--tp-white);
}

/* HOVER — read off the instance's own ON_HOVER interaction (REST, 2026-08-10):
   CHANGE_TO 1122:4555 on SMART_ANIMATE / EASE_OUT / 300ms, i.e. the
   component's unmodified hover variant — solid #1977f3 fill, WHITE label and
   WHITE disc, with disc and label trading sides. All of that already is
   .tp-btn--outline:hover, so nothing needs restating.
   An earlier build inverted it the other way round (white fill, blue label and
   disc) because the motion endpoint was rate-limited and the hover had to be
   guessed. It is not a guess any more — don't flip it back.
   The single per-section bit: the outline is dropped entirely on hover (client
   call, 2026-08-10) — the blue fill alone carries the state, no hairline. This
   overrides base.css's blue inset stroke, which would otherwise sit invisibly
   on the fill anyway. Keyboard focus keeps a white hairline, because without a
   fill change of its own it would have no visible focus indicator. */
.tp-life-at-thinkpalm__cta:hover {
	box-shadow: none;
}

.tp-life-at-thinkpalm__cta:focus-visible {
	box-shadow: inset 0 0 0 1px var(--tp-white);
}
/* Reduced motion needs no extra rule here — base.css already zeroes the
   transition on .tp-btn--outline and its icon, and nothing above re-declares
   it, so the inversion snaps instantly. Nor does .screen-reader-text need
   unwinding from the inherited capitalize: .tp-btn--outline does that too. */

/* Photos ---------------------------------------------------------------- */

/* Wraps the 3 <figure>s so mobile can turn them into a scroll-snap slider
   without touching the desktop/tablet flex math below, which sizes each
   .photo as a direct child of .row. `contents` removes this wrapper from the
   box tree entirely at those widths, so .photo stays a flex item of .row. */
.tp-life-at-thinkpalm__photos {
	display: contents;
}

/* Figma 1752:3944 / 3945 / 3946 — 343px tall, radius 24, overflow clip, image
   fill scaled to fill. */
.tp-life-at-thinkpalm__photo {
	flex: 0 0 auto;
	position: relative;
	min-height: 343px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--tp-radius-lg);
	background: var(--tp-gray-100);
}

.tp-life-at-thinkpalm__photo--1,
.tp-life-at-thinkpalm__photo--2 {
	flex-basis: 229px;
}

.tp-life-at-thinkpalm__photo--3 {
	flex-basis: 410px;
}

/* Photos 1 and 3 are exported at 2x the tile (841x686 and 915x686 for 343-tall
   tiles). Photo 2 is NOT, since Requirement 009: the client supplied a 456x384
   landscape file, which crops to 256x384 at this tile's portrait aspect — about
   1.1x, not 2x. It is served at that native size rather than upscaled, because
   upscaling invents detail it does not have and would only inflate the file.
   The cost is that photo 2 is softer than its neighbours on a retina display.
   Replacing it needs a source at least 458px wide AFTER the portrait crop, i.e.
   roughly 820x686 landscape or anything already portrait. */
.tp-life-at-thinkpalm__photo-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Responsive ------------------------------------------------------------
   Figma reference frame = 1440. Between 1024 and 1440 the row keeps its Figma
   widths and the page simply clips more of photo 3 — that is the bleed the
   design is showing. At 1024 and below there is no room for that, so the card
   goes full width above the photos and the three photos share the row. */

@media (max-width: 1024px) {
	.tp-life-at-thinkpalm__row {
		flex-wrap: wrap;
		width: 100%;
		min-width: 0;
		min-height: 0;
	}

	.tp-life-at-thinkpalm__card {
		flex: 1 1 100%;
		min-height: 0;
	}

	/* Back to the Figma width ratios, now sharing one row: 229 / 229 / 410. */
	.tp-life-at-thinkpalm__photo {
		flex: 229 1 0;
		min-height: 220px;
	}

	.tp-life-at-thinkpalm__photo--3 {
		flex-grow: 410;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2300:2543 + 2300:2528 on the 360 frame:

     card     20,5972  320x244  radius 20, 30/20 padding
       head            280x68   28/34 SemiBold, break authored after "Just"
       desc            280x36   12/18 white at 80%
       CTA             280x44   outlined, full width, no disc
     photos   20,6228  401x149  100.08 / 100.08 / 179.18, 10.83 apart, r10.49

   The photo rail keeps its Figma widths and runs 61px past the right gutter,
   the same treatment the desktop row gets — the section's overflow clips it,
   so only how much of photo 3 shows changes with the viewport.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The rail bottoms out at y6377.45 and "What's New?" is at y6441; that
	   section supplies 40 of the 64px gap. */
	.tp-life-at-thinkpalm {
		padding-bottom: 24px;
	}

	.tp-life-at-thinkpalm__row {
		gap: 11.55px;
	}

	.tp-life-at-thinkpalm__card {
		min-height: 0;
		padding: 30px 20px;
		border-radius: 20px;
	}

	.tp-life-at-thinkpalm__copy {
		width: 100%;
		gap: 12px;
	}

	.tp-life-at-thinkpalm__copy-foot {
		gap: 24px;
	}

	.tp-life-at-thinkpalm__heading {
		width: 100%;
		font-size: 28px;
		line-height: 34px;
	}

	/* Figma 2300:2547 carries a hard break after "Just"; the line still fits
	   "You Might Just Love" in 280px, so Chrome will not reproduce it. */
	.tp-life-at-thinkpalm__heading-break {
		display: inline;
	}

	.tp-life-at-thinkpalm__desc {
		width: 100%;
		font-size: 12px;
		line-height: 18px;
	}

	/* 2300:2550 — the pill loses its disc and stretches to the column, as
	   every other mobile CTA on this page does. */
	.tp-life-at-thinkpalm__cta {
		align-self: stretch;
		justify-content: center;
		width: 100%;
		padding: 10px 16px;
	}

	.tp-life-at-thinkpalm__cta:hover,
	.tp-life-at-thinkpalm__cta:focus-visible {
		padding: 10px 16px;
	}

	.tp-life-at-thinkpalm__cta .tp-btn__icon {
		display: none;
	}

	/* Figma 2300:2528 — a 401px rail inside a 320px column. */
	.tp-life-at-thinkpalm__photos {
		display: flex;
		gap: 10.83px;
		width: 401px;
		max-width: none;
		flex: 0 0 auto;
	}

	.tp-life-at-thinkpalm__photo {
		min-height: 0;
		height: 149.9px;
		border-radius: 10.49px;
	}

	.tp-life-at-thinkpalm__photo--1,
	.tp-life-at-thinkpalm__photo--2 {
		flex: 0 0 100.08px;
		width: 100.08px;
	}

	.tp-life-at-thinkpalm__photo--3 {
		flex: 0 0 179.18px;
		width: 179.18px;
	}
}