/**
 * Layout Pack presentation flags.
 *
 * Only the five flags introduced by inc/class-layout-pack.php live here:
 * frame, duotone, spotlight, stack, dense. Everything else reuses the shared
 * loop, card and rail styles so this file stays small and cache friendly.
 */

.snmp-loop.is-frame {
	gap: var(--snmp-grid-gap, 24px);
}

.snmp-loop.is-frame > .snmp-loop__item .snmp-card {
	border: var(--snmp-frame-width, 2px) solid var(--snmp-border, rgba(0, 0, 0, 0.12));
	padding: 10px;
	background: var(--snmp-surface, #fff);
}

.snmp-loop.is-frame > .snmp-loop__item:first-child .snmp-card {
	border-color: var(--snmp-accent, #e8562a);
}

.snmp-loop.is-duotone > .snmp-loop__item .snmp-card__media img {
	filter: saturate(1.15) contrast(1.05);
	transition: filter 0.35s ease;
}

.snmp-loop.is-duotone > .snmp-loop__item .snmp-card:hover .snmp-card__media img,
.snmp-loop.is-duotone > .snmp-loop__item .snmp-card:focus-within .snmp-card__media img {
	filter: saturate(1.35) contrast(1.12);
}

.snmp-loop.is-duotone > .snmp-loop__item .snmp-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		140deg,
		color-mix(in srgb, var(--snmp-accent, #e8562a) 32%, transparent),
		color-mix(in srgb, var(--snmp-accent-2, #0f1b3d) 42%, transparent)
	);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.snmp-loop.is-spotlight > .snmp-loop__item .snmp-card {
	position: relative;
	overflow: hidden;
}

.snmp-loop.is-spotlight > .snmp-loop__item:first-child .snmp-card {
	box-shadow: 0 calc(18px * var(--snmp-spotlight-glow, 1)) calc(48px * var(--snmp-spotlight-glow, 1))
		color-mix(in srgb, var(--snmp-accent, #e8562a) 24%, transparent);
}

.snmp-loop.is-spotlight > .snmp-loop__item .snmp-card__title {
	font-size: calc(1em * var(--snmp-headline-scale, 1));
}

.snmp-loop.is-stack > .snmp-loop__item .snmp-card {
	display: grid;
	gap: 4px;
}

.snmp-loop.is-stack > .snmp-loop__item .snmp-card__title {
	font-size: calc(1.05em * var(--snmp-headline-scale, 1));
	line-height: 1.28;
}

.snmp-loop.is-stack > .snmp-loop__item .snmp-card__excerpt {
	max-width: 62ch;
}

.snmp-loop.is-dense {
	gap: var(--snmp-dense-gap, 10px);
}

.snmp-loop.is-dense > .snmp-loop__item .snmp-card {
	padding-block: 6px;
}

.snmp-loop.is-dense > .snmp-loop__item .snmp-card__excerpt {
	display: none;
}

.snmp-loop.is-dense > .snmp-loop__item .snmp-card__title {
	font-size: calc(0.95em * var(--snmp-headline-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
	.snmp-loop.is-duotone > .snmp-loop__item .snmp-card__media img {
		transition: none;
	}
}

.rtl .snmp-loop.is-stack > .snmp-loop__item .snmp-card {
	text-align: right;
}