/**
 * TechBBQ Subscribe — newsletter signup section (custom form → HubSpot API).
 *
 * Figma refs in widget PHP (1440 / 1024 / 768 / 380).
 *
 * Field/input/checkbox visuals: components/input.css, components/checkbox.css.
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1440, 1440+.
 */

.techbbq-subscribe {
	--techbbq-input-with-btn-submit-space: 9rem;
	--techbbq-subscribe-section-gap: 48px;
	--techbbq-subscribe-content-gap: var(--techbbq-section-title-text-gap);
	--techbbq-subscribe-form-gap: var(--techbbq-space-2);
	--techbbq-subscribe-fields-gap: var(--techbbq-space-1);
	--techbbq-subscribe-name-width: 100%;
	--techbbq-subscribe-description-size: 18px;
	--techbbq-subscribe-description-line-height: 1.4;
	--techbbq-subscribe-options-gap: var(--techbbq-space-2);
	--techbbq-subscribe-checkbox-list-gap: 12px;

	box-sizing: border-box;
	width: 100%;
	padding: var(--techbbq-space-2) 0 72px;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

.techbbq-subscribe .techbbq-input {
	--techbbq-input-height: 64px;
}

.techbbq-subscribe > .section-inner {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--techbbq-subscribe-section-gap);
	align-items: flex-start;
}

.techbbq-subscribe__content {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--techbbq-subscribe-content-gap);
	min-width: 1px;
}

.techbbq-subscribe__title {
	margin: 0;
}

.techbbq-subscribe__description {
	margin: 0;
	max-width: 576px;
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-subscribe-description-size);
	font-weight: 400;
	line-height: var(--techbbq-subscribe-description-line-height);
	color: var(--techbbq-content-secondary);
}

.techbbq-subscribe__form {
	flex: 1 0 0;
	width: 100%;
	min-width: 1px;
}

.techbbq-subscribe__form-inner {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-subscribe-form-gap);
	width: 100%;
	position: relative;
}

.techbbq-subscribe__fields {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-subscribe-fields-gap);
	width: 100%;
}

.techbbq-subscribe__name-field {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}

.techbbq-subscribe__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.techbbq-subscribe__hp input {
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

.techbbq-subscribe__options {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-subscribe-options-gap);
	padding-top: var(--techbbq-space-3);
}

.techbbq-subscribe__options-label {
	margin: 0;
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-text-paragraph-xxs-size);
	font-weight: 500;
	line-height: 1.36;
	color: var(--techbbq-content-secondary);
}

.techbbq-subscribe__options-list {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-subscribe-checkbox-list-gap);
}

.techbbq-subscribe__message {
	margin: 0;
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-text-paragraph-s-size);
	line-height: var(--techbbq-text-paragraph-line-height);
}

.techbbq-subscribe__message--success {
	color: var(--techbbq-content-primary);
}

.techbbq-subscribe__message--error {
	color: var(--techbbq-content-accent-1);
}

.techbbq-subscribe__field-error {
	display: block;
	margin-top: 4px;
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-text-paragraph-xxs-size);
	line-height: 1.32;
	color: var(--techbbq-content-accent-1);
}

.techbbq-subscribe.is-submitting .techbbq-input-with-btn__submit,
.techbbq-subscribe.is-submitting .techbbq-subscribe__name-field .techbbq-input {
	opacity: var(--techbbq-btn-disabled-opacity);
	pointer-events: none;
}

/* Mobile: stack submit below email field */
.techbbq-subscribe .techbbq-input-with-btn {
	flex-direction: column;
	align-items: stretch;
	gap: var(--techbbq-space-1);
}

.techbbq-subscribe .techbbq-input-with-btn .techbbq-input {
	padding-right: var(--techbbq-input-padding-inline);
}

.techbbq-subscribe .techbbq-input-with-btn__submit {
	position: static;
	width: 100%;
	transform: none;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	.techbbq-subscribe {
		--techbbq-subscribe-section-gap: 72px;
		--techbbq-subscribe-name-width: 235px;
		--techbbq-subscribe-description-size: 20px;
		--techbbq-subscribe-description-line-height: 1.1;
		--techbbq-subscribe-options-gap: var(--techbbq-space-3);

		padding: var(--techbbq-section-space-small) 0 80px;
	}

	.techbbq-subscribe__fields {
		flex-direction: row;
		align-items: stretch;
	}

	.techbbq-subscribe__name-field {
		flex: 0 0 var(--techbbq-subscribe-name-width);
		width: var(--techbbq-subscribe-name-width);
	}

	.techbbq-subscribe__options {
		flex-direction: row;
		align-items: center;
		gap: var(--techbbq-space-3);
		padding-top: 0;
		padding-left: 4px;
		padding-right: 4px;
	}

	.techbbq-subscribe__options-list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Tablet+: embed submit inside email field */
	.techbbq-subscribe .techbbq-input-with-btn {
		flex-direction: unset;
		align-items: unset;
		gap: unset;
	}

	.techbbq-subscribe .techbbq-input-with-btn .techbbq-input {
		padding-right: calc(var(--techbbq-input-with-btn-submit-space, 9rem));
	}

	.techbbq-subscribe .techbbq-input-with-btn__submit {
		position: absolute;
		top: 50%;
		right: 8px;
		z-index: 1;
		width: unset;
		transform: translateY(-50%);
	}
}

/* ── Desktop (1024–1440) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	.techbbq-subscribe {
		--techbbq-subscribe-name-width: 320px;

		padding-bottom: 88px;
	}
}

/* ── Large desktop (1440+) ──────────────────────────────────── */
@media (min-width: 1440px) {
	.techbbq-subscribe {
		--techbbq-subscribe-section-gap: var(--techbbq-space-1);
		--techbbq-subscribe-name-width: 225px;

		padding-bottom: var(--techbbq-section-space-large);
	}

	.techbbq-subscribe > .section-inner {
		flex-direction: row;
		align-items: flex-start;
	}

	.techbbq-subscribe__description {
		font-size: var(--techbbq-text-paragraph-l-size);
		line-height: var(--techbbq-text-paragraph-line-height);
	}
}