/**
 * Hero 1 Component Styles
 * Simplified to use a single image block
 * Based on Figma: Home - Desktop Hero 1 (1:64) and Mobile (2:1056)
 */

/* ========================================
   BASE HERO SECTION
   ======================================== */
.hero-1 {
	background: var(--color-bg-teal);
	width: 100%;
	overflow: hidden;
	padding: 3rem 1.5rem;
	margin: 0;
}

/* Hero Image */
.hero-image {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-image__img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Hero Breadcrumb */
.hero-breadcrumb {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	color: var(--color-primary-text);
	margin: 0;
}

.hero-breadcrumb__prefix {
	font-weight: 700;
}

.hero-breadcrumb__suffix {
	font-weight: 400;
	color: var(--color-text-muted-light);
}

.hero-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.hero-breadcrumb__suffix a,
.hero-breadcrumb a.hero-breadcrumb__suffix {
	color: var(--color-text-muted-light);
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.hero-1 {
		padding: 70px 3rem 0 3rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center;
		position: relative;
	}


	/* Hide mobile versions (.hero-image--mobile must beat later .hero-image { display: flex }) */
	.hero-text--mobile,
	.hero-download-buttons--mobile,
	.hero-image.hero-image--mobile {
		display: none;
	}

	/* Left Column: Hero Image (default) */
	.hero-image {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hero-image__img {
		max-width: 100%;
		height: auto;
		width: 100%;
	}

	/* Right Column: Content (Text + Buttons) (default) */
	.hero-content {
		grid-column: 2;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		max-width: 600px;
		justify-self: center;
		align-self: center;
	}

	.hero-1--no-image {
		grid-template-columns: 1fr;
	}

	.hero-1--no-image .hero-content {
		grid-column: 1 / -1;
		max-width: 100%;
		justify-self: stretch;
		align-items: center;
		text-align: center;
	}

	.hero-1--no-image .hero-text-block {
		align-items: center;
	}

	.hero-1--no-image .hero-text {
		text-align: center;
		width: 100%;
	}

	.hero-1--no-image .hero-heading {
		text-align: center;
	}

	.hero-1--no-image .hero-subheading {
		text-align: center;
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-1--no-image .hero-buttons .download-buttons-group {
		justify-content: center;
	}

	/* Add 80px bottom padding for no-image layout */
	.hero-1--no-image {
		padding-bottom: 80px;
	}

	/* Breadcrumb - Desktop (20px from top of hero) */
	.hero-breadcrumb {
		position: absolute;
		top: 60px;
		left: 3rem; /* Match left padding */
		font-size: 20px;
		line-height: 1.61em;
		letter-spacing: -0.005em;
		margin: 0;
	}

	/* Image Right Variant */
	.hero-1--image-right .hero-image {
		grid-column: 2;
		grid-row: 1;
	}

	.hero-1--image-right .hero-content {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		max-width: 100%;
	}

	/* Breadcrumb positioning for image-right variant (same as default) */
	.hero-1--image-right .hero-breadcrumb {
		left: 3rem; /* Match left padding */
	}

	.hero-text-block {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.hero-text--desktop {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.hero-heading {
		/* Typography handled by .typog-h1 */
		margin: 0;
	}

	.hero-heading__normal {
		font-style: normal;
	}

	.hero-heading__italic {
		font-style: italic;
	}

	.hero-subheading {
		/* Typography handled by .text-body */
		margin: 0;
		color: var(--color-secondary-text);
		max-width: 500px;
	}

	/* Buttons Group (Group 431) - now uses shared component */
	.hero-buttons {
		/* Styles handled by download-buttons.css */
	}

	/* Left-align buttons with text in hero-content on desktop */
	.hero-1 .hero-buttons .download-buttons-group {
		justify-content: flex-start;
	}

	/* Centered Layout (no image, no buttons) */
	.hero-1--centered {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 52px 65px 80px 65px; /* 60px top, 119px bottom, 65px sides */
	}

	.hero-1--centered .hero-content {
		grid-column: 1 / -1; 
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px; /* Spacing between breadcrumb and header on desktop */
	}

	.hero-1--centered .hero-breadcrumb {
		position: static;
		text-align: center;
		margin: 0;
		font-size: 20px;
		line-height: 1.61em;
		letter-spacing: -0.005em;
	}

	.hero-1--centered .hero-text-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
	}

	.hero-1--centered .hero-text {
		text-align: center;
		width: 100%;
	}

	.hero-1--centered .hero-heading {
		text-align: center;
		margin: auto;
		max-width: 1123px; /* From Figma layout_7D7U94 width */
		padding: 17px 0; /* Add 34px total vertical space (116px Figma height - 82px line-height) */
	}

	.hero-1--centered .hero-subheading {
		text-align: center;
		max-width: 1156px; /* From Figma layout_2VMI3L width */
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	/* Hide desktop versions */
	.hero-text--desktop,
	.hero-download-buttons--desktop,
	.hero-image--desktop {
		display: none;
	}

	.hero-1 {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 0 1.5rem 60px 1.5rem;
		position: relative;
	}

	/* Breadcrumb - Mobile (50px from top of hero) */
	.hero-breadcrumb {
		position: absolute;
		top: 3.125rem; /* 50px from top */
		left: 1.5rem; /* Match left padding */
		font-size: 16px;
		line-height: 1.45em;
		letter-spacing: -0.005em;
		margin: 0;
		z-index: 10;
	}

	/* Hero Image First on Mobile */
	.hero-image {
		order: 1;
		width: 100%;
	}

	.hero-image__img {
		width: 100%;
		height: auto;
	}

	/* Content Second on Mobile */
	.hero-content {
		order: 2;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		position: relative;
	}

	/* Add padding-top when breadcrumb exists to prevent overlap with heading */
	/* Breadcrumb is at 50px from top, breadcrumb height ~23px, plus 34px gap = ~107px total */
	.hero-content:has(.hero-breadcrumb) {
		padding-top: 6.6875rem; /* ~107px: 50px (breadcrumb top) + ~23px (breadcrumb height) + 34px (gap) */
	}



	/* For image-right variant on mobile: text first, image second, buttons last */
	.hero-1--image-right .hero-content {
		/* Make children act as direct children of .hero-1 flex container */
		display: contents;
	}

	.hero-1--image-right .hero-text-block {
		order: 1;
		/* Add padding-top for breadcrumb spacing (breadcrumb is absolutely positioned) */
		padding-top: 6.6875rem; /* ~107px: 50px (breadcrumb top) + ~23px (breadcrumb height) + 34px (gap) */
	}

	.hero-1--image-right .hero-image {
		order: 2;
	}

	.hero-1--image-right .hero-buttons {
		order: 3;
	}

	.hero-text--mobile {
		display: flex;
		flex-direction: column;
		gap: 22px;
		text-align: left;
	}

	.hero-heading--mobile {
		/* Typography handled by .typog-h1 */
		margin: 0;
	}

	.hero-subheading--mobile {
		/* Typography handled by .text-body */
		margin: 0;
		color: var(--color-secondary-text);
	}

	/* Buttons - now uses shared component (center on small screens; desktop stays left via .hero-1 .hero-buttons .download-buttons-group) */
	.hero-buttons {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	/* No-image layout - maintain center alignment on mobile */
	.hero-1--no-image .hero-content {
		text-align: center;
		align-items: center;
	}

	/* Add 54px top padding for no-image layout when no breadcrumb */
	.hero-1--no-image .hero-content:not(:has(.hero-breadcrumb)) {
		padding-top: 54px;
	}

	.hero-1--no-image .hero-text--mobile {
		text-align: center;
	}

	.hero-1--no-image .hero-text {
		text-align: center;
	}

	.hero-1--no-image .hero-heading {
		text-align: center;
	}

	.hero-1--no-image .hero-subheading {
		text-align: center;
	}

	.hero-1--no-image .hero-buttons {
		justify-content: center;
	}

	/* Add 80px bottom padding for no-image layout on mobile */
	.hero-1--no-image {
		padding-bottom: 80px;
	}

	/* Centered Layout (no image, no buttons) - Mobile */
	.hero-1--centered {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3rem 1.5rem;
		min-height: 335px; /* From Figma layout_26SA93 height */
	}

	.hero-1--centered .hero-content {
		order: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0; /* Custom spacing via margins */
		width: 100%;
		max-width: 327px; /* From Figma layout_BZB3OB width */
		padding-top: 0;
	}

	.hero-1--centered .hero-breadcrumb {
		position: static;
		text-align: center;
		margin: 0;
		font-size: 16px;
		line-height: 1.45em;
		letter-spacing: -0.005em;
	}

	.hero-1--centered .hero-text-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 26px; /* Space between heading and subheading */
		width: 100%;
		margin-top: 6px; /* Default: 48px padding + 6px = 54px from top */
	}

	/* When breadcrumb exists, use larger spacing */
	.hero-1--centered .hero-breadcrumb + .hero-text-block {
		margin-top: 40px; /* Space after breadcrumb */
	}

	/* Override left alignment for centered layout */
	.hero-1--centered .hero-text--mobile {
		text-align: center;
	}

	.hero-1--centered .hero-text {
		text-align: center;
		width: 100%;
	}

	.hero-1--centered .hero-heading {
		text-align: center;
		margin: auto;
	}

	.hero-1--centered .hero-subheading {
		text-align: center;
	}

	.hero-1--centered .hero-buttons {
		margin-top: 46px; /* Space after content */
		justify-content: center;
	}
}