/* ==========================================================================
   UNEC — Certificates  v1.0.1
   Figma 142:4176 "Archive" / grid 564:3737 — file Q5ckGwby9XewAE51OXln5p

   Every selector is scoped under #top. The only !important in the module is
   inside the <noscript> block the renderer emits (see php/render.php).

   Geometry, at the 1728 design width:
     container      1408, gutter max(50px, (100% - 1408px) / 2)
     card           343 x 552, background #F8F8F9, 12px gutters, 4 across
     card inset     40 all round
     image box      263 x 359  (343 - 80, aspect 263/359)
     title          cap line 439 from the card top, 24/28 SemiBold, centred
                    (40 + 359 + 40 = 439; three trimmed lines = 72.97;
                     439 + 72.97 + 40 = 552 — the card height IS three lines)
     grid -> more   80
     Load More      20/30 Medium label, 20 gap, 56 circle, 24 chevron

   Responsive rule of the house: --unec_cert_gap / --unec_cert_inset /
   --unec_cert_cols / the ratio / the paddings are written INLINE from PHP, and
   an inline custom property beats every stylesheet rule. So no media query
   below re-declares any of them — the ladder moves a scale FACTOR, and the
   column count is changed by overriding grid-template-columns itself.
   See claude/section-padding.md, trap 1.
   ========================================================================== */

#top .unec_cert {
	/* --- palette ------------------------------------------------------- */
	--unec_cert_ink: #231f20;
	--unec_cert_sec_bg: #ffffff;
	--unec_cert_card_bg: #f8f8f9;
	--unec_cert_card_bg_hover: #f1f1f3;
	--unec_cert_img_bg: #ffffff;

	--unec_cert_btn_bg: #231f20;
	--unec_cert_btn_ink: #ffffff;
	--unec_cert_btn_bg_hover: #ffc20e;
	--unec_cert_btn_ink_hover: #231f20;

	/* --- type ---------------------------------------------------------- */
	--unec_cert_font: "Pretendard", "Pretendard Variable", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--unec_cert_title_fs: 24px;
	--unec_cert_title_lh: 28px;
	--unec_cert_title_ls: -0.02em;
	--unec_cert_title_lines: 3;

	--unec_cert_more_fs: 20px;
	--unec_cert_more_lh: 30px;
	--unec_cert_more_ls: -0.01em;

	/* Pretendard typo metrics, USE_TYPO_METRICS set:
	   upem 2048, ascender 1949, descender 494, capHeight 1448.
	   Verified with fontTools against the shipped Medium and SemiBold faces. */
	--unec_cert_content: 1.19287109375; /* (1949 + 494) / 2048 */
	--unec_cert_capgap: 0.24462890625; /* (1949 - 1448) / 2048 */
	--unec_cert_desc: 0.2412109375; /*  494 / 2048 */
	--unec_cert_cap: 0.70703125; /* 1448 / 2048 */

	/* --- layout -------------------------------------------------------- */
	--unec_cert_max: 1408px;
	--unec_cert_gutter: max(50px, calc((100% - var(--unec_cert_max)) / 2));

	--unec_cert_cols: 4;
	--unec_cert_gap: 12px;
	--unec_cert_inset: 40px;
	--unec_cert_ratio: 263 / 359;
	--unec_cert_radius: 0px;
	--unec_cert_fit: cover;

	--unec_cert_title_gap: 40px; /* image bottom -> title cap line */
	--unec_cert_more_gap: 80px; /* grid bottom  -> Load More label */
	--unec_cert_more_stack: 20px; /* label        -> circle */
	--unec_cert_btn: 56px;

	--unec_cert_scale: 1; /* card internals ladder */
	--unec_cert_pad_v: 100px; /* house section rhythm */
	--unec_cert_pad_scale: 1; /* section padding ladder */

	--unec_cert_ease: 0.2s ease;
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

