/*
 * Frontend-only card styling for the Featured Images block (diagonal-cut
 * corner, shadow, arrow indicator). Deliberately kept out of
 * style.scss/editor.scss so the editor grid stays plain/functional while
 * the real page gets the polished look.
 *
 * Each card's cut is a fixed design choice tied to its position in the
 * 3-column grid, not per-image content - plain :nth-child rules, no JS/
 * attributes needed. box-shadow follows the plain border-box, not the
 * clipped shape, so the shadow uses filter: drop-shadow() instead, which
 * follows the actual visible (clipped) outline.
 */
.wp-block-concord-template-featured-images .featured-images__item {
	/* Corner rounding is baked into each clip-path below, not here - border-radius has no effect once clip-path is set. */
	/*
	 * Two stacked shadows: a tight one right at the edge so the clipped
	 * outline (rounded corners included) stays visible even with a white
	 * caption fade against the page's white background, plus the original
	 * soft ambient one for depth. Both follow the actual clipped silhouette,
	 * unlike border/box-shadow which follow the plain rectangular border-box.
	 */
	filter: drop-shadow(0 0 1px rgba(20, 51, 42, 0.18)) drop-shadow(0 4px 20px rgba(20, 51, 42, 0.12));
}

/* Desktop only - title/description stay full-width on mobile and tablet. */
@media (min-width: 1025px) {
	.wp-block-concord-template-featured-images .featured-images__title,
	.wp-block-concord-template-featured-images .featured-images__description {
		width: 50%;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(1) {
	clip-path: url(#concord-featured-images-clip-1);
	margin-right: -20px;
	.featured-images__caption {
		padding-left: 40px;
	}
	.featured-images__arrow{
		right: 50px;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(2) {
	clip-path: url(#concord-featured-images-clip-2);
	margin-right: -20px;
	margin-left: -20px;
	.featured-images__caption {
		padding-left: 60px;
	}
	.featured-images__arrow{
		right: 50px;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(3) {
	clip-path: url(#concord-featured-images-clip-3);
	margin-left: -20px;
	.featured-images__caption {
		padding-left: 60px;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(4) {
	clip-path: url(#concord-featured-images-clip-4);
	margin-right: -20px;
	.featured-images__caption {
		padding-left: 40px;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(5) {
	clip-path: url(#concord-featured-images-clip-5);
	margin-left: -20px;
	margin-right: -20px;
	.featured-images__arrow{
		right: 50px;
	}
	.featured-images__caption {
		padding-left: 60px;
	}
}

.wp-block-concord-template-featured-images .featured-images__grid > .featured-images__item:nth-child(6) {
	clip-path: url(#concord-featured-images-clip-6);
	margin-left: -20px;
}

.wp-block-concord-template-featured-images .featured-images__arrow {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
}

.wp-block-concord-template-featured-images .featured-images__arrow svg {
	display: block;
}