/*
Homepage ad slots (template-parts/home/ad-row.php): a simple auto-fit row
of clickable banner images, each routed through a local click counter
(inc/ad-clicks.php) before landing on the ad's real link. The optional
second image ("تصویر جایگزین") is not an error fallback -- it's an
always-shown overlay (e.g. a logo/badge on a transparent background)
layered on top of the background image inside the same link.
*/

.ad-row {
	padding-block: var(--space-6);
}

.ad-row__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-6);
}

.ad-slot {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	/* background: var(--color-surface); */
}

.ad-slot__link {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 8;
}

.ad-slot__img {
	width: 100%;
	/* height: 100%; */
	object-fit: cover;
	transition: transform var(--transition-fast);
	aspect-ratio: 2.5;
	border-radius: 8px;
}

.ad-slot:hover .ad-slot__img {
	/* transform: scale(1.03); */
}

/* Logo/badge layered over the background image -- transparent PNG,
   contained (not cropped) so it never gets cut off, and inert to clicks
   so the link underneath still handles the whole slot. */
.transparent-ad-image {
	position: absolute;
	/* inset: 0; */
	/* width: 60%; */
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	object-position: bottom right;
	bottom: -10%;
	transition: 0.3s bottom;
}

/* Admin-only "edit this ad" affordance -- hidden until the slot is
   hovered, and only rendered at all when the viewer can edit the post. */
.ad-slot__edit {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-end: var(--space-2);
	background: var(--color-ink);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	padding-inline: var(--space-3); 
	padding-block: var(--space-1);
	border-radius: var(--radius-full);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-fast);
}

.ad-slot:hover .ad-slot__edit {
	opacity: 1;
	pointer-events: auto;
}

.ad-slot__link:hover .transparent-ad-image {
    /* height: 120%; */
    bottom: 0;
}


@media (max-width: 1023.98px) {

.ad-row {
    padding: 0;
    margin-bottom: 32px;
}

.ad-row__grid {
    gap: 0;
}

}