/*
Homepage "تخفیف روز" card (template-parts/home/deal-card.php), shown
beside the hero (slider or static fallback) when an admin has opted a
product in -- see inc/featured-deal.php. .hero-with-deal wraps both; the
--split modifier (only added server-side when there's actually a card to
show) is what turns it into a two-column grid -- without a deal product
the hero renders exactly as it always has, full width, no wrapper styling
applied.
*/

.hero-with-deal--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: end;
	max-width: 1318px;
	margin-inline: auto;
	padding-inline: 16px;
	margin-top: var(--space-6);
}

@media (min-width: 1024px) {
	.hero-with-deal--split {
		/* Deal card comes first in the markup (see front-page.php) so it
		   lands in the grid's first track -- the right edge in this RTL
		   theme -- without a CSS `order` override that would leave the
		   visual and DOM order mismatched. */
		grid-template-columns: 320px 1fr;
	}


}

.hero-with-deal--split .hero-with-deal__hero {
	min-width: 0;
}

/* The slider/static hero bring their own max-width/margin/padding for the
   full-width case -- neutralized here since the grid wrapper now owns
   that spacing instead. */
.hero-with-deal--split .hero-slider {
	margin: 0;
	max-width: none;
	padding: 0;
}

.hero-with-deal--split .hero {
	border-bottom: none;
}

.deal-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: linear-gradient(143deg, #f1f3f7, #f8faff 60%);
	text-align: center;
}

/* Heading + countdown both overlay the product image itself (top and
   bottom respectively) rather than sitting as separate blocks above it --
   .deal-card__media clips them to the image's own rounded corners. */
.deal-card__media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.deal-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--color-bg);
}

.deal-card__heading {
	position: absolute;
	top: var(--space-2);
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 4px var(--space-3);
	border-radius: 8px;
	background: var(--color-sale);
	box-shadow: var(--shadow-sm);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: #fff;
	white-space: nowrap;
}

.deal-card__heading .icon {
	color: #fff;
}

.deal-card__badge {
	position: absolute;
	top: var(--space-2);
	inset-inline-end: var(--space-2);
	z-index: 2;
}

.deal-card__countdown {
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	flex-direction: row-reverse;
	padding: var(--space-3) var(--space-2) var(--space-2);
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
}

.deal-card__countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 36px;
}

.deal-card__countdown-value {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 23px;
}

.deal-card__countdown-label {
	font-size: 10px;
	color: rgb(255 255 255 / 0.85);
	line-height: 10px;
}

.deal-card__countdown-sep {
	font-weight: var(--font-bold);
	color: rgb(255 255 255 / 0.85);
}

.deal-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	width: 100%;
}

.deal-card__title {
	color: var(--color-ink);
	font-weight: var(--font-medium);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.deal-card__title:hover {
	color: var(--color-primary);
}

.deal-card__price {
	font-weight: var(--font-semibold);
}

.deal-card__body .product-card__price-regular {
	text-align: center;
	padding-left: 0;
}

.deal-card__cta {
	width: 100%;
	margin-block-start: var(--space-2);
}

/* Mobile: horizontal layout -- a fixed-size thumbnail beside a start-
   aligned content column (title, price, CTA) instead of the desktop's
   centered vertical card. The flame ribbon and countdown are sized for
   the full-width desktop image and don't fit a small thumbnail, so
   they're hidden here; the compact sale/out-of-stock badge still fits. */
@media (max-width: 1023.98px) {
	.deal-card {
		flex-direction: row;
		align-items: stretch;
		text-align: start;
		order: 1;
		margin-inline: 16px;
	}

	.deal-card__media {
		width: 160px;
		flex-shrink: 0;
	}

	.deal-card__heading,
	.deal-card__countdown {
		display: none;
	}

	.deal-card__body {
		flex: 1;
		width: auto;
		align-items: flex-start;
		justify-content: center;
		text-align: start;
	}

	.deal-card__body .product-card__price-regular {
		text-align: start;
	}

	.hero-with-deal--split {
    margin-top: 0;
    padding-inline: 0;
    gap: 18px;
}
}