/* Rodelle Section Headline widget. Same heading/description formatting as the
   Product Showcase header; description/title/icon max-widths are set inline per
   instance, and block alignment is driven by a root modifier class. */

.rodelle-section-headline {
	color: #21464f;
	font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* Alignment (whole block). Text alignment lives on the root; the constrained
   blocks' horizontal auto-margins follow it. */

.rodelle-section-headline--align-center {
	text-align: center;
}

.rodelle-section-headline--align-left {
	text-align: left;
}

.rodelle-section-headline--align-right {
	text-align: right;
}

.rodelle-section-headline__icon,
.rodelle-section-headline__title,
.rodelle-section-headline__desc {
	margin-left: auto;
	margin-right: auto;
}

.rodelle-section-headline--align-left .rodelle-section-headline__icon,
.rodelle-section-headline--align-left .rodelle-section-headline__title,
.rodelle-section-headline--align-left .rodelle-section-headline__desc {
	margin-left: 0;
	margin-right: auto;
}

.rodelle-section-headline--align-right .rodelle-section-headline__icon,
.rodelle-section-headline--align-right .rodelle-section-headline__title,
.rodelle-section-headline--align-right .rodelle-section-headline__desc {
	margin-left: auto;
	margin-right: 0;
}

/* Elements */

.rodelle-section-headline__icon {
	margin-bottom: 1rem;
}

.rodelle-section-headline__icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.rodelle-section-headline__title {
	font-family: "DM Serif Display", serif;
	color: #21464f;
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.rodelle-section-headline__desc {
	color: #606060;
	font-size: 1.125rem;
	line-height: 1.5;
	margin-top: 0;
}

.rodelle-section-headline__desc p {
	margin: 0;
}

.rodelle-section-headline__button {
	display: inline-block;
	margin-top: 1.5rem;
	background: #21464f;
	color: #fff;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.875rem 2rem;
	border-radius: 0.375rem;
	text-decoration: none;
	transition: background 0.2s ease;
}

.rodelle-section-headline__button:hover,
.rodelle-section-headline__button:focus-visible {
	background: #ff703c;
	color: #000;
}