#top .unec_cert_sec {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background-color: var(--unec_cert_sec_bg);
	color: var(--unec_cert_ink);
	font-family: var(--unec_cert_font);

	padding-top: 0px !important;
	padding-bottom: calc(var(--unec_cert_pb, var(--unec_cert_pad_v, 100px)) * var(--unec_cert_pad_scale, 1));
	padding-left: var(--unec_cert_gutter);
	padding-right: var(--unec_cert_gutter);
}

/* Enfold styles the bare element (#top div, 1-0-1), which beats inheritance
   from .unec_cert. Restate the face on every descendant or the cap-height trim
   is computed from the wrong font's metrics and the whole rhythm shifts.
   Same note as claude/services-page.md trap 1. */
#top .unec_cert_sec * {
	font-family: var(--unec_cert_font);
}

#top .unec_cert_sec.unec_cert_contained {
	--unec_cert_gutter: 0px;
}

#top .unec_cert_sec.unec_cert_bg_grey {
	--unec_cert_sec_bg: #f8f8f9;
	--unec_cert_card_bg: #ffffff;
	--unec_cert_card_bg_hover: #f3f3f4;
}

#top .unec_cert_sec.unec_cert_bg_dark {
	--unec_cert_sec_bg: #231f20;
	--unec_cert_ink: #ffffff;
	--unec_cert_card_bg: #2c2829;
	--unec_cert_card_bg_hover: #363132;
	--unec_cert_btn_bg: #ffffff;
	--unec_cert_btn_ink: #231f20;
}

#top .unec_cert .unec_cert_inner {
	box-sizing: border-box;
	max-width: var(--unec_cert_max);
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Cap-height trim

   Native where available; elsewhere the Capsize negative-margin pair on
   display:table pseudo-elements, which composes with the element's own
   margins instead of fighting them. Each user sets only --u_cert_fs / --u_cert_lh.

   --unec_cert_hl is declared HERE, not on .unec_cert: a custom property is
   substituted on the element it is declared on, so a value referencing
   --u_cert_lh has to be declared where --u_cert_lh exists.
   -------------------------------------------------------------------------- */

#top .unec_cert .unec_cert_trim {
	--unec_cert_hl: calc((var(--u_cert_lh) - var(--unec_cert_content) * var(--u_cert_fs)) / 2);
	display: block;
	font-size: var(--u_cert_fs);
	line-height: var(--u_cert_lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-trim: trim-both) {
	#top .unec_cert .unec_cert_trim::before,
	#top .unec_cert .unec_cert_trim::after {
		content: "";
		display: table;
	}

	#top .unec_cert .unec_cert_trim::before {
		margin-bottom: calc(-1 * (var(--unec_cert_hl) + var(--unec_cert_capgap) * var(--u_cert_fs)));
	}

	#top .unec_cert .unec_cert_trim::after {
		margin-top: calc(-1 * (var(--unec_cert_hl) + var(--unec_cert_desc) * var(--u_cert_fs)));
	}
}

/* --------------------------------------------------------------------------
   Grid

   Enfold styles content lists through #top .entry-content-wrapper ul / li
   (1-1-1), so every list rule here carries the element name to win on the
   class column.
   -------------------------------------------------------------------------- */

#top .unec_cert ul.unec_cert_grid {
	display: grid;
	grid-template-columns: repeat(var(--unec_cert_cols), minmax(0, 1fr));
	gap: var(--unec_cert_gap);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_cert li.unec_cert_card {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--unec_cert_card_bg);
	border-radius: var(--unec_cert_radius);
	transition: background-color var(--unec_cert_ease);
}

/* The UA sheet's [hidden] { display: none } loses to the author rule above, so
   it has to be restated. This is what the Load More button removes. */
#top .unec_cert li.unec_cert_card[hidden] {
	display: none;
}

#top .unec_cert li.unec_cert_card::before,
#top .unec_cert li.unec_cert_card::after {
	content: none;
}

