/*
 * Responsive polish layer for portfolio pages.
 * Scope: mobile/tablet first, no desktop overrides.
 */

@media (max-width: 1024px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* Disable desktop custom cursor for touch/mobile to avoid floating dots over content. */
	body :is(.cursor, .cursor__inner, .cursor__outer, .cursor-follower, .cursor-text, [class*="cursor-text"]) {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		display: none !important;
	}

	/* Mobile wrappers should stay full-bleed; inner sections handle their own spacing. */
	.content-wrapper,
	.site-content,
	#page-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* Mobile page background:
	 * keep a clean black canvas site-wide and limit the green glow to the top area
	 * so section gaps never reveal tinted side bands.
	 */
	body:not(.single-work) {
		background-color: #000 !important;
		background-image:
			radial-gradient(
				130% 58% at 50% -8%,
				rgba(82, 115, 100, 0.34) 0%,
				rgba(82, 115, 100, 0.2) 32%,
				rgba(82, 115, 100, 0.08) 52%,
				rgba(0, 0, 0, 0) 74%
			),
			linear-gradient(
				180deg,
				rgba(20, 34, 30, 0.58) 0%,
				rgba(9, 14, 13, 0.22) 24%,
				rgba(0, 0, 0, 0) 46%
			) !important;
		background-repeat: no-repeat !important;
		background-position: top center, top center !important;
		background-size: 100% min(420px, 48vh), 100% min(360px, 40vh) !important;
	}

	body:not(.single-work) #page,
	body:not(.single-work) #page-content,
	body:not(.single-work) #main.site-main,
	body:not(.single-work) #main.site-main > .site-content,
	body:not(.single-work) #main.site-main > .site-content > .content-inner {
		background: transparent !important;
	}

	body:not(.single-work) #main.site-main > .site-content > .content-inner {
		overflow-x: clip;
	}

	/* Elementor boxed sections need inner mobile gutters even when the page wrapper
	 * is full-bleed, otherwise text blocks and service cards stick to the left edge.
	 */
	body:not(.single-work) .elementor .e-con-boxed > .e-con-inner {
		padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box;
	}

	body:not(.single-work) .elementor-widget-vision_service_cards,
	body:not(.single-work) .elementor-widget-vision_service_cards > .elementor-widget-container,
	body:not(.single-work) .vision-services-grid {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	/* Keep typography readable across sections/modules. */
	h1,
	.hero-title {
		font-size: clamp(2rem, 10vw, 3.3rem) !important;
		line-height: 1.03 !important;
		letter-spacing: 0.02em !important;
	}

	h2 {
		font-size: clamp(1.46rem, 7.2vw, 2.25rem) !important;
		line-height: 1.08 !important;
	}

	h3 {
		font-size: clamp(1.2rem, 5.2vw, 1.7rem) !important;
		line-height: 1.14 !important;
	}

	p,
	li {
		font-size: clamp(1rem, 3.9vw, 1.24rem);
		line-height: 1.5;
	}

	/* Media should never overflow viewport width on mobile/tablet. */
	img,
	video,
	iframe,
	svg,
	canvas {
		max-width: 100%;
		height: auto;
	}

	/* Keep back-to-top unobtrusive and correctly placed on small screens. */
	#back-to-top,
	#back-to-top-link {
		right: max(12px, env(safe-area-inset-right, 0px)) !important;
		bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
		width: 40px !important;
		height: 40px !important;
		line-height: 40px !important;
	}

	/* Service cards: prevent cramped layouts and keep CTA always visible. */
	.vision-services-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	.vision-service-shell {
		padding: 16px 14px !important;
		border-radius: 14px !important;
		gap: 9px !important;
	}

	.vision-service-title {
		font-size: clamp(1.05rem, 5.8vw, 1.34rem) !important;
	}

	.vision-service-footer .collab-btn.collab-btn--sm {
		min-height: 44px;
		padding: 10px 14px;
		max-width: 100%;
	}

	/* Team/member cards spacing polish (remove large dead zones). */
	.wolf-core-team-member-container,
	.wvc-team-member-container,
	.entry-artist,
	.entry-artist-offgrid {
		margin-bottom: 18px !important;
	}

	.wolf-core-team-member-name,
	.wvc-team-member-name,
	.entry-artist .entry-title {
		margin-top: 10px !important;
		margin-bottom: 6px !important;
	}

	/* Single artist mobile:
	 * restore clean inner gutters after the global full-bleed wrappers change
	 * and keep service cards visually centered.
	 */
	body.single-artist .content-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box;
	}

	body.single-artist #primary.content-area,
	body.single-artist #content.site-content,
	body.single-artist .artist-info-container,
	body.single-artist .artist-content,
	body.single-artist .artist-excerpt-container,
	body.single-artist .artist-meta-container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.single-artist .artist-info-container,
	body.single-artist .artist-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-artist .artist-excerpt-container {
		margin-bottom: 18px !important;
	}

	body.single-artist .artist-info-container > .entry-title,
	body.single-artist .artist-excerpt-container > *:not(.artist-meta-container) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-artist .artist-meta-container {
		gap: 14px;
	}

	body.single-artist .vision-services-grid,
	body.single-artist .elementor-widget-vision_service_cards,
	body.single-artist .elementor-widget-vision_service_cards > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.single-artist .vision-services-grid > .vision-service-card {
		width: 100%;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Work cards on home + portfolio archive:
	 * restore a real mobile overlay hierarchy and keep titles inside the card.
	 */
	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .filtered-content[data-post-type="work"].work-layout-overlay .entry-work-grid .entry-inner {
		padding: clamp(16px, 4.8vw, 22px) !important;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .filtered-content[data-post-type="work"].work-layout-overlay .entry-work-grid .entry-inner-padding {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .filtered-content[data-post-type="work"].work-layout-overlay .entry-work-grid .entry-summary {
		flex: 1 1 auto;
		min-height: 0;
		padding: 0 !important;
		gap: clamp(8px, 2.4vw, 12px);
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .entry-work-grid .entry-title {
		margin: 0;
		font-size: clamp(1.05rem, 5vw, 1.48rem) !important;
		line-height: 1.06 !important;
		letter-spacing: 0.018em !important;
		max-width: 100%;
		overflow-wrap: normal !important;
		word-break: normal !important;
		-webkit-hyphens: none !important;
		-ms-hyphens: none !important;
		hyphens: none !important;
		text-wrap: balance;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .entry-work-grid .entry-title a {
		display: block;
		overflow-wrap: normal;
		word-break: normal;
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
		color: inherit;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .entry-work-grid .entry-taxonomy {
		margin-top: auto;
		padding-top: clamp(8px, 2.2vw, 12px);
		font-size: clamp(0.72rem, 2.7vw, 0.88rem);
		line-height: 1.32;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .entry-work-grid .vision-work-card-client-logo {
		max-width: min(180px, 72%);
		margin-bottom: 0;
	}

	body:is(.home, .is-portfolio) .elementor-widget-work-index #work-grid-container .entry-work-grid .vision-work-video-badge {
		top: 10px;
		right: 10px;
	}
}

@media (max-width: 980px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body.single-work,
	body.single-work #page,
	body.single-work #page-content,
	body.single-work #main.site-main,
	body.single-work #main.site-main > .site-content,
	body.single-work #main.site-main > .site-content > .content-inner,
	body.single-work .content-wrapper,
	body.single-work .entry-single-work,
	body.single-work .vision-project-content,
	body.single-work .vision-project-grid,
	body.single-work .vision-project-main,
	body.single-work .vision-project-aside {
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;
	}

	body.single-work #hero-content {
		width: 100%;
		max-width: 100%;
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 14px;
		padding-inline: clamp(10px, 4vw, 16px) !important;
	}

	body.single-work .entry-single-work .vision-project-content,
	body.single-work .entry-single-work .vision-project-main,
	body.single-work .entry-single-work .vision-project-aside,
	body.single-work .entry-single-work .vision-project-aside-inner,
	body.single-work .entry-single-work .vision-project-aside__sticky {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.single-work .vision-project-video-embed-wrap iframe,
	body.single-work .vision-project-video-embed-wrap video,
	body.single-work .vision-project-video-embed-wrap embed,
	body.single-work .vision-project-video-embed-wrap object,
	body.single-work .vision-project-main img,
	body.single-work .vision-project-main video {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	body.single-work .vision-project-video-section,
	body.single-work .vision-project-gallery-section,
	body.single-work .vision-project-editor-content,
	body.single-work .vision-project-info-card {
		padding: clamp(12px, 3.4vw, 16px);
		border-radius: 14px;
	}

	body.single-work .vision-project-video-item,
	body.single-work .vision-project-gallery-item,
	body.single-work .vision-media-wrap {
		border-radius: 12px;
		overflow: hidden;
	}

	body.single-work .entry-title,
	body.single-work .work-meta-value,
	body.single-work .vision-project-info-value,
	body.single-work .vision-client-link__label {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .vision-work-entry-media,
	body.single-work #work-grid-container [data-post-type="work"] .entry-work-masonry .vision-work-entry-media {
		border-radius: 14px;
		overflow: hidden;
	}

	body.single-work #work-grid-container [data-post-type="work"] .entry-work-grid .entry-summary,
	body.single-work #work-grid-container [data-post-type="work"] .entry-work-masonry .entry-summary {
		padding: 12px 12px 14px;
	}

	body.single-work #work-grid-container [data-post-type="work"] .entry .entry-title {
		font-size: clamp(1rem, 2.8vw, 1.16rem);
		line-height: 1.22;
	}

	body.single-work #work-grid-container [data-post-type="work"] .entry .entry-taxonomy {
		font-size: clamp(0.72rem, 2.1vw, 0.84rem);
		letter-spacing: 0.03em;
	}

	.single-work .single-post-pagination .nav-previous,
	.single-work .single-post-pagination .nav-next {
		min-height: clamp(148px, 40vw, 188px);
	}
}

@media (max-width: 640px) {
	body.single-work .content-wrapper {
		padding-top: 8px;
	}

	body.single-work .vision-project-video-section,
	body.single-work .vision-project-gallery-section,
	body.single-work .vision-project-editor-content,
	body.single-work .vision-project-info-card {
		border-radius: 12px;
	}
}

/* Single work mobile hardening:
 * - keep true centered gutters on iPhone/Android
 * - prevent tiny Instagram embeds
 * - force related works/footer flow in normal document order
 */
@media (max-width: 980px) {
	body.single-work .content-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding-left: max(11px, env(safe-area-inset-left, 0px)) !important;
		padding-right: max(11px, env(safe-area-inset-right, 0px)) !important;
		box-sizing: border-box;
	}

	body.single-work #page-content,
	body.single-work #main.site-main,
	body.single-work .site-content {
		overflow-x: clip;
	}

	body.single-work .entry-single-work,
	body.single-work .entry-single-work .vision-project-content,
	body.single-work .entry-single-work .vision-project-grid,
	body.single-work .entry-single-work .vision-project-main,
	body.single-work .entry-single-work .vision-project-aside {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.single-work .vision-project-video-embed-wrap[data-aspect="9-16"],
	body.single-work .vision-project-video-embed-wrap--instagram[data-aspect="9-16"] {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.single-work .vision-project-instagram-item--scoped .vision-project-video-embed-wrap--instagram-direct {
		aspect-ratio: 9 / 16 !important;
		max-width: min(100%, 440px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.single-work .vision-project-instagram-item--scoped .vision-instagram-direct-video {
		object-fit: cover !important;
	}

	body.single-work .vision-project-video-embed-wrap--instagram-direct video,
	body.single-work .vision-project-video-embed-wrap--instagram video {
		display: block;
		width: 100% !important;
		height: 100% !important;
	}

	body.single-work #work-grid-container.grid-padding-yes {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.single-work #work-grid-container .filtered-content[data-post-type="work"] {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
	}

	body.single-work #work-grid-container .filtered-content.grid.grid-padding-yes {
		margin-top: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
	}

	body.single-work #work-grid-container .filtered-content.grid.grid-padding-yes .entry-grid {
		padding: 0 !important;
	}

	body.single-work #work-grid-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px;
		height: auto !important;
		clear: both;
	}

	body.single-work #work-grid-container .entry,
	body.single-work #work-grid-container .entry-grid,
	body.single-work #work-grid-container .entry-work-grid,
	body.single-work #work-grid-container .entry-work-masonry {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.single-work #work-grid-container .entry-container,
	body.single-work #work-grid-container .entry-box {
		height: 100%;
	}

	body.single-work .single-post-pagination,
	body.single-work .trigger-container.wvc-element,
	body.single-work .items-grid-container,
	body.single-work .related-posts {
		clear: both;
	}

	body.single-work .site-footer {
		position: relative !important;
		z-index: 2 !important;
	}

	body.single-work.footer-type-uncover #page-content {
		padding-bottom: 0 !important;
	}

	body.single-work.footer-type-uncover .site-footer {
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		z-index: 2 !important;
	}

	/* Service Cards plugin mobile centering:
	 * Elementor can keep widget width below 100% on some breakpoints.
	 * Force full-width, centered rendering for the cards grid only.
	 */
	.elementor-widget-vision_service_cards {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		--container-widget-width: 100% !important;
		--container-widget-flex-grow: 1;
	}

	.elementor-widget-vision_service_cards > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.elementor-widget-vision_service_cards .vision-services-grid {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	.elementor-widget-vision_service_cards .vision-service-card {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.vision-services-grid {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.vision-services-grid > .vision-service-card {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@supports (-webkit-touch-callout: none) {
	body.single-work {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}