/* ==========================================================================
   UNEC — Contact CTA
   Figma: 184:10889 (Contact_CTA), file Q5ckGwby9XewAE51OXln5p
   --------------------------------------------------------------------------
   Every selector is scoped under #top. The only !important in this file is on
   the container release, and it is load-bearing: Enfold writes the container
   width into a generated per-page stylesheet (post-<id>.css) that is enqueued
   AFTER this one, so an equally specific rule here would lose on source order.
   Same situation as unec-service/.
   ========================================================================== */

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

#top .unec_cta {
	/* Brand */
	--unec_cta_yellow: #FFC20E;
	--unec_cta_dark: #231F20;
	--unec_cta_white: #FFFFFF;

	/* Ink — one property drives headline, lead, link, chevron and diagonals.
	   .unec_cta_dark_ink re-points it and nothing else has to change. */
	--unec_cta_ink: var(--unec_cta_white);
	--unec_cta_ink_invert: var(--unec_cta_dark);

	/* Plate behind the photo. Visible before the image loads and wherever the
	   photo does not cover (it always does — object-fit: cover). */
	--unec_cta_plate: var(--unec_cta_dark);

	--unec_cta_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	/* Geometry. Figma: 1728 x 700, content row 1408 wide at x160,
	   bottom edge 80px above the section bottom. */
	--unec_cta_minh: 700px;
	--unec_cta_pad_v: 100px;   /* house rhythm — see claude/section-padding.md */
	--unec_cta_pad_b: 80px;    /* the design's gap from the content to the bottom edge */
	--unec_cta_measure: 1408px;
	--unec_cta_gutter_min: 50px;

	/* The two columns */
	--unec_cta_head_w: 698px;
	--unec_cta_side_w: 343px;
	--unec_cta_col_gap: 40px;   /* minimum gap between the columns */
	--unec_cta_side_gap: 40px;  /* lead -> link row */
	--unec_cta_link_gap: 12px;  /* chevron -> label */
	--unec_cta_chev: 24px;
	--unec_cta_chev_icon: 16px;

	/* Type. Desktop/H2 72/68 -4%, Desktop/H5 28/34 -2%, Desktop/Button 17/26. */
	--unec_cta_title_fs: 72px;
	--unec_cta_title_lh: 68px;
	--unec_cta_title_ls: -0.04em;
	--unec_cta_lead_fs: 28px;
	--unec_cta_lead_lh: 34px;
	--unec_cta_lead_ls: -0.02em;
	--unec_cta_label_fs: 17px;
	--unec_cta_label_lh: 26px;
	--unec_cta_label_ls: 0;

	/* Scrim — Figma "Overlay": bottom 350px, transparent to black at 65%. */
	--unec_cta_scrim_h: 350px;
	--unec_cta_scrim_scale: 1;
	--unec_cta_scrim_stop: 65%;
	--unec_cta_scrim_color: #000000;
	--unec_cta_scrim_o: 1;

	/* Diagonals. The asset is a mask, so the alphas come from the artwork
	   (2% fills / 24% strokes) and the colour from --unec_cta_ink. */
	--unec_cta_lines_src: url( "../img/diagonals.svg" );
	--unec_cta_lines_size: cover;
	--unec_cta_lines_pos: center;
	--unec_cta_lines_o: 1;

	/* Background photo */
	--unec_cta_img_pos: center center;
	--unec_cta_img_scale: 1;
	/* The client uploads the photo with the brand tint already applied, so no
	   blend is needed. The machinery is still here: set --unec_cta_blend to
	   `luminosity` and --unec_cta_plate to the brand yellow to tint in CSS
	   instead (same trick as unec-subhero). */
	--unec_cta_blend: normal;

	/* Responsive. The breakpoints move these two multipliers and the type
	   tokens — never a value that PHP may have written inline. */
	--unec_cta_pad_scale: 1;
	--unec_cta_h_scale: 1;

	--unec_cta_focus_w: 2px;
	--unec_cta_focus_off: 4px;
	--unec_cta_motion: 0.2s;
}

/* Dark-ink variant — one property, exactly like .unec_sub_dark. */
#top .unec_cta.unec_cta_dark_ink {
	--unec_cta_ink: var(--unec_cta_dark);
	--unec_cta_ink_invert: var(--unec_cta_white);
	--unec_cta_plate: var(--unec_cta_yellow);
	--unec_cta_scrim_o: 0;
}

