/*
 * Info article grid + card + empty state (spec §4.15 "Grid", "Article card") [M computed] [M js:d44cea47].
 * Grid: 1 column, 2 from 768, gap 24. Card: radius 16, border gray-100, shadow-sm → shadow-lg on hover, title → orange,
 * image scale 1.05 (500 ms); no lift. Card sizes 343×359 (375), 532×351 (1440).
 */
.info-grid { display: grid; gap: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.info-card {
	overflow: hidden;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-default);
}
.info-card:hover { box-shadow: var(--shadow-lg); }
.no-js .info-card { cursor: auto; }

/* Image area: h 160 (192 from 640), cover, bottom-up black/0.6 shade, badge top 16 / inline-start 16 */
.info-card__media { position: relative; height: calc(var(--spacing) * 40); overflow: hidden; }
@media (min-width: 40rem) { .info-card__media { height: calc(var(--spacing) * 48); } }
.info-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: scale var(--duration-image) var(--ease-default);
}
.info-card:hover .info-card__img { scale: 1.05; }
.info-card__shade { position: absolute; inset: 0; background-image: linear-gradient(to top, color-mix(in srgb, var(--color-black) 60%, transparent), transparent); }
.info-card__badge {
	position: absolute;
	top: calc(var(--spacing) * 4);
	inset-inline-start: calc(var(--spacing) * 4);
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 1.5);
	padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
	border-radius: var(--radius-full);
	background-color: var(--color-brand-orange);
	color: var(--color-white);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	font-weight: var(--font-weight-medium);
}
.info-card__badge-icon { flex-shrink: 0; }

/* Body: p 20 (24 from 640); H3 18/28 (20/28 from 640) bold mb 8; summary 14/20 gray-600 mb 16 */
.info-card__body { padding: calc(var(--spacing) * 5); }
@media (min-width: 40rem) { .info-card__body { padding: calc(var(--spacing) * 6); } }
.info-card__title {
	margin-bottom: calc(var(--spacing) * 2);
	font-size: var(--text-lg);
	line-height: var(--text-lg-lh);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-dark);
	transition: color var(--duration-fast) var(--ease-default);
}
.info-card:hover .info-card__title { color: var(--color-brand-orange); }
@media (min-width: 40rem) { .info-card__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); } }
.info-card__summary { margin-bottom: calc(var(--spacing) * 4); font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-600); }

/*
 * More panel: max-h 0 / opacity 0 → open / 1, 300 ms; inner pt 16, border-top gray-100, 14/22.75 gray-700.
 * Open height: live used 384 for ~40-word answers; the client's texts (2026-09-29) run to ~320 words (~1300px at 375),
 * which 384 cut off mid-text, "Lees verder" included. 150rem (2400px) leaves room for ~550 words at 375; the max-height
 * animation stays (height:auto transitions are not in Safari). tests/seo/item-pages-e2e.mjs fails if a panel clips.
 */
.info-card__more { overflow: hidden; transition: all var(--duration-base) var(--ease-default); }
.js .info-card__more { max-height: 0; opacity: 0; visibility: hidden; transition: max-height var(--duration-base) var(--ease-default), opacity var(--duration-base) var(--ease-default), visibility 0s linear var(--duration-base); }
.js .info-card__more.is-open { max-height: 150rem; opacity: 1; visibility: visible; transition-delay: 0s; }
.info-card__more-inner {
	padding-top: calc(var(--spacing) * 4);
	border-top: 1px solid var(--color-gray-100);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-gray-700);
}
/* Headings, lists and spacing inside the panel: .prose--compact (prose.css). */

/* "Lees meer": mt 16, gap 8, 14/20 semibold orange; chevron 16 rotates 180 over 300 ms */
.info-card__toggle {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	margin-top: calc(var(--spacing) * 4);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-orange);
	border-radius: var(--radius-lg);
}
.no-js .info-card__toggle { display: none; }
.info-card__chevron { transition: rotate var(--duration-base) var(--ease-default); }
.info-card__toggle[aria-expanded="true"] .info-card__chevron { rotate: 180deg; }

/* Empty state: py 64, 80×80 gray-100 circle with a 40px gray-400 search icon (mb 24), 18/28 gray-600 [M js] */
.info-empty { padding-block: calc(var(--spacing) * 16); text-align: center; }
.info-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--spacing) * 20);
	height: calc(var(--spacing) * 20);
	margin: 0 auto calc(var(--spacing) * 6);
	border-radius: var(--radius-full);
	background-color: var(--color-gray-100);
	color: var(--color-gray-400);
}
.info-empty__text { font-size: var(--text-lg); line-height: var(--text-lg-lh); color: var(--color-gray-600); }

@media (prefers-reduced-motion: reduce) {
	.info-card, .info-card__img, .info-card__more, .info-card__chevron { transition: none; }
	.info-card:hover .info-card__img { scale: none; }
}
/* "Lees verder" at the end of the open panel (per-intent pages plan): the link to the article's own page. */
.info-card__read-on { margin-top: calc(var(--spacing) * 1); }