/**
 * Image variation: Index Card
 *
 * Ruled-paper background under the image (alternating thin lines via
 * repeating-linear-gradient), plus a small "tab" decoration on the
 * top inline-start corner. Decorative only.
 *
 * Skeuomorph paper + rules stay fixed on any palette; the corner tab
 * follows the theme accent.
 *
 * @package PostFormatsBlockThemes
 * @since 2.1.0
 */

.wp-block-image.is-style-index-card {
	background:
		repeating-linear-gradient(
			to bottom,
			var(--pfbt-index-card-paper, #ffffff) 0,
			var(--pfbt-index-card-paper, #ffffff) 1.4em,
			var(--pfbt-index-card-rule, #e5e5e5) 1.4em,
			var(--pfbt-index-card-rule, #e5e5e5) calc(1.4em + 1px)
		);
	padding: var(--wp--preset--spacing--medium, 1.5rem);
	border: 1px solid var(--pfbt-index-card-rule, #e5e5e5);
	display: inline-block;
	max-width: 100%;
	position: relative;
}

.wp-block-image.is-style-index-card::before {
	content: "";
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-start: var(--wp--preset--spacing--medium, 1.5rem);
	width: 3rem;
	height: 0.5rem;
	background: var(--pfbt-index-card-tab, var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, #2271b1)));
	border-radius: var(--wp--preset--border-radius--sm, 0.375rem) var(--wp--preset--border-radius--sm, 0.375rem) 0 0;
}

.wp-block-image.is-style-index-card img {
	display: block;
	width: 100%;
}

.wp-block-image.is-style-index-card figcaption {
	margin-block-start: var(--wp--preset--spacing--small, 0.75rem);
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--primary, system-ui, sans-serif);
	color: var(--pfbt-index-card-caption, var(--wp--preset--color--secondary, var(--wp--preset--color--contrast, #666666)));
}

@media print {
	.wp-block-image.is-style-index-card {
		background: transparent;
	}
	.wp-block-image.is-style-index-card::before {
		display: none;
	}
}