/**
 * The Wicked — "What We Do" services list widget (tw-services).
 * 1:1 recreation of the #services list from design-reference/index.html
 * (number · title · description rows; the 2026-07-13 reference dropped the
 * skill-chip 4th column). Colours & fonts are wired to Elementor GLOBAL
 * colours/fonts via --e-global-* custom properties, with the design tokens as
 * fallbacks, so changing the site's Global Colors/Fonts updates the widget.
 * Per-element font SIZES stay here (globals define family + weight only).
 */

.tw-services {
	width: 100%;
}

/* Top hairline above the first row. */
.tw-services__list {
	border-top: 1px solid var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
}

/* One service row: number | title | description. */
.tw-services__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(40px, 5vw, 80px);
	/* Reference default; the "Row vertical alignment" control overrides this and
	   defaults to `center` (so wrapped descriptions stay vertically centred). */
	align-items: baseline;
	padding: 32px 8px;
	border-bottom: 1px solid var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
	transition: background .3s ease;
}

.tw-services__row:hover {
	background: rgba(177, 128, 81, .05);
}

/* Numeral — Cormorant, kept at the reference's light 400 (lighter than the
   title) for the intended hierarchy; family follows the Display global. */
.tw-services__num {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, 'Cormorant Garamond', serif);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--e-global-color-accent, #B18051);
	font-variant-numeric: tabular-nums;
}

/* Service title — Heading global (Cormorant 600). */
.tw-services__title {
	margin: 0;
	font-family: var(--e-global-typography-secondary-font-family, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--e-global-color-secondary, #e9e6df);
}

/* Description — Body global (Inter 400). */
.tw-services__desc {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family, 'Inter', sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--e-global-color-text, #c4c1ba);
}

/* ==========================================================================
   Stages layout (Studio "Pipeline") — list_layout = stages.
   The layout class rides the widget wrapper via prefix_class
   (tw-services--layout-stages). A 2-col `72px | 1fr` grid: big serif tan
   number on the left, a flex title-row (title + right-aligned duration) and a
   description below on the right. Rows separated by a top hairline.

   Structural rules that MUST win over the shared Layout/Divider controls'
   defaults (row_valign=center, dividers on) are scoped an extra level deep
   (`… .tw-services__list .tw-services__row`, 0,3,0) so a fresh stages insert
   looks right without touching those controls. Colour/typography stay with the
   dedicated Number/Title/Description controls so they remain overridable.
   ========================================================================== */

/* No separate top line on the list — each row carries its own top hairline. */
.tw-services--layout-stages .tw-services__list {
	border-top: none;
}

.tw-services--layout-stages .tw-services__list .tw-services__row {
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var(--e-global-color-cdc1318, rgba(255, 255, 255, .09));
	border-bottom: none;
}

/* Bigger serif number for the pipeline (base is 1.5rem for columns). Kept at
   (0,2,0) so the Number Typography control can still override the size.
   `align-self:center` vertically centers ONLY the number cell against the
   (taller) text block; the row keeps `align-items:start` so the text stays top. */
.tw-services--layout-stages .tw-services__num {
	font-size: 2rem;
	align-self: center;
}

.tw-services--layout-stages .tw-services__body {
	min-width: 0;
}

/* Title row: title on the left, duration meta pushed to the right, baselines
   aligned so the small-caps meta sits on the title's baseline. */
.tw-services--layout-stages .tw-services__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
}

/* Duration meta — Inter, 11px, wide-tracked uppercase, muted2. */
.tw-services--layout-stages .tw-services__meta {
	flex: none;
	font-family: var(--e-global-typography-text-font-family, 'Inter', sans-serif);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--e-global-color-eda52f2, #86837c);
	white-space: nowrap;
}

/* Stage description — smaller than the columns body, muted, capped width.
   Scoped a level deep (0,3,0) so the reference `muted` beats the shared
   Description Color control's `body` default without a control override. */
.tw-services--layout-stages .tw-services__list .tw-services__desc {
	color: var(--e-global-color-0c2c23a, #9d9a92);
}
.tw-services--layout-stages .tw-services__desc {
	font-size: .9375rem;
	line-height: 1.7;
	margin-top: 10px;
	max-width: 520px;
}

/* --------------------------------------------------------------------------
   Mobile reflow (NOT in the reference — the design canvas is desktop-only, and
   a 3-col grid is unusable at phone widths). Number + title on one line, the
   description stacked full-width beneath. Tunable / removable on request.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.tw-services__row {
		grid-template-columns: 40px 1fr;
		gap: 6px 20px;
		padding-top: 26px;
		padding-bottom: 26px;
	}
	.tw-services__desc {
		grid-column: 1 / -1;
		margin-top: 10px;
	}
}