/*
 * UNEC – Product Overview  v1.0.2
 * Figma 88:1098 ("Product_overview") — file Q5ckGwby9XewAE51OXln5p
 *
 * Every selector is scoped under #top. The only !important declarations are
 * the four of the container release, which are load-bearing: Enfold writes
 * the container width into a generated post-<id>.css enqueued after this
 * file, so an equally specific rule loses on source order.
 *
 * No -webkit-line-clamp anywhere.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

#top .unec_po_sec {
	/* Palette */
	--unec_po_ink: #231f20;
	--unec_po_brand: #ffc20e;
	--unec_po_paper: #ffffff;
	--unec_po_on_dark: #ffffff;
	--unec_po_rule_a: 0.2;
	--unec_po_body_a: 0.64;

	/* Type */
	--unec_po_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--unec_po_meta_fs: 17px;
	--unec_po_meta_lh: 26px;
	--unec_po_title_fs: 20px;
	--unec_po_title_lh: 30px;
	--unec_po_title_ls: -0.01em;
	--unec_po_body_fs: 17px;
	--unec_po_body_lh: 26px;

	/* Pretendard typo metrics, verified with fontTools against the shipped
	 * Regular / Medium / SemiBold faces. 2048 / 1949 / 494 / cap 1448,
	 * USE_TYPO_METRICS set. */
	--unec_po_em_h: 1.19287109375;      /* (1949 + 494) / 2048 */
	--unec_po_asc_cap: 0.24462890625;   /* (1949 - 1448) / 2048 */
	--unec_po_desc: 0.2412109375;       /* 494 / 2048 */

	/* Layout */
	--unec_po_max: 1408px;
	--unec_po_gutter: max(50px, (100% - var(--unec_po_max)) / 2);
	/* Sections run 100px top and bottom on this site; Figma draws 160.
	 * This is an ordinary white section, not a fixed-height panel, so it
	 * takes the house rhythm — claude/section-padding.md. Both padding
	 * fields offer "Section default", which writes nothing so this token
	 * governs. */
	--unec_po_pad_v: 100px;
	--unec_po_pad_scale: 1;

	--unec_po_head_gap: 24px;           /* label -> hairline            */
	--unec_po_head_body_gap: 96px;      /* hairline -> the two columns  */
	--unec_po_col_gap: 96px;
	--unec_po_visual_w: 851px;
	--unec_po_points_w: 461px;
	--unec_po_fig_w: 816px;
	--unec_po_fig_ratio: 816 / 482;
	--unec_po_visual_gap: 48px;         /* drawing -> button, at rest AND
	                                       at the end of the sticky travel */

	--unec_po_point_gap: 20px;          /* icon -> title -> body        */
	--unec_po_point_sep: 48px;          /* content -> hairline          */
	--unec_po_icon: 48px;
	--unec_po_ico_stroke: 1.25;         /* a 24 grid drawn at 48px      */

	/* The drawing pins under the fixed header. 161 is --unec_nav_h on this
	 * site; the 80 is the same breathing room the services page's quality
	 * column uses, so the two sections pin on one line. */
	--unec_po_sticky_top: calc(var(--unec_nav_h, 161px) + 80px);

	/* Button */
	--unec_po_badge: 24px;
	--unec_po_badge_glyph: 16px;
	--unec_po_badge_bg: var(--unec_po_ink);
	--unec_po_badge_ink: var(--unec_po_on_dark);
	--unec_po_row_gap: 12px;
	--unec_po_more_ink: var(--unec_po_ink);

	--unec_po_focus: var(--unec_po_ink);
	--unec_po_motion: 0.25s;
}

/* ------------------------------------------------------------------ *
 * 2. The container release
 *
 * This module ships its own copy rather than borrowing unec-service's:
 * that stylesheet is enqueued only on pages carrying a unec_svc shortcode,
 * so the shared rule is a coincidence, not infrastructure.
 * See claude/container-release.md.
 * ------------------------------------------------------------------ */

