/*
 * Dynamic Content Cards — base layer (layout, tokens, variants).
 * Everything is scoped under .dcc. Card visuals live in each skin's style.css.
 * Per-instance overrides: custom_css_variables="--dcc-accent:#7aa2ff;--dcc-radius:8px"
 */

/* ---------- Design tokens (dark = default) ---------- */
.dcc {
	--dcc-dir: 1;
	--dcc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;

	--dcc-surface: #151b33;
	--dcc-surface-2: #1b2342;
	--dcc-border: rgba(255, 255, 255, 0.08);
	--dcc-border-hover: rgba(217, 196, 154, 0.4);
	--dcc-radius: 12px;
	--dcc-shadow: none;

	--dcc-accent: #d9c49a;
	--dcc-on-accent: #1d2236;

	--dcc-text: #ffffff;
	--dcc-title-color: #ffffff;
	--dcc-text-muted: #a9a396;
	--dcc-check: #ffffff;
	--dcc-number: rgba(255, 255, 255, 0.28);

	--dcc-btn-bg: rgba(255, 255, 255, 0.06);
	--dcc-btn-text: #ffffff;
	--dcc-btn-radius: 6px;

	--dcc-overlay-mid: rgba(11, 16, 32, 0.55);

	--dcc-media-h: 162px;
	--dcc-pad: 22px;
	--dcc-features-cols: 2;
	--dcc-hover-zoom: 1.05;
	--dcc-hover-lift: -2px;

	box-sizing: border-box;
	font-family: var(--dcc-font);
	color: var(--dcc-text);
	-webkit-text-size-adjust: 100%;
}

/* Light variant: placeholder tokens (fine-tune later, no markup/JS change needed). */
.dcc[data-variant="light"] {
	--dcc-surface: #ffffff;
	--dcc-surface-2: #eef1f6;
	--dcc-border: rgba(15, 23, 42, 0.1);
	--dcc-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	--dcc-on-accent: #1d2236;
	--dcc-text: #0f172a;
	--dcc-title-color: #ffffff;
	--dcc-text-muted: #5b6475;
	--dcc-check: #0f172a;
	--dcc-number: rgba(255, 255, 255, 0.6);
	--dcc-btn-bg: rgba(15, 23, 42, 0.06);
	--dcc-btn-text: #0f172a;
	--dcc-overlay-mid: rgba(15, 23, 42, 0.45);
}

/* RTL: flips arrow direction/animation through --dcc-dir; spacing uses logical properties. */
.dcc--rtl,
[dir="rtl"] .dcc {
	--dcc-dir: -1;
}

.dcc--font-inherit {
	--dcc-font: inherit;
}

.dcc *,
.dcc *::before,
.dcc *::after {
	box-sizing: border-box;
}

/* ---------- Grid ---------- */
.dcc .dcc__grid {
	display: grid;
	grid-template-columns: repeat(var(--dcc-cols, 3), minmax(0, 1fr));
	gap: var(--dcc-gap, 24px);
	align-items: stretch; /* equal height per row */
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcc--equal-off .dcc__grid {
	align-items: start;
}

.dcc .dcc__item {
	display: flex; /* the card stretches to the full height of the row */
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcc .dcc__item > * {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 1024px) {
	.dcc .dcc__grid {
		grid-template-columns: repeat(var(--dcc-cols-tablet, 2), minmax(0, 1fr));
		gap: var(--dcc-gap-tablet, var(--dcc-gap, 24px));
	}
}

@media (max-width: 640px) {
	.dcc .dcc__grid {
		grid-template-columns: repeat(var(--dcc-cols-mobile, 1), minmax(0, 1fr));
		gap: var(--dcc-gap-mobile, var(--dcc-gap-tablet, var(--dcc-gap, 24px)));
	}
}

/* ---------- Editor-only notice ---------- */
.dcc--notice p {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-size: 13px;
	opacity: 0.8;
}