/*
 * digiloom: styles for the custom block styles registered in functions.php.
 * Keep this file in sync with digiloom_register_block_styles().
 */

/* core/list — is-style-no-disc */
.wp-block-list.is-style-no-disc {
	list-style: none;
	padding-left: 0;
}

/* core/list — is-style-dot-brand: the prototype's coloured bullet rows. */
.wp-block-list.is-style-dot-brand {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-dot-brand > li {
	align-items: center;
	display: flex;
	gap: 12px;
}

.wp-block-list.is-style-dot-brand > li::before {
	background-color: var(--wp--preset--color--indigo);
	border-radius: var(--wp--custom--radius--full);
	content: "";
	flex: 0 0 auto;
	height: 6px;
	width: 6px;
}

.wp-block-list.is-style-dot-brand > li:nth-child(2)::before {
	background-color: var(--wp--preset--color--purple);
}

.wp-block-list.is-style-dot-brand > li:nth-child(3n)::before {
	background-color: var(--wp--preset--color--pink);
}

/* core/heading — is-style-gradient-text */
.wp-block-heading.is-style-gradient-text,
.is-style-gradient-text .digiloom-gradient-text {
	background-image: var(--wp--custom--brand--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* core/group — is-style-card */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--slate-line);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--card);
}

/* core/group — is-style-card-dark */
.wp-block-group.is-style-card-dark {
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--deep);
	color: var(--wp--preset--color--slate-muted);
}

.wp-block-group.is-style-card-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

/* core/group — is-style-gradient-top: the 4px brand rule the value cards use. */
.wp-block-group.is-style-gradient-top {
	overflow: hidden;
	position: relative;
}

.wp-block-group.is-style-gradient-top::before {
	background-image: var(--wp--custom--brand--gradient);
	content: "";
	height: 4px;
	inset: 0 0 auto 0;
	position: absolute;
}

/* core/quote — is-style-testimonial */
.wp-block-quote.is-style-testimonial {
	border: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--medium);
	padding: 0;
}

/* Reveal-on-scroll, driven by js/digiloom-motion.js. Content is visible by
   default; only when JS confirms support do we hide-then-reveal. */
.digiloom-reveal-ready [data-digiloom-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.digiloom-reveal-ready [data-digiloom-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.digiloom-reveal-ready [data-digiloom-reveal] {
		opacity: 1;
		transform: none;
	}
}

/*
 * Flush-left section bodies.
 *
 * Core's constrained layout emits
 *   :where(.is-layout-constrained) > :where(...) { margin-left: auto !important;
 *                                                  margin-right: auto !important }
 * which horizontally centres any child narrower than its container — a short
 * separator, an icon tile, a max-width lead paragraph. Our sections are
 * left-aligned by design, so they opt out here. The !important is not
 * decoration: it is the only way to beat core's own !important.
 */
.digiloom-mission__body > *,
.digiloom-history-teaser__body > *,
.digiloom-featured__body > *,
.digiloom-value-card > *,
.digiloom-timeline__card > *,
.digiloom-demo-card__media > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/*
 * Editor-only placeholder shown by a dynamic block that has no data yet.
 * Never reaches the front end — the render callback returns an empty string
 * there rather than an empty shell.
 */
.digiloom-block-placeholder {
	background-color: var(--wp--preset--color--slate-tint);
	border: 1px dashed var(--wp--preset--color--slate-muted);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--xx-small);
	margin: 0;
	padding: 24px;
	text-align: center;
}