/*
Theme Name: Studio.Guide (Voxel Child)
Template: voxel
Description: Studio.Guide customizations on top of the Voxel theme.
Version: 0.1.72
Text Domain: voxel-child
*/

/*
 * On desktop the search results map stays in view while the list scrolls.
 * Elementor containers set position and alignment through these variables.
 */
@media (min-width: 1025px) {
	.e-con.sg-results-map {
		--position: sticky;
		--align-self: flex-start;
		position: sticky;
		top: 0;
		align-self: flex-start;
	}
}

/* Studio logos: the whole logo fits inside a black circle, so logos with
   transparent backgrounds stand out, with a soft shadow instead of a border
   to lift it off photos and dark bands. Transparent logos with dark artwork
   keep a white circle (includes/logo-backing.php). */
.sg-logo img {
	background: #111111;
	box-sizing: border-box;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.sg-logo img.sg-logo-dark-art {
	background: #FFFFFF;
}

/* Map markers show the logos the same way: whole, in a black circle, or a
   white one for dark artwork. Voxel crops them to fill a white circle. */
.map-marker.marker-type-image {
	background: #111111;
}

.map-marker.marker-type-image img {
	object-fit: contain;
}

.map-marker.marker-type-image img.sg-logo-dark-art {
	background: #FFFFFF;
}

/* Containers that size to their content (Elementor defaults nested ones to 100%). */
.e-con.sg-fit {
	--width: auto;
	width: auto;
	flex: 0 0 auto;
}

/* Header on desktop: the wordmark and the buttons share the sides equally, so the menu sits in the exact center. */
@media (min-width: 1025px) {
	.sg-header-side,
	.e-con.sg-header-side {
		--width: auto;
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}
}

/*
 * Header menu: the wordmark's red bullet appears under the hovered and
 * current link. Voxel's navbar has no control for a link indicator; the
 * link colors and type are set on the widget.
 */
.sg-header-nav .ts-nav > li.menu-item > .ts-item-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #E5483D;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.sg-header-nav .ts-nav > li.menu-item > .ts-item-link:hover::after,
.sg-header-nav .ts-nav > li.current-menu-item > .ts-item-link::after {
	opacity: 1;
	transform: none;
}

/* Studio page: the studio's own menu sticks to the top of the screen. */
.e-con.sg-studio-nav {
	--position: sticky;
	position: sticky;
	top: 0;
	z-index: 400;
}

/* The links take the rest of the menu row beside the studio's logo and name. */
.e-con.sg-studio-nav > .e-con-inner,
.e-con.sg-studio-nav {
	flex-wrap: nowrap;
}

.e-con.sg-studio-nav-links {
	--width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.sg-studio-nav-links .elementor-button {
	white-space: nowrap;
}

/* Phones: the menu links scroll sideways rather than wrapping. */
@media (max-width: 767px) {
	.e-con.sg-studio-nav-links {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.e-con.sg-studio-nav-links::-webkit-scrollbar {
		display: none;
	}
}

/* Menu links land each section just below the sticky menu. */
html:has(.sg-studio-nav) {
	scroll-behavior: smooth;
}

.sg-anchor {
	scroll-margin-top: 64px;
}

/*
 * Studio page About: the studio's video fills the column at 16:9. A video
 * link that isn't YouTube or Vimeo doesn't embed and would show as a bare
 * URL, so it is hidden; the "Watch the video tour" button still links to it.
 */
/* The widget holds the 16:9 shape, at an explicit full width: sized from the
   iframe alone, or from its stretched width in a column (which Chrome treats
   as the iframe's default 300px), it came out shorter than the player, which
   then overlapped the photos below. */
.sg-video:has(iframe) {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.sg-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 14px;
}

.sg-video:not(:has(iframe)) {
	display: none;
}

/*
 * Long descriptions are cut to about eleven lines, fading out, with a
 * "Read more" button (assets/read-more.js adds is-clamped). Only the height
 * is limited: the whole text stays in the page for search engines.
 */
.sg-description {
	--sg-description-limit: 320px;
}

.sg-description.is-clamped:not(.is-open) {
	max-height: var(--sg-description-limit);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
}

.sg-read-more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #111111;
	font: 600 15px/1.4 Inter, sans-serif;
	cursor: pointer;
}

.sg-read-more:hover,
.sg-read-more:focus-visible {
	background: none;
	color: #C62D24;
}

/* A chevron that turns up once the text is open. */
.sg-read-more::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid #C62D24;
	border-bottom: 2px solid #C62D24;
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.sg-read-more[aria-expanded="true"]::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Photos beside the description: rounded tiles, like the studio cards. */
.sg-about-media .ts-gallery-grid li > a {
	border-radius: 12px;
	overflow: hidden;
}

/*
 * Phones show the photos two across. A last photo left alone on its row
 * (an odd count) spans both columns as a wide strip of about the same
 * height, rather than leaving a gap beside it. Voxel's hidden placeholder
 * tiles (ts-empty-item) come after the real ones.
 */
@media (max-width: 767px) {
	.sg-about-media .ts-gallery-grid > li:not(.ts-empty-item):nth-child(odd):not(:has(~ li:not(.ts-empty-item))) {
		grid-column: span 2;
	}

	.sg-about-media .ts-gallery-grid > li:not(.ts-empty-item):nth-child(odd):not(:has(~ li:not(.ts-empty-item))) > a {
		aspect-ratio: 8 / 3;
	}
}

/*
 * No playable video and no photos (including a video link that no longer
 * works): the empty column goes and the description takes the full width,
 * at a readable measure.
 */
.e-con.sg-about:not(:has(.sg-video iframe, .sg-about-media .ts-gallery)) .sg-about-media {
	display: none;
}

.e-con.sg-about:not(:has(.sg-video iframe, .sg-about-media .ts-gallery)) .sg-about-text {
	--width: 100%;
	max-width: 820px;
}

/*
 * The video plays in About: "In the studio" drops its "Watch the video
 * tour" button, then "Plan your shoot" if no spec sheets are left in it,
 * then the whole section and its menu link if there are no specs, spaces
 * or features either.
 */
body:has(.sg-video iframe) .sg-video-tour,
body:has(.sg-video iframe):not(:has(.sg-spec-sheet)) .sg-plan,
body:has(.sg-video iframe):not(:has(.sg-specs, .sg-spaces, .sg-feature, .sg-spec-sheet)) :is(#studio, .sg-nav-studio) {
	display: none;
}

/* Studio page map: round the corners of the map itself, not just its wrapper. */
.sg-rounded,
.sg-rounded .elementor-widget-container {
	border-radius: 14px;
	overflow: hidden;
}

/*
 * Map controls match Voxel's "Search this area" button: white, 12px corners
 * like the site's other buttons, with its soft shadow and 40px height. Zoom
 * in, zoom out and full screen (Leaflet's bar) stack in one column; "Share
 * your location" is a rounded square. All sit 10px in from the map's edges,
 * level with "Search this area".
 */
.elementor-widget-ts-map .leaflet-bar {
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 0 5px #7A7A7A;
}

.elementor-widget-ts-map .leaflet-bar a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ECEAE5;
	border-radius: 0;
	background-color: #FFFFFF;
	color: #111111;
	font: 400 22px/40px Inter, sans-serif;
}

.elementor-widget-ts-map .leaflet-bar a:last-child {
	border-bottom: 0;
}

.elementor-widget-ts-map .leaflet-bar a:hover {
	background-color: #F5F4F1;
	color: #111111;
}

.elementor-widget-ts-map .leaflet-bar a.leaflet-disabled {
	background-color: #FFFFFF;
	color: #C9C7C2;
}

/* The full screen icon is a background image. */
.elementor-widget-ts-map .leaflet-bar a.leaflet-control-zoom-fullscreen {
	background-size: 20px 20px;
}

.elementor-widget-ts-map .vx-geolocate-me {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 0 5px #7A7A7A;
}

.elementor-widget-ts-map .vx-geolocate-me:hover {
	background: #F5F4F1;
}

/* Map credits in grey on the light or dark basemap (assets/map-style.js). */
.ts-map.leaflet-container.sg-map-light .leaflet-control-attribution {
	background: rgba( 245, 244, 241, 0.8 );
	color: #7A7A7A;
}

.ts-map.leaflet-container.sg-map-dark .leaflet-control-attribution {
	background: rgba( 22, 22, 22, 0.8 );
	color: #7A7A7A;
}

.ts-map.leaflet-container.sg-map-light .leaflet-control-attribution a,
.ts-map.leaflet-container.sg-map-dark .leaflet-control-attribution a {
	color: inherit;
}

/*
 * Studio page on tablets and phones: contact buttons in a bar fixed to the
 * bottom of the screen, matching the search results list/map tab bar.
 */
@media (max-width: 1024px) {
	body .e-con.sg-contact-bar {
		--position: fixed;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		padding: 10px 16px max(10px, env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border-top: 1px solid rgba(17, 17, 17, 0.12);
	}

	body:has(.sg-contact-bar) {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}
}

/*
 * Search results on tablets and phones: the list/map switcher is a tab bar
 * fixed to the bottom of the screen, like a native app. Voxel hides the
 * button for the current view with vx-hidden-*; here both stay visible and
 * that one is shown as the selected tab instead.
 */
@media (max-width: 1024px) {
	body .ts-switcher-btn {
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 4px 16px max(4px, env(safe-area-inset-bottom));
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border-top: 1px solid rgba(17, 17, 17, 0.12);
		pointer-events: auto;
	}

	body .ts-switcher-btn .ts-btn {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		height: auto;
		min-height: 50px;
		padding: 4px 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #5E5E5E;
		--ts-icon-color: #5E5E5E;
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
	}

	body .ts-switcher-btn .ts-btn:hover {
		background: transparent;
	}

	body .ts-switcher-btn .ts-btn svg,
	body .ts-switcher-btn .ts-btn i {
		width: 24px;
		height: 24px;
		font-size: 24px;
		margin: 0;
	}

	/* Keep the last results and the Load more button clear of the bar. */
	body:has(.ts-switcher-btn) {
		padding-bottom: calc(59px + env(safe-area-inset-bottom));
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body .ts-switcher-btn .ts-btn.vx-hidden-tablet {
		color: #C62D24;
		--ts-icon-color: #C62D24;
	}
}

@media (max-width: 767px) {
	body .ts-switcher-btn .ts-btn.vx-hidden-mobile {
		color: #C62D24;
		--ts-icon-color: #C62D24;
	}
}

/* Blog category buttons: one row that scrolls sideways on phones. */
@media (max-width: 767px) {
	.e-con.sg-pills {
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.e-con.sg-pills::-webkit-scrollbar {
		display: none;
	}

	.e-con.sg-pills > .elementor-element {
		--flex-shrink: 0;
		flex-shrink: 0;
	}

	.sg-pills .elementor-button {
		white-space: nowrap;
	}
}

/*
 * Blog posts: the body written in the WordPress editor, set for reading.
 * The text widget gives the base font, size and color (Inter 18px, Body
 * Text); these space out and style the blocks inside it. Prefixed with
 * body to win over the Elementor kit's heading and link styles.
 */
body .sg-article > :first-child,
body .sg-article .elementor-widget-container > :first-child {
	margin-top: 0;
}

body .sg-article p,
body .sg-article ul,
body .sg-article ol,
body .sg-article blockquote,
body .sg-article figure,
body .sg-article .wp-block-embed,
body .sg-article .wp-block-media-text,
body .sg-article .wp-block-columns,
body .sg-article .wp-block-buttons,
body .sg-article .wp-block-group {
	margin: 0 0 1.4em;
}

body .sg-article h2,
body .sg-article h3,
body .sg-article h4 {
	margin: 1.8em 0 0.6em;
	color: #111111;
	font-family: "Inter Tight", sans-serif;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

body .sg-article h2 {
	font-size: 30px;
	font-weight: 800;
}

body .sg-article h3 {
	font-size: 23px;
	font-weight: 700;
}

body .sg-article h4 {
	font-size: 19px;
	font-weight: 700;
}

body .sg-article a {
	color: #C62D24;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .sg-article a:hover {
	color: #A8241D;
}

body .sg-article strong {
	color: #111111;
}

body .sg-article ul,
body .sg-article ol {
	padding-left: 1.3em;
}

body .sg-article li {
	margin-bottom: 0.4em;
}

body .sg-article li::marker {
	color: #C62D24;
}

body .sg-article blockquote {
	padding: 4px 0 4px 24px;
	border-left: 3px solid #C62D24;
	color: #111111;
	font-size: 1.1em;
}

body .sg-article blockquote p:last-child {
	margin-bottom: 0;
}

body .sg-article img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

body .sg-article figcaption {
	margin-top: 8px;
	color: #5E5E5E;
	font-size: 14px;
	text-align: center;
}

body .sg-article .wp-block-embed iframe {
	border-radius: 12px;
}

body .sg-article .wp-block-button__link {
	padding: 14px 22px;
	border-radius: 12px;
	background: #C62D24;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}

body .sg-article .wp-block-button__link:hover {
	background: #A8241D;
	color: #FFFFFF;
}

body .sg-article .alignright {
	float: right;
	max-width: 45%;
	margin: 0.3em 0 1em 1.5em;
}

body .sg-article .alignleft {
	float: left;
	max-width: 45%;
	margin: 0.3em 1.5em 1em 0;
}

@media (max-width: 767px) {
	body .sg-article h2 {
		font-size: 25px;
	}

	body .sg-article h3 {
		font-size: 21px;
	}

	body .sg-article .alignright,
	body .sg-article .alignleft {
		float: none;
		max-width: 100%;
		margin: 0 0 1.4em;
	}
}

/*
 * Cities page (/cities/): every city A to Z, "City, ST", reading down each
 * column; 4 across on wide screens, 2 on phones (includes/city-index.php).
 */
.sg-city-index {
	columns: 4 150px;
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-city-index li {
	break-inside: avoid;
	border-bottom: 1px solid #ECEAE5;
}

.sg-city-index a {
	display: block;
	padding: 12px 0;
	color: #111111;
	font: 500 16px/1.4 Inter, sans-serif;
	text-decoration: none;
}

.sg-city-index a:hover {
	color: #C62D24;
}

/* City pages (/region/{slug}/): no gap under the header's description. */
.sg-city-hero .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* City pages: the bar of studio type chips stays at the top of the screen. */
.e-con.sg-city-bar {
	--position: sticky;
	position: sticky;
	top: 0;
	z-index: 500;
}

.sg-city-chips,
.sg-city-chips .ts-form-group {
	min-width: 0;
}

/* One row of chips; more scroll sideways, fading out at the edge. */
.sg-city-chips .addon-buttons {
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	padding-right: 48px;
	cursor: grab;
}

.sg-city-chips .addon-buttons::-webkit-scrollbar {
	display: none;
}

/* A mouse can drag the row too (assets/scroll-strip.js). */
.sg-city-chips .addon-buttons.is-dragging,
.sg-city-chips .addon-buttons.is-dragging li {
	cursor: grabbing;
	user-select: none;
}

/* Outlined, but the size and corners of the search page's filter fields. */
body .sg-city-chips .addon-buttons li {
	flex: none;
	gap: 10px;
	height: 56px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #E4E2DD;
	border-radius: 12px;
	background: #FFFFFF;
	color: #111111;
	font: 500 16px/1 Inter, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}

body .sg-city-chips .addon-buttons li:hover {
	border-color: #111111;
}

body .sg-city-chips .addon-buttons li.adb-selected {
	border-color: #111111;
	background: #111111;
	color: #FFFFFF;
}

body .sg-city-chips .ts-term-count {
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #5E5E5E;
	font: 600 13px/1 Inter, sans-serif;
}

body .sg-city-chips .adb-selected .ts-term-count {
	color: rgba(255, 255, 255, 0.7);
}

/* Studio type icons, from the child theme's terms-filter.php. */
body .sg-city-chips .ts-term-icon {
	--ts-icon-size: 20px;
	--ts-icon-color: #5E5E5E;
}

/* Selected: red on black, like a search field in use. */
body .sg-city-chips .adb-selected .ts-term-icon {
	--ts-icon-color: #E5483D;
}

/* On desktop the map stays in view below the 81px type bar while the list
   scrolls (its height is set to match in layouts.php city_term_layout()). */
@media (min-width: 1025px) {
	.e-con.sg-city-map {
		--position: sticky;
		--align-self: flex-start;
		position: sticky;
		top: 81px;
		align-self: flex-start;
	}
}

/* Tablets and phones: the map is a strip above the cards. */
@media (max-width: 1024px) {
	.sg-city-map .elementor-widget-ts-map,
	.sg-city-map .elementor-widget-ts-map .elementor-widget-container {
		border-radius: 16px;
		overflow: hidden;
	}
}

/*
 * Homepage studio types: rounded square photo tiles across the full width,
 * 6 across on wide screens down to 3 on phones, with the same space between
 * them as around them. The rest of the types sit past the right edge: the
 * strip moves on one tile every few seconds, can be swiped or dragged
 * (assets/scroll-strip.js), and settles on whole tiles.
 */
.e-con.sg-type-strip {
	--sg-tiles: 6;
	--sg-gap: 16px;
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
	gap: var(--sg-gap);
	padding: var(--sg-gap);
	overflow-x: auto;
	overflow-anchor: none;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sg-gap);
	scrollbar-width: none;
	cursor: grab;
}

.e-con.sg-type-strip::-webkit-scrollbar {
	display: none;
}

.e-con.sg-type-strip.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Snapping waits while it is dragged or moves on by itself. */
.e-con.sg-type-strip.is-dragging,
.e-con.sg-type-strip.is-gliding {
	scroll-snap-type: none;
}

.e-con.sg-type-strip > .e-con.sg-type-tile {
	--width: calc((100% - (var(--sg-tiles) - 1) * var(--sg-gap)) / var(--sg-tiles));
	--flex-grow: 0;
	--flex-shrink: 0;
	flex: 0 0 var(--width);
	aspect-ratio: 1;
	scroll-snap-align: start;
}

.e-con.sg-type-strip.is-dragging > .e-con.sg-type-tile {
	cursor: grabbing;
}

/* Hover: the photo brightens behind the name. */
body .e-con.sg-type-tile:hover::before,
body .e-con.sg-type-tile:focus-visible::before {
	--overlay-opacity: 0.25;
	opacity: 0.25;
}

@media (max-width: 1439px) {
	.e-con.sg-type-strip {
		--sg-tiles: 5;
	}
}

@media (max-width: 1199px) {
	.e-con.sg-type-strip {
		--sg-tiles: 4;
	}
}

@media (max-width: 899px) {
	.e-con.sg-type-strip {
		--sg-tiles: 3;
	}
}

@media (max-width: 767px) {
	.e-con.sg-type-strip {
		--sg-gap: 10px;
	}
}

/*
 * Studio cards: the name, type and city sit on the cover photo. The overlay
 * covers the photo, fading to dark at the bottom so the white name reads on
 * light photos; the city tag has its own dark glass (its 8px corners are
 * set on the widget in layouts.php).
 */
.e-con.sg-card-photo {
	position: relative;
	overflow: hidden;
}

.e-con.sg-card-overlay {
	--position: absolute;
	position: absolute;
	inset: 0;
	width: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0) 60%);
}

.sg-card-pill {
	padding: 5px 10px;
	background: rgba(17, 17, 17, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/*
 * Featured studios: a white star in a red circle at the card photo's top
 * left, as tall as the city tag; the city stays right without it.
 */
.sg-card-overlay .e-con > .elementor-widget.sg-card-featured {
	margin-inline-end: auto;
}

.sg-featured-star {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #C62D24 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12.0 1.6 14.7 8.9 22.5 9.2 16.4 14.0 18.5 21.5 12.0 17.2 5.5 21.5 7.6 14.0 1.5 9.2 9.3 8.9' fill='white' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
}

/*
 * Verified studios: a red check badge after the name, on cards and the
 * studio page (verified_mark() in the layouts). Smaller beside the big
 * studio page name.
 */
.sg-verified {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	vertical-align: -0.1em;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12.0 0.7 14.5 2.6 17.6 2.2 18.9 5.1 21.8 6.3 21.4 9.5 23.3 12.0 21.4 14.5 21.8 17.6 18.9 18.9 17.6 21.8 14.5 21.4 12.0 23.3 9.5 21.4 6.4 21.8 5.1 18.9 2.2 17.7 2.6 14.5 0.7 12.0 2.6 9.5 2.2 6.3 5.1 5.1 6.3 2.2 9.5 2.6' fill='%23E5483D' stroke='%23E5483D' stroke-width='1.4' stroke-linejoin='round'/><path d='M7.7 12.3l2.9 2.9 5.8-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

h1 .sg-verified {
	width: 0.55em;
	height: 0.55em;
	vertical-align: 0.05em;
}

/*
 * The tagline under the studio's name: one line on desktops, ending in "…"
 * when it is too long; up to two lines on tablets and phones.
 */
.sg-card-tagline .elementor-heading-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

@media (min-width: 1025px) {
	.sg-card-tagline .elementor-heading-title {
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}
}

/*
 * Feeds with wider cards (homepage Recently added, 3 across): the photo
 * keeps a 3:2 shape at any card width instead of the card's fixed 260px.
 * Only the cover photo (the studio's logo is an image inside the overlay).
 */
.sg-feed-wide .e-con.sg-card-photo > .elementor-widget-image img {
	height: auto;
	aspect-ratio: 3 / 2;
}

/*
 * Card hover (studio cards, blog cards), only where there is a pointer:
 * the photo slowly pushes in, and on studio cards the bottom shade deepens.
 * The other cards in a row stay as they are. Keyboard focus counts as
 * hover. People who ask for less motion get the shade without the push.
 * City tiles rise instead, quickly and with a slight overshoot.
 * Elementor has no hover controls for these.
 */
:root {
	--sg-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sg-snap-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
	.e-con.sg-card-photo,
	.elementor-widget.sg-blog-card-photo {
		isolation: isolate;
	}

	.elementor-widget.sg-blog-card-photo {
		overflow: hidden;
		border-radius: 14px;
	}

	.e-con.sg-card-overlay {
		transition: box-shadow 0.7s var(--sg-hover-ease);
	}

	a:is(:hover, :focus-visible) > .e-con.sg-card-photo > .e-con.sg-card-overlay {
		box-shadow: inset 0 -110px 80px -50px rgba(0, 0, 0, 0.35);
	}

	.e-con.sg-card-photo > .elementor-widget-image img,
	.sg-blog-card-photo img {
		transition: transform 1.1s var(--sg-hover-ease);
	}

	.e-con.sg-city-tile {
		transition: transform 0.3s var(--sg-snap-ease), box-shadow 0.3s var(--sg-hover-ease);
	}

	.e-con.sg-city-tile:is(:hover, :focus-visible) {
		box-shadow: 0 16px 28px -16px rgba(17, 17, 17, 0.5);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a:is(:hover, :focus-visible) > .e-con.sg-card-photo > .elementor-widget-image img,
	.e-con:is(:hover, :focus-visible) > .sg-blog-card-photo img {
		transform: scale(1.04);
	}

	.e-con.sg-city-tile:is(:hover, :focus-visible) {
		transform: translateY(-4px);
	}
}

/*
 * Search fields in use are black (layouts.php search_form_style()): their
 * arrow turns white with the text, and they stay black on hover.
 */
/* Voxel draws the arrow with borders. */
body .ts-form .ts-filter.ts-filled .ts-down-icon {
	border-color: #FFFFFF;
}

.ts-form .ts-filter.ts-filled:hover {
	background: #2A2A2A;
}

/*
 * The studio count beside each type in a search filter's list: a small
 * rounded rectangle, not Voxel's pill. Its corners are smaller than the
 * 8px chips' because it is only 20px tall. The search form's Term count
 * settings cover only its colors.
 */
body .ts-term-count {
	border-radius: 6px;
}

/*
 * Search page: once a place is chosen, Voxel adds its Distance field right
 * after it, as a second field of the location filter (both carry the
 * sg-location class, layouts.php). Above phone width the two share the
 * place's share of the first row instead of pushing the other fields down:
 * place 22%, Distance 16% (no icon), both with less padding; type 38% and
 * keywords 24% as before. Fits "Austin, TX" (assets/place-search.js keeps
 * place names short) and "150mi" at 1440px.
 */
@media (min-width: 768px) {
	.ts-form .ts-filter-wrapper > .ts-form-group.elementor-repeater-item-sg-location:has(+ .ts-form-group.elementor-repeater-item-sg-location) {
		width: 22%;
	}

	.ts-form .ts-filter-wrapper > .ts-form-group.elementor-repeater-item-sg-location + .ts-form-group.elementor-repeater-item-sg-location {
		width: 16%;
	}

	.ts-form .ts-form-group.elementor-repeater-item-sg-location:has(+ .elementor-repeater-item-sg-location) .ts-filter,
	.ts-form .ts-form-group.elementor-repeater-item-sg-location + .elementor-repeater-item-sg-location .ts-filter {
		padding-inline: 12px;
	}

	.ts-form .ts-form-group.elementor-repeater-item-sg-location + .elementor-repeater-item-sg-location .ts-filter > span {
		display: none;
	}
}

/*
 * Photo credits on dark photos (homepage hero): the studio link keeps the
 * credit's light text, underlined, instead of the kit's ink link color.
 * Elementor's text widget has no link color setting.
 */
.sg-photo-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sg-photo-credit a:hover {
	color: #FFFFFF;
}

/*
 * Voxel's filled red buttons (e.g. Save in the search dropdowns) keep their
 * white text: the Elementor kit's link colors (ink, red on hover) win otherwise.
 */
body a.ts-btn-2,
body a.ts-btn-2:hover {
	color: #FFFFFF;
}

/*
 * Map popup: clicking a marker on the search and city maps opens the studio
 * card (search form "Map popup template"). On the map it gets a white
 * speech-bubble frame, so the card stands off the map tiles, with a tail
 * pointing down at the marker, and a shorter photo. Voxel's previous/next
 * buttons under the card are hidden.
 */
.ts-preview-popup > .elementor {
	position: relative;
	padding: 8px;
	border-radius: 18px;
	background: #FFFFFF;
	/* drop-shadow, unlike box-shadow, also shades the tail. */
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

.ts-preview-popup > .elementor::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 28px;
	height: 14px;
	margin-left: -14px;
	margin-top: -1px;
	background: #FFFFFF;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.ts-preview-popup > .ts-map-nav {
	display: none;
}

/* Lifts the bubble so the tail's tip stops just above the marker. */
.ts-preview-popup:not(.ts-loading-popup) {
	padding-bottom: 20px;
}

.ts-preview-popup .elementor .e-con.sg-card-photo > .elementor-widget-image img {
	height: 170px;
}

/* Footer's black bottom strip: the Cognitive Films link in white, red on hover. */
.sg-footer-legal a {
	color: #FFFFFF;
}

.sg-footer-legal a:hover {
	color: #C62D24;
}