/* "How We Work" redesign — homepage only (post 10777), matching
   _project-docs/assets/HowWeWork.png: flat rows (no zigzag stagger),
   badge numbers centered above every card (not alternating top/bottom),
   straight arrow connectors between cards in the same row (replacing the
   vendor's curved dashed arrows), plain white rounded cards.

   Everything here overrides Elementor's own per-element inline styles
   (margins/gap/justify-content come from _elementor_data, not a CSS
   file) and the parent theme's alternating odd/even rules in
   levis/style.css. CSS-only for the cards themselves — no _elementor_data
   edits. The four connector arrows ARE real DOM elements (see below),
   inserted by tnc-how-we-work-arrows.js since Elementor's markup has no
   slot to add them via CSS alone. */

/* Kill the per-item 140px alternating margin Elementor set inline (the
   old "waterfall" stagger) at every breakpoint — left over from the
   vendor's zigzag design, it would otherwise throw off both the flat
   rows and the equal-height cards below. */
.elementor-element-855ae25.how-it-work .how-work-item {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Desktop layout: a 7-column grid — four 1fr card columns interleaved
   with three fixed 44px arrow columns — rather than 4 equal columns plus
   a bare gap. Giving each arrow its own real column (instead of a
   pseudo-element pushed out of a card into the gap) is what fixes the
   arrowheads: a ::after anchored to a card and offset past its edge
   still belongs to that card's stacking context, so the neighbouring
   card's opaque white background painted over it — only the line ever
   showed, never the head. A dedicated column has no such conflict. */
@media (min-width: 1025px) {
	.elementor-element-855ae25.how-it-work {
		display: grid !important;
		grid-template-columns:
			minmax(0, 1fr)
			44px
			minmax(0, 1fr)
			44px
			minmax(0, 1fr)
			44px
			minmax(0, 1fr) !important;
		column-gap: 0 !important;
		row-gap: 80px !important;
		align-items: center !important;
		overflow: visible !important;
	}

	/* Elementor's own per-element stylesheet sets each item's width via
	   a literal `width: calc(25% - 22.5px)` (not flex-basis), which
	   would still apply under display:grid and could fight the grid's
	   own column sizing. Clearing it lets the grid tracks be the only
	   thing controlling card width, guaranteeing all four card columns
	   (and so all six cards) are identical. */
	.elementor-element-855ae25.how-it-work > .how-work-item {
		width: 100% !important;
		position: relative;
		z-index: 2;
	}

	/* All six cards must be exactly the same size regardless of how much
	   text each step has. Grid's row-stretch alone isn't enough — it
	   only equalises height WITHIN a row (so row 1 could still differ
	   from row 2), and it stretches the outer grid cell, not the visible
	   white card inside it. A fixed height on the card itself (the
	   longest copy, Step 4's two-line title, needs ~288px; 300px leaves
	   a little breathing room) guarantees all six match, in both rows. */
	.how-it-work .how-work-item-box > .elementor-widget-container {
		height: 300px !important;
		box-sizing: border-box !important;
	}

	/* Card columns: 1, 3, 5, 7 (columns 2/4/6 are the arrow tracks).
	   Step 5 and Step 6 reuse Step 2 and Step 3's own columns (3 and 5),
	   so "directly underneath" falls out of the grid rather than needing
	   separate centering/nudging math. */
	.elementor-element-07505d5 { grid-column: 1; grid-row: 1; }
	.elementor-element-80ab769 { grid-column: 3; grid-row: 1; }
	.elementor-element-9f3a67e { grid-column: 5; grid-row: 1; }
	.elementor-element-7645254 { grid-column: 7; grid-row: 1; }
	.elementor-element-f7557d2 { grid-column: 3; grid-row: 2; }
	.elementor-element-706af17 { grid-column: 5; grid-row: 2; }

	/* Two invisible spacer elements exist in the DOM (added in
	   _elementor_data, class .how-work-spacer) from the old layout.
	   With every real step now explicitly placed, an unplaced spacer
	   would otherwise auto-place itself into a leftover grid cell.
	   Hidden rather than deleted — deleting them is an _elementor_data
	   edit, out of scope for this CSS-only pass. Below 1025px their own
	   elementor-hidden-tablet/-mobile classes already hide them. */
	.elementor-element-c6296e1,
	.elementor-element-31b95d4 {
		display: none;
	}
}

/* Badge numbers: the parent theme alternates these bottom-center (odd
   items) / top-center (even items) for a zigzag layout. The new design
   wants every badge centered above its card, no alternation, at every
   breakpoint (the parent also has a <=767px rule flipping even items
   back to bottom — override that too). !important needed throughout:
   the parent's :nth-child(even) rules outrank a plain descendant
   selector on specificity. */
.how-it-work .how-work-item .how-work-no {
	bottom: auto !important;
	top: 0 !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
}

/* Cards: uniform rounded corners (the vendor default is a speech-bubble
   shape with one square corner, meant for the old zigzag) plus a soft
   shadow for separation against the section's light lavender
   background. Extra top padding clears the badge circle now overlapping
   every card's top edge (badge is ~77px tall, sits centered on the
   card's top edge, so roughly its bottom half — ~38px — extends into
   the card). */
.how-it-work .how-work-item-box > .elementor-widget-container {
	border-radius: 20px !important;
	box-shadow: 0 12px 32px rgba(15, 40, 90, 0.1) !important;
	padding: 56px 32px 32px !important;
}

/* Hide the vendor's own curved dashed arrow images entirely — replaced
   by the real .process-arrow elements below. */
.how-it-work .how-work-item-box::after {
	display: none !important;
}

/* Connector arrows: real sibling elements (not pseudo-elements on a
   card), appended into .elementor-element-855ae25 by
   tnc-how-we-work-arrows.js and placed into their own grid column/row
   via the classes below — see the grid definition above. Hidden by
   default (mobile/tablet stack without connectors, same as the
   reference design); shown only at the >1024px desktop breakpoint where
   the 7-column grid is active. */
.process-arrow {
	display: none;
}

@media (min-width: 1025px) {
	.process-arrow {
		display: block;
		position: relative;
		width: calc(100% - 10px);
		height: 2px;
		background: #004AAD;
		justify-self: center;
		align-self: center;
		z-index: 5;
	}

	.process-arrow::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		width: 9px;
		height: 9px;
		border-top: 2px solid #004AAD;
		border-right: 2px solid #004AAD;
		transform: translateY(-50%) rotate(45deg);
	}

	.process-arrow.arrow-1 { grid-column: 2; grid-row: 1; }
	.process-arrow.arrow-2 { grid-column: 4; grid-row: 1; }
	.process-arrow.arrow-3 { grid-column: 6; grid-row: 1; }
	.process-arrow.arrow-5 { grid-column: 4; grid-row: 2; }
}