/*
 * Zafira Signature - widget "Zafira - Viagens Corporativas"
 * (zafira_corporate_travel).
 *
 * Valores verificados no Figma (node 236:2369, secao "O que e a gestao de
 * viagens corporativas"): caixa de conteudo max-width 802px alinhada a
 * esquerda sobre foto de fundo full-bleed. h2 Playfair Display Regular
 * 52px/61.36px, tracking -1.04px, cor Eden #0f3c53. Paragrafos Montserrat
 * Regular 18px/32.4px, tracking -0.09px, mesma cor. Lista distribuida em
 * 2 colunas (60px gap, 30px entre itens), marcador em traco horizontal de
 * 12px - MESMO padrao visual de .zafira-feature-row__list li::before em
 * zafira-feature-row.css (padding-left 36px, topo 13.7px, cor
 * rgba(121,155,120,.5)).
 *
 * A foto de fundo do Figma e' uma composicao de 2 imagens sobrepostas com
 * um fade horizontal aplicado via mask SVG (gradiente cinza usado como
 * mascara de luminancia). Em vez de recriar esse mask com 2 <img> e CSS
 * mask-image, a composicao foi pre-renderizada num unico PNG/WEBP
 * (assets/img/07_background_banner_corporativo_no_celular_aeroporto.webp,
 * 1920x960) e e' usada aqui como uma simples background-image/cover -
 * segue o mesmo padrao ja usado nas seccoes hero/concierge deste site
 * (ver assets/css/sections/hero.css: .zafira-hero__bg).
 */

.zafira-corporate-travel {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	min-height: 640px;
	/*
	 * A seccao vive dentro de um container Elementor "full" (fundo
	 * full-bleed), ao contrario das seccoes vizinhas (ex.: #compromissos)
	 * que tem um container filho "boxed" a limitar o conteudo. Sem essa
	 * caixa aqui, o padding lateral ficava fixo em 40px, empurrando o
	 * texto quase para a borda do ecra em vez de o alinhar com a coluna
	 * usada no resto do site. --content-width e a mesma variavel CSS que o
	 * Elementor define nos containers "boxed" (confirmado ao vivo em
	 * #compromissos: min(100%,1140px)) - reutiliza-la aqui em vez de um
	 * valor fixo mantem isto alinhado mesmo que o kit do Elementor mude.
	 */
	padding: 120px max(40px, calc((100% - var(--content-width, 1140px)) / 2));
	overflow: hidden;
	box-sizing: border-box;
	color: var(--zafira-navy);
}

.zafira-corporate-travel__bg {
	position: absolute;
	inset: 0;
	/* Set from PHP as a custom property (--zafira-corporate-travel-bg), not
	   an inline background-image - see class-zafira-corporate-travel-widget.php
	   render() for why: an inline background-image would always beat the
	   @media (max-width:900px) .zafira-corporate-travel__bg--has-mobile
	   class override below regardless of viewport width. */
	background-image: var(--zafira-corporate-travel-bg);
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.zafira-corporate-travel__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 56px;
	width: 100%;
	min-width: 0;
	max-width: 802px;
	box-sizing: border-box;
}

.zafira-corporate-travel__heading {
	margin: 0;
	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-corporate-travel__intro {
	margin: 16px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 32.4px;
	letter-spacing: -0.09px;
	color: var(--zafira-navy);
}

.zafira-corporate-travel__list {
	column-count: 2;
	column-gap: 60px;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	list-style: none;
}

.zafira-corporate-travel__list li {
	position: relative;
	break-inside: avoid;
	padding-left: 36px;
	margin-bottom: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	color: var(--zafira-navy);
}

.zafira-corporate-travel__list li:last-child {
	margin-bottom: 0;
}

.zafira-corporate-travel__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13.7px;
	width: 12px;
	height: 1px;
	background: rgba(121, 155, 120, 0.5);
}

