/* "Hodnota hned od začátku" — Figma 5:710, 107:1585, cards 107:1887 (3 × 400, gap 16).
   Mobile — Figma 107:2075 (26/32 heading), 107:2076 (14/21 text), cards 107:2077: horizontal, 120px media, gap 8. */
.value { padding-block: 48px 0; }
.value__head { display: grid; gap: 16px; margin-bottom: 36px; }
/* Figma box is 302 wide, but the wider Fraunces fallback needs ~309px to keep one line. */
.value__title { font-size: 1.625rem; line-height: 32px; }
/* Figma mobile sets the heading on one line: drop the ACF line break. */
.value__title br { display: none; }
.value__text { max-width: 608px; font-size: 0.875rem; line-height: 1.5; }
.value__text strong { font-weight: 700; }

.value__cards { display: grid; gap: 8px; }

.magnet-card {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 8px;
	background: var(--c-light);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
}
a.magnet-card { transition: box-shadow 0.2s ease; }
/* Subtle lift: softer than the cookie popup shadow. */
a.magnet-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 10px 20px rgba(0, 0, 0, 0.04); }
.magnet-card__media {
	flex: 0 0 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 10px;
	background: var(--c-white);
	border-radius: var(--radius-sm);
}
/* Figma icon slots are 49×48 / 48×53 / 57×48: a 57×53 contain box fits all three. */
.magnet-card__img { width: 57px; height: 53px; object-fit: contain; }
.magnet-card__body { display: grid; gap: 8px; min-width: 0; }
.magnet-card__title { font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; }
.magnet-card__text { font-size: 0.75rem; line-height: 1.5; letter-spacing: -0.02em; color: var(--c-gray); }

@media (min-width: 768px) {
	.value { padding-block: var(--section-y); }
	.value__head { margin-bottom: 48px; }
	.value__title { font-size: 2.5rem; line-height: 1.2; }
	.value__title br { display: inline; }
	.value__text { font-size: 1rem; }
	.value__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.magnet-card { flex-direction: column; align-items: stretch; padding: 16px 16px 24px; }
	.magnet-card__media { flex: none; height: 240px; }
	.magnet-card__img { width: 144px; height: 144px; }
	.magnet-card__title { font-size: 1.5rem; line-height: 1.33; }
	.magnet-card__text { font-size: 0.875rem; }
}
@media (min-width: 1024px) {
	.value { padding-top: 96px; }
	.value__head {
		grid-template-columns: minmax(0, 520fr) minmax(0, 608fr);
		column-gap: clamp(48px, 7vw, 104px);
		align-items: start;
	}
	.value__cards { grid-template-columns: repeat(3, 1fr); }
	.magnet-card__media { height: 300px; }
}