#top .unec_cert figure.unec_cert_fig {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: calc(var(--unec_cert_inset) * var(--unec_cert_scale));
	border: 0;
	background: none;
}

/* --------------------------------------------------------------------------
   Card media
   -------------------------------------------------------------------------- */

#top .unec_cert .unec_cert_media {
	position: relative;
	display: block;
	flex: none;
	width: 100%;
	aspect-ratio: var(--unec_cert_ratio);
	overflow: hidden;
	background-color: var(--unec_cert_img_bg);
	border-radius: var(--unec_cert_radius);
	text-decoration: none;
}

#top .unec_cert a.unec_cert_link {
	cursor: pointer;
	color: inherit;
}

#top .unec_cert a.unec_cert_link:hover,
#top .unec_cert a.unec_cert_link:focus {
	text-decoration: none;
}

#top .unec_cert a.unec_cert_link:focus-visible {
	outline: 2px solid var(--unec_cert_ink);
	outline-offset: 4px;
}

#top .unec_cert .unec_cert_img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: var(--unec_cert_fit);
	object-position: center;
}

/* Deliberate deviation from Figma, which draws no interactive state: the cards
   are lightbox triggers now, so they need an affordance. One token, and
   browsers without :has() simply do not get it. */
#top .unec_cert li.unec_cert_card:has(.unec_cert_link:hover),
#top .unec_cert li.unec_cert_card:has(.unec_cert_link:focus-visible) {
	--unec_cert_card_bg: var(--unec_cert_card_bg_hover);
}

/* --------------------------------------------------------------------------
   Card title
   -------------------------------------------------------------------------- */

#top .unec_cert figcaption.unec_cert_title {
	--u_cert_fs: var(--unec_cert_title_fs);
	--u_cert_lh: var(--unec_cert_title_lh);

	margin: calc(var(--unec_cert_title_gap) * var(--unec_cert_scale)) 0 0;
	padding: 0;
	color: var(--unec_cert_ink);
	font-weight: 600;
	letter-spacing: var(--unec_cert_title_ls);
	text-align: center;
	overflow-wrap: break-word;

	/* Three trimmed lines — which is exactly what makes the card 552 tall.
	   Cards with shorter titles keep the height; a longer one grows its row. */
	min-height: calc(
		(var(--unec_cert_title_lines) - 1) * var(--u_cert_lh) + var(--unec_cert_cap) * var(--u_cert_fs)
	);
}

/* --------------------------------------------------------------------------
   Load More
   -------------------------------------------------------------------------- */

#top .unec_cert .unec_cert_more {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: calc(var(--unec_cert_more_gap) * var(--unec_cert_pad_scale));
}

/* Same trap as the cards: an author display rule beats the UA sheet's
   [hidden] { display: none }, so the script setting .hidden = true would
   otherwise leave the exhausted control on screen. */
#top .unec_cert .unec_cert_more[hidden] {
	display: none;
}

#top .unec_cert button.unec_cert_more_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--unec_cert_more_stack);

	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--unec_cert_ink);
	font-family: var(--unec_cert_font);
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#top .unec_cert button.unec_cert_more_btn:hover,
#top .unec_cert button.unec_cert_more_btn:focus-visible {
	/* Base rules read these but never set them, so a state selector can
	   re-point them — claude/contact-pages.md, trap 3. */
	--unec_cert_btn_bg: var(--unec_cert_btn_bg_hover);
	--unec_cert_btn_ink: var(--unec_cert_btn_ink_hover);
	background: none;
	color: var(--unec_cert_ink);
}

#top .unec_cert button.unec_cert_more_btn:focus-visible {
	outline: 2px solid var(--unec_cert_ink);
	outline-offset: 6px;
}

#top .unec_cert .unec_cert_more_label {
	--u_cert_fs: var(--unec_cert_more_fs);
	--u_cert_lh: var(--unec_cert_more_lh);

	color: var(--unec_cert_ink);
	font-weight: 500;
	letter-spacing: var(--unec_cert_more_ls);
	text-align: center;
	white-space: nowrap;
}

