/* Clear photography above compact, light information panels. */
.dsf-state-grid { padding-block: var(--dsf-space-7); background: var(--dsf-color-background); scroll-margin-block-start: calc(var(--dsf-header-height, 5rem) + 1rem); }
.dsf-state-grid__lead { max-inline-size: var(--dsf-measure); margin-block-start: var(--dsf-space-3); color: var(--dsf-color-muted); }
.dsf-state-grid__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--dsf-space-5); margin-block-start: var(--dsf-space-5); padding: 0; list-style: none; }
.dsf-state-grid__cards > li { display: flex; min-inline-size: 0; }
.dsf-state-grid__card { position: relative; display: flex; flex-direction: column; inline-size: 100%; overflow: hidden; border: 1px solid var(--dsf-color-border); border-radius: var(--dsf-radius-large); background: var(--dsf-color-surface); color: var(--dsf-color-primary); text-decoration: none; transition: border-color var(--dsf-duration-normal) var(--dsf-ease), box-shadow var(--dsf-duration-normal) var(--dsf-ease); }
.dsf-state-grid__photo { position: relative; flex: 0 0 7.5rem; block-size: 7.5rem; overflow: hidden; background: var(--dsf-color-tint); }
.dsf-state-grid__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--dsf-color-accent) 8%, transparent), color-mix(in srgb, var(--dsf-color-accent) 22%, transparent)); }
.dsf-state-grid__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; transition: transform var(--dsf-duration-normal) var(--dsf-ease); }
.dsf-state-grid__card--no-image::before { content: ""; flex: 0 0 7.5rem; background: var(--dsf-color-tint); }
.dsf-state-grid__content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: var(--dsf-space-2); inline-size: 100%; padding: var(--dsf-space-4); }
.dsf-state-grid__content h3 { color: inherit; font-size: var(--dsf-text-lead); font-weight: 800; line-height: 1.35; }
.dsf-state-grid__info { color: var(--dsf-color-muted); font-size: var(--dsf-text-small); line-height: 1.5; }
.dsf-state-grid__info strong { color: var(--dsf-color-primary); font-weight: 600; }
.dsf-state-grid__info time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dsf-state-grid__scope { margin-block-start: var(--dsf-space-2); }
.dsf-state-grid__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--dsf-space-3); margin-block-start: var(--dsf-space-3); color: var(--dsf-color-accent); font-weight: 600; }
.dsf-state-grid__cta svg { flex-shrink: 0; transition: transform var(--dsf-duration-fast) var(--dsf-ease); }
.dsf-state-grid__card:hover { color: var(--dsf-color-primary); border-color: color-mix(in srgb, var(--dsf-color-accent) 35%, var(--dsf-color-border)); box-shadow: 0 4px 14px color-mix(in srgb, var(--dsf-color-primary) 8%, transparent); }
.dsf-state-grid__card:focus-visible .dsf-state-grid__cta { text-decoration: underline; text-underline-offset: 0.2em; }
.dsf-state-grid__card:focus-visible .dsf-state-grid__cta svg { transform: translateX(3px); }
@media (hover: hover) {
	.dsf-state-grid__card:hover .dsf-state-grid__photo img { transform: scale(1.035); }
	.dsf-state-grid__card:hover .dsf-state-grid__cta { text-decoration: underline; text-underline-offset: 0.2em; }
	.dsf-state-grid__card:hover .dsf-state-grid__cta svg { transform: translateX(3px); }
}
@media (max-width: 70rem) { .dsf-state-grid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .dsf-state-grid { padding-block: var(--dsf-space-6); } .dsf-state-grid__cards { grid-template-columns: minmax(0, 1fr); gap: var(--dsf-space-4); } }
@media print { .dsf-state-grid__photo, .dsf-state-grid__card::before { display: none; } .dsf-state-grid__card { min-block-size: 0; background: transparent; color: var(--dsf-color-primary); break-inside: avoid; } }