/*
 * ntw_feature_compare — port of `.a-feats` / `.a-feat` / `.a-ba` / `.a-vs`
 * (renamed `ntw-compare`).
 */

/*
 * "Nối tiếp khối trước": the cards continue the technology band above. Prototype
 * spacing between the layer drawing and the cards is clamp(56px, 8vw, 110px); the
 * band above ends with its own section padding, clamp(88px, 12vw, 168px), so the
 * joined section pulls up by the difference.
 */
.ntw-sec--join {
	padding-top: 0;
	margin-top: calc(clamp(56px, 8vw, 110px) - clamp(88px, 12vw, 168px));
}

.ntw-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

/*
 * Each card is media / body / comparison. Fallback: a flex column with the
 * comparison pushed to the foot. With subgrid the two cards in a row SHARE their three
 * row heights, so the comparison boxes start on one line whether the description above
 * is one line or three (client, round 3). The children are placed on explicit rows so
 * a card without a photo still lines its comparison up with its neighbour's.
 */
.ntw-feat { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.ntw-feat > .ntw-compare { margin-top: auto; }
@supports (grid-template-rows: subgrid) {
	.ntw-feat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
	.ntw-feat > .ntw-feat__media { grid-row: 1; }
	.ntw-feat > .ntw-feat__body { grid-row: 2; }
	.ntw-feat > .ntw-compare { grid-row: 3; margin-top: 0; }
}

/*
 * --p MUST have a CSS default. The script writes it from the range input, but without
 * this the clip-path resolves against an invalid value on first paint and the slider
 * looks inert until touched (helios paper.css, same trap).
 */
.ntw-ba { --p: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; touch-action: pan-y; user-select: none; }
.ntw-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ntw-ba .ntw-ba__us { clip-path: inset(0 0 0 var(--p)); }
/* #DFE8E8 is the catalog illustration's own panel colour, so the letterbox around
   `contain` reads as part of the drawing, not a frame. */
.ntw-ba--single { background: #DFE8E8; }
.ntw-ba--single img { object-fit: contain; padding: 12px 18px; }
.ntw-ba__tag { position: absolute; top: 14px; z-index: 2; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; pointer-events: none; }
.ntw-ba__tag--them { left: 14px; background: rgba(13, 17, 14, .8); color: var(--mist); }
/* White text: `--green-btn` (4.97:1), never `--green` (3.15:1). */
.ntw-ba__tag--us { right: 14px; background: var(--green-btn); color: #fff; }
.ntw-ba__line { position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none; }
.ntw-ba__knob {
	position: absolute; top: 50%; left: var(--p); z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px;
	border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45); font-size: 13px; pointer-events: none; transition: transform .25s var(--ease);
}
.ntw-ba:hover .ntw-ba__knob { transform: scale(1.08); }
/* A full-size transparent range input: keyboard, touch and screen readers for free. */
.ntw-ba__range {
	position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0;
	cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
/* iOS Safari drags a range only by its thumb, so the invisible thumb sits under the knob. */
.ntw-ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 56px; height: 56px; border: 0; background: transparent; }
.ntw-ba__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; background: transparent; }
.ntw-ba:focus-within { outline: 2px solid var(--green); outline-offset: -2px; }

.ntw-feat__body { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 4px 16px; padding: 22px 24px 18px; }
.ntw-feat__icon {
	grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
	background: rgba(36, 168, 0, .14); font-size: 16px;
}
.ntw-feat__body h3 { margin: 0; font: 500 1.2rem/1.35 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.ntw-feat__body p { margin: 0; font-size: 14.5px; text-wrap: pretty; }
/* No icon: the text takes both columns rather than sitting beside an empty one. */
.ntw-feat__body > h3:first-child, .ntw-feat__body > h3:first-child + p { grid-column: 1 / -1; }

/* minmax(0, 1fr) + stretch: both boxes take the taller one's height. */
.ntw-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; padding: 0 24px 24px; }
.ntw-compare__cell { padding: 12px 14px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--ntw-w-border, var(--line)); }
.ntw-compare__cell--us { border-color: rgba(36, 168, 0, .45); }
.ntw-compare dt { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ntw-compare .ntw-compare__cell--us dt { color: var(--ntw-w-accent, var(--green)); }
.ntw-compare dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; text-wrap: pretty; }

@media (max-width: 720px) {
	.ntw-feats { grid-template-columns: minmax(0, 1fr); }
	.ntw-compare { grid-template-columns: minmax(0, 1fr); }
}