/* --------------------------------------------------------------------------
   2. Enfold plumbing
   -------------------------------------------------------------------------- */

/* Container release. `unec_cta_host` goes on the Color Section (or on the
   container itself); the bounded :has() fallback catches a page where the
   class was forgotten. :has() cannot help a browser that lacks it, so the
   class is the mechanism, not the fallback.

   Five levels, because Enfold's real chain is
   .container > .content > .flex_column > .entry-content-wrapper > our section
   and a Color Section adds one more. Bounded rather than a bare
   :has(.unec_cta) so a deeply nested column layout does not silently lose its
   centring — those pages should carry the class. */
#top .unec_cta_host .container,
#top .container.unec_cta_host,
#top .container:has( > .unec_cta ),
#top .container:has( > * > .unec_cta ),
#top .container:has( > * > * > .unec_cta ),
#top .container:has( > * > * > * > .unec_cta ),
#top .container:has( > * > * > * > * > .unec_cta ) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Avia floats the column, the content wrapper and the text-block section. A
   parent whose only children are floats collapses to zero height. */
#top .unec_cta_host .content,
#top .unec_cta_host .flex_column,
#top .unec_cta_host .entry-content-wrapper,
#top .unec_cta_host .av_textblock_section {
	float: none;
	width: 100%;
}

/* Enfold styles the bare element (#top div, 1-0-1), which beats inheritance
   from .unec_cta. Without this the cap-trim maths is computed from the theme
   face and the whole vertical rhythm shifts. */
#top .unec_cta,
#top .unec_cta * {
	font-family: var(--unec_cta_font);
}

/* --------------------------------------------------------------------------
   3. Section
   -------------------------------------------------------------------------- */

#top .unec_cta {
	position: relative;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	/* overflow: clip crops the oversized diagonal artwork and the photo without
	   creating a scroll container — unlike hidden, which would break any
	   position: sticky further up the page (unec-service trap 5). */
	overflow: hidden;
	min-height: calc( var(--unec_cta_minh) * var(--unec_cta_h_scale) );
	padding-top: calc( var(--unec_cta_pt, var(--unec_cta_pad_v) ) * var(--unec_cta_pad_scale) );
	padding-bottom: calc( var(--unec_cta_pb, var(--unec_cta_pad_b) ) * var(--unec_cta_pad_scale) );
	background-color: var(--unec_cta_plate);
	color: var(--unec_cta_ink);
	isolation: isolate;
}

@supports ( overflow: clip ) {
	#top .unec_cta { overflow: clip; }
}

/* --------------------------------------------------------------------------
   4. Background layers
   -------------------------------------------------------------------------- */

#top .unec_cta_bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

#top .unec_cta_img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--unec_cta_img_pos);
	transform: scale( var(--unec_cta_img_scale) );
	mix-blend-mode: var(--unec_cta_blend);
}

/* Figma mirrors the photo horizontally. Opt in per element rather than baking
   it into every upload. */
#top .unec_cta_img_flip {
	transform: scale( calc( var(--unec_cta_img_scale) * -1 ), var(--unec_cta_img_scale) );
}

#top .unec_cta_scrim {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc( var(--unec_cta_scrim_h) * var(--unec_cta_scrim_scale) );
	opacity: var(--unec_cta_scrim_o);
	background-image: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0 ) 0%,
		var(--unec_cta_scrim_color) var(--unec_cta_scrim_stop)
	);
}

#top .unec_cta_lines {
	position: absolute;
	inset: 0;
	opacity: var(--unec_cta_lines_o);
	background-color: var(--unec_cta_ink);
	-webkit-mask-image: var(--unec_cta_lines_src);
	mask-image: var(--unec_cta_lines_src);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: var(--unec_cta_lines_pos);
	mask-position: var(--unec_cta_lines_pos);
	-webkit-mask-size: var(--unec_cta_lines_size);
	mask-size: var(--unec_cta_lines_size);
}

/* No mask support: draw nothing rather than a flat ink slab over the photo. */
@supports not ( ( mask-image: none ) or ( -webkit-mask-image: none ) ) {
	#top .unec_cta_lines { display: none; }
}

/* --------------------------------------------------------------------------
   5. Content
   -------------------------------------------------------------------------- */

