/* ---------------------------------------------------------------------------
   Site-specific overrides. Kept separate from all-responsive-*.css so a KVS
   theme update cannot wipe them.

   Everything here exists because the affiliate CTAs were rendering as bare
   inline <a> tags: 17px tall, black on white, no padding, visually identical
   to body copy. The links worked, nobody could see them.

   Colours are taken from the theme's own button (.block-channel
   .channel-rating a) so these read as native, not bolted on.
   --------------------------------------------------------------------------- */

:root {
	--cta-bg: #276fdb;
	--cta-bg-hover: #e0dfdf;
	--cta-fg: #ffffff;
	--cta-fg-hover: #212121;
}

/* Shared button treatment for every affiliate CTA. */
.cs-cta a,
.cs-cta-video a {
	display: inline-block;
	padding: 1.3rem 2.6rem;
	border-radius: 2rem;
	background-color: var(--cta-bg);
	color: var(--cta-fg);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.no-touch .cs-cta a:hover,
.no-touch .cs-cta-video a:hover {
	background-color: var(--cta-bg-hover);
	color: var(--cta-fg-hover);
}

/* Video page: sits directly under the player, which is the highest-value
   position on the page. Full width on its own line so it cannot be mistaken
   for part of the surrounding text. */
.cs-cta-video {
	margin: 1.6rem 0 2rem;
	text-align: center;
}

.cs-cta-video a {
	min-width: 28rem;
	font-size: 1.6rem;
	padding: 1.5rem 3rem;
}

/* Studio page: the secondary CTA below the description. */
.cs-cta {
	margin: 2rem 0;
}

/* ---------------------------------------------------------------------------
   STUDIO LOGO SLOTS

   The problem: the theme sizes these slots from the surrounding grid and
   stretches whatever it finds to fill them (object-fit defaults to fill). On
   the /studios/ hub that meant a 130x30 wordmark rendered at 236x315 — 1.8x
   wide but 10.5x tall. Badly distorted, and the distortion changed with the
   viewport because the grid cell does.

   The fix, same shape as hello.porn's .img-holder: lock the box to a fixed
   ratio so its height is always proportional to its width, then let the logo
   sit inside it with object-fit: contain so it is never stretched. One asset
   then works at every breakpoint and in every context.

   aspect-ratio with a padding-bottom fallback for older engines. Scoped to
   .list-sponsors (the studio hub) and .block-channel (the studio page) so
   pornstar and video cards, which are correct portrait/16:9 already, are
   untouched.
   --------------------------------------------------------------------------- */

.list-sponsors .item .img,
.block-channel .img {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0 0 56.25%;          /* 16:9 fallback */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	box-sizing: border-box;
	/* Light plate: most studio wordmarks are near-black, so they vanish on a
	   dark or transparent background. This guarantees contrast whatever the
	   logo. */
	background-color: #ffffff;
	border: 1px solid #ececec;
	border-radius: .6rem;
}

@supports (aspect-ratio: 16 / 9) {
	.list-sponsors .item .img,
	.block-channel .img {
		padding: 0;
	}
}

/* Fill the ratio box without distorting. `contain` is what makes a single
   asset usable everywhere: a 10.6:1 Brazzers wordmark and a 1:1 BangBros mark
   both sit correctly in the same slot. */
.list-sponsors .item .img img.thumb,
.block-channel .img img.thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	/* No inset padding on purpose. The supplied artwork is composed at 16:9
	   with its own margins, exactly like hello.porn's 320x180 files, so the
	   image fills the frame and controls its own breathing room. Adding
	   padding here would shrink it twice. */
}

/* Placeholder for studios with no logo: same box, reads as an empty slot
   rather than a broken image. */
.list-sponsors .item .img .no-thumb,
.block-channel .img .no-thumb {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #f7f7f7;
	color: #9a9a9a;
	font-size: 1.4rem;
	line-height: 1.2;
	text-align: center;
}

@media (max-width: 700px) {
	.cs-cta-video a {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
}