/*
 * Products archive (Figma 5:4374 D-EN, 5:4985 M-EN, 5:4042 D-AR, 5:4704 M-AR).
 * Mobile-first (390 frame); desktop (1440 frame) from 1024px.
 */

/* ---------- Hero (5:4996 / 5:4401) ---------- */
.tec-products__hero { padding-top: 4px; }
.tec-products__hero-top { display: flex; flex-direction: column; }
.tec-products__h1 {
	width: fit-content;
	height: 43.19px;
	font-size: 32px;
	font-weight: 800;
	line-height: 43.2px;
	color: var(--tec-navy);
	text-align: left;
	white-space: nowrap;
}
.tec-products__intro { height: 59.3px; padding-top: 12px; }
.tec-products__intro p {
	width: 350px;
	max-width: 100%;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 23.63px;
	color: var(--tec-grey);
	text-align: left;
}
[dir="rtl"] .tec-products__intro p { text-align: right; }

.tec-products__media { display: flex; height: 304px; padding-top: 18px; }
.tec-products__media-b { position: relative; flex: 1 1 auto; min-width: 0; padding-top: 36px; }
.tec-products__media-b-img { height: 250px; border-radius: 16px; }
/* M-EN Arrow (Size=Desk, C10) at (216,-13.99) of the 350px container; M-AR (Size=Mobile) at (25,-5.8). */
.tec-products__badge { position: absolute; top: -13.99px; left: 61.7143%; }
[dir="rtl"] .tec-products__badge { top: -5.8px; left: 7.1429%; }

/* Fixed-size crop box: keeps the Figma crop undistorted when the frame narrows (1024-1439). */
.tec-products__fixed { position: absolute; top: 0; left: 50%; transform: translateX(-50%); overflow: hidden; }

/* ---------- Product groups (5:5022 / 5:5110) ---------- */
.tec-products__group--tanks { padding-top: 50px; }
.tec-products__group--boilers { padding-top: 60px; }
/* Pill targets (#gas-tanks, #gas-boilers): the header is not sticky on this page; keep clear of the WP admin bar. */
.tec-products__group { scroll-margin-top: var(--wp-admin--admin-bar--height, 0px); }
/* The section receives focus (tabindex -1) after a pill jump; no outline around the whole section. */
.tec-products__group:focus { outline: none; }