#top .unec_cta_inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--unec_cta_col_gap);
	width: 100%;
	/* House gutter ladder: 1920 -> 256, 1728 -> 160, 1608 -> 100, 1508 -> 50,
	   then the floor. No 100vw, so a scrollbar cannot shift it. */
	padding-left: max( var(--unec_cta_gutter_min), calc( ( 100% - var(--unec_cta_measure) ) / 2 ) );
	padding-right: max( var(--unec_cta_gutter_min), calc( ( 100% - var(--unec_cta_measure) ) / 2 ) );
}

#top .unec_cta_title {
	flex: 0 1 var(--unec_cta_head_w);
	max-width: var(--unec_cta_head_w);
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--unec_cta_ink);
	font-size: var(--unec_cta_title_fs);
	font-weight: 600;
	line-height: var(--unec_cta_title_lh);
	letter-spacing: var(--unec_cta_title_ls);
	text-transform: none;
	overflow-wrap: break-word;
	--u_cta_fs: var(--unec_cta_title_fs);
	--u_cta_lh: var(--unec_cta_title_lh);
}

#top .unec_cta_side {
	display: flex;
	flex: 0 0 var(--unec_cta_side_w);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--unec_cta_side_gap);
	width: var(--unec_cta_side_w);
	max-width: 100%;
}

#top .unec_cta_lead {
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_cta_ink);
	font-size: var(--unec_cta_lead_fs);
	font-weight: 500;
	line-height: var(--unec_cta_lead_lh);
	letter-spacing: var(--unec_cta_lead_ls);
	overflow-wrap: break-word;
	--u_cta_fs: var(--unec_cta_lead_fs);
	--u_cta_lh: var(--unec_cta_lead_lh);
}

/* --------------------------------------------------------------------------
   6. Link
   -------------------------------------------------------------------------- */

#top .unec_cta_link {
	display: inline-flex;
	align-items: center;
	gap: var(--unec_cta_link_gap);
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--unec_cta_link_ink, var(--unec_cta_ink));
	text-decoration: none;
	transition: color var(--unec_cta_motion) ease;
}

#top .unec_cta_chev {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--unec_cta_chev);
	height: var(--unec_cta_chev);
	border-radius: 999px;
	background-color: var(--unec_cta_chev_bg, var(--unec_cta_ink));
	color: var(--unec_cta_chev_fg, var(--unec_cta_ink_invert));
	transition: background-color var(--unec_cta_motion) ease, color var(--unec_cta_motion) ease;
}

#top .unec_cta_chev svg {
	display: block;
	width: var(--unec_cta_chev_icon);
	height: var(--unec_cta_chev_icon);
	/* The artwork ships with no baked colour; the wrapper owns the paint. */
	color: inherit;
}

#top .unec_cta_label {
	display: inline-block;
	font-size: var(--unec_cta_label_fs);
	font-weight: 500;
	line-height: var(--unec_cta_label_lh);
	letter-spacing: var(--unec_cta_label_ls);
	white-space: nowrap;
	--u_cta_fs: var(--unec_cta_label_fs);
	--u_cta_lh: var(--unec_cta_label_lh);
}

/* Interactive colours are properties the base rule READS but never SETS, so a
   state selector can re-point them without having to out-specify the base
   rule (unec-contact trap 3). */
#top .unec_cta_link:hover,
#top .unec_cta_link:focus-visible {
	--unec_cta_link_ink: var(--unec_cta_yellow);
	--unec_cta_chev_bg: var(--unec_cta_yellow);
	--unec_cta_chev_fg: var(--unec_cta_dark);
}

#top .unec_cta.unec_cta_dark_ink .unec_cta_link:hover,
#top .unec_cta.unec_cta_dark_ink .unec_cta_link:focus-visible {
	--unec_cta_link_ink: var(--unec_cta_white);
	--unec_cta_chev_bg: var(--unec_cta_white);
	--unec_cta_chev_fg: var(--unec_cta_dark);
}

#top .unec_cta_link:focus { outline: none; }

#top .unec_cta_link:focus-visible {
	outline: var(--unec_cta_focus_w) solid var(--unec_cta_ink);
	outline-offset: var(--unec_cta_focus_off);
}

@media ( prefers-reduced-motion: reduce ) {
	#top .unec_cta { --unec_cta_motion: 0s; }
}

