/**
 * Section: match — Figma 4002:1785 (desktop) / 4002:2289 (mobile)
 *
 * image        1400 x 382.387 (ratio 1400/382.387) · scale FILL
 * cols         HORIZONTAL gap 40 (var-40), mỗi cột 680 (fill) — mobile VERTICAL gap 40
 * title        HORIZONTAL gap 10, text 25/600/lh115% (h5) — mobile 20/600, chip xuống dòng
 * chip         hộp 23px cao: padding 6/20 + stroke INSIDE 1px
 * chip         radius 16, chữ 15/400 lh 11, ls -0.3, uppercase
 *              → toàn bộ giá trị khai báo trong base.css (PHẦN 1) nhóm --chip-* (Rule 2)
 * description  600px, 16/400/lh140%, màu 2nd-fg — mobile 350px
 */

#cd-match .cd-match__visual img {
	width: 100%;
	height: auto;
	aspect-ratio: 1400 / 382.387;
	object-fit: cover;
}

#cd-match .cd-match__cols {
	display: flex;
	gap: var(--var-40);
}

#cd-match .cd-match__col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

#cd-match .cd-match__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

#cd-match .cd-description {
	max-width: 600px;
}

/* ---------- chip (Figma "div" bo 16, viền 1px gradient) ---------- */
#cd-match .cd-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-4);
	/* Figma stroke = INSIDE nên chip cao đúng 23 (11 + 6×2).
	   CSS border nằm trong border-box → trừ --chip-border-width vào padding. */
	padding:
		calc(var(--chip-padding-block) - var(--chip-border-width))
		calc(var(--chip-padding-inline) - var(--chip-border-width));
	border-radius: var(--chip-radius);
	font-size: var(--chip-font-size);
	font-weight: var(--fw-regular);
	line-height: var(--chip-line-height);
	letter-spacing: var(--chip-letter-spacing);
	text-transform: uppercase;
	color: var(--color-1st-fg);
	white-space: nowrap;
	border: var(--chip-border-width) solid transparent;
	background: linear-gradient(var(--color-1st-bg), var(--color-1st-bg)) padding-box,
	            var(--chip-border) border-box;
}

/* Instagram — gradient 135°: #7638fa → #d300c5 17% → #ff0069 36% → #ff7a00 62.5% → #ffd600 83.5% */
#cd-match .cd-chip--instagram {
	--chip-border: linear-gradient(225deg, #7638fa 0%, #d300c5 17%, #ff0069 36%, #ff7a00 62.5%, #ffd600 83.5%);
}

/* TikTok — gradient 270°: #00f7ef → #2a2a2a 50% → #fe004f */
#cd-match .cd-chip--tiktok {
	--chip-border: linear-gradient(270deg, #00f7ef 0%, #2a2a2a 50%, #fe004f 100%);
}

/* YouTube — viền đặc #ff0000 */
#cd-match .cd-chip--youtube {
	--chip-border: linear-gradient(#ff0000, #ff0000);
}

/* Smart filters — viền trắng, padding trái 16 / phải 12, gap 4 */
#cd-match .cd-chip--filters {
	--chip-border: linear-gradient(var(--color-1st-fg), var(--color-1st-fg));
	padding-left: calc(var(--chip-padding-inline-start) - var(--chip-border-width));
	padding-right: calc(var(--chip-padding-inline-end) - var(--chip-border-width));
}

#cd-match .cd-chip__icon {
	width: 11px;
	height: 11px;
	flex: none;
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	#cd-match .cd-match__visual img {
		aspect-ratio: 350 / 95.597;
	}

	#cd-match .cd-match__cols {
		flex-direction: column;
	}

	#cd-match .cd-match__title {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/* Figma mobile: mỗi cột xuống dòng 1 lần.
	   Cột 1: text chiếm trọn dòng → 3 chip rơi xuống dòng dưới.
	   Cột 2: chip "Smart filters" ở dòng trên (GIỮ hug width), text xuống dòng dưới
	          → phải cho TEXT flex-basis 100%, không phải chip, nếu không chip bị kéo dài. */
	#cd-match .cd-match__col:first-child .cd-match__title-text,
	#cd-match .cd-match__col:last-child .cd-match__title-text {
		flex-basis: 100%;
	}

	#cd-match .cd-chip {
		flex: 0 0 auto;
	}

	#cd-match .cd-description {
		max-width: none;
	}
}