/*
 * Projects (Figma 7:15575 D-EN, 41:39924 M-EN, 7:14987 D-AR, 7:15867 M-AR).
 * Base = 390 frame; >=1024 = 1440 frame. AR keeps the EN DOM order and dir="rtl" mirrors it, except
 * where the AR frame is not a mirror (hero images, stats order, D-AR CTA paragraph/button, row image
 * offsets): explicit [dir="rtl"] rules below.
 */

/* ---------- S1 Hero (7:15602 / 41:39935 / 7:15014 / 7:15878) ---------- */
.tec-projects-hero { padding-top: 4px; }
.tec-projects-hero__title {
	font-size: 30px;
	font-weight: 800;
	line-height: 40.5px;
	color: var(--tec-navy);
	text-align: start;
}
.tec-projects-hero__intro { padding-top: 12px; }
.tec-projects-hero__intro p {
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-grey);
	text-align: start;
}
.tec-projects-hero__media { padding-top: 18px; }
.tec-projects-hero__b { position: relative; padding-top: 36px; }
.tec-projects-hero__b-img { height: 250px; border-radius: 16px; }
/* M-EN Arrow @(239,0) in the 350 column; M-AR @(30,-6.4). */
.tec-projects-hero__badge { position: absolute; top: 0; right: 27px; z-index: 1; }
[dir="rtl"] .tec-projects-hero__badge { top: -6.4px; right: auto; left: 30px; }

/* ---------- S2 Completed Projects (7:15633 / 41:39961 / 7:15045 / 7:15904) ---------- */
.tec-projects-list { padding-top: 60px; }
.tec-projects-list__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-bottom: 10px;
}
/* M-EN detached eyebrow 41:39964: pill outline 26x11, text SemiBold 13/24 ls 0.01em. */
.tec-projects-list__eyebrow-m {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: var(--tec-green);
	white-space: nowrap;
}
.tec-projects-list__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 37.8px;
	color: var(--tec-navy);
	text-align: center;
}

/* Rows: free-layout "Link" frames, bottom stroke #E3E4E0. Mobile: number | info 186 | image. */
/* Rows are the addresses of projects without a details page (#project-<n>, tecgas_project_url()). */
.tec-projects-row { scroll-margin-top: var(--wp-admin--admin-bar--height, 0px); }
.tec-projects-row__link {
	--h: 111px;
	--num-top: 38.8px;
	--info-top: 32.59px;
	--img-top: 11.3px;
	--img-end: -4.93px;
	position: relative;
	display: block;
	height: var(--h);
	border-bottom: 1px solid var(--tec-border);
}
.tec-projects-row--even .tec-projects-row__link { --img-top: 18px; --img-end: 0.23px; }
[dir="rtl"] .tec-projects-row--odd .tec-projects-row__link { --img-end: 0px; }
[dir="rtl"] .tec-projects-row--even .tec-projects-row__link { --img-end: -5.16px; }
/* M-EN rows 3, 4, 7 and M-AR rows 3, 4 (Verified heights and offsets). */
.tec-projects-row--3 .tec-projects-row__link { --h: 126.63px; --num-top: 46.61px; --info-top: 18px; --img-top: 19.12px; }
.tec-projects-row--4 .tec-projects-row__link { --h: 145.25px; --num-top: 55.92px; --info-top: 18px; --img-top: 35.13px; }
.tec-projects-row--7 .tec-projects-row__link { --info-top: 21.13px; }
[dir="rtl"] .tec-projects-row--3 .tec-projects-row__link { --h: 111px; --num-top: 38.8px; --info-top: 21.13px; --img-top: 11.3px; }
[dir="rtl"] .tec-projects-row--4 .tec-projects-row__link { --h: 123.66px; --num-top: 45.13px; --info-top: 18px; --img-top: 24.33px; }
[dir="rtl"] .tec-projects-row--7 .tec-projects-row__link { --info-top: 32.59px; }

.tec-projects-row__num {
	position: absolute;
	top: var(--num-top);
	inset-inline-start: 0;
	width: 44px;
	font-size: 24px;
	font-weight: 800;
	line-height: 32.4px;
	color: var(--tec-navy);
	text-align: left;
}
.tec-projects-row__info {
	position: absolute;
	top: var(--info-top);
	inset-inline-start: 56px;
	width: calc(100% - 164px);
}
.tec-projects-row__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 22.95px;
	color: var(--tec-navy);
	text-align: start;
}
.tec-projects-row--4 .tec-projects-row__title { font-size: 16px; line-height: 21.6px; }
.tec-projects-row__meta-m {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 21.88px;
	color: var(--tec-grey);
	text-align: start;
}
.tec-projects-row__img {
	position: absolute;
	top: var(--img-top);
	inset-inline-end: var(--img-end);
	width: 100.93px;
	height: 80.52px;
	border-radius: 10px;
}

