/**
 * Hero Software Services Pattern Styles
 * A premium light theme hero section with gradient text, image frame effect,
 * trust badges, and call-to-action buttons.
 */

/* Base Section Styles with Gradient Background */
.hero-software-services-section {
	background: linear-gradient(135deg, #fff9f5 0%, #fff5f0 50%, #ffefe8 100%);
	position: relative;
	overflow: hidden;
}

/* Decorative Background Elements */
.hero-software-services-section::before {
	content: '';
	position: absolute;
	top: 64px;
	right: 64px;
	width: 224px;
	height: 224px;
	background: linear-gradient(to bottom right, rgba(255, 107, 53, 0.08), rgba(255, 200, 150, 0.15));
	border-radius: 50%;
	filter: blur(48px);
	pointer-events: none;
}

.hero-software-services-section::after {
	content: '';
	position: absolute;
	bottom: 128px;
	right: 128px;
	width: 160px;
	height: 160px;
	background: linear-gradient(to bottom right, rgba(255, 150, 100, 0.1), rgba(255, 220, 180, 0.08));
	border-radius: 50%;
	filter: blur(32px);
	pointer-events: none;
}

/* Geometric Accent Line */
.hero-software-services-section .wp-block-cover::before {
	content: '';
	position: absolute;
	top: 33%;
	left: 0;
	width: 6px;
	height: 128px;
	background: linear-gradient(to bottom, #FF6B35, #FFB088);
	z-index: 10;
}

/* Gradient Text Effect */
.hero-software-services-section .gradient-text {
	background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Avatar Stack Styles */
.hero-software-services-section .hero-avatar-stack {
	display: flex;
	align-items: center;
}

.hero-software-services-section .hero-avatar {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-software-services-section .hero-avatar-overlap {
	margin-left: -8px;
}

.hero-software-services-section .hero-avatar-count {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image Frame Container */
.hero-software-services-section .hero-image-frame-container {
	position: relative;
}

/* Image Frame Effect */
.hero-software-services-section .hero-image-frame {
	position: relative;
}

.hero-software-services-section .hero-image-frame::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	border: 3px solid #FF6B35;
	border-radius: 20px;
	z-index: -1;
	pointer-events: none;
}

.hero-software-services-section .hero-image-frame::after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: -20px;
	width: 60%;
	height: 60%;
	background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
	border-radius: 20px;
	z-index: -2;
	opacity: 0.15;
	pointer-events: none;
}

/* Main Hero Image */
.hero-software-services-section .hero-main-image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-software-services-section .hero-main-image img:hover {
	transform: translateY(-5px);
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

/* Button Hover Effects */
.hero-software-services-section .wp-block-button__link {
	transition: all 0.3s ease;
}

.hero-software-services-section .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px -5px rgba(255, 107, 53, 0.4);
}

.hero-software-services-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Accent Border for Description */
.hero-software-services-section [style*="border-left-width: 4px"] {
	transition: border-color 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 781px) {
	.hero-software-services-section .wp-block-columns {
		flex-direction: column-reverse;
	}
	
	.hero-software-services-section .hero-image-frame::before,
	.hero-software-services-section .hero-image-frame::after {
		display: none;
	}
	
	.hero-software-services-section .wp-block-heading {
		font-size: 2.5rem !important;
	}
	
	.hero-software-services-section .wp-block-cover::before {
		display: none;
	}
}

@media (max-width: 480px) {
	.hero-software-services-section .wp-block-heading {
		font-size: 2rem !important;
	}
	
	.hero-software-services-section .wp-block-buttons {
		flex-direction: column;
	}
	
	.hero-software-services-section .wp-block-button {
		width: 100%;
	}
	
	.hero-software-services-section .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}