#top .unec_po_host .container,
#top .unec_svc_host .container,
#top .container_wrap:has(> .container .unec_po_sec:not(.unec_po_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#top .unec_po_host .content,
#top .unec_po_host .flex_column,
#top .unec_po_host .entry-content-wrapper,
#top .container_wrap:has(> .container .unec_po_sec:not(.unec_po_sec_contained)) .content,
#top .container_wrap:has(> .container .unec_po_sec:not(.unec_po_sec_contained)) .flex_column,
#top .container_wrap:has(> .container .unec_po_sec:not(.unec_po_sec_contained)) .entry-content-wrapper {
	float: none;
}

/* ------------------------------------------------------------------ *
 * 3. The sticky rescue
 *
 * ANY ancestor that clips its overflow becomes the scroll container a
 * sticky element sticks inside. Enfold gives this site two that never
 * scroll, so a sticky element pins to a scrollport that does not move and
 * simply scrolls away — with correct CSS and nothing logged.
 *
 *   html.html_stretched  overflow-x: hidden;  overflow-y: auto
 *   body#top             overflow-x: hidden;  overflow-y: auto
 *   div#wrap_all         overflow: hidden
 *
 * `overflow: hidden` is THREE behaviours in one declaration — clipping, a
 * scroll container, and a block formatting context. `clip` keeps the first,
 * `display: flow-root` keeps the third, and neither keeps the second, which
 * is the point. Replacing `hidden` with `clip` alone let Enfold's floats
 * escape #wrap_all, collapsed it to height 0, and took a whole page white
 * with every element still in the DOM. See claude/overflow-and-sticky.md.
 *
 * Gated on @supports so a browser without `clip` changes nothing rather
 * than breaking something, and scoped with :has() to pages that actually
 * carry a sticky instance.
 * ------------------------------------------------------------------ */

@supports (overflow: clip) {
	#top #wrap_all:has(.unec_po_sec:not(.unec_po_nosticky)) {
		display: flow-root;  /* the formatting context `hidden` was providing */
		overflow: clip;      /* the clipping, without the scroll container    */
	}

	/* `overflow-x: clip` with `overflow-y: visible` is a legal pair — clip is
	 * the one non-visible value that does not force the other axis to auto —
	 * so the horizontal protection survives and the body stops being a
	 * scroll container. On this site #top IS the body. */
	#top:has(.unec_po_sec:not(.unec_po_nosticky)) {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Section shell
 * ------------------------------------------------------------------ */

#top .unec_po_sec {
	position: relative;
	display: block;
	width: 100%;
	padding-top: calc(var(--unec_po_pt, var(--unec_po_pad_v)) * var(--unec_po_pad_scale));
	padding-bottom: calc(var(--unec_po_pb, var(--unec_po_pad_v)) * var(--unec_po_pad_scale));
	background-color: var(--unec_po_paper);
	color: var(--unec_po_ink);
}

/* Enfold styles the bare element (#top div, 1-0-1), which BEATS inheritance
 * from the section, and the cap-trim maths is computed from the font's own
 * metrics — so the whole rhythm would shift with it, silently. */
#top .unec_po_sec * {
	font-family: var(--unec_po_font);
}

#top .unec_po_sec *,
#top .unec_po_sec *::before,
#top .unec_po_sec *::after {
	box-sizing: border-box;
}

#top .unec_po_inner {
	display: flex;
	flex-direction: column;
	gap: var(--unec_po_head_body_gap);
	width: 100%;
	padding-left: var(--unec_po_gutter);
	padding-right: var(--unec_po_gutter);
}

#top .unec_po_sec_contained .unec_po_inner {
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Cap-height trim
 * ------------------------------------------------------------------ */

#top .unec_po_sec .u_po_trim {
	display: block;
	font-size: var(--u_po_fs);
	line-height: var(--u_po_lh);
	letter-spacing: var(--u_po_ls, 0);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-edge: cap alphabetic) {
	#top .unec_po_sec .u_po_trim {
		margin-top: calc(-1 * ((var(--u_po_lh) - var(--unec_po_em_h) * var(--u_po_fs)) / 2 + var(--unec_po_asc_cap) * var(--u_po_fs)));
		margin-bottom: calc(-1 * ((var(--u_po_lh) - var(--unec_po_em_h) * var(--u_po_fs)) / 2 + var(--unec_po_desc) * var(--u_po_fs)));
	}
}