.zafira-corporate-travel__closing {
	margin: 16px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 32.4px;
	letter-spacing: -0.09px;
	color: var(--zafira-navy);
}

/* Real <img> content block (content_image control) - hidden at desktop,
   shown only at <=1200px (tablet + mobile), see the (max-width:1200px)
   block below. Not present in the DOM as a background: it is a normal
   flow element so it can render first/above the text card once the
   section becomes a stacked column at that breakpoint. */
.zafira-corporate-travel__photo {
	display: none;
	width: 100%;
	/*
	 * Figma node 236:2467 is exactly 375x468, matched 1:1 at first (see
	 * git history) - but on real devices wider than the 375px Figma frame
	 * (390/414/428px etc.), `width:100%` scales the image up in both
	 * dimensions, so it reads noticeably taller/bigger than the Figma
	 * frame's actual footprint. User asked to shrink it - trimmed the
	 * aspect ratio's height component (468 -> 400, ~14.5% shorter) and
	 * kept object-fit:cover/center to crop that difference off symmetric
	 * top+bottom (the subject sits roughly centered vertically, so this
	 * doesn't cut into him).
	 */
	aspect-ratio: 375 / 400;
	object-fit: cover;
	object-position: center;
	box-sizing: border-box;
}

/*
 * <=1200px (tablet + mobile): stop treating the section photo as a
 * full-bleed CSS background with text overlaid on top of it (desktop-only
 * treatment, kept above) and switch to the Figma non-desktop pattern
 * instead - confirmed against node 236:2438 ("Content_Card"): a real photo
 * block first, then a flat rgba(233,227,213,.18) text card below it, no
 * photo behind the text. This block carries the shared structural change;
 * the two narrower media queries further below still layer in their own
 * typography/spacing differences (mobile vs tablet font sizes etc.).
 */
@media (max-width: 1200px) {
	.zafira-corporate-travel {
		display: block;
		min-height: 0;
		background-color: rgba(233, 227, 213, 0.18);
		/*
		 * No padding on the outer wrapper at this breakpoint. In Figma
		 * (node 47:1200, "Mobile" frame) the photo (236:2467) and the
		 * Content_Card (236:2438) are both full-width siblings at x:0,
		 * width:375 - the 32/24/48/24 padding belongs to Content_Card's
		 * OWN interior only (its children sit inset from ITS box), not to
		 * an outer wrapper around both photo and card. Padding lived here
		 * before, which pushed the photo in from the sides (no longer
		 * full-bleed) and added unwanted top padding above the photo. It
		 * now moves onto .zafira-corporate-travel__inner below, which is
		 * the actual Content_Card equivalent in this markup.
		 */
		padding: 0;
	}

	.zafira-corporate-travel__bg {
		display: none;
	}

	.zafira-corporate-travel__photo {
		display: block;
		/*
		 * No margin-bottom: Figma shows the photo's bottom edge (y=7527)
		 * and the Content_Card's top edge (y=7526) touching directly, 0
		 * gap between them. The card's own 32px padding-top (set on
		 * .inner below) is what creates the visible space before the
		 * heading - adding a margin here on top of that would double it.
		 */
		margin-bottom: 0;
	}

	.zafira-corporate-travel__inner {
		max-width: none;
		/*
		 * Kill the desktop 56px flex-gap here. Every child below already
		 * carries its own Figma-correct margin-top (24px, or 24px+24px
		 * padding around the closing divider) added in the block below -
		 * those margins were meant to be the ONLY spacing mechanism at
		 * this breakpoint. Leaving the 56px gap in place made it stack
		 * additively with those margins (56+24=80px between most blocks,
		 * 56+24+24=104px around the closing divider, instead of Figma's
		 * 24px / 48px) - this was the "muito espacamento" bug. Desktop
		 * keeps its 56px gap untouched since it is set on the base rule
		 * above and this override only fires at <=1200px.
		 */
		gap: 0;
	}
}

