/* Shared card layout and media rules. Loaded after the base/Vault CSS. */

/* Keep the card surfaces consistent across the video, topic, and actor grids. */
.wpst-vault-card__media,
.wpst-vault-item__thumb,
.wpst-vault-items--graph .graph-card__media,
.thumb-block .post-thumbnail {
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	position: relative;
}

.wpst-vault-card__media,
.wpst-vault-item__thumb,
.wpst-vault-items--graph .graph-card__media,
.thumb-block .post-thumbnail {
	aspect-ratio: 16 / 9;
}

.wpst-vault-items--graph .graph-card--actor .graph-card__media {
	aspect-ratio: 3 / 4;
}

.graph-card--actor .post-thumbnail.graph-card__media {
	aspect-ratio: 3 / 4;
}

.wpst-vault-card .graph-card__link,
.wpst-vault-items--graph .graph-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wpst-vault-items--graph .graph-card__title,
.wpst-vault-card .entry-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
}

.hub-page-header__actions {
	margin: 4px 0 0;
}

.hub-page-header__actions .wpst-vault-action {
	align-items: center;
	display: inline-flex;
}

.hub-page-header__actions .wpst-vault-action button,
.hub-page-header__actions .wpst-vault-action[href] {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: var(--wpst-main-color, #ef4b88) !important;
	border: 1px solid var(--wpst-main-color, #ef4b88) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: #fff !important;
	display: inline-flex;
	font-size: 0.82em;
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	min-height: 30px;
	padding: 0.35em 0.75em !important;
	text-decoration: none;
	text-transform: none !important;
	white-space: nowrap;
}

.hub-page-header__actions .wpst-vault-action button > *,
.hub-page-header__actions .wpst-vault-action[href] > * {
	flex: 0 0 auto;
}

.hub-page-header__actions .wpst-vault-action button:hover,
.hub-page-header__actions .wpst-vault-action button:focus,
.hub-page-header__actions .wpst-vault-action button:active,
.hub-page-header__actions .wpst-vault-action[href]:hover,
.hub-page-header__actions .wpst-vault-action[href]:focus,
.hub-page-header__actions .wpst-vault-action[href]:active {
	background: var(--wpst-main-color, #ef4b88) !important;
	border-color: var(--wpst-main-color, #ef4b88) !important;
	color: #fff !important;
	filter: brightness(0.94);
	outline: 0;
	text-decoration: none;
}

.thumb-block .post-thumbnail,
.graph-card__media,
.graph-card__promo-media,
.wpst-vault-card__media,
.wpst-vault-item__thumb,
.wpst-vault-explore-video__media,
.affiliate-media-card__media {
	background: #000;
	overflow: hidden;
	position: relative;
}

.thumb-block .post-thumbnail-container,
.graph-card__media .post-thumbnail-container,
.graph-card__promo-media .post-thumbnail-container,
.wpst-vault-card__media .post-thumbnail-container,
.wpst-vault-item__thumb .post-thumbnail-container,
.wpst-vault-items--graph .graph-card .post-thumbnail-container,
.wpst-vault-explore-video__media .post-thumbnail-container,
.affiliate-media-card__media-inner {
	inset: 0;
}

.thumb-block .post-thumbnail-container,
.graph-card__media .post-thumbnail-container,
.graph-card__promo-media .post-thumbnail-container,
.wpst-vault-card__media .post-thumbnail-container,
.wpst-vault-item__thumb .post-thumbnail-container,
.wpst-vault-items--graph .graph-card .post-thumbnail-container,
.wpst-vault-explore-video__media .post-thumbnail-container,
.affiliate-media-card__media-inner,
.thumb-block .post-thumbnail img,
.thumb-block .post-thumbnail .wpst-trailer,
.graph-card__media .video-main-thumb,
.graph-card__promo-media .video-main-thumb,
.wpst-vault-card__media .video-main-thumb,
.wpst-vault-item__thumb img,
.wpst-vault-items--graph .graph-card__media .video-main-thumb,
body.single .pornstar-card .graph-card__media .video-main-thumb,
.pornstar-profile-hero__avatar .video-main-thumb,
.affiliate-media-card__image,
.affiliate-media-card__video,
.affiliate-media-card video,
.affiliate-media-card img.preview-thumb,
.affiliate-media-card .wpst-trailer {
	display: block !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	width: 100% !important;
}

/* The theme option emits `object-fit: contain` in an inline style block.
 * These more-specific card selectors make every real thumbnail fill its
 * media box, including images with a different source ratio. */
.thumb-block .post-thumbnail > .post-thumbnail-container > img.video-main-thumb,
.wpst-vault-items--graph .graph-card__media > .post-thumbnail-container > img.video-main-thumb,
.graph-card--actor .graph-card__media > .post-thumbnail-container > img.video-main-thumb,
.wpst-vault-card__media > .post-thumbnail-container > img.video-main-thumb,
.wpst-vault-item__thumb > .post-thumbnail-container > img.video-main-thumb,
.wpst-vault-explore-video__media > .post-thumbnail-container > img.video-main-thumb,
.graph-card__promo-media > .post-thumbnail-container > .video-main-thumb {
	object-fit: cover !important;
}

.graph-card__media,
.graph-card__promo-media,
.wpst-vault-card__media,
.wpst-vault-item__thumb,
.wpst-vault-explore-video__media,
.affiliate-media-card__media,
.affiliate-media-card__media-inner {
	background-color: #000;
}

.graph-card__media .video-overlay,
.graph-card__promo-media .video-overlay,
.wpst-vault-card__media .video-overlay,
.wpst-vault-explore-video__media .video-overlay {
	inset: 0;
}

@media only screen and (max-width: 767.98px) {
	.hub-page-header__actions .wpst-vault-action--topic,
	.hub-page-header__actions .wpst-vault-action--topic-link {
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.hub-page-header__actions .wpst-vault-action button,
	.hub-page-header__actions .wpst-vault-action[href] {
		width: auto;
	}
}
