/**
 * Love Pharm · Product Features ("The lowdown") — grid layout & styling.
 * Structure only; content and per-instance colors come from the shortcode.
 * RTL-aware and theme-token driven. See product-features.php for markup.
 */

.lp-pf {
	/* Soft rose to match the reference; override per-instance via `accent` attr. */
	--lpf-accent: #e0928a;
	--lpf-ink: var(--lp-text, #1f2937);
	--lpf-muted: #6b7280;
	--lpf-cols: 3;

	box-sizing: border-box;
	max-width: 1180px;
	margin-inline: auto;
	padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 48px);
	text-align: center;
	direction: rtl;
}

.lp-pf *,
.lp-pf *::before,
.lp-pf *::after {
	box-sizing: border-box;
}

/* ---------- Heading + intro ----------
 * Rendered outside .lp-pf as plain native elements (see product-features.php):
 * deliberately left unstyled so they inherit the theme's content typography and
 * blend with the surrounding product description. Nothing to style here. */

/* ---------- Grid ---------- */
.lp-pf__grid {
	display: grid;
	grid-template-columns: repeat(var(--lpf-cols), minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) clamp(24px, 5vw, 72px);
	align-items: start;
}

/* ---------- Item ---------- */
.lp-pf__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 320px;
	margin-inline: auto;
}

.lp-pf__icon {
	color: var(--lpf-accent);
	margin-bottom: 16px;
	line-height: 0;
}

.lp-pf__icon svg {
	display: block;
	width: 64px;
	height: 64px;
}

.lp-pf__item-title {
	margin: 0 0 8px;
	color: var(--lpf-ink);
}

.lp-pf__item-desc {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.55;
	color: var(--lpf-muted);
}

/* ---------- Responsive ----------
 * Hold the multi-column layout as long as it stays readable. Drop from 3→2
 * columns on tablet, keep 2 columns all the way down through phones (tightening
 * the gaps so they keep breathing room), and only collapse to a single column
 * on the very narrowest devices. */
/* Keep 3 columns through tablet widths — the compact content stays readable to
 * ~150px per column — then drop to 2 only when 3-up would get cramped. */
@media (max-width: 560px) {
	.lp-pf {
		padding-inline: clamp(12px, 4vw, 24px);
	}

	.lp-pf__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(28px, 6vw, 44px) clamp(14px, 4vw, 32px);
	}
}

/* Hold 2 columns through 320px (smallest real phones); collapse to one only
 * below that — text-zoom reflow, foldable cover screens, etc. */
@media (max-width: 319px) {
	.lp-pf__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}