/* "Proč se přidat k newsletteru" — Figma 107:1543, grid 107:1544 (4 × 230, gap 108), wave 107:1542.
   Mobile — Figma 69:5780 (26/32 heading), grid 69:5818: 2 × 160, gap 16/8, 24px icons, 16/21 text, no wave. */
.benefits { position: relative; overflow: hidden; padding-block: 78px 76px; }
.benefits__wave {
	display: none;
	position: absolute;
	left: -102px;
	top: 40px;
	width: 1744px;
	max-width: none;
	height: auto;
	pointer-events: none;
	/* Figma 107:1542 is the hero wave mirrored horizontally (low left → high right); the SVG export loses the flip. */
	transform: scaleX(-1);
}
.benefits .container { position: relative; }
.benefits__title { font-size: 1.625rem; line-height: 32px; max-width: 304px; margin: 0 auto 56px; }

/* Figma grid is 328 wide (2 × 160 + 8): it runs 16px past the right gutter. */
.benefits__grid { display: grid; gap: 16px 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: -16px; }

.benefit { display: flex; flex-direction: column; gap: 24px; }
.benefit__icon {
	display: inline-flex;
	align-self: flex-start;
	padding: 8px;
	background: rgba(245, 243, 242, 0.5);
	border: 4px solid var(--c-white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-drop);
	transform: rotate(-5deg);
}
.benefit__icon .ck-icon { width: 24px; height: 24px; }
.benefit__text { font-family: var(--font-head); font-weight: 400; font-size: 1rem; line-height: 21px; }

@media (min-width: 768px) {
	.benefits { padding-block: var(--section-y); }
	.benefits__wave { display: block; }
	.benefits__title { font-size: 2.5rem; line-height: 1.2; max-width: none; }
	.benefits__grid { gap: 48px 24px; margin-right: 0; }
	.benefit__icon .ck-icon { width: 32px; height: 32px; }
	.benefit__text { font-size: 1.25rem; line-height: 1.3; }
}
@media (min-width: 1024px) {
	.benefits { padding-top: 136px; padding-bottom: 122px; }
	.benefits__title { margin-bottom: 96px; }
	/* Figma columns are 230px, but the Fraunces fallback is wider than Recoleta, so let the text use the full column. */
	.benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 108px 48px; }
	.benefit { gap: 32px; }
	.benefit__text { font-size: 1.5rem; line-height: 1.33; }
}