#top .unec_po_sec .u_po_meta {
	--u_po_fs: var(--unec_po_meta_fs);
	--u_po_lh: var(--unec_po_meta_lh);
}

#top .unec_po_sec .u_po_title {
	--u_po_fs: var(--unec_po_title_fs);
	--u_po_lh: var(--unec_po_title_lh);
	--u_po_ls: var(--unec_po_title_ls);
}

#top .unec_po_sec .u_po_body {
	--u_po_fs: var(--unec_po_body_fs);
	--u_po_lh: var(--unec_po_body_lh);
}

/* ------------------------------------------------------------------ *
 * 6. Header
 * ------------------------------------------------------------------ */

#top .unec_po_head {
	display: flex;
	flex-direction: column;
	gap: var(--unec_po_head_gap);
	width: 100%;
}

#top .unec_po_sec p.unec_po_label {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_po_ink);
}

/* A border takes layout space; a Figma stroke does not. Every hairline here
 * is its own 1px box, which is what the design draws. */
#top .unec_po_sec .unec_po_rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--unec_po_ink);
	opacity: var(--unec_po_rule_a);
}

/* ------------------------------------------------------------------ *
 * 7. The two columns
 * ------------------------------------------------------------------ */

#top .unec_po_body {
	display: flex;
	align-items: stretch;
	gap: var(--unec_po_col_gap);
	width: 100%;
}

#top .unec_po_visual {
	display: flex;
	flex: 0 0 var(--unec_po_visual_w);
	flex-direction: column;
	justify-content: space-between;
	gap: var(--unec_po_visual_gap);
	width: var(--unec_po_visual_w);
	max-width: var(--unec_po_visual_w);
}

/*
 * The rail is the drawing's containing block, and it is what makes the
 * drawing STOP above the button.
 *
 * A sticky element's travel is bounded by its containing block, not by its
 * siblings: sticking the figure directly inside the column let it slide all
 * the way to the column's bottom edge and sit on top of "Browse All
 * Products". The rail takes the space above the button, so the drawing's
 * travel ends exactly one gap short of it.
 */
#top .unec_po_rail {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

/*
 * The drawing is the sticky element, NOT the column: the column is 1481px
 * tall in the design — taller than most viewports — so pinning it would
 * pin nothing. Sticking the figure lets the button ride to the bottom of
 * the column and arrive exactly as the last point does, which is what the
 * design's space-between draws.
 */
#top .unec_po_sec .unec_po_figure {
	position: sticky;
	top: var(--unec_po_sticky_top);
	display: block;
	width: var(--unec_po_fig_w);
	max-width: 100%;
	aspect-ratio: var(--unec_po_fig_ratio);
	overflow: hidden;
}

#top .unec_po_nosticky .unec_po_figure {
	position: static;
}

#top .unec_po_sec .unec_po_figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ------------------------------------------------------------------ *
 * 8. The button
 * ------------------------------------------------------------------ */

#top .unec_po_sec a.unec_po_more {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	gap: var(--unec_po_row_gap);
	margin: 0;
	padding: 0;
	background: none;
	color: var(--unec_po_more_ink);
	font-size: var(--unec_po_meta_fs);
	font-weight: 500;
	line-height: var(--unec_po_badge);
	text-decoration: none;
}

#top .unec_po_sec .unec_po_more_label {
	display: block;
	white-space: nowrap;
	color: inherit;
}

#top .unec_po_sec .unec_po_badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_po_badge);
	height: var(--unec_po_badge);
	border-radius: 999px;
	background-color: var(--unec_po_badge_bg);
	color: var(--unec_po_badge_ink);
	transition: background-color var(--unec_po_motion) ease, color var(--unec_po_motion) ease;
}

#top .unec_po_sec .unec_po_badge .unec_po_ico {
	width: var(--unec_po_badge_glyph);
	height: var(--unec_po_badge_glyph);
}

/* Figma draws no state. The badge rests dark and goes brand yellow, the
 * same scheme as the news archive's Load More and the home news cards. */
#top .unec_po_sec a.unec_po_more:hover,
#top .unec_po_sec a.unec_po_more:focus-visible {
	--unec_po_badge_bg: var(--unec_po_brand);
	--unec_po_badge_ink: var(--unec_po_ink);
}