.tec-products__pills[role="list"] { display: flex; gap: 10px; padding-bottom: 40px; }
.tec-products__pills li { display: flex; }
.tec-products__pill {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 18px;
	border: 1px solid #D5D8D0;
	border-radius: 99px;
	background: var(--tec-white);
	color: var(--tec-navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 24.5px;
	white-space: nowrap;
}
.tec-products__pill--active { border-color: var(--tec-navy); background: var(--tec-navy); color: var(--tec-white); }
a.tec-products__pill { text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
a.tec-products__pill:hover { border-color: var(--tec-navy); color: var(--tec-navy); }
a.tec-products__pill--active:hover { color: var(--tec-white); }

.tec-products__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 22px; }
.tec-products__head-title { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tec-products__eyebrow {
	display: 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;
}
/* The 270deg layer has both stops at 100% and renders nothing; only the 90deg layer is drawn. */
.tec-products__eyebrow-line {
	display: block;
	flex: none;
	width: 34px;
	height: 1.5px;
	opacity: 0.699999988079071;
	background: linear-gradient(90deg, rgba(63, 115, 0, 0) 0%, rgba(63, 115, 0, 1) 100%);
}
.tec-products__h2 {
	font-size: 28px;
	font-weight: 800;
	line-height: 37.8px;
	color: var(--tec-navy);
	text-align: left;
	white-space: nowrap;
}
.tec-products__count {
	flex: none;
	font-size: 13px;
	font-weight: 400;
	line-height: 22.75px;
	color: var(--tec-grey);
	white-space: nowrap;
}

/* ---------- Cards ---------- */
.tec-products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
/* AR frames lay the cards out physically left to right (C23); the card content itself is RTL. */
[dir="rtl"] .tec-products__grid { direction: ltr; }
[dir="rtl"] .tec-products__card { direction: rtl; }
/* M-AR: the third boiler sits in grid cell (2,2) (M-EN: (1,2)). */
[dir="rtl"] .tec-products__grid--boilers-m .tec-products__card--3 { grid-column: 2; grid-row: 2; }

.tec-products__card { min-width: 0; }
.tec-products__card-link { display: flex; flex-direction: column; align-items: flex-start; }
.tec-products__card-img { display: block; align-self: stretch; aspect-ratio: 169 / 140; border-radius: 14px; }
.tec-products__card-layer { position: absolute; inset: 0; display: block; overflow: hidden; }
.tec-products__card-cat {
	display: block;
	padding-top: 14px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 21.88px;
	color: var(--tec-grey);
	text-align: left;
}
.tec-products__card-title {
	padding-top: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 21.6px;
	color: var(--tec-navy);
	text-align: left;
}
.tec-products__card-more {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 22.75px;
	color: var(--tec-navy);
}
.tec-products__card-more-text { white-space: pre; }

/* ---------- CTA banner (GROUP 35:34371 / 35:34398) ---------- */
.tec-products__cta { padding-top: 60px; }
.tec-products__cta-box { position: relative; height: 400px; }
.tec-products__cta-img { position: absolute; inset: 0; border-radius: 20px; }
.tec-products__cta-overlay {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(11, 34, 56, 0.85) 0%, rgba(11, 34, 56, 0) 100%, rgba(11, 34, 56, 0) 100%);
}
[dir="rtl"] .tec-products__cta-overlay { border-radius: 20px; }
.tec-products__cta-content {
	position: absolute;
	top: 51px;
	left: 22px;
	width: 306px;
	max-width: calc(100% - 44px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	color: var(--tec-white);
}
.tec-products__cta-title {
	align-self: stretch;
	height: 141px;
	white-space: nowrap;
	font-size: 26px;
	font-weight: 800;
	line-height: 35.1px;
	text-align: left;
}
.tec-products__cta-text { align-self: stretch; height: 98px; font-size: 13.5px; font-weight: 400; line-height: 24.3px; }
[dir="rtl"] .tec-products__cta-content { top: 58px; gap: 12px; }
[dir="rtl"] .tec-products__cta-title { align-self: auto; width: 259px; max-width: 100%; line-height: 49px; text-align: right; }
[dir="rtl"] .tec-products__cta-text { height: 73px; text-align: right; }

.tec-products__spacer { height: 60px; }

/* ---------- Desktop (1440 frame) ---------- */
@media (min-width: 1024px) {
	.tec-products__hero { padding-top: 10px; }
	.tec-products__hero-top { flex-direction: row; justify-content: space-between; gap: 24px; }
	.tec-products__hero-title { flex: 0 1 320px; min-width: 0; }
	[dir="rtl"] .tec-products__hero-title { flex-basis: 256px; }
	.tec-products__h1 { height: 75.59px; font-size: 56px; line-height: 75.6px; }
	.tec-products__intro { flex: none; width: 280px; height: 88.9px; padding-top: 18px; }
	[dir="rtl"] .tec-products__intro { height: 65.3px; }
	.tec-products__intro p { width: 280px; }

	.tec-products__media { align-items: flex-end; gap: 34px; height: 436px; padding-top: 36px; }
	.tec-products__media-a { flex: 0 1 480px; min-width: 0; height: 400px; border-radius: 18px; }
	.tec-products__fixed--a { width: 480px; height: 400px; }
	.tec-products__media-b { flex: 0 1 686px; padding-top: 44px; }
	.tec-products__media-b-img { height: 356px; border-radius: 18px; }
	/* Arrow Size=Desk at (547,-0.09) of the 686px column (EN) and (70,-6.09) (AR, not mirrored). */
	.tec-products__badge { top: -0.09px; left: 79.7376%; }
	[dir="rtl"] .tec-products__badge { top: -6.09px; left: 10.2041%; }

	.tec-products__group--tanks,
	.tec-products__group--boilers { padding-top: 100px; }

	.tec-products__pills[role="list"] { gap: 12px; padding-bottom: 56px; }
	.tec-products__pill { padding: 0 22px; font-size: 15px; line-height: 26.25px; }

	.tec-products__head { padding-bottom: 34px; }
	.tec-products__head-title { gap: 14px; }
	.tec-products__h2 { font-size: 42px; line-height: 56.7px; }
	.tec-products__count { font-size: 14px; line-height: 24.5px; }

	.tec-products__grid { grid-template-columns: repeat(3, minmax(0, 384px)); justify-content: space-between; gap: 28px 24px; }
	.tec-products__card-img { aspect-ratio: 384 / 260; border-radius: 18px; }
	.tec-products__card-title { padding-top: 0; font-size: 20px; line-height: 27px; }
	.tec-products__card-more { gap: 8px; padding: 6px 0 0; font-size: 14px; line-height: 24.5px; }

	.tec-products__cta { padding-top: 110px; }
	.tec-products__cta-box { height: 360px; }
	.tec-products__cta-img { border-radius: 24px; }
	.tec-products__fixed--cta { width: 1200px; height: 360px; }
	/* 90deg overlay, dark side left in both languages (D-AR not mirrored, C25). */
	.tec-products__cta-overlay,
	[dir="rtl"] .tec-products__cta-overlay {
		border-radius: 24px;
		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-products__cta-content { top: 56.36px; left: 56px; width: auto; max-width: none; right: 56px; gap: 14px; }
	/* Wraps (instead of overflowing) between 1024 and 1439; one designed break at 1440. */
	.tec-products__cta-title { height: auto; min-height: 103px; font-size: 38px; line-height: 51.3px; white-space: normal; }
	.tec-products__cta-text { align-self: auto; width: 520px; max-width: 100%; height: 78px; font-size: 14px; line-height: 25.9px; }
	/* D-AR: content at (56,92.36); heading RIGHT across 1088px; the column has no alignment set, so
	   the paragraph frame and button sit at the physical left (as designed). */
	[dir="rtl"] .tec-products__cta-content { top: 92.36px; gap: 14px; align-items: flex-end; }
	[dir="rtl"] .tec-products__cta-title { align-self: stretch; width: auto; min-height: 52px; line-height: 51.3px; }
	[dir="rtl"] .tec-products__cta-text { height: 52px; }

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