/* ---------- S3 CTA (41:40258 / 41:40053 / 41:40305 / 7:15996) ---------- */
.tec-projects-cta { padding-top: 60px; }
.tec-projects-cta__box { position: relative; height: 400px; border-radius: 20px; overflow: hidden; }
.tec-projects-cta__bg { position: absolute; inset: 0; }
.tec-projects-cta__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 34, 56, 0.85) 1%, rgba(11, 34, 56, 0) 100%, rgba(11, 34, 56, 0) 100%);
}
/* M: H2 / paragraph / button stacked from the bottom (button bottom at 370 of 400). */
.tec-projects-cta__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	height: 100%;
	padding: 0 22px 30px;
	color: var(--tec-white);
}
.tec-projects-cta__title {
	align-self: stretch;
	font-size: 26px;
	font-weight: 800;
	line-height: 35.1px;
	color: var(--tec-white);
	text-align: start;
}
.tec-projects-cta__text {
	align-self: stretch;
	margin-top: 11.37px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 24.3px;
	color: var(--tec-white);
	text-align: start;
}
.tec-projects-cta__btn { margin-top: 11.19px; }
[dir="rtl"] .tec-projects-cta__text { margin-top: 11.19px; }
[dir="rtl"] .tec-projects-cta__btn { margin-top: 11.89px; }

/* Statistics band (41:40063 / 7:16006): stacked, gap 26. */
.tec-projects-cta .tec-projects-stats {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-top: 44px;
	padding: 30px 0;
	border-top: 1px solid var(--tec-border);
	border-bottom: 1px solid var(--tec-border);
}
.tec-projects-stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Text boxes sit -5 / +3 px from their containers in Figma; reproduced with relative offsets. */
.tec-projects-stats__num {
	position: relative;
	top: -5px;
	height: 48px;
	font-size: 48px;
	font-weight: 800;
	line-height: 48px;
	color: var(--tec-navy);
}
.tec-projects-stats__label {
	position: relative;
	top: 3px;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 26.25px;
	color: var(--tec-green);
}
.tec-projects-stats__sub {
	position: relative;
	top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 21.88px;
	color: var(--tec-grey);
}
/* AR: the three stats keep the EN left-to-right order (8, 3, 2) in Figma (not mirrored). */
[dir="rtl"] .tec-projects-stats { direction: ltr; }
[dir="rtl"] .tec-projects-stats__item { direction: rtl; }

/* S4 spacer "Container" 41:40086 / 7:16029. */
.tec-projects__spacer { height: 60px; }

