/*
 * TEC Gas: shared components used by several pages.
 */

/* ---------- Breadcrumb ---------- */
.tec-crumbs { padding-top: 10px; }
.tec-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tec-crumbs__item { display: flex; align-items: center; gap: 6px; }
.tec-crumbs__link,
.tec-crumbs__sep { font-size: 14px; font-weight: 400; line-height: 24.5px; color: var(--tec-navy); white-space: pre; }
.tec-crumbs__sep { white-space: nowrap; }
.tec-crumbs__pill {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 12px;
	border: 1px solid var(--tec-green);
	border-radius: 99px;
	background: var(--tec-white);
	font-size: 12px;
	font-weight: 500;
	line-height: 22px;
	color: var(--tec-green);
	white-space: nowrap;
}
@media (min-width: 1024px) {
	.tec-crumbs { padding-top: 12px; }
}

/* ---------- Section label (Component 16) ---------- */
.tec-label {
	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);
}
[dir="rtl"] .tec-label { font-size: 13.5px; }
.tec-label__pill { position: relative; display: block; flex: none; overflow: hidden; width: 28px; height: 12.6px; }
[dir="rtl"] .tec-label__pill { height: 12.13px; }
/* Loading en: child 36.4x20.34 at (-4.2,-4.2) of a 28x12.6 frame. */
.tec-label__gif { position: absolute; left: -4.2px; top: -4.2px; width: 36.4px; height: 20.34px; max-width: none; object-fit: cover; }
.tec-label__text { white-space: nowrap; }
.tec-label__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%);
}
/* Desktop/EN instance: 36.62x16.48 with child 47.6x26.6 at (-5.49,-5.49); text 13.5px. */
.tec-label--desktop { font-size: 13.5px; }
.tec-label--desktop .tec-label__pill { width: 36.62px; height: 16.48px; }
.tec-label--desktop .tec-label__gif { left: -5.49px; top: -5.49px; width: 47.6px; height: 26.6px; }
[dir="rtl"] .tec-label--desktop .tec-label__pill,
[dir="rtl"] .tec-label--m .tec-label__pill { width: 28px; height: 12.13px; }
@media (min-width: 1024px) {
	.tec-label:not(.tec-label--m) { font-size: 13.5px; }
	.tec-label:not(.tec-label--m) .tec-label__pill { width: 36.62px; height: 16.48px; }
	.tec-label:not(.tec-label--m) .tec-label__gif { left: -5.49px; top: -5.49px; width: 47.6px; height: 26.6px; }
	[dir="rtl"] .tec-label:not(.tec-label--m) .tec-label__pill { width: 28px; height: 12.13px; }
}

/* ---------- Scroll-down badge (Arrow) ---------- */
.tec-badge { display: block; flex: none; overflow: hidden; width: 84px; height: 84px; border-radius: 60.000003814697266px; }
.tec-badge--desk { width: 100px; height: 100px; border-radius: 71.42857360839844px; }
@media (min-width: 1024px) {
	.tec-badge:not(.tec-badge--mobile) { width: 100px; height: 100px; border-radius: 71.42857360839844px; }
}

/* ---------- Marquee (footer "TECHNICAL EXCELLENCE" strip, tagline strip) ----------
   The track holds two identical groups and moves by one group width (50% of the track) per loop, so
   the repetition is seamless. LTR text runs to the left; RTL text runs to the right (new words enter
   from the inline end, as they are read). Compositor-only transform animation, no JavaScript. */
.tec-marquee__track { display: flex; width: max-content; animation: tec-marquee var(--tec-marquee-dur, 60s) linear infinite; will-change: transform; }
.tec-marquee__group { display: flex; flex: none; align-items: center; }
[dir="rtl"] .tec-marquee__track { animation-name: tec-marquee-rtl; }
@keyframes tec-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes tec-marquee-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
	.tec-marquee__track { animation: none; will-change: auto; }
}

/* ---------- Gradient tagline strip ---------- */
.tec-tagline { overflow: hidden; width: 100%; height: 90px; --tec-marquee-dur: 70s; }
[dir="rtl"] .tec-tagline { --tec-marquee-dur: 57s; }
.tec-tagline__text {
	display: flex;
	align-items: center;
	width: max-content;
	height: 90px;
	font-size: 28px;
	font-weight: 800;
	line-height: 90px;
	white-space: pre;
}
.tec-tagline__words {
	background: linear-gradient(180deg, rgba(185, 188, 192, 1) 46%, rgba(75, 83, 89, 1) 66%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.tec-tagline__dot { color: var(--tec-green-light); }

/* ---------- Image frame helper: placeholder fill behind photos (#A7A9AB in Figma) ---------- */
.tec-frame { position: relative; overflow: hidden; background: var(--tec-placeholder); }

/* ---------- Generic primary button used by pages (Button 201:37729 Default) is .tec-btn in layout.css ---------- */