/**
 * DFL Why Us — centred header plus icon columns divided by hairlines.
 *
 * The divider belongs to the left edge of every column except the one that
 * starts a row, so the hide rules are written per column count and per
 * breakpoint. The widget prints the matching count classes.
 *
 * Nothing here uses !important, so panel settings always win.
 */

.dfl-why {
	--dfl-why-container: 1240px;
	--dfl-why-cols: 4;
	--dfl-why-col-gap: 0px;
	--dfl-why-row-gap: 48px;
	--dfl-why-header-align: center;
	--dfl-why-header-items: center;
	--dfl-why-item-align: center;
	--dfl-why-item-items: center;
	--dfl-why-icon-size: 44px;
	--dfl-why-icon-box: auto;
	--dfl-why-divider-color: #dccdb0;
	--dfl-why-divider-w: 1px;
	--dfl-why-divider-h: 100%;

	width: 100%;
	background-color: #f7f7f5;
}

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

.dfl-why__container {
	width: 100%;
	max-width: var(--dfl-why-container, 1240px);
	margin-left: auto;
	margin-right: auto;
	padding: 80px 24px;
}

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

.dfl-why__header {
	display: flex;
	flex-direction: column;
	align-items: var(--dfl-why-header-items, center);
	margin-bottom: 54px;
	text-align: var(--dfl-why-header-align, center);
}

.dfl-why__eyebrow {
	max-width: 100%;
	margin: 0 0 14px;
	color: #b08d45;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
}

.dfl-why__heading {
	max-width: 100%;
	margin: 0;
	color: #14100b;
	font-size: 42px;
	font-weight: 500;
	line-height: 1.2;
}

.dfl-why__heading em,
.dfl-why__heading .dfl-accent {
	color: #b08d45;
	font-style: inherit;
}

.dfl-why__intro {
	max-width: 680px;
	margin: 16px 0 0;
	color: #4a443b;
	font-size: 16px;
	line-height: 1.8;
}

.dfl-why__intro p {
	margin: 0;
}

.dfl-why__intro p + p {
	margin-top: 0.8em;
}

/* ---------------------------------- Grid --------------------------------- */

.dfl-why__grid {
	display: grid;
	grid-template-columns: repeat(var(--dfl-why-cols, 4), minmax(0, 1fr));
	column-gap: var(--dfl-why-col-gap, 0px);
	row-gap: var(--dfl-why-row-gap, 48px);
	width: 100%;
}

.dfl-why__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: var(--dfl-why-item-items, center);
	min-width: 0;
	padding: 0 30px;
	color: inherit;
	text-align: var(--dfl-why-item-align, center);
	text-decoration: none;
	transition-property: background-color, box-shadow, transform;
	transition-duration: 300ms;
	transition-timing-function: ease;
}

a.dfl-why__item:hover,
a.dfl-why__item:focus {
	text-decoration: none;
}

a.dfl-why__item:focus-visible {
	outline: 2px solid #c9a24d;
	outline-offset: 4px;
}

/* --------------------------------- Icon ---------------------------------- */

.dfl-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dfl-why-icon-box, auto);
	height: var(--dfl-why-icon-box, auto);
	margin: 0 0 26px;
	color: #b08d45;
	font-size: var(--dfl-why-icon-size, 44px);
	line-height: 1;
	transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
}

.dfl-why__icon i {
	font-size: inherit;
	line-height: 1;
}

.dfl-why__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dfl-why__icon--image img {
	display: block;
	width: var(--dfl-why-icon-size, 44px);
	height: auto;
	max-width: 100%;
}

/* ------------------------------ Title / copy ----------------------------- */

.dfl-why__title {
	max-width: 100%;
	margin: 0 0 14px;
	color: #14100b;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.35;
	transition: color 300ms ease;
}

.dfl-why__text {
	max-width: 220px;
	margin: 0;
	color: #5a5349;
	font-size: 14px;
	line-height: 1.75;
}

/* -------------------------------- Dividers ------------------------------- */

.dfl-why--dividers .dfl-why__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: var(--dfl-why-divider-w, 1px);
	height: var(--dfl-why-divider-h, 100%);
	background-color: var(--dfl-why-divider-color, #dccdb0);
}

/* Desktop: drop the rule on whichever column opens each row. */
@media (min-width: 1025px) {
	.dfl-why--dividers.dfl-why--cols-1 .dfl-why__item:nth-child(1n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-2 .dfl-why__item:nth-child(2n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-3 .dfl-why__item:nth-child(3n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-4 .dfl-why__item:nth-child(4n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-5 .dfl-why__item:nth-child(5n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-6 .dfl-why__item:nth-child(6n + 1)::before {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.dfl-why--dividers.dfl-why--cols-t-1 .dfl-why__item:nth-child(1n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-t-2 .dfl-why__item:nth-child(2n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-t-3 .dfl-why__item:nth-child(3n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-t-4 .dfl-why__item:nth-child(4n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-t-5 .dfl-why__item:nth-child(5n + 1)::before,
	.dfl-why--dividers.dfl-why--cols-t-6 .dfl-why__item:nth-child(6n + 1)::before {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Hide */
	.dfl-why--dividers-m-hide .dfl-why__item::before {
		display: none;
	}

	/* Keep vertical */
	.dfl-why--dividers-m-keep.dfl-why--cols-m-1 .dfl-why__item:nth-child(1n + 1)::before,
	.dfl-why--dividers-m-keep.dfl-why--cols-m-2 .dfl-why__item:nth-child(2n + 1)::before,
	.dfl-why--dividers-m-keep.dfl-why--cols-m-3 .dfl-why__item:nth-child(3n + 1)::before,
	.dfl-why--dividers-m-keep.dfl-why--cols-m-4 .dfl-why__item:nth-child(4n + 1)::before,
	.dfl-why--dividers-m-keep.dfl-why--cols-m-5 .dfl-why__item:nth-child(5n + 1)::before,
	.dfl-why--dividers-m-keep.dfl-why--cols-m-6 .dfl-why__item:nth-child(6n + 1)::before {
		display: none;
	}

	/* Turn horizontal: the rule moves into the middle of the row gap. */
	.dfl-why--dividers-m-horizontal .dfl-why__item::before {
		left: 0;
		right: 0;
		top: calc(var(--dfl-why-row-gap, 48px) / -2);
		transform: none;
		width: auto;
		height: var(--dfl-why-divider-w, 1px);
	}

	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-1 .dfl-why__item:nth-child(-n + 1)::before,
	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-2 .dfl-why__item:nth-child(-n + 2)::before,
	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-3 .dfl-why__item:nth-child(-n + 3)::before,
	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-4 .dfl-why__item:nth-child(-n + 4)::before,
	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-5 .dfl-why__item:nth-child(-n + 5)::before,
	.dfl-why--dividers-m-horizontal.dfl-why--cols-m-6 .dfl-why__item:nth-child(-n + 6)::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dfl-why__item,
	.dfl-why__icon,
	.dfl-why__title {
		transition-duration: 1ms;
	}
}