/* --------------------------------------------------------------------------
   7. Cap-height trim
   Pretendard has USE_TYPO_METRICS set, so the browser reads the typo metrics:
   upm 2048, sTypoAscender 1949, sTypoDescender 494, sCapHeight 1448.
   ascent+descent = 2443 / 2048 = 1.19287109375
   (ascender - cap) / upm = 501 / 2048 = 0.24462890625
   descender / upm       = 494 / 2048 = 0.2412109375
   -------------------------------------------------------------------------- */

#top .unec_cta_trim {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not ( text-box-edge: cap alphabetic ) {
	#top .unec_cta_trim {
		--u_cta_half: calc( ( var(--u_cta_lh) - var(--u_cta_fs) * 1.19287109375 ) / 2 );
		display: block;
		margin-top: calc( -1 * ( var(--u_cta_half) + var(--u_cta_fs) * 0.24462890625 ) );
		margin-bottom: calc( -1 * ( var(--u_cta_half) + var(--u_cta_fs) * 0.2412109375 ) );
	}
	#top .unec_cta_label.unec_cta_trim { display: inline-block; }
}

/* --------------------------------------------------------------------------
   8. Breakpoints — custom properties only
   -------------------------------------------------------------------------- */

@media only screen and ( max-width: 1400px ) {
	#top .unec_cta {
		--unec_cta_pad_scale: 0.8;
		--unec_cta_h_scale: 0.92;
		--unec_cta_title_fs: 64px;
		--unec_cta_title_lh: 62px;
		--unec_cta_head_w: 620px;
		--unec_cta_lead_fs: 26px;
		--unec_cta_lead_lh: 32px;
		--unec_cta_side_w: 320px;
		--unec_cta_side_gap: 36px;
	}
}

@media only screen and ( max-width: 1180px ) {
	#top .unec_cta {
		--unec_cta_pad_scale: 0.7;
		--unec_cta_h_scale: 0.84;
		--unec_cta_title_fs: 56px;
		--unec_cta_title_lh: 54px;
		--unec_cta_head_w: 520px;
		--unec_cta_lead_fs: 24px;
		--unec_cta_lead_lh: 30px;
		--unec_cta_side_w: 300px;
		--unec_cta_side_gap: 32px;
		--unec_cta_col_gap: 32px;
	}
}

@media only screen and ( max-width: 1024px ) {
	#top .unec_cta {
		--unec_cta_pad_scale: 0.6;
		--unec_cta_h_scale: 0.74;
		--unec_cta_title_fs: 48px;
		--unec_cta_title_lh: 46px;
		--unec_cta_head_w: 100%;
		--unec_cta_lead_fs: 22px;
		--unec_cta_lead_lh: 28px;
		--unec_cta_side_w: 100%;
		--unec_cta_side_gap: 28px;
		--unec_cta_col_gap: 28px;
		--unec_cta_gutter_min: 40px;
		--unec_cta_scrim_scale: 0.86;
	}

	#top .unec_cta_inner {
		flex-direction: column;
		align-items: flex-start;
	}

	#top .unec_cta_title,
	#top .unec_cta_side {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and ( max-width: 768px ) {
	#top .unec_cta {
		--unec_cta_pad_scale: 0.45;
		--unec_cta_h_scale: 0.6;
		--unec_cta_title_fs: 40px;
		--unec_cta_title_lh: 40px;
		--unec_cta_lead_fs: 20px;
		--unec_cta_lead_lh: 26px;
		--unec_cta_side_gap: 24px;
		--unec_cta_col_gap: 24px;
		--unec_cta_gutter_min: 24px;
		--unec_cta_scrim_scale: 0.74;
	}
}

@media only screen and ( max-width: 480px ) {
	#top .unec_cta {
		--unec_cta_pad_scale: 0.35;
		--unec_cta_h_scale: 0.5;
		--unec_cta_title_fs: 32px;
		--unec_cta_title_lh: 34px;
		--unec_cta_lead_fs: 18px;
		--unec_cta_lead_lh: 24px;
		--unec_cta_label_fs: 16px;
		--unec_cta_label_lh: 24px;
		--unec_cta_side_gap: 20px;
		--unec_cta_col_gap: 20px;
		--unec_cta_scrim_scale: 0.63;
	}
}

/* --------------------------------------------------------------------------
   9. Editor placeholder (Enfold builder preview)
   -------------------------------------------------------------------------- */

.avia_layout_builder .unec_cta_editor_placeholder {
	padding: 14px 16px;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	background: #f7f7f7;
	color: #333;
	font-size: 12px;
	line-height: 18px;
}