/*
File: rafina/inc/frontend/puzzle-banner/puzzle-banner.css
بنر پازلی — دو یا سه قطعه کنار هم (دسکتاپ) و زیر هم (موبایل)
*/

.rafina-puzzle-section {
	margin-block: 26px;
}

.rafina-puzzle-grid {
	display: grid;
	/* کمینه‌ی صفر واجب است؛ با 1fr خالی، ستون از min-content کوچک‌تر نمی‌شود و از قاب می‌زند بیرون */
	grid-template-columns: repeat(var(--puzzle-cols, 2), minmax(0, 1fr));
	gap: 14px;              /* فاصله‌ی کم، تا حس «پازل» بدهد */
}

.rafina-puzzle-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--rafina-radius, 18px);
	background: var(--rafina-bg-2);
	transition: transform .2s ease, box-shadow .2s ease;
	aspect-ratio: var(--pz-desk, 1280 / 500);
}

.rafina-puzzle-item picture {
	display: block;
	width: 100%;
	height: 100%;
}

.rafina-puzzle-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* هر ابعادی آپلود شود، دقیقاً در کادر استاندارد می‌نشیند */
	display: block;
}

/* فقط وقتی لینک دارد، حالت تعاملی بگیرد */
a.rafina-puzzle-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* موبایل: زیر هم */
@media (max-width: 782px) {
	.rafina-puzzle-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.rafina-puzzle-section { margin-block: 18px; }
	.rafina-puzzle-item {
		border-radius: 14px;
		aspect-ratio: var(--pz-mob, 1080 / 420);
	}
}