/**
 * AI Product Description Designer — rendered description styles.
 * Keyed to the classes emitted by Core\Renderer. Per-Template design tokens arrive as inline CSS
 * custom properties on .aipd-desc (set by Core\Renderer::style_vars and the visual builder), so a
 * single stylesheet styles every Template. Each property has a var() fallback, so unset tokens use
 * a sensible default.
 */

.aipd-desc {
	color: var(--aipd-text, #1f2937);
	background: var(--aipd-bg, transparent);
	font-family: var(--aipd-body-font, inherit);
	font-size: var(--aipd-font-size, 16px);
	line-height: 1.65;
	/*
	 * No forced max-width/margin here on purpose. The description inherits the theme's own content
	 * width, so it lines up with every other block on the page (a hard-coded max-width:100% here
	 * would override themes that cap the description column — e.g. Blocksy's 1290px — and render too
	 * wide). A custom width is opt-in: the Renderer emits an inline `max-width` + centering only when
	 * the template sets one.
	 */
}

.aipd-desc * {
	box-sizing: border-box;
}

/*
 * Forced uniform spacing for ALL templates (structured and exemplar). Defaults to 5px; the builder
 * can override via --aipd-block-gap. !important beats theme stylesheets and inline margins.
 */
.aipd-desc p,
.aipd-desc ul,
.aipd-desc ol,
.aipd-desc h1,
.aipd-desc h2,
.aipd-desc h3,
.aipd-desc h4,
.aipd-desc h5,
.aipd-desc h6,
.aipd-desc table,
.aipd-desc figure,
.aipd-desc blockquote,
.aipd-desc video,
.aipd-desc iframe,
.aipd-desc .aipd-video,
.aipd-desc > div {
	margin-top: 0 !important;
	margin-bottom: var(--aipd-block-gap, 5px) !important;
}

.aipd-desc img {
	display: block;
	margin-top: 0 !important;
	margin-bottom: var(--aipd-block-gap, 5px) !important;
	/* Horizontal alignment within the description (visible when image width < 100%). */
	margin-inline: var(--aipd-image-mi, 0 auto);
}

.aipd-desc .aipd-lead {
	font-size: var(--aipd-lead-size, 1.05rem);
	margin: 0 0 var(--aipd-block-gap, 5px);
}

.aipd-desc .aipd-hook {
	font-size: calc(var(--aipd-lead-size, 1.05rem) + 0.1rem);
	font-weight: 500;
}

.aipd-desc .aipd-h {
	display: block;
	font-family: var(--aipd-heading-font, inherit);
	color: var(--aipd-heading-color, #111827);
	font-size: var(--aipd-heading-size, 1.25rem);
	font-weight: var(--aipd-heading-weight, 700);
	text-align: var(--aipd-heading-align, left);
	margin: 0.6rem 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: var(--aipd-heading-rule, 2px) solid var(--aipd-accent, #2563eb);
}

/* Benefits — card grid */
.aipd-desc .aipd-benefits {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: var(--aipd-benefits-cols, repeat(auto-fit, minmax(220px, 1fr)));
	gap: var(--aipd-card-gap, 0.75rem);
}

.aipd-desc .aipd-benefit {
	background: var(--aipd-card-bg, #f8fafc);
	border: 1px solid var(--aipd-border, #e5e7eb);
	border-radius: var(--aipd-radius, 12px);
	padding: var(--aipd-card-padding, 0.9rem 1rem);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.aipd-desc .aipd-benefit-title {
	font-weight: 700;
	color: var(--aipd-benefit-title, var(--aipd-accent, #2563eb));
}

.aipd-desc .aipd-benefit-text {
	color: var(--aipd-benefit-text, var(--aipd-text, #1f2937));
	font-size: 0.95rem;
}

/* Features — marked bullets */
.aipd-desc .aipd-features {
	list-style: none;
	padding: 0;
}

.aipd-desc .aipd-feature {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.6rem;
	border-bottom: 1px solid var(--aipd-border, #e5e7eb);
}

.aipd-desc .aipd-feature::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.35rem;
	color: var(--aipd-feature-marker, var(--aipd-accent, #2563eb));
	font-weight: 700;
}

.aipd-desc .aipd-feature-label {
	font-weight: 600;
}

/* Specs — table */
.aipd-desc .aipd-specs {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--aipd-border, #e5e7eb);
	border-radius: var(--aipd-radius, 12px);
	overflow: hidden;
}

.aipd-desc .aipd-specs th,
.aipd-desc .aipd-specs td {
	text-align: left;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--aipd-border, #e5e7eb);
	font-size: 0.95rem;
}

.aipd-desc .aipd-specs th {
	width: 38%;
	background: var(--aipd-spec-header-bg, var(--aipd-card-bg, #f8fafc));
	color: var(--aipd-spec-header-col, var(--aipd-muted, #6b7280));
	font-weight: 600;
}

.aipd-desc .aipd-specs tr:last-child th,
.aipd-desc .aipd-specs tr:last-child td {
	border-bottom: 0;
}

/* Media */
.aipd-desc .aipd-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.6rem;
}

.aipd-desc .aipd-figure img,
.aipd-desc .aipd-gallery img {
	width: var(--aipd-image-width, 100%);
	height: auto;
	border-radius: var(--aipd-image-radius, var(--aipd-radius, 12px));
}

.aipd-desc .aipd-video {
	position: relative;
	width: 100%;
	max-width: var(--aipd-video-max, 100%);
	margin-inline: var(--aipd-video-mi, 0 auto);
	aspect-ratio: 16 / 9;
}

.aipd-desc .aipd-video iframe,
.aipd-desc .aipd-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--aipd-video-radius, var(--aipd-radius, 12px));
}

/* Local video shown at its natural aspect ratio (no 16:9 box). */
.aipd-desc .aipd-video-natural {
	position: static;
	aspect-ratio: auto;
	width: auto;
	height: auto;
}

.aipd-desc .aipd-video-natural video {
	position: static;
	width: 100%;
	height: auto;
	max-width: var(--aipd-video-max, 100%);
	border-radius: var(--aipd-video-radius, var(--aipd-radius, 12px));
}