/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/deline-digital/style-index.css ***!
  \****************************************************************************************************************************************************************************************/
/**
 * Deline Digital (+ Digital Advantage) — front end and editor preview.
 * Section/heading basics come from assets/tokens.css (.dlb-section etc.).
 *
 * Two layouts (block attribute `layout`):
 *  - Honeycomb: small first, logo, header, then stacked tinted cards; wider
 *    than 900px, the logo in the middle and the six advantages on a ring
 *    around it, text outside.
 *  - Row: graphic over centered text, two columns, then three, then all six
 *    in one row with the logo and tagline at the end (1000px and up).
 * Breakpoints are container queries, so the editor preview matches the
 * width the block actually has.
 */

.dlb-dd {
	background: var(--dlb-dd-bg, #fff);
}

.dlb-dd__inner {
	container: dd / inline-size;
	display: flex;
	flex-direction: column;
}

/* ---------- Header ---------- */

.dlb-dd__header {
	text-align: center;
}

.dlb-dd .dlb-dd__eyebrow {
	margin: 0 0 .6rem;
	color: var(--dlb-heading-color, #1a1a1a);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.dlb-dd .dlb-dd__header .dlb-header {
	margin-bottom: clamp(24px, 4vw, 40px);
}

.dlb-dd .dlb-intro {
	margin-top: .5rem;
}

/* ---------- Shared: logo, list, advantage ---------- */

.dlb-dd .dlb-dd__hub img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
}

.dlb-dd .dlb-dd__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dlb-dd;
}

.dlb-dd .dlb-dd__item {
	--_c: var(--dlb-dd-color, #337530);

	margin: 0;
	list-style: none;
	counter-increment: dlb-dd;
}

.dlb-dd .dlb-dd__item::before {
	display: none; /* Theme list bullets. */
}

.dlb-dd__media {
	aspect-ratio: 1;
}

.dlb-dd .dlb-dd__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/* Stand-in when an advantage has no graphic. */

.dlb-dd__hex {
	display: block;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--_c, #337530) 22%, #fff);
	clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}

.dlb-dd .dlb-dd__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	margin-bottom: 8px;
	padding: 0 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--_c) 14%, #fff);
	color: var(--_c);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.dlb-dd .dlb-dd__num::before {
	content: counter(dlb-dd, decimal-leading-zero);
}

.dlb-dd .dlb-dd__title {
	margin: 0 0 6px;
	padding: 0;
	color: var(--dlb-heading-color, #1a1a1a);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.dlb-dd .dlb-dd__text {
	margin: 0;
	color: #333;
	font-size: 13.5px;
	line-height: 1.5;
}

/* ---------- Buttons ---------- */

.dlb-dd__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 20px;
	margin-top: clamp(28px, 4vw, 48px);
}

/* Solid: blue, green on hover. Outline: blue outline, fills blue on hover.
   Custom colors (--dlb-dd-<which>-*) override either; an unset one leaves
   its --_custom-* invalid, so the default after the comma applies. */

