/*
 * Widget sy-segment (Who It's For). Medidas: design/who-its-for.md §2.
 * Mobile: texto arriba e imagen abajo. Desde 1024: fila con la imagen de 528
 * a la derecha o, con --image-left, a la izquierda.
 */

.sy-segment {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.sy-segment__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.sy-segment__top {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* "Risk-Bearing Provider Organizations" se parte por menos de 1 px en el
   Figma mobile: con 300 corta siempre en el mismo lugar. */
.sy-segment__eyebrow > span {
	max-width: 300px;
}

.sy-segment__title,
.sy-segment__text,
.sy-segment__label {
	margin: 0;
}

.sy-segment__list {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 2px;
	padding-top: 18px;
	border-top: 1px dashed var(--sy-line-strong);
}

.sy-segment__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sy-green-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.sy-segment__label .sy-icon {
	color: var(--sy-green);
	font-size: 16px;
}

.sy-segment__button {
	--btn-h: 52px;
	--btn-px: 24px;
	align-self: stretch;
	margin-top: 6px;
}

.sy-segment__media {
	width: 100%;
	max-width: 528px;
}

/* .sy-segment delante: Elementor pone border-radius: 0 a .elementor img. */
.sy-segment .sy-segment__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 15px;
}

@media (min-width: 768px) {
	.sy-segment__button {
		--btn-h: 54px;
		--btn-px: 28px;
		align-self: flex-start;
	}
}

@media (min-width: 1024px) {
	.sy-segment {
		flex-direction: row;
		align-items: center;
		gap: 80px;
	}

	.sy-segment--image-left {
		flex-direction: row-reverse;
	}

	.sy-segment__body {
		flex: 1;
		min-width: 0;
		gap: 20px;
	}

	.sy-segment__eyebrow > span {
		max-width: none;
	}

	/* 552 reproduce los cortes del Figma (cualquier valor entre 541 y 564). */
	.sy-segment__text,
	.sy-segment__list .sy-chips {
		max-width: 552px;
	}

	.sy-segment__list {
		margin-top: 4px;
		padding-top: 22px;
	}

	.sy-segment__media {
		flex: 0 0 528px;
	}
}