/* WeTrade display components: hero, corridors map, location card, product/service grid. */

/* ---------- Hero ---------- */
.wt-hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: clamp(520px, 78vh, 760px);
	display: grid; align-items: center;
	background:
		radial-gradient(120% 90% at 78% 40%, rgba(18, 160, 127, 0.34) 0%, rgba(18, 160, 127, 0) 60%),
		linear-gradient(160deg, #06382e 0%, #04261f 70%);
	color: #fff;
}
[dir="rtl"] .wt-hero {
	background:
		radial-gradient(120% 90% at 22% 40%, rgba(18, 160, 127, 0.34) 0%, rgba(18, 160, 127, 0) 60%),
		linear-gradient(200deg, #06382e 0%, #04261f 70%);
}
.wt-hero__media { position: absolute; inset: 0; z-index: -1; }
.wt-hero__fallback {
	position: absolute; inset-block: 0; inset-inline-end: -6%; width: min(66%, 940px);
	display: grid; align-items: center; opacity: 0.95;
	transition: opacity 0.9s ease;
	/* Fade the map out towards the text so the two never compete. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
[dir="rtl"] .wt-hero__fallback {
	-webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(270deg, transparent 0%, #000 34%);
}
.wt-hero__fallback .wt-map { width: 100%; height: auto; }
.wt-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.wt-hero__media.is-3d .wt-hero__canvas { opacity: 1; }
.wt-hero__media.is-3d .wt-hero__fallback { opacity: 0; }

.wt-hero__inner { width: min(100% - 2rem, var(--wt-container, 1200px)); margin-inline: auto; padding-block: clamp(4rem, 10vh, 7rem); }
.wt-hero__content { max-width: 620px; }
.wt-hero__eyebrow {
	display: inline-block; margin: 0 0 1.1rem; padding: 0.3rem 0.8rem; border-radius: 999px;
	background: rgba(127, 209, 187, 0.16); color: #b5e6d8; border: 1px solid rgba(127, 209, 187, 0.35);
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
html[lang^="zh"] .wt-hero__eyebrow, html[lang^="ar"] .wt-hero__eyebrow { letter-spacing: 0; font-size: 0.875rem; }
.wt-hero .wt-hero__title {
	margin: 0 0 1.25rem; color: #fff; font-weight: 700; letter-spacing: -0.025em; line-height: 1.04;
	font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.25rem); text-wrap: balance;
}
html[lang^="zh"] .wt-hero .wt-hero__title, html[lang^="ar"] .wt-hero .wt-hero__title { letter-spacing: 0; line-height: 1.3; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
.wt-hero__text { margin: 0 0 2rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.6; color: #d3e6e0; max-width: 54ch; }
.wt-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wt-hero__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.75rem 1.6rem;
	border-radius: 999px; border: 2px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.wt-hero__btn:hover { transform: translateY(-1px); }
.wt-hero__btn--primary, .wt-hero__btn--primary:visited { background: #E85D04; color: #0f1a17; }
.wt-hero__btn--primary:hover, .wt-hero__btn--primary:focus { background: #ff9233; color: #0f1a17; }
.wt-hero__btn--secondary, .wt-hero__btn--secondary:visited { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.wt-hero__btn--secondary:hover, .wt-hero__btn--secondary:focus { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
.wt-hero__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
	.wt-hero { min-height: 0; align-items: end; }
	.wt-hero__fallback, [dir="rtl"] .wt-hero__fallback { inset-inline: -18%; inset-block: 0 auto; width: auto; height: 46%; opacity: 0.55; -webkit-mask-image: none; mask-image: none; }
	.wt-hero__inner { padding-block: clamp(11rem, 38vw, 15rem) 3.5rem; }
	.wt-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 38, 31, 0) 20%, rgba(4, 38, 31, 0.92) 62%); }
}

/* ---------- Map (shared by hero fallback and corridors) ---------- */
.wt-map { display: block; width: 100%; height: auto; overflow: visible; }
.wt-map__arc { fill: none; stroke: #E85D04; stroke-width: 1.1; opacity: 0.45; vector-effect: non-scaling-stroke; }
.wt-map__pulse {
	fill: none; stroke: #E85D04; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke;
	stroke-dasharray: 0.22 1; stroke-dashoffset: 0.22;
	animation: wt-arc 4.2s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.wt-map__node { fill: #fff; stroke: #E85D04; stroke-width: 1.4; }
.wt-map--light .wt-map__node { fill: #005A4E; stroke: #fff; }
.wt-map__hub { fill: #E85D04; stroke: #fff; stroke-width: 1.6; }
.wt-map__hub-ring { fill: none; stroke: #E85D04; stroke-width: 1.4; opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: wt-ring 2.6s ease-out infinite; }
@keyframes wt-arc { from { stroke-dashoffset: 0.22; } 70%, to { stroke-dashoffset: -1; } }
@keyframes wt-ring { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.wt-map__pulse { animation: none; stroke-dasharray: none; opacity: 0.9; stroke-width: 1.4; }
	.wt-map__hub-ring { animation: none; }
	.wt-hero__fallback, .wt-hero__canvas { transition: none; }
}

/* ---------- Corridors ---------- */
.wt-corridors { display: grid; gap: 1.5rem; padding: clamp(1rem, 3vw, 2rem); border-radius: 20px; background: #f4f7f6; border: 1px solid #d9e2df; }
.wt-corridors--dark { background: #04261f; border-color: #005A4E; color: #d3e6e0; }
.wt-corridors__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem 1.25rem; }
.wt-corridors__list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-block-start: 1px solid #d9e2df; font-size: 0.9375rem; }
.wt-corridors--dark .wt-corridors__list li { border-color: rgba(255, 255, 255, 0.14); }
.wt-corridors__from { color: #51605b; }
.wt-corridors--dark .wt-corridors__from { color: #8fa9a1; }
.wt-corridors__to { font-weight: 600; color: #06382e; }
.wt-corridors--dark .wt-corridors__to { color: #fff; }
.wt-corridors__arrow { flex: 1; min-width: 20px; height: 2px; background: linear-gradient(90deg, #E85D04, #E85D04) no-repeat; position: relative; opacity: 0.8; }
.wt-corridors__arrow::after { content: ""; position: absolute; inset-inline-end: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #E85D04; }

/* ---------- Location ---------- */
.wt-location { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid #d9e2df; border-radius: 20px; overflow: hidden; background: #fff; }
.wt-location__map { min-height: 280px; background: #ddf3ec; }
.wt-location__map img, .wt-location__map svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-location__body { padding: clamp(1.25rem, 3vw, 2.25rem); }
.wt-location__title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #005A4E; }
html[lang^="zh"] .wt-location__title, html[lang^="ar"] .wt-location__title { letter-spacing: 0; font-size: 0.9375rem; }
.wt-location__name { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 650; color: #06382e; line-height: 1.3; }
.wt-location__address { font-style: normal; color: #51605b; margin: 0 0 1rem; }
.wt-location__contact { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.25rem; }
.wt-location__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wt-location__link, .wt-location__link:visited {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px;
	border: 2px solid #005A4E; color: #06382e; font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.wt-location__link:hover, .wt-location__link:focus { background: #ddf3ec; color: #06382e; }
@media (max-width: 760px) { .wt-location { grid-template-columns: 1fr; } .wt-location__map { min-height: 200px; max-height: 240px; } }

/* ---------- Grid ---------- */
.wt-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--wt-grid-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1024px) { .wt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wt-grid { grid-template-columns: 1fr; } }
.wt-card {
	position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #d9e2df; border-radius: 16px; overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wt-card:hover, .wt-card:focus-within { border-color: #005A4E; box-shadow: 0 1px 2px rgba(6, 56, 46, 0.06), 0 12px 28px rgba(6, 56, 46, 0.1); transform: translateY(-2px); }
.wt-card__media { aspect-ratio: 4 / 3; background: #f4f7f6; overflow: hidden; }
.wt-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-card__media--empty { background: repeating-linear-gradient(135deg, #f4f7f6 0 14px, #eaf1ef 14px 28px); }
.wt-card__num { padding: 1.5rem 1.5rem 0; font-size: 0.875rem; font-weight: 700; color: #E85D04; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.wt-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.wt-card__tag { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #005A4E; }
.wt-card__title { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.wt-card__title a { color: #06382e; text-decoration: none; }
.wt-card__title a::after { content: ""; position: absolute; inset: 0; }
.wt-card__title a:focus-visible { outline: none; }
.wt-card:has(a:focus-visible) { outline: 3px solid #E85D04; outline-offset: 2px; }
.wt-card__text { margin: 0; color: #51605b; font-size: 0.9375rem; line-height: 1.55; }
.wt-card__more { margin-block-start: auto; padding-block-start: 0.5rem; font-weight: 600; font-size: 0.9375rem; color: #005A4E; }
.wt-card__more::after { content: " \2192"; }
[dir="rtl"] .wt-card__more::after { content: " \2190"; }