/**
 * Default credits hover tooltip (spec C7) — shares dt/dd markup and class
 * names with the album-level credits block (pbos-credits, see
 * public/class-render.php render_credit_block()) so any theme styling
 * written for one already applies to the other.
 */

.pbos-credits-tooltip {
	position: absolute;
	z-index: 99999;
	max-width: 260px;
	background: rgba( 20, 20, 20, 0.92 );
	color: #fff;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	pointer-events: none;
}

.pbos-credits-tooltip .pbos-credits-people,
.pbos-credits-tooltip .pbos-credits-brands {
	margin: 0 0 6px;
}

.pbos-credits-tooltip .pbos-credits-people:last-child,
.pbos-credits-tooltip .pbos-credits-brands:last-child {
	margin-bottom: 0;
}

.pbos-credits-tooltip dt {
	font-weight: 600;
	opacity: 0.75;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.04em;
	margin-top: 6px;
}

.pbos-credits-tooltip dt:first-child {
	margin-top: 0;
}

.pbos-credits-tooltip dd {
	margin: 0;
}

/**
 * Tap trigger — hover never reaches a touchscreen, so devices whose primary
 * input can't hover (hover: none — the correct signal here, not a viewport
 * width guess) get a small always-visible "Credits" badge per item instead.
 * Hover-capable devices never see this; they already get the tooltip on
 * mouseover/focus (credits-tooltip.js).
 */
.cp-gallery__item {
	position: relative;
}

.pbos-credits-trigger {
	display: none;
	position: absolute;
	z-index: 5;
	bottom: 8px;
	left: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	align-items: center;
	justify-content: center;
	background: rgba( 20, 20, 20, 0.72 );
	color: #fff;
	border: 0;
	border-radius: 22px;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

@media ( hover: none ) {
	.pbos-credits-trigger {
		display: inline-flex;
	}
}