/*
 * Was @media (max-width: 900px) - widened to 1200px. There is no separate
 * Figma tablet artboard for this section (only Desktop and Mobile frames
 * exist), and the user wants tablet AND mobile to match the same
 * Content_Card spec (node 236:2438). Scoping these typography/spacing
 * values to <=900px only left the 901-1200px tablet range falling back to
 * the desktop-tuned BASE values (clamp(32px,4vw,52px) heading, 18px/32.4px
 * intro, 16px/25.6px Regular list items) - visibly oversized compared to
 * Figma. Widening this block's own breakpoint (rather than duplicating its
 * rules into the shared structural (max-width:1200px) block above) keeps
 * this whole rule set self-contained in one place. The narrower
 * (min-width:901px) block right below still fires afterward in source
 * order and keeps tablet's own larger container padding, since same-
 * specificity rules later in the file win.
 */
@media (max-width: 1200px) {
	.zafira-corporate-travel {
		min-height: 0;
	}

	.zafira-corporate-travel__inner {
		/* Figma mobile (node 236:2438, "Content_Card"): 32px top / 48px
		   bottom, asymmetric - not the 72px symmetric value this used to have.
		   Lives on .inner (the Content_Card equivalent), not on the outer
		   section, so the photo above it stays full-bleed. Tablet
		   (901-1200px) overrides this again below with its own,
		   deliberately larger padding since there's no tablet Figma artboard. */
		padding: 32px 24px 48px 24px;
	}

	/* Figma mobile (node 236:2438, "Content_Card"): 28px/36px - the
	   desktop clamp(32px, 4vw, 52px) bottoms out at its 32px floor here
	   instead of stepping down further. letter-spacing reset to normal:
	   the base rule's -1.04px tracking is a desktop-only value tuned for
	   the 52px size - get_design_context on this node returns no tracking
	   class at all for Title_Text, i.e. Figma's mobile card uses default
	   (0) letter-spacing throughout. */
	.zafira-corporate-travel__heading {
		font-size: 28px;
		line-height: 36px;
		letter-spacing: normal;
	}

	/* Figma mobile: 16px/26px, 90% opacity (desktop 18px/32.4px stays
	   for larger widths). margin-top 24px matches the uniform 24px gap
	   Figma's mobile card uses between title/intro/list/footer blocks.
	   letter-spacing reset to normal for the same reason as the heading
	   above - the base rule's -0.09px tracking is desktop-only. */
	.zafira-corporate-travel__intro {
		margin-top: 24px;
		font-size: 16px;
		line-height: 26px;
		letter-spacing: normal;
		opacity: 0.9;
	}

	.zafira-corporate-travel__list {
		column-count: 1;
		margin-top: 24px;
	}

	/* Figma mobile: 14px/20px Montserrat Medium (weight 500), not the
	   desktop's 16px/25.6px Regular. Divider dash + 12px gap before text
	   = 24px total (was 36px, tuned for the larger desktop font); ::before
	   vertical position re-centered on the new 20px line-height. */
	.zafira-corporate-travel__list li {
		margin-bottom: 16px;
		padding-left: 24px;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	.zafira-corporate-travel__list li::before {
		top: 9.5px;
	}

	/*
	 * Figma's "Line" divider (node 236:2464) has a 0px-tall bounding box
	 * sitting in the card's own flex flow with the standard 24px gap on
	 * both sides (24 + 0 + 24 = 48px total between the list and the
	 * closing text, not 49). A border-top on the closing paragraph would
	 * itself consume 1px of box height in the flow, pushing the text down
	 * to 49px total - so the hairline is drawn with an absolutely
	 * positioned ::before instead (like the list-item dividers above),
	 * which paints the 1px line without adding to the layout box. Text
	 * itself is 14px/22px at 85% opacity (desktop's 18px/32.4px stays for
	 * larger widths).
	 */
	.zafira-corporate-travel__closing {
		position: relative;
		margin-top: 24px;
		padding-top: 24px;
		font-size: 14px;
		line-height: 22px;
		/* Same reason as heading/intro above: reset the base rule's
		   -0.09px desktop tracking to normal for this breakpoint. */
		letter-spacing: normal;
		opacity: 0.85;
	}

	.zafira-corporate-travel__closing::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: rgba(121, 155, 120, 0.35);
	}
}

