/*
 * Zafira Signature - widget "Zafira - Compromisso" (zafira_commitment).
 * Valores verificados no Figma (node 210:449/210:450, secao
 * "section#compromissos"): cabecalho eyebrow (traco 24x1px + Montserrat
 * SemiBold 12px maiusculas, tracking 3.12px, cor Amulet #799B78) seguido
 * de h2 Playfair Display Regular 52px/61.36px, tracking -1.04px, cor Eden
 * #0f3c53, largura maxima ~562px. Corpo: lista horizontal de itens
 * (Playfair Display Medium 26px/1.4, tracking -0.36px, cor Eden) separados
 * por um traco vertical fino de 100px de altura (node "Vector 2": stroke
 * #799B78 a 60% de opacidade) recriado em CSS (pseudo-elemento) em vez de
 * importado como SVG, incluindo o traco final ("Vector 3", node 216:862)
 * entre o ultimo item e o selo, recriado como ::before do proprio selo;
 * selo "Turismo de Portugal" (node 216:830/216:834, 150x52) alinhado a
 * direita da lista.
 */

.zafira-commitment {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	width: 100%;
}

.zafira-commitment__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 56px;
	width: 100%;
}

.zafira-commitment__eyebrow {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 3.12px;
	text-transform: uppercase;
	color: var(--zafira-sage);
}

.zafira-commitment__eyebrow-line {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 1px;
	background: var(--zafira-sage);
}

.zafira-commitment__heading {
	margin: 0;
	max-width: 562px;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.18;
	letter-spacing: -1.04px;
	color: var(--zafira-navy);
}

.zafira-commitment__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 48px 80px;
	width: 100%;
}

.zafira-commitment__list {
	display: flex;
	flex: 1 1 720px;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px 60px;
	max-width: 1083px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zafira-commitment__item {
	position: relative;
	flex: 1 1 220px;
	min-width: 200px;
	padding: 32px 0;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 1.4;
	letter-spacing: -0.36px;
	color: var(--zafira-navy);
}

.zafira-commitment__item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -30px;
	width: 1px;
	height: 100px;
	background: rgba(121, 155, 120, 0.6);
	transform: translateY(-50%);
}

.zafira-commitment__seal {
	position: relative;
	display: flex;
	flex: 0 1 150px;
	align-items: center;
	justify-content: flex-end;
	padding: 32px 0;
}

.zafira-commitment__seal::before {
	content: '';
	position: absolute;
	top: 90%;
	left: -40px;
	width: 1px;
	height: 100px;
	background: rgba(121, 155, 120, 0.6);
	transform: translateY(-50%);
}

.zafira-commitment__seal img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	/* Figma mobile (node 236:2342, "compromisso-mobile"): 32px between
	   the header block and the list, and 12px between the eyebrow and
	   the heading - both fall back to this widget's wider desktop gaps
	   (80px / 56px) without these overrides. */
	.zafira-commitment {
		gap: 32px;
	}

	.zafira-commitment__header {
		gap: 12px;
	}

	/* Figma mobile (node 236:2342, "compromisso-mobile"): 36px/44px - the
	   desktop clamp(32px, 4vw, 52px) bottoms out at its 32px floor here
	   instead of stepping up to this size. */
	.zafira-commitment__heading {
		font-size: 36px;
		line-height: 44px;
	}

	.zafira-commitment__list {
		flex-direction: column;
		align-items: flex-start;
		/* 48px, not 32px: each item is 24px padding-top + 24px
		   padding-bottom around its divider in Figma, not 16px/16px. */
		gap: 48px;
	}

	.zafira-commitment__item {
		flex: 1 1 auto;
		width: 100%;
		padding: 0;
	}

	.zafira-commitment__item:not(:last-child)::after {
		top: auto;
		bottom: -24px;
		right: auto;
		left: 0;
		width: 60px;
		height: 1px;
		transform: none;
	}

	.zafira-commitment__seal {
		justify-content: flex-start;
	}

	.zafira-commitment__seal::before {
		display: none;
	}
}

/* Additive corrections verified against Figma node 236:2342
   ("compromisso-mobile") via get_design_context - appended rather than
   edited in place so the original @media (max-width: 900px) block above
   is left untouched; these simply win the cascade by appearing later. */
