/**
 * Heading Diamond – frontend styles
 */

.oc-heading-diamond {
	--oc-hd-accent: #a8b5a0;
	--oc-hd-line: #1a1a1a;
	position: relative;
	isolation: isolate;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.oc-heading-diamond *,
.oc-heading-diamond *::before,
.oc-heading-diamond *::after {
	box-sizing: border-box;
}

.oc-heading-diamond__inner {
	width: 100%;
	margin: 0 auto;
}

.oc-heading-diamond__heading {
	margin: 0 0 14px;
	color: #1a1a1a;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.oc-heading-diamond__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
}

.oc-heading-diamond.is-align-left .oc-heading-diamond__divider {
	margin-left: 0;
	margin-right: auto;
}

.oc-heading-diamond.is-align-right .oc-heading-diamond__divider {
	margin-left: auto;
	margin-right: 0;
}

.oc-heading-diamond__divider-line {
	flex: 1 1 auto;
	height: 1px;
	min-width: 24px;
	background-color: var(--oc-hd-line);
	opacity: 1;
}

.oc-heading-diamond__diamond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	color: var(--oc-hd-accent);
}

.oc-heading-diamond__diamond.is-char {
	font-size: 10px;
}

.oc-heading-diamond__diamond.is-css {
	width: 10px;
	height: 10px;
	background-color: var(--oc-hd-accent);
	transform: rotate(45deg);
	color: transparent;
	font-size: 0;
}