/**
 * DeL AI CERTs Course Sync — front-end styles for the v3 (editor-safe) layout.
 *
 * Every rule is scoped to .del-aicerts-content--v3, so this file has no effect
 * on v2 products or anything else on the page. It is only enqueued when a v3
 * description is present (see FrontendAssets).
 *
 * Custom properties are scoped to the wrapper (never :root). The defaults
 * below mirror StyleSettings::defaults() (asserted by ContentCssTest); the
 * admin's saved values are printed after this file as an inline block and
 * override them.
 *
 * Icons are CSS masks over inline SVG data URIs, coloured by background-color,
 * so the product description itself carries no <svg> for the editor to strip.
 */

.del-aicerts-content--v3 {
	--del-accent: #f57921;
	--del-accent-text: #ffffff;
	--del-facts-bg: #fff5ee;
	--del-facts-border: #f9d9c2;
	--del-heading: #1c1c1c;
	--del-body: #4a4a4a;
	--del-muted: #8a8a8a;
	--del-line: #ececec;
	--del-check: #1d9e75;
	--del-card-radius: 12px;

	--del-icon-duration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--del-icon-format: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
	--del-icon-exam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3'/%3E%3C/svg%3E");
	--del-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	--del-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4L6 8L10 4'/%3E%3C/svg%3E");

	color: var(--del-body);
	line-height: 1.7;
}

.del-aicerts-content--v3 * { box-sizing: border-box; }

/* Stray <p>/<br> that wpautop or the editor may still insert between our
   block elements must not add gaps. */
.del-aicerts-content--v3 > p:empty,
.del-aicerts-content--v3 .del-aicerts-facts > p,
.del-aicerts-content--v3 .del-modules-list > p,
.del-aicerts-content--v3 .del-modules-head > p:empty { display: none; }

.del-aicerts-content--v3 .del-aicerts-h {
	font-size: 19px;
	font-weight: 600;
	color: var(--del-heading);
	margin: 0 0 10px;
}
.del-aicerts-content--v3 .del-aicerts-block { margin: 0 0 26px; }
.del-aicerts-content--v3 .del-aicerts-prose { color: var(--del-body); line-height: 1.75; }
.del-aicerts-content--v3 .del-aicerts-prose-list { margin: 0; padding-left: 20px; line-height: 1.75; }
.del-aicerts-content--v3 .del-aicerts-prose-list li { margin: 6px 0; }

/* ── Facts band ─────────────────────────────── */
.del-aicerts-content--v3 .del-aicerts-facts {
	background: var(--del-facts-bg);
	border: 1px solid var(--del-facts-border);
	border-radius: var(--del-card-radius);
	padding: 6px 22px;
	margin: 0 0 28px;
}
.del-aicerts-content--v3 .del-fact-row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 15px 0;
	border-bottom: 1px solid var(--del-facts-border);
}
.del-aicerts-content--v3 .del-fact-row:last-child { border-bottom: none; }
.del-aicerts-content--v3 .del-fact-row__label {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 160px;
	flex: none;
	color: var(--del-heading);
	font-size: 14px;
	font-weight: 600;
}
.del-aicerts-content--v3 .del-fact-row__label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--del-accent);
	-webkit-mask: var(--del-icon-duration) center / contain no-repeat;
	mask: var(--del-icon-duration) center / contain no-repeat;
}
.del-aicerts-content--v3 .del-fact-row--format .del-fact-row__label::before {
	-webkit-mask-image: var(--del-icon-format);
	mask-image: var(--del-icon-format);
}
.del-aicerts-content--v3 .del-fact-row--exam .del-fact-row__label::before {
	-webkit-mask-image: var(--del-icon-exam);
	mask-image: var(--del-icon-exam);
}
.del-aicerts-content--v3 .del-fact-row__value {
	font-size: 15px;
	color: var(--del-body);
	line-height: 1.55;
	padding-top: 1px;
}
@media (max-width: 520px) {
	.del-aicerts-content--v3 .del-fact-row { flex-direction: column; gap: 4px; }
	.del-aicerts-content--v3 .del-fact-row__label { width: auto; }
}

/* ── What you'll learn ──────────────────────── */
.del-aicerts-content--v3 .del-learn__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 640px) {
	.del-aicerts-content--v3 .del-learn__grid { grid-template-columns: 1fr; }
}
.del-aicerts-content--v3 .del-learn__item {
	display: flex;
	gap: 9px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	list-style: none;
}
.del-aicerts-content--v3 .del-learn__item::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background-color: var(--del-check);
	-webkit-mask: var(--del-icon-check) center / contain no-repeat;
	mask: var(--del-icon-check) center / contain no-repeat;
}

/* ── Tools ──────────────────────────────────── */
.del-aicerts-content--v3 .del-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 16px;
}
.del-aicerts-content--v3 .del-tool-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	border: 1px solid var(--del-line);
	border-radius: var(--del-card-radius);
	padding: 20px 14px;
	transition: border-color .15s, box-shadow .15s;
}
.del-aicerts-content--v3 .del-tool-card:hover {
	border-color: var(--del-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.del-aicerts-content--v3 .del-tool-card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
}
.del-aicerts-content--v3 .del-tool-card__img img {
	max-width: 72px;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0;
}
.del-aicerts-content--v3 .del-tool-card__img > p { margin: 0; }
.del-aicerts-content--v3 .del-tool-card__img--placeholder {
	background: var(--del-facts-bg);
	border-radius: 12px;
	color: var(--del-accent);
	font-size: 30px;
	font-weight: 600;
}
.del-aicerts-content--v3 .del-tool-card__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--del-heading);
	line-height: 1.3;
}

/* ── Learning modules ───────────────────────── */
.del-aicerts-content--v3 .del-modules-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.del-aicerts-content--v3 .del-modules-head .del-aicerts-h { margin: 0; }
.del-aicerts-content--v3 .del-modules-count {
	flex: none;
	font-size: 13px;
	color: var(--del-muted);
}
.del-aicerts-content--v3 .del-modules-list {
	border: 1px solid var(--del-line);
	border-radius: var(--del-card-radius);
	overflow: hidden;
}
.del-aicerts-content--v3 .del-module {
	border-bottom: 1px solid var(--del-line);
	margin: 0;
}
.del-aicerts-content--v3 .del-module:last-child { border-bottom: none; }
.del-aicerts-content--v3 .del-module__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
}
.del-aicerts-content--v3 .del-module__summary::-webkit-details-marker { display: none; }
.del-aicerts-content--v3 .del-module__summary::marker { content: ""; }
.del-aicerts-content--v3 .del-module__summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: var(--del-muted);
	-webkit-mask: var(--del-icon-chevron) center / contain no-repeat;
	mask: var(--del-icon-chevron) center / contain no-repeat;
	transition: transform .2s;
}
.del-aicerts-content--v3 .del-module__num {
	flex: none;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--del-facts-bg);
	color: var(--del-accent);
	font-size: 13px;
	font-weight: 600;
}
.del-aicerts-content--v3 .del-module__title {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--del-heading);
}
.del-aicerts-content--v3 .del-module__body {
	padding: 0 18px 16px 60px;
	color: var(--del-body);
	line-height: 1.75;
}
.del-aicerts-content--v3 .del-module[open] .del-module__summary::after { transform: rotate(180deg); }
.del-aicerts-content--v3 .del-module[open] .del-module__num {
	background: var(--del-accent);
	color: var(--del-accent-text);
}

@media (prefers-reduced-motion: reduce) {
	.del-aicerts-content--v3 .del-module__summary::after,
	.del-aicerts-content--v3 .del-tool-card { transition: none; }
}