.dlb-dd .dlb-dd__button {
	--_c: var(--_custom-color, var(--dlb-blue, #0076a8));
	--_t: var(--_custom-text, #fff);
	--_h: var(--_custom-hover, var(--dlb-green, #6cc24a));
	--_ht: var(--_custom-hover-text, #000);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 52px;
	padding: 0 32px;
	border: 2px solid var(--_c);
	border-radius: 999px;
	background: var(--_c);
	color: var(--_t);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s, color .2s, border-color .2s;
}

.dlb-dd .dlb-dd__button.is-outline {
	--_t: var(--_custom-text, var(--dlb-blue, #0076a8));
	--_h: var(--_custom-hover, var(--dlb-blue, #0076a8));
	--_ht: var(--_custom-hover-text, #fff);

	background: transparent;
}

.dlb-dd .dlb-dd__button--primary {
	--_custom-color: var(--dlb-dd-primary-color);
	--_custom-text: var(--dlb-dd-primary-text);
	--_custom-hover: var(--dlb-dd-primary-hover);
	--_custom-hover-text: var(--dlb-dd-primary-hover-text);
}

.dlb-dd .dlb-dd__button--secondary {
	--_custom-color: var(--dlb-dd-secondary-color);
	--_custom-text: var(--dlb-dd-secondary-text);
	--_custom-hover: var(--dlb-dd-secondary-hover);
	--_custom-hover-text: var(--dlb-dd-secondary-hover-text);
}

a.dlb-dd__button:hover,
a.dlb-dd__button:focus-visible {
	border-color: var(--_h);
	background: var(--_h);
	color: var(--_ht);
	text-decoration: none;
}

a.dlb-dd__button:focus-visible {
	outline: 2px solid var(--dlb-blue, #0076a8);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.dlb-dd .dlb-dd__button {
		flex: 1 1 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dlb-dd .dlb-dd__button {
		transition: none;
	}
}

/* ---------- Honeycomb ---------- */

/* Stacked: the cluster's children join the column, so the logo can sit
   above the header. */

.dlb-dd--honeycomb .dlb-dd__cluster {
	display: contents;
}

.dlb-dd--honeycomb .dlb-dd__hub {
	order: -1;
	width: min(62%, 240px);
	margin: 0 auto clamp(20px, 4vw, 32px);
}

.dlb-dd--honeycomb .dlb-dd__list {
	gap: 12px;
}

.dlb-dd--honeycomb .dlb-dd__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(100px, 34%, 150px);
	align-items: center;
	gap: 12px 16px;
	padding: 14px 16px 14px 18px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--_c) 8%, #fff);
}

.dlb-dd--honeycomb .dlb-dd__media {
	order: 1;
}

/* Graphic on alternate sides. */

.dlb-dd--honeycomb .dlb-dd__item:nth-child(even) {
	grid-template-columns: clamp(100px, 34%, 150px) minmax(0, 1fr);
}

.dlb-dd--honeycomb .dlb-dd__item:nth-child(even) .dlb-dd__media {
	order: -1;
}

.dlb-dd--honeycomb .dlb-dd__title {
	color: var(--_c);
}

/* Wide: the ring.
 * Sizes are in cqi of the cluster (1cqi = 1% of its width), so the whole
 * figure scales together. The six cells sit on a ring of radius --_ring
 * around the logo: 1 top, 2/3 upper left/right, 4/5 lower right/left, 6
 * bottom. Text sits outside each cell, toward the edge. */

@container dd (min-width: 901px) {
	.dlb-dd--honeycomb .dlb-dd__cluster {
		--_ring: 23cqi;
		--_cell: 18cqi;
		--_gap: 1.5cqi;
		--_text: 19cqi;

		container-type: inline-size;
		position: relative;
		display: block;
		width: min(100%, 1040px);
		aspect-ratio: 100 / 72;
		/* Text wraps to more lines on narrower screens and can reach past
		   the box; this keeps it off the header and buttons. */
		margin: 16px auto 40px;
	}

	.dlb-dd--honeycomb .dlb-dd__buttons {
		margin-top: 0;
	}

	.dlb-dd--honeycomb .dlb-dd__hub {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 34cqi;
		margin: 0;
		translate: -50% -50%;
	}

	/* Without a logo, the cells still need the stage. */
	.dlb-dd--honeycomb .dlb-dd__list {
		position: absolute;
		inset: 0;
		display: block;
	}

	.dlb-dd--honeycomb .dlb-dd__item {
		--_x: 0cqi;
		--_y: 0cqi;

		position: absolute;
		top: calc(50% + var(--_y));
		left: calc(50% + var(--_x));
		display: block;
		width: var(--_cell);
		padding: 0;
		border-radius: 0;
		background: none;
		translate: -50% -50%;
	}

	/* cos 30° × ring = 19.9cqi, sin 30° × ring = 11.5cqi. */
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(1) { --_y: -23cqi; }
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(2) { --_x: -19.9cqi; --_y: -11.5cqi; }
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(3) { --_x: 19.9cqi; --_y: -11.5cqi; }
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(4) { --_x: 19.9cqi; --_y: 11.5cqi; }
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(5) { --_x: -19.9cqi; --_y: 11.5cqi; }
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(6) { --_y: 23cqi; }

	.dlb-dd--honeycomb .dlb-dd__body {
		position: absolute;
		top: 50%;
		left: calc(100% + var(--_gap));
		width: var(--_text);
		translate: 0 -50%;
	}

	/* Left column: text on the left. */
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(2) .dlb-dd__body,
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(5) .dlb-dd__body {
		right: calc(100% + var(--_gap));
		left: auto;
	}

	/* Top and bottom cells: text above / below the cell's middle, clear of
	   the upper-right and lower-right cells. */
	.dlb-dd--honeycomb .dlb-dd__item:nth-child(1) .dlb-dd__body {
		top: auto;
		bottom: 50%;
		translate: none;
	}

	.dlb-dd--honeycomb .dlb-dd__item:nth-child(6) .dlb-dd__body {
		top: 50%;
		translate: none;
	}

	.dlb-dd--honeycomb .dlb-dd__title {
		font-size: 14px;
	}

	.dlb-dd--honeycomb .dlb-dd__text {
		font-size: 14px;
	}
}

/* ---------- Row ---------- */

.dlb-dd--row .dlb-dd__cluster {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(32px, 5vw, 48px);
}

.dlb-dd--row .dlb-dd__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 16px;
	width: 100%;
}

.dlb-dd--row .dlb-dd__item,
.dlb-dd--row .dlb-dd__hub {
	text-align: center;
}

.dlb-dd--row .dlb-dd__media {
	width: min(100%, 160px);
	margin: 0 auto 12px;
}

/* Logo and tagline after the advantages. */

.dlb-dd--row .dlb-dd__hub {
	order: 1;
	width: min(70%, 240px);
}

.dlb-dd .dlb-dd__tagline {
	margin: 14px 0 0;
	color: var(--dlb-heading-color, #1a1a1a);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.4;
	text-transform: uppercase;
}

.dlb-dd--row .dlb-dd__text {
	font-size: 13px;
}

/* Connector: a dot under the graphic and a dashed line down to the number. */

.dlb-dd--connectors .dlb-dd__body {
	position: relative;
	padding-top: 30px;
}

.dlb-dd--connectors .dlb-dd__body::before,
.dlb-dd--connectors .dlb-dd__body::after {
	position: absolute;
	left: 50%;
	content: "";
	translate: -50% 0;
}

.dlb-dd--connectors .dlb-dd__body::before {
	top: 2px;
	height: 22px;
	border-left: 2px dashed color-mix(in srgb, var(--_c) 55%, #fff);
}

.dlb-dd--connectors .dlb-dd__body::after {
	top: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--_c);
	box-shadow: 0 0 0 2px #fff;
}

@container dd (min-width: 640px) {
	.dlb-dd--row .dlb-dd__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* One row: six advantages, then the (slightly larger) logo. */

@container dd (min-width: 1000px) {
	.dlb-dd--row .dlb-dd__cluster {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.dlb-dd--row .dlb-dd__list {
		flex: 6 1 0;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 16px;
	}

	.dlb-dd--row .dlb-dd__hub {
		flex: 1.25 1 0;
		width: auto;
	}
}


/*# sourceMappingURL=style-index.css.map*/