/* کارت فایل — عکس تمام‌قد، مشخصات روی خودِ عکس.
   قالب فقط‌خواندنی است، پس چیدمان تازه فقط با CSS روی همان نشانه‌گذاری
   ساخته شده: تصویر کل کارت را می‌گیرد، بدنه روی پایینش می‌نشیند، و دکمه
   از روی خودِ لینک عنوان درمی‌آید تا کلیکش همان لینک فایل باشد.

   قیمت را برخلاف نمونه‌های خارجی بالا نگذاشتیم: قیمت اجاره دو عدد دارد
   («رهن ۱۵۰ میلیون / اجاره ۱۸ میلیون») و در یک قرص کوچک بریده می‌شود. */

.card {
	position: relative;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 26px;
	overflow: hidden;
	background: #0E2B33;
	box-shadow: 0 1px 0 rgba(20, 35, 42, .10), 0 18px 40px -28px rgba(20, 35, 42, .55);
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 52px -26px rgba(20, 35, 42, .60);
}

/* عکس کل کارت را می‌گیرد */
.card .card__media {
	aspect-ratio: 3 / 4;
	border-radius: 0;
	background: #16343D;
}
.card .card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(8, 28, 34, .52) 0%,
		rgba(8, 28, 34, .06) 22%,
		rgba(8, 28, 34, .58) 50%,
		rgba(8, 28, 34, .93) 100%);
}
.card .card__noimg { color: rgba(255, 255, 255, .32); }

/* نوع معامله بالا سمت راست، شمارش عکس‌ها سمت چپ */
.card .badge {
	top: 14px;
	right: 14px;
	left: auto;
	bottom: auto;
	z-index: 3;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(6px);
	font-size: 12.5px;
	padding: 6px 14px;
}
.card .badge--featured {
	top: 14px;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent, #C0561A);
	color: #fff;
}
.card .card__count {
	bottom: auto;
	top: 14px;
	left: 14px;
	z-index: 3;
	background: rgba(8, 28, 34, .50);
	backdrop-filter: blur(6px);
}
.card .card__media .stock-label { bottom: auto; top: 54px; left: 14px; right: auto; }

/* بدنه روی پایین عکس، با جا برای دکمه */
.card .card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 16px 74px;
	gap: 8px;
	color: #fff;
	pointer-events: none;
}
.card .card__body > * { pointer-events: auto; }

.card .card__title {
	order: 1;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card .card__title a,
.card .card__title a:hover { color: #fff; text-shadow: 0 1px 14px rgba(8, 28, 34, .65); }

.card .card__place {
	order: 2;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .82);
}
.card .card__place .icon { color: #E9A24B; }

.card .card__specs {
	order: 3;
	gap: 6px;
	font-size: 12.5px;
	color: #fff;
}
.card .card__specs li {
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(8, 28, 34, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(5px);
}
.card .card__specs .icon { color: rgba(255, 255, 255, .80); }

/* قیمت، بزرگ و آخرین چیزی که چشم می‌بیند پیش از دکمه */
.card .card__foot {
	order: 4;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	align-items: baseline;
	gap: 10px;
}
.card .card__price {
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.55;
	text-shadow: 0 1px 14px rgba(8, 28, 34, .65);
}
.card .card__code {
	color: rgba(255, 255, 255, .60);
	font-size: 12px;
}

/* دکمه: روی خودِ لینک عنوان ساخته می‌شود، پس کلیکش همان لینک فایل است */
.card .card__title a::after {
	content: 'دیدن فایل و هماهنگی بازدید';
	position: absolute;
	inset-inline: 16px;
	bottom: 16px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border-radius: 999px;
	background: #fff;
	color: #0D3F4A;
	font-size: 14.5px;
	font-weight: 700;
	text-shadow: none;
	box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8);
	transition: background .15s;
}
.card:hover .card__title a::after { background: #EDF4F5; }

/* فایل بایگانی: خاکستری، و دکمه دعوت نمی‌کند */
.card--archived { opacity: 1; }
.card--archived .card__media img { filter: grayscale(.7) brightness(.9); }
.card--archived .card__title a::after {
	content: 'این فایل دیگر فعال نیست';
	background: rgba(255, 255, 255, .20);
	color: #fff;
	box-shadow: none;
}

@media (max-width: 520px) {
	.card .card__media { aspect-ratio: 4 / 5; }
	.card .card__title { font-size: 17px; }
	.card .card__price { font-size: 16px; }
	.card .card__specs { font-size: 12px; }
}