/**
 * Visiora Newsletter — V1.1.0
 *
 * Le composant consomme Visiora Core :
 * - Design Tokens --v-*
 * - Card : .v-card / .v-card--outlined
 * - Input : .v-input
 * - Button : .v-button / .v-button--primary
 *
 * Aucun token visuel local n'est redéfini ici.
 *
 * @package Visiora_Newsletter
 */


/* ==========================================================
   1. RESET LOCAL
   ========================================================== */

.vn-newsletter,
.vn-newsletter *,
.vn-newsletter *::before,
.vn-newsletter *::after {
	box-sizing: border-box;
}


/* ==========================================================
   2. CONTENEUR / CARD
   ========================================================== */

.vn-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
	align-items: center;
	gap: var(--v-space-10);

	inline-size: calc(100% - (var(--v-space-6) * 2));
	max-inline-size: var(--v-container-standard);
	margin-inline: auto;
	margin-block: 0;
	padding: var(--v-space-10);

	border-color: var(--v-color-primary-border);
	border-radius: var(--v-radius-card);

	background: var(--v-color-primary-soft);
	color: var(--v-color-text);
}


/* ==========================================================
   3. CONTENU
   ========================================================== */

.vn-newsletter__content,
.vn-newsletter__form-wrap {
	min-inline-size: 0;
}

.vn-newsletter__title {
	margin:
		0
		0
		var(--v-space-2);

	color: var(--v-color-heading);

	font-family: var(--v-font-family-heading);
	font-size: var(--v-heading-h2-size);
	font-weight: var(--v-heading-h2-weight);
	line-height: var(--v-heading-h2-line-height);
	letter-spacing: var(--v-heading-h2-letter-spacing);
}

.vn-newsletter__description {
	max-inline-size: var(--v-container-xs);
	margin: 0;

	color: var(--v-color-text);

	font-family: var(--v-font-family-body);
	font-size: var(--v-text-body-size);
	font-weight: var(--v-font-weight-regular);
	line-height: var(--v-line-height-relaxed);
}


/* ==========================================================
   4. FORMULAIRE
   ========================================================== */

.vn-newsletter__form-wrap {
	inline-size: 100%;
}

.vn-newsletter__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--v-space-component-sm);

	inline-size: 100%;
}


/* ==========================================================
   5. INPUT — VISIORA CORE
   ========================================================== */

.vn-newsletter input.vn-newsletter__input.v-input {
	display: block;

	inline-size: 100%;
	min-inline-size: 0;
	block-size: var(--v-space-14);
	min-block-size: var(--v-space-14);

	margin: 0;
	padding-inline: var(--v-space-component-md);

	border-color: var(--v-color-border-strong) !important;
	border-radius: var(--v-radius-input) !important;

	background: var(--v-color-surface) !important;
	background-color: var(--v-color-surface) !important;
	background-image: none !important;

	color: var(--v-color-text) !important;
	-webkit-text-fill-color: var(--v-color-text) !important;
	caret-color: var(--v-color-text);

	font-family: var(--v-font-family-body);
	font-size: var(--v-text-body-size);
	font-weight: var(--v-font-weight-regular);
	line-height: var(--v-line-height-normal);

	box-shadow:
		0 0 0 1000px
		var(--v-color-surface)
		inset !important;

	-webkit-box-shadow:
		0 0 0 1000px
		var(--v-color-surface)
		inset !important;

	appearance: none;
	-webkit-appearance: none;
}

.vn-newsletter input.vn-newsletter__input.v-input::placeholder {
	color: var(--v-color-text-muted) !important;
	-webkit-text-fill-color: var(--v-color-text-muted) !important;
	opacity: var(--v-opacity-100);
}

.vn-newsletter input.vn-newsletter__input.v-input:hover {
	border-color: var(--v-color-primary-border) !important;
}

.vn-newsletter input.vn-newsletter__input.v-input:focus,
.vn-newsletter input.vn-newsletter__input.v-input:focus-visible {
	border-color: var(--v-color-primary) !important;

	background: var(--v-color-surface) !important;
	background-color: var(--v-color-surface) !important;

	color: var(--v-color-text) !important;
	-webkit-text-fill-color: var(--v-color-text) !important;

	box-shadow:
		var(--v-shadow-focus),
		0 0 0 1000px var(--v-color-surface) inset !important;

	-webkit-box-shadow:
		var(--v-shadow-focus),
		0 0 0 1000px var(--v-color-surface) inset !important;

	outline: none;
}


/* ==========================================================
   6. AUTOFILL
   ========================================================== */