#top .unec_cert .unec_cert_more_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--unec_cert_btn);
	height: var(--unec_cert_btn);
	border-radius: 999px;
	background-color: var(--unec_cert_btn_bg);
	color: var(--unec_cert_btn_ink);
	transition: background-color var(--unec_cert_ease), color var(--unec_cert_ease);
}

#top .unec_cert .unec_cert_more_icon .unec_cert_icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
}

#top .unec_cert .unec_cert_status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Lightbox — built by js/unec-certificates.js, appended to <body>, so these
   rules are deliberately NOT scoped under #top.
   -------------------------------------------------------------------------- */

.unec_cert_lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	background: rgba(35, 31, 32, 0.92);
	opacity: 0;
	transition: opacity 0.18s ease;
	font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.unec_cert_lb[hidden] {
	display: none;
}

.unec_cert_lb.is-open {
	opacity: 1;
}

.unec_cert_lb_figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
}

.unec_cert_lb_img {
	display: block;
	max-width: min(900px, 100%);
	max-height: calc(100vh - 200px);
	width: auto;
	height: auto;
	object-fit: contain;
	background: #ffffff;
}

.unec_cert_lb_cap {
	margin: 0;
	max-width: 700px;
	color: #ffffff;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -0.01em;
	font-weight: 500;
	text-align: center;
}

.unec_cert_lb_count {
	margin: 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 17px;
	line-height: 26px;
	text-align: center;
}

.unec_cert_lb_btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.unec_cert_lb_btn:hover,
.unec_cert_lb_btn:focus-visible {
	background: #ffc20e;
	color: #231f20;
}

.unec_cert_lb_btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.unec_cert_lb_btn svg {
	display: block;
	width: 24px;
	height: 24px;
}

.unec_cert_lb_close {
	top: 24px;
	right: 24px;
}

.unec_cert_lb_prev {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.unec_cert_lb_next {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

.unec_cert_lb_btn[hidden] {
	display: none;
}

body.unec_cert_lb_open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive ladder

   Monotonic by construction: --unec_cert_scale and --unec_cert_pad_scale are
   multipliers, so a step can never end up larger than the one above it. No
   media query re-declares a property PHP writes inline.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1400px) {
	#top .unec_cert {
		--unec_cert_pad_scale: 0.8;
		--unec_cert_scale: 0.9;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_cert {
		--unec_cert_pad_scale: 0.7;
		--unec_cert_scale: 0.8;
		--unec_cert_title_fs: 22px;
		--unec_cert_title_lh: 26px;
	}

	#top .unec_cert ul.unec_cert_grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_cert {
		--unec_cert_pad_scale: 0.6;
		--unec_cert_scale: 0.7;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_cert {
		--unec_cert_pad_scale: 0.45;
		--unec_cert_scale: 0.6;
		--unec_cert_gutter: 40px;
		--unec_cert_title_fs: 20px;
		--unec_cert_title_lh: 26px;
		--unec_cert_title_lines: 2;
		--unec_cert_more_fs: 18px;
		--unec_cert_more_lh: 26px;
	}

	#top .unec_cert ul.unec_cert_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.unec_cert_lb {
		padding: 24px;
	}

	.unec_cert_lb_img {
		max-height: calc(100vh - 240px);
	}

	.unec_cert_lb_prev {
		left: 12px;
	}

	.unec_cert_lb_next {
		right: 12px;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_cert {
		--unec_cert_pad_scale: 0.35;
		--unec_cert_scale: 0.5;
		--unec_cert_gutter: 24px;
	}

	#top .unec_cert ul.unec_cert_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.unec_cert_lb_btn {
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_cert li.unec_cert_card,
	#top .unec_cert .unec_cert_more_icon,
	.unec_cert_lb,
	.unec_cert_lb_btn {
		transition: none;
	}
}