/**
 * Google Places photo attribution styles.
 *
 * Two surfaces:
 *  .vtd-photo-credit          - inline pill placed alongside an image (cards, swipers)
 *  .vtd-photo-credits-block   - page-level credits rendered in wp_footer (heroes, bgs)
 */

/* -- inline pill -------------------------------------------------------- */

.vtd-photo-credit {
	position: absolute;
	right: 3px;
	bottom: 3px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 2px 8px;
	max-width: calc(100% - 12px);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 6px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.85;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.vtd-photo-credit:hover,
.vtd-photo-credit:focus-within {
	opacity: 1;
	background: rgba(0, 0, 0, 0.75);
}

.vtd-photo-credit__label {
	opacity: 0.8;
}

.vtd-photo-credit__author,
.vtd-photo-credit a.vtd-photo-credit__author {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 2px;
}

.vtd-photo-credit a.vtd-photo-credit__author:hover,
.vtd-photo-credit a.vtd-photo-credit__author:focus {
	text-decoration-color: #fff;
}

/* Inline pills require a positioned image wrapper. The selectors below cover
   the wrappers used across the destination-guide plugin's render sites. */
.vtd-card-image,
.vtd-card-image-wrapper,
.vtd-featured-image,
.vtd-hero-image,
.vtd-supplier-image,
.vtd-photos-carousel .swiper-slide,
.vtd-whats-on-card-image,
.vtd-venue-hotel-map__marker-thumb,
.vtd-useful-info-img-wrap,
.vtd-supplier-featured-image-wrap,
.vtd-whats-on-featured-image-wrap {
	position: relative;
}

.vtd-useful-info-img-wrap,
.vtd-supplier-featured-image-wrap,
.vtd-whats-on-featured-image-wrap {
	display: inline-block;
}

/* -- page-level credits block ----------------------------------------- */

.vtd-photo-credits-block {
	clear: both;
	margin: 1.5em auto;
	padding: 0.75em 1em;
	max-width: 1200px;
	font-size: 11px;
	line-height: 1.5;
	color: #777;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.vtd-photo-credits-block__label {
	font-weight: 600;
	color: #555;
}

.vtd-photo-credits-block a {
	color: #555;
	text-decoration: underline;
}

.vtd-photo-credits-block a:hover,
.vtd-photo-credits-block a:focus {
	color: #222;
}