/* Site-wide breakpoints updated to mobile <=768px / tablet 769-1200px.
   The image-first/flat-card structural switch, background-color, and now
   (since the block above was widened from max-width:900px to 1200px) all
   of the Figma Content_Card typography/spacing also live fully in the
   blocks above for the whole <=1200px range. This block only keeps
   tablet's own, deliberately larger container padding (901-1200px) - it
   fires after the widened block above, so at same specificity it wins for
   that one property. column-count:1 is no longer declared here since the
   widened block above already covers 901-1200px too - kept once, not
   duplicated. */
@media (min-width: 901px) and (max-width: 1200px) {
	/* No explicit tablet Figma artboard for this section (only Desktop and
	   Mobile frames exist) - scaling the mobile stacked layout's asymmetric
	   32/24/48/24 padding up somewhat rather than leaving the desktop's
	   120px vertical padding in place, which was never overridden here
	   before and reads as far too much whitespace once the section is a
	   stacked image+card instead of a full-bleed background photo. Lives on
	   .inner (see the widened <=1200px block above), not the outer section,
	   so the photo above the card stays full-bleed at tablet widths too. */
	.zafira-corporate-travel__inner {
		padding: 48px 40px 64px 40px;
	}

	/*
	 * .zafira-corporate-travel__photo is a SIBLING of .inner (not nested in
	 * it - see class-zafira-corporate-travel-widget.php render()), so the
	 * shared <=1200px block's width:100% stretches it to the full section
	 * width with no side inset. That is correct at mobile (<=900px, full-
	 * bleed to the phone's own width, matching the Figma frame), but at
	 * tablet widths (901-1200px, up to 2.4x the 375px Figma mobile frame)
	 * the `aspect-ratio: 375 / 400` rule above scales height right along
	 * with width, so the image was measured at 885x944px on a 900px-wide
	 * viewport - consuming almost an entire 1200px-tall screen before the
	 * heading even shows.
	 *
	 * Capping max-width (rather than adding max-height + letting
	 * object-fit:cover crop the extra width away) was chosen deliberately:
	 * the source image (attachment 299) is portrait, 375x468 intrinsic. A
	 * max-height cap would force `cover` to fill a landscape-shaped box
	 * with a portrait photo, which zooms in hard and crops the subject's
	 * top/bottom - risking cutting off the person. Capping max-width keeps
	 * the same 375:400 shape approved for mobile, just centered instead of
	 * full-bleed at this breakpoint - no distorted crop, and visually
	 * checked (CDP screenshots at 901/1000/1200px) to read as a
	 * proportionate visual element above the text card rather than one
	 * that dominates the screen.
	 *
	 * Selector is `.zafira-corporate-travel .zafira-corporate-travel__photo`
	 * (not just `.zafira-corporate-travel__photo`) deliberately: Elementor's
	 * own frontend stylesheet ships `.elementor img { max-width:100%; ... }`
	 * (specificity 0,1,1), which otherwise silently wins over a bare single-
	 * class `.zafira-corporate-travel__photo { max-width:520px }` (0,1,0) -
	 * confirmed via CDP CSS.getMatchedStylesForNode that this rule was being
	 * served correctly but overridden by that Elementor reset. Qualifying
	 * with the parent section class raises this to (0,2,0), which beats
	 * Elementor's rule regardless of stylesheet load order.
	 */
	.zafira-corporate-travel .zafira-corporate-travel__photo {
		max-width: 520px;
		margin: 0 auto;
	}
}