/**
 * Services page CFD analysis (template-parts/services/services-cfd.php).
 *
 * DICIT VISIO mirrored: content left at 55%, image right at 45%. The intro
 * is anchored to the top of the content column and the three items to the
 * bottom, so the two sections read as a pair rather than a repeat.
 */

.cfd {
	padding-block: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * Two columns
 *
 * 55fr/45fr for the same reason VISIO uses fr units: percentages plus the
 * gap would sum past the container, so the columns split what is left after
 * the gap. No explicit grid placement is needed here, unlike VISIO: content
 * then image is already the desktop order as well as the mobile one.
 * -------------------------------------------------------------------- */

.cfd__layout {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 64px;
	align-items: stretch;
}

/* Intro at the top, items at the bottom. The 64px is the minimum
   separation, so a long description cannot push into the list. */
.cfd__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 64px;
}

.cfd__media {
	position: relative;
	min-height: 0; /* the picture must never drive the row height */
	border-radius: 6px;
	overflow: hidden;
}

/* Absolutely positioned so the image takes the height the CONTENT column
   sets rather than contributing its own intrinsic height back into the row. */
.cfd__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cfd__layout--text-only {
	grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------
 * Intro. Site spacing convention: 32px under the eyebrow, 32px from the
 * headline to running text.
 * -------------------------------------------------------------------- */

.cfd .eyebrow {
	margin-bottom: 32px;
}

.cfd__text {
	margin-top: 32px;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	letter-spacing: var(--type-body-lg-spacing);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * The three items
 *
 * No rules of any kind in this group: the 60 degree marker is its only
 * mark, and 16px of whitespace does the separating. Hairlines here would
 * compete with the marker for the same job.
 *
 * flex-end rather than a plain block: the reserved height below is a floor
 * on this box, and the slack has to fall ABOVE the rows for them to stay
 * anchored to the bottom of the column. A block would push it below them.
 * -------------------------------------------------------------------- */

.cfd__list {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
}

/* The heading exists so the triggers are a real heading level, not for its
   own type: the button carries the styling. */
.cfd__heading {
	margin: 0;
}

.cfd__trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 20px 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-heading);
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-line);
	letter-spacing: var(--type-h4-spacing);
	font-weight: var(--type-h4-weight);
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * The 60 degree marker
 *
 * The eyebrow's slash at roughly twice the length, so the two read as the
 * same geometry at two scales rather than as a repeated mark. Same
 * construction: a 1px rule rotated -60deg, with a negative inline margin
 * taking back the width the rotation no longer occupies. A 48px line at 60
 * degrees spans 48 x cos(60) = 24px horizontally, so 12px comes off each
 * side.
 *
 * Permanent and identical on all three items: present at rest, unchanged on
 * hover, focus and tap. It carries no state at all, because the description
 * appearing is the entire feedback and a mark that also moved would be a
 * second answer to the same question. Nothing here transitions.
 * -------------------------------------------------------------------- */

.cfd__marker {
	flex-shrink: 0;
	width: 48px;
	height: 1px;
	margin-inline: -12px;
	background-color: var(--color-accent);
	transform: rotate(-60deg);
}

/* --------------------------------------------------------------------
 * Reveal
 *
 * Same mechanism as VISIO and deliver.css: grid-template-rows 0fr to 1fr
 * with the inner wrapper at min-height 0 and overflow hidden. Never
 * max-height.
 *
 * The RESTING state is revealed. accordion.js adds .is-enhanced, which is
 * what switches the hidden state on, so a visitor with JS blocked reads all
 * three descriptions instead of one.
 * -------------------------------------------------------------------- */

.cfd__panel {
	display: grid;
	grid-template-rows: 1fr;
}

.cfd__panel-inner {
	min-height: 0;
	overflow: hidden;
}

/* Indented to the title's own start, so the marker reads as a gutter for the
   whole item rather than shifting the title alone. 36px is the marker's
   occupied width (48px less the 24px the rotation gives back) plus the 12px
   gap, so the two align by construction rather than by a guessed number. */
.cfd__desc {
	padding-left: 36px;
	padding-bottom: 24px;
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	font-weight: var(--type-body-weight);
	color: var(--color-body-text);
}

.cfd__list.is-enhanced .cfd__panel {
	grid-template-rows: 0fr;
}

/* Hidden copy leaves the accessibility tree as well as the viewport. */
.cfd__list.is-enhanced .cfd__panel-inner {
	visibility: hidden;
}

.cfd__list.is-enhanced .cfd__item.is-open .cfd__panel {
	grid-template-rows: 1fr;
}

.cfd__list.is-enhanced .cfd__item.is-open .cfd__panel-inner {
	visibility: visible;
}

/* --------------------------------------------------------------------
 * Motion, switched on one frame AFTER the initial state so the page does
 * not load with three panels animating shut. The marker is deliberately
 * absent from this block: it never moves.
 *
 * visibility cannot be transitioned, so it is delayed instead: held until
 * the collapse finishes, released immediately on opening. base.css zeroes
 * both duration and delay under reduced motion, so the state still changes
 * there and nothing waits.
 * -------------------------------------------------------------------- */

.cfd__list.is-ready .cfd__panel {
	transition: grid-template-rows 650ms var(--motion-ease);
}

.cfd__list.is-ready .cfd__panel-inner {
	transition: visibility 0s linear 650ms;
}

.cfd__list.is-ready .cfd__item.is-open .cfd__panel-inner {
	transition-delay: 0s;
}

/* --------------------------------------------------------------------
 * Height reservation
 *
 * The image column stretches to the content column, so without this the
 * picture resizes on every hover. accordion.js publishes the tallest
 * revealed state as --accordion-reserve, re-measured after fonts load and
 * on resize; the value is width-dependent and must never be hardcoded.
 *
 * Above the layout switch only: below it the image is stacked underneath,
 * where a shorter state moves nothing beside it.
 * -------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.cfd__list.is-enhanced {
		min-height: var(--accordion-reserve, 0px);
	}
}

/* --------------------------------------------------------------------
 * Responsive: one column, content above the image, matching VISIO.
 *
 * Nothing imposes a height on the picture once it is stacked, so it flows
 * at its natural ratio: no crop and no invented aspect number.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cfd__layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.cfd__media {
		position: static;
	}

	.cfd__image {
		position: static;
		height: auto;
	}
}

/* --------------------------------------------------------------------
 * Link to the CFD analysis page
 *
 * 64px, the step this section already uses between its intro and its list, and
 * the same one the megamenu overview link takes above itself.
 * -------------------------------------------------------------------- */

.cfd__cta {
	margin-top: 64px;
}