@media (max-width: 900px) {
	/* Figma: item text is 20px/28px Playfair Medium - the desktop 26px/1.4
	   size was left unset at this breakpoint until now. */
	.zafira-commitment__item {
		font-size: 20px;
		line-height: 28px;
	}

	/* Figma: the divider between items spans the full content width
	   (335px, i.e. 100%), not a short 60px dash. */
	.zafira-commitment__item:not(:last-child)::after {
		width: 100%;
	}

	/* Figma: a divider also sits between the last item and the trust-badge
	   row (node 236:2365) - re-enable and reposition it as a horizontal
	   rule instead of the desktop vertical stroke that display:none was
	   hiding above. */
	.zafira-commitment__seal::before {
		display: block;
		position: static;
		width: 100%;
		height: 1px;
		background: rgba(121, 155, 120, 0.6);
		transform: none;
		margin-bottom: 24px;
	}

	.zafira-commitment__seal {
		flex-direction: column;
		align-items: flex-start;
		/* desktop's 32px 0 padding would double up with .zafira-commitment__body's
		   own gap below, producing more space than Figma's 32px total. */
		padding: 0;
		/* desktop's flex:0 1 150px constrains this to a narrow box - Figma's
		   Trust Badge Row spans the full 335px content width, and without
		   this the divider::before's width:100% above resolves against the
		   150px box instead. */
		flex: 1 1 100%;
		width: 100%;
	}

	/* Figma: 32px gap between the list and the trust-badge row when they
	   stack - desktop's 48px 80px (wrap) gap was left unset at this
	   breakpoint until now. */
	.zafira-commitment__body {
		gap: 32px;
	}
}

/* Re-verified against a fresh get_design_context pull of node 236:2342
   ("compromisso-mobile") - one thing the earlier mobile pass missed: the
   eyebrow row's own internal gap (between the small dash and "POR
   ESCRITO") is 12px in Figma, not the desktop 24px it was still
   inheriting. Everything else checked against this fresh pull (heading
   36/44, item 20/28 no letter-spacing, divider width/color, section/body
   gaps) was already correct - not touched again here. */
@media (max-width: 900px) {
	.zafira-commitment__eyebrow {
		gap: 12px;
	}
}

/* Tablet blend (769-1200px, the site's new tablet range as of today).
   Confirmed via get_metadata on the whole "Mobile" Figma page: there is
   no dedicated tablet frame for this widget anywhere in the file, so per
   instruction this is a deliberate blend between the mobile values above
   and this file's own desktop values - not identical to either extreme.
   Structure follows the mobile column/stacked layout (consistent with
   how the zafira_feature_row cards were extended to tablet earlier
   today) with sizes/spacing blended partway toward desktop. */
@media (min-width: 769px) and (max-width: 1200px) {
	.zafira-commitment {
		gap: 56px; /* mobile 32px / desktop 80px */
	}

	.zafira-commitment__header {
		gap: 32px; /* mobile 12px / desktop 56px */
	}

	.zafira-commitment__eyebrow {
		gap: 16px; /* mobile 12px / desktop 24px */
	}

	.zafira-commitment__heading {
		font-size: 44px; /* mobile 36px / desktop ~52px */
		line-height: 52px;
	}

	.zafira-commitment__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
	}

	.zafira-commitment__item {
		flex: 1 1 auto;
		width: 100%;
		padding: 0;
		font-size: 23px; /* mobile 20px / desktop 26px */
		line-height: 32px; /* mobile 28px / desktop ~36.4px */
	}

	.zafira-commitment__item:not(:last-child)::after {
		top: auto;
		bottom: -24px;
		right: auto;
		left: 0;
		width: 100%;
		height: 1px;
		transform: none;
	}

	.zafira-commitment__body {
		gap: 32px;
	}

	.zafira-commitment__seal {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0;
		flex: 1 1 100%;
		width: 100%;
	}

	.zafira-commitment__seal::before {
		display: block;
		position: static;
		width: 100%;
		height: 1px;
		background: rgba(121, 155, 120, 0.6);
		transform: none;
		margin-bottom: 24px;
	}
}