#top .unec_po_sec a.unec_po_more:focus-visible {
	outline: 2px solid var(--unec_po_focus);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * 9. The points
 * ------------------------------------------------------------------ */

#top ul.unec_po_points {
	display: flex;
	flex: 0 0 var(--unec_po_points_w);
	flex-direction: column;
	gap: var(--unec_po_point_sep);
	width: var(--unec_po_points_w);
	max-width: var(--unec_po_points_w);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The type selector in a reset out-ranks a class in the rule meant to
 * override it, so the item rule is written at (1,2,1) to match. */
#top ul.unec_po_points li.unec_po_point {
	display: flex;
	flex-direction: column;
	gap: var(--unec_po_point_sep);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_po_points li.unec_po_point::marker {
	content: '';
}

#top .unec_po_sec .unec_po_point_inner {
	display: flex;
	flex-direction: column;
	gap: var(--unec_po_point_gap);
	width: 100%;
}

#top .unec_po_sec .unec_po_point_icon {
	display: block;
	width: var(--unec_po_icon);
	height: var(--unec_po_icon);
	color: var(--unec_po_ink);
}

#top .unec_po_sec .unec_po_point_icon .unec_po_ico {
	display: block;
	width: 100%;
	height: 100%;
}

/* The glyphs are a 24 grid drawn at 48px, so Lucide's own 2px stroke would
 * render 4px. The width is a token rather than an attribute so it stays one
 * declaration to tune, and the suite measures what actually renders. */
#top .unec_po_sec .unec_po_point_icon svg[viewBox='0 0 24 24'] {
	stroke-width: var(--unec_po_ico_stroke);
}

#top .unec_po_sec .unec_po_point_title {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_po_ink);
	text-transform: none;
}

#top .unec_po_sec p.unec_po_point_body {
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: var(--unec_po_ink);
	opacity: var(--unec_po_body_a);
}

/* ------------------------------------------------------------------ *
 * 10. Responsive — custom properties only, never a re-declaration of a
 * property PHP can write inline (--unec_po_pt / --unec_po_pb /
 * --unec_po_sticky_top).
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_po_sec {
		--unec_po_pad_scale: 0.8;
		--unec_po_col_gap: 72px;
		--unec_po_visual_w: 700px;
		--unec_po_points_w: 420px;
		--unec_po_fig_w: 700px;
		--unec_po_head_body_gap: 80px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_po_sec {
		--unec_po_pad_scale: 0.7;
		--unec_po_col_gap: 56px;
		--unec_po_visual_w: 520px;
		--unec_po_points_w: 360px;
		--unec_po_fig_w: 520px;
		--unec_po_head_body_gap: 64px;
		--unec_po_point_sep: 40px;
		--unec_po_icon: 44px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_po_sec {
		--unec_po_pad_scale: 0.6;
		--unec_po_gutter: 40px;
		--unec_po_visual_w: 100%;
		--unec_po_points_w: 100%;
		--unec_po_fig_w: 100%;
		--unec_po_head_body_gap: 56px;
		--unec_po_col_gap: 56px;
	}

	/* Written at the same specificity as the rule it overrides. A responsive
	 * override shorter than its base rule loses, silently — and a responsive
	 * suite that only checks overflow will never see it. */
	#top .unec_po_body {
		flex-direction: column;
		align-items: stretch;
	}

	#top .unec_po_visual {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	#top ul.unec_po_points {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	/* Nothing to pin against once the columns stack: the drawing would sit
	 * still while its own column scrolled past underneath it. */
	#top .unec_po_sec .unec_po_figure {
		position: static;
	}

	#top .unec_po_rail {
		flex: 0 0 auto;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_po_sec {
		--unec_po_pad_scale: 0.45;
		--unec_po_gutter: 24px;
		--unec_po_title_fs: 19px;
		--unec_po_title_lh: 28px;
		--unec_po_point_sep: 32px;
		--unec_po_point_gap: 16px;
		--unec_po_icon: 40px;
		--unec_po_head_body_gap: 48px;
		--unec_po_col_gap: 48px;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_po_sec {
		--unec_po_pad_scale: 0.35;
		--unec_po_point_sep: 28px;
		--unec_po_icon: 36px;
	}
}