/**
 * Newsletter CTA
 *
 * Figma Home Page Frame 927:530 — 1440×177, bg #F6E8CE
 * Title: Tai Heritage Pro 40/56, tracking -0.4px
 * Desc: Figtree Medium 16/28, rgba(11,11,11,0.76)
 * Input: 597×51, border #E5E5E5, radius 6px
 * Button: #B17915, h 51, px 28, radius 6px, Figtree SemiBold 14/30 uppercase
 */

.newsletter-cta {
	position: relative;
	width: 100%;
	max-width: none;
	min-height: var(--newsletter-height);
	padding: 0;
	background-color: var(--color-bg-cream-1);
	display: flex;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

.newsletter-cta__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	mix-blend-mode: hard-light;
	opacity: 0.16;
	pointer-events: none;
}

/* Figma: content track is the full 1376 (title x32, form right edge x1408),
   so the max-width carries the 32px gutters instead of subtracting them. */
.newsletter-cta__container {
	position: relative;
	z-index: 1;
	max-width: calc(var(--shop-by-category-max) + (2 * var(--section-inline-pad)));
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--section-inline-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
	box-sizing: border-box;
}

/*
 * Figma sized this column at 460px around the mixed-case "Join the Kaahel
 * Community" (445px at 40px Tai Heritage Pro). The live heading sets the brand
 * in caps — "Join the KAAHEL Community" measures 496px — which overflowed 460
 * and wrapped the title onto a second line. 520px holds the caps form with
 * room to spare; the row still has slack at 1440 (520 + 80 gap + 597 form =
 * 1197 of a 1376 track), so nothing else moves.
 */
.newsletter-cta__content {
	/*
	 * `flex: 1` (basis 0) split the row evenly, so between 992px and 1199px the
	 * column got ~440px and wrapped the title again even with the cap raised.
	 * Sizing from content instead lets the heading set the column width and the
	 * form take the remainder — the input has room to shrink, the heading does
	 * not. Below 992px the container stacks and this no longer applies.
	 */
	flex: 0 0 auto;
	max-width: 520px;
	min-width: 0;
}

/* Figma cap tops sit 53px apart (56.02 → 109.02); trimming both boxes to cap
   height turns that into a plain 25px gap. */
.newsletter-cta__title {
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: 400;
	line-height: 56px;
	letter-spacing: -0.4px;
	color: var(--color-heading);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.newsletter-cta__description {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	color: var(--color-body-76);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.newsletter-cta__form-wrapper {
	flex: 1;
	max-width: 597px;
	min-width: 0;
}

.newsletter-cta__form {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
}

/* `input.` (not just `.newsletter-cta__input`) to beat style.css's
   `input[type="email"]` reset, which otherwise wins the padding/border/
   color/radius tie via its equal-specificity element+attribute selector. */
input.newsletter-cta__input {
	flex: 1;
	height: 51px;
	min-width: 0;
	padding: 0 20px;
	border: 1px solid var(--color-border-input);
	border-right: 0;
	border-radius: var(--radius-input) 0 0 var(--radius-input);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	color: var(--color-heading);
	box-shadow: none;
	box-sizing: border-box;
}

.newsletter-cta__input::placeholder {
	color: var(--color-body-76);
	opacity: 1;
}

.newsletter-cta__input:focus {
	outline: none;
}

.newsletter-cta__button {
	height: 51px;
	padding: 14px 28px;
	border: 0;
	border-radius: 0 var(--radius-input) var(--radius-input) 0;
	background: var(--color-accent);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-white);
	transition: background 0.2s ease;
	flex-shrink: 0;
	white-space: nowrap;
	box-sizing: border-box;
}

.newsletter-cta__button:hover,
.newsletter-cta__button:focus {
	background: var(--color-accent-hover);
	outline: none;
}

@media (max-width: 991px) {
	.newsletter-cta {
		min-height: 0;
		padding: 48px 0;
	}

	.newsletter-cta__container {
		flex-direction: column;
		gap: 40px;
		padding: 0 24px;
		text-align: center;
	}

	.newsletter-cta__content,
	.newsletter-cta__form-wrapper {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.newsletter-cta {
		padding: 40px 0;
	}

	.newsletter-cta__container {
		padding: 0 16px;
	}

	.newsletter-cta__title {
		font-size: 32px;
		line-height: 42px;
		letter-spacing: -0.32px;
	}

	.newsletter-cta__description {
		font-size: 15px;
		line-height: 24px;
	}

	.newsletter-cta__form {
		flex-direction: column;
		gap: 12px;
	}

	input.newsletter-cta__input,
	.newsletter-cta__button {
		width: 100%;
		border-radius: var(--radius-input);
	}

	/* flex-direction: column above flips the main axis, so the base
	   `flex: 1` (meant for width) collapses height via flex-basis: 0.
	   Pin back to the intrinsic height in the column layout. */
	input.newsletter-cta__input {
		flex: none;
		border-right: 1px solid var(--color-border-input);
	}
}