.vn-newsletter input.vn-newsletter__input.v-input:-webkit-autofill,
.vn-newsletter input.vn-newsletter__input.v-input:-webkit-autofill:hover,
.vn-newsletter input.vn-newsletter__input.v-input:-webkit-autofill:focus,
.vn-newsletter input.vn-newsletter__input.v-input:-webkit-autofill:active {
	border-color: var(--v-color-border-strong) !important;

	background: var(--v-color-surface) !important;
	background-color: var(--v-color-surface) !important;
	background-image: none !important;

	color: var(--v-color-text) !important;
	-webkit-text-fill-color: var(--v-color-text) !important;
	caret-color: var(--v-color-text) !important;

	-webkit-box-shadow:
		0 0 0 1000px
		var(--v-color-surface)
		inset !important;

	box-shadow:
		0 0 0 1000px
		var(--v-color-surface)
		inset !important;
}


/* ==========================================================
   7. BOUTON — VISIORA CORE
   ========================================================== */

.vn-newsletter .vn-newsletter__button.v-button {
	min-block-size: var(--v-space-14);
	margin: 0;
	padding-inline: var(--v-space-6);

	border-radius: var(--v-radius-button);

	white-space: nowrap;
}

.vn-newsletter .vn-newsletter__button.v-button:focus-visible {
	box-shadow: var(--v-shadow-focus);
}


/* ==========================================================
   8. CONFIDENTIALITÉ
   ========================================================== */

.vn-newsletter__privacy {
	margin:
		var(--v-space-2)
		0
		0;

	color: var(--v-color-text-soft);

	font-family: var(--v-font-family-body);
	font-size: var(--v-text-caption-size);
	font-weight: var(--v-font-weight-regular);
	line-height: var(--v-line-height-normal);
}


/* ==========================================================
   9. HONEYPOT
   Valeurs structurelles nécessaires au masquage accessible.
   ========================================================== */

.vn-newsletter__honeypot {
	position: absolute !important;

	inset-inline-start: -10000px !important;

	inline-size: 1px !important;
	block-size: 1px !important;

	overflow: hidden !important;
}


/* ==========================================================
   10. MESSAGES — TOKENS SÉMANTIQUES
   ========================================================== */

.vn-message {
	margin:
		0
		0
		var(--v-space-3);

	padding:
		var(--v-space-3)
		var(--v-space-4);

	border:
		var(--v-size-border-thin)
		solid
		var(--v-color-border);

	border-radius: var(--v-radius-md);

	font-family: var(--v-font-family-body);
	font-size: var(--v-text-small-size);
	line-height: var(--v-line-height-normal);
}

.vn-message--success {
	border-color: var(--v-color-success-border);
	background: var(--v-color-success-soft);
	color: var(--v-color-success-text);
}

.vn-message--error {
	border-color: var(--v-color-danger-border);
	background: var(--v-color-danger-soft);
	color: var(--v-color-danger-text);
}


/* ==========================================================
   11. CONTEXTE SIDEBAR ARTICLE
   Le même composant reste compact lorsqu'il est déplacé
   dans la sidebar desktop par Visiora Site.
   ========================================================== */

.v-article-sidebar .vn-newsletter,
.v-article-sidebar__newsletter .vn-newsletter {
	grid-template-columns: minmax(0, 1fr);

	inline-size: 100%;
	max-inline-size: 100%;

	gap: var(--v-space-component-md);
	padding: var(--v-space-5);
}

.v-article-sidebar .vn-newsletter__title,
.v-article-sidebar__newsletter .vn-newsletter__title {
	font-size: var(--v-heading-h4-size);
	line-height: var(--v-heading-h4-line-height);
	letter-spacing: var(--v-heading-h4-letter-spacing);
}

.v-article-sidebar .vn-newsletter__form,
.v-article-sidebar__newsletter .vn-newsletter__form {
	grid-template-columns: minmax(0, 1fr);
}

.v-article-sidebar .vn-newsletter__button,
.v-article-sidebar__newsletter .vn-newsletter__button {
	inline-size: 100%;
}


/* ==========================================================
   12. TABLETTE
   ========================================================== */

@media (max-width: 51.25rem) {

	.vn-newsletter {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--v-space-6);

		inline-size: calc(100% - (var(--v-space-5) * 2));
		max-inline-size: var(--v-container-md);

		padding: var(--v-space-8);
	}
}


/* ==========================================================
   13. MOBILE
   ========================================================== */

@media (max-width: 35rem) {

	.vn-newsletter {
		inline-size: calc(100% - (var(--v-space-4) * 2));

		padding:
			var(--v-space-6)
			var(--v-space-4);

		border-radius: var(--v-radius-lg);
	}

	.vn-newsletter__title {
		font-size: var(--v-heading-h3-size);
		line-height: var(--v-heading-h3-line-height);
		letter-spacing: var(--v-heading-h3-letter-spacing);
	}

	.vn-newsletter__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.vn-newsletter__button {
		inline-size: 100%;
	}
}


/* ==========================================================
   14. ACCESSIBILITÉ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.vn-newsletter *,
	.vn-newsletter *::before,
	.vn-newsletter *::after {
		transition: none !important;
		animation: none !important;
	}
}