/*
 * Pain Strip — heading + 4 photo tiles with green-gradient overlay + bold footer note.
 *
 * Design source: Figma file o2Fw8rOZW4xOIEcs13IWzo, nodes 1:209 / 1:179 / 1:210.
 * Section bg #f8f8f8 (light), text #2c3d41 (Bluish Black), accent #00a3e9.
 */

.greengrass-pain-strip {
	padding-block: clamp(48px, 6vw, 96px);
	background: #ffffff;
	font-family: 'Polin', sans-serif;
	direction: rtl; /* widget owns its direction — independent of page direction */
}

.greengrass-pain-strip__container {
	max-width: var(--gg-container-max, 1440px);
	margin-inline: auto;
	padding-inline: var(--gg-container-pad, 24px);
	text-align: center;
}

/* ── Subtitle / eyebrow above main heading — Polin Bold 35px ─ */
.greengrass-pain-strip__subtitle {
	margin: 0 0 clamp(8px, 0.8vw, 14px);
	font-family: 'Polin', sans-serif;
	font-size: clamp(18px, 2.2vw, 35px);
	font-weight: 700;
	line-height: 1.05;
	color: #2c3d41;
	text-align: center;
}

/* ── Heading — Polin Bold, 55px @ 1920, scale via clamp ──── */
.greengrass-pain-strip__heading {
	margin: 0 0 clamp(32px, 4vw, 64px);
	font-family: 'Polin', sans-serif;
	font-size: clamp(26px, 3.5vw, 55px);
	font-weight: 700;
	line-height: 1.05;
	color: #2c3d41;
}

.greengrass-pain-strip__heading .accent {
	color: #00a3e9;
}

/* ── Tile grid ───────────────────────────────────────────── */
.greengrass-pain-strip__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 32px);
}

@media (max-width: 960px) {
	.greengrass-pain-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	/* Keep 2 icons per row on phones (instead of 1) so the strip is half as tall. */
	.greengrass-pain-strip__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(12px, 3vw, 20px);
	}
}

.greengrass-pain-strip__tile {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1vw, 18px);
	align-items: center;
}

/*
 * Tile — no card chrome per Figma image 2 (2026-05-13). The icon SVG carries its own X
 * mark baked into the artwork; the widget just renders the icon centered in each slot.
 */
.greengrass-pain-strip__tile-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(120px, 12vw, 200px);
}

.greengrass-pain-strip__tile-icon {
	width: clamp(72px, 9vw, 140px);
	height: auto;
	object-fit: contain;
	display: block;
}

/* ── Caption — Polin Regular, 22px @ 1920 ───────────────── */
.greengrass-pain-strip__tile-caption {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(14px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.35;
	color: #2c3d41;
	text-align: center;
	max-width: 80%;
}

/* ── Footer note — Polin Bold, 35px @ 1920 ──────────────── */
.greengrass-pain-strip__footer-note {
	margin: clamp(32px, 4vw, 64px) auto 0;
	max-width: 60ch;
	font-family: 'Polin', sans-serif;
	font-size: clamp(18px, 2.2vw, 35px);
	font-weight: 700;
	line-height: 1.2;
	color: #2c3d41;
	text-align: center;
}

.greengrass-pain-strip__footer-note .accent {
	color: #00a3e9;
}