/**
 * Nova Lista — "Sidebar portrait card" display template: the dot pill that
 * public/js/nova-lista-portrait.js adds to a rotating slot, and the magazine
 * cut-out cards. The base card is styled by each host page.
 *
 * Buttons keep a 24px hit area; their negative margins bring the dots
 * closer than the hit areas alone would.
 */
.nova-lista-ads--tpl-portrait { position: relative; }

.nova-lista-portrait-dots {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgb(255 255 255 / .82);
	box-shadow: 0 1px 2px rgb(22 33 43 / .08), 0 6px 14px -8px rgb(22 33 43 / .35);
}

.nova-lista-portrait-dots__dot {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0 -4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nova-lista-portrait-dots__dot::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #b7bec7;
	transition: width .3s cubic-bezier(0.32, 0.72, 0, 1), background-color .3s ease;
}
.nova-lista-portrait-dots__dot[aria-current="true"]::before { width: 16px; background: #16212b; }
.nova-lista-portrait-dots__dot:focus-visible { outline: 2px solid #16212b; outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
	.nova-lista-portrait-dots__dot:not([aria-current="true"]):hover::before { background: #7d8792; }
}

@media (prefers-reduced-motion: reduce) {
	.nova-lista-portrait-dots__dot::before { transition: none; }
}

/* ---- Magazine cut-out ---------------------------------------------------- */
/* ad-slot-portrait.php adds --cutout and --b<listing ID> to the firms it
   renders as a magazine card: a transparent cut-out standing on the card's
   bottom edge. Photo sizes are the 320px-card design values, shrinking with
   narrower cards (value / 3.2 in cqw) so the cut-out stays clear of the text.
   These rules outrank the base card rules each host page styles. */

.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout { container-type: inline-size; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout .nova-lista-ad-portrait__photo {
	right: max(-21px, -6.5625cqw);
	bottom: 0;
	width: auto;
	height: min(258px, 80.625cqw);
	overflow: visible;
	border-radius: 0;
	-webkit-mask: none;
	mask: none;
	transform-origin: 70% 100%;
	transition: transform .8s cubic-bezier(0.32, 0.72, 0, 1);
}
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout .nova-lista-ad-portrait__photo img { width: auto; height: 100%; max-width: none; object-fit: fill; filter: drop-shadow(0 10px 18px rgb(22 33 43 / .18)); transform: none; transition: none; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout .nova-lista-ad-portrait__text { width: 168px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout .nova-lista-ad-portrait__name { font-size: 25px; line-height: 1.2; }

/* Per-firm cut-out sizes; 4279 uses the base card. */
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b3869 .nova-lista-ad-portrait__photo { right: max(-26px, -8.125cqw); height: min(236px, 73.75cqw); }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b3869 .nova-lista-ad-portrait__name { font-size: 21px; line-height: 1.22; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout:is(.nova-lista-ad--b3869, .nova-lista-ad--b3844) .nova-lista-ad-portrait__line { font-size: 13.5px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b3844 .nova-lista-ad-portrait__photo { right: max(-34px, -10.625cqw); height: min(250px, 78.125cqw); }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b3844 .nova-lista-ad-portrait__name { font-size: 21px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4208 .nova-lista-ad-portrait__photo { right: max(-12px, -3.75cqw); height: min(182px, 56.875cqw); }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout:is(.nova-lista-ad--b4208, .nova-lista-ad--b4211) .nova-lista-ad-portrait__kind { display: flex; align-items: center; gap: 7px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4208 .nova-lista-ad-portrait__kind img { display: block; width: 18px; height: 18px; border-radius: 3px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4211 .nova-lista-ad-portrait__photo { inset: 0 auto 0 0; width: 100%; height: 100%; filter: none; transform-origin: 100% 100%; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4211 .nova-lista-ad-portrait__logo { display: block; width: 148px; height: auto; margin: 2px 0 2px -2px; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4211 .nova-lista-ad-portrait__kind { color: #1a4fa0; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4211 .nova-lista-ad-portrait__cta { background: #1a4fa0; }
.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout.nova-lista-ad--b4211 .nova-lista-ad-portrait__cta i { background: #fff; color: #1a4fa0; }

@media (hover: hover) and (pointer: fine) {
	.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout:hover .nova-lista-ad-portrait__photo { transform: scale(1.03); }
	/* The base cards scale the img on hover; the cut-out scales its photo box instead. */
	.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout:hover .nova-lista-ad-portrait__photo img { transform: none; }
	.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout:hover .nova-lista-ad-portrait__cta i { transform: translate(2px, -2px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout,
	.nova-lista-ads--tpl-portrait .nova-lista-ad--portrait.nova-lista-ad--cutout :is(.nova-lista-ad-portrait__photo, .nova-lista-ad-portrait__cta i) { transition: none; }
}