/* ================= Desktop (1440 frame) ================= */
@media (min-width: 1024px) {
	/* S1 */
	.tec-projects-hero { padding-top: 10px; }
	.tec-projects-hero__top { display: flex; justify-content: space-between; gap: 0; }
	.tec-projects-hero__titles { flex: 0 1 799px; min-width: 0; }
	[dir="rtl"] .tec-projects-hero__titles { flex-basis: 543px; }
	.tec-projects-hero__title { font-size: 56px; line-height: 75.6px; }
	.tec-projects-hero__intro { flex: none; width: 280px; padding-top: 18px; }

	.tec-projects-hero__media { display: flex; align-items: flex-end; gap: 34px; padding-top: 36px; }
	/* D-AR keeps image A on the left and B on the right (7:15029 is not mirrored). */
	[dir="rtl"] .tec-projects-hero__media { flex-direction: row-reverse; }
	.tec-projects-hero__a { flex: 0 1 480px; min-width: 0; height: 400px; border-radius: 18px; }
	.tec-projects-hero__b { flex: 0 1 686px; min-width: 0; padding-top: 44px; }
	.tec-projects-hero__b-img { height: 356px; border-radius: 18px; }
	/* D-EN Arrow @(516,0) of the 686 column = 70 from its right edge; D-AR @(70,0). */
	.tec-projects-hero__badge { top: 0; right: 70px; }
	[dir="rtl"] .tec-projects-hero__badge { top: 0; right: auto; left: 70px; }

	/* S2 */
	.tec-projects-list { padding-top: 110px; }
	.tec-projects-list__head { gap: 14px; padding-bottom: 40px; }
	.tec-projects-list__title { font-size: 42px; line-height: 56.7px; }

	/* Desktop rows zig-zag: odd = number | info | image, even = image | info | number. */
	.tec-projects-row__link {
		--h: 196px;
		--num-top: 73.2px;
		--info-top: 68.28px;
		--img-top: 15.35px;
	}
	.tec-projects-row--even .tec-projects-row__link { --img-top: 30px; }
	.tec-projects-row--3 .tec-projects-row__link,
	.tec-projects-row--4 .tec-projects-row__link,
	[dir="rtl"] .tec-projects-row--3 .tec-projects-row__link,
	[dir="rtl"] .tec-projects-row--4 .tec-projects-row__link { --h: 196px; --num-top: 73.2px; --info-top: 68.28px; }
	.tec-projects-row--3 .tec-projects-row__link,
	[dir="rtl"] .tec-projects-row--3 .tec-projects-row__link { --img-top: 15.35px; }
	.tec-projects-row--4 .tec-projects-row__link,
	[dir="rtl"] .tec-projects-row--4 .tec-projects-row__link { --img-top: 30px; }
	.tec-projects-row--7 .tec-projects-row__link,
	[dir="rtl"] .tec-projects-row--7 .tec-projects-row__link { --info-top: 68.28px; }
	/* Row 1 is 166 high with every child 30px higher (image overflows the top, as in Figma). */
	.tec-projects-row--1 .tec-projects-row__link { --h: 166px; --num-top: 43.2px; --info-top: 38.28px; --img-top: -14.65px; }

	.tec-projects-row__num {
		width: 80px;
		font-size: 36px;
		line-height: 48.6px;
	}
	.tec-projects-row--even .tec-projects-row__num { inset-inline-start: auto; inset-inline-end: 0; text-align: right; }
	/* D-AR numbers are LEFT-aligned in all rows. */
	[dir="rtl"] .tec-projects-row--even .tec-projects-row__num { text-align: left; }

	.tec-projects-row__info { inset-inline-start: 108px; width: calc(100% - 346px); }
	.tec-projects-row--even .tec-projects-row__info { inset-inline-start: auto; inset-inline-end: 108px; }
	.tec-projects-row__title { font-size: 22px; line-height: 29.7px; }
	.tec-projects-row--4 .tec-projects-row__title { font-size: 22px; line-height: 29.7px; }
	.tec-projects-row__meta {
		padding-top: 6px;
		font-size: 13px;
		font-weight: 400;
		line-height: 22.75px;
		color: var(--tec-grey);
		text-align: start;
	}
	.tec-projects-row__value { font-weight: 500; color: var(--tec-navy); }
	.tec-projects-row__meta--multi { display: flex; align-items: center; gap: 18px; }
	.tec-projects-row__meta--multi .tec-projects-row__meta-item { flex: none; white-space: nowrap; }
	.tec-projects-row__meta--multi .tec-projects-row__meta-item:first-child { width: 145px; }
	.tec-projects-row__meta--multi .tec-projects-row__meta-item:last-child { width: 174px; }
	/* D-AR 7:15084: location box (125) left of duration box (109), both flush right. */
	[dir="rtl"] .tec-projects-row__meta--multi { direction: ltr; justify-content: flex-end; }
	[dir="rtl"] .tec-projects-row__meta--multi .tec-projects-row__meta-item { direction: rtl; text-align: left; }
	[dir="rtl"] .tec-projects-row__meta--multi .tec-projects-row__meta-item:first-child { width: 125px; }
	[dir="rtl"] .tec-projects-row__meta--multi .tec-projects-row__meta-item:last-child { width: 109px; }

	.tec-projects-row__img { width: 218.91px; height: 149.32px; border-radius: 14px; }
	/* D-EN odd @(990) = -8.91 past the end; even @(-9.42). D-AR odd @(0); even @(980.58) = 0.51 from the end. */
	.tec-projects-row--odd .tec-projects-row__img { inset-inline-end: -8.91px; }
	.tec-projects-row--even .tec-projects-row__img { inset-inline-end: auto; inset-inline-start: -9.42px; }
	[dir="rtl"] .tec-projects-row--odd .tec-projects-row__img { inset-inline-end: 0; }
	[dir="rtl"] .tec-projects-row--even .tec-projects-row__img { inset-inline-start: 0.51px; }

	/* S3 CTA: 1200x360, radius 24, 90deg navy gradient (not flipped in D-AR, as designed). */
	.tec-projects-cta { padding-top: 110px; }
	.tec-projects-cta__box { height: 360px; border-radius: 24px; }
	.tec-projects-cta__shade { background: linear-gradient(90deg, rgba(11, 34, 56, 0.8) 0%, rgba(11, 34, 56, 0.1) 75%, rgba(11, 34, 56, 0.1) 100%); }
	.tec-projects-cta__content {
		position: absolute;
		top: 56.36px;
		inset-inline-start: 56px;
		width: calc(100% - 112px);
		height: auto;
		gap: 14px;
		justify-content: flex-start;
		padding: 0;
	}
	[dir="rtl"] .tec-projects-cta__content { top: 92.36px; align-items: flex-end; }
	.tec-projects-cta__title { font-size: 38px; line-height: 51.3px; }
	.tec-projects-cta__text,
	[dir="rtl"] .tec-projects-cta__text { align-self: auto; width: 520px; max-width: 100%; margin-top: 0; font-size: 14px; line-height: 25.9px; }
	.tec-projects-cta__btn,
	[dir="rtl"] .tec-projects-cta__btn { margin-top: 0; }

	/* Statistics band 7:15746 / 7:15158: row of three 400-wide columns. */
	.tec-projects-cta .tec-projects-stats { flex-direction: row; gap: 0; margin-top: 90px; padding: 40px 0; }
	.tec-projects-stats__item { flex: 1 1 0; min-width: 0; }
	.tec-projects-stats__num { top: -7px; height: 58px; font-size: 58px; line-height: 58px; }
	.tec-projects-stats__label { padding-top: 10px; }

	.tec-projects__spacer { height: 110px; }
}