/**
 * Hero Two Column Pattern Styles
 *
 * Styles for the two-column hero section
 */

/* ========================================
   Hero Badge
======================================== */

.hero-badge {
	display: inline-block !important;
	width: auto !important;
	max-width: fit-content !important;
	background-color: #f3f4f6 !important;
	border-radius: 24px !important;
	padding: 8px 20px !important;
	margin-bottom: 24px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

/* ========================================
   Hero Mockup Image
======================================== */

.hero-mockup img {
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	width: 100%;
	height: auto;
}

/* ========================================
   Responsive Styles
======================================== */

@media (max-width: 781px) {
	/* Stack columns on mobile */
	.wp-block-columns:has(.hero-mockup) {
		flex-direction: column-reverse !important;
	}

	/* Adjust heading sizes on mobile */
	.wp-block-columns .wp-block-heading[style*="font-size:56px"] {
		font-size: 36px !important;
	}

	/* Adjust spacing on mobile */
	.wp-block-group.alignfull:has(.hero-mockup) {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Full width buttons on mobile */
	.wp-block-buttons:has(.hero-mockup) {
		flex-direction: column;
	}

	.wp-block-buttons:has(.hero-mockup) .wp-block-button {
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* Smaller headings on very small screens */
	.wp-block-columns .wp-block-heading[style*="font-size:56px"] {
		font-size: 32px !important;
	}

	/* Adjust hero badge */
	.hero-badge {
		font-size: 13px !important;
	}
}