/**
 * Core block adapters.
 * Core blocks add wrapper elements (figure, button/buttons divs, embed wrapper)
 * that the hand-written design-system markup did not have. These rules take the
 * wrappers out of layout or reset their defaults so pages lay out exactly as the
 * design system specifies.
 */

/* ---- Buttons --------------------------------------------------------------
   A Button block is div.wp-block-button.csat-btn > a.wp-block-button__link.
   The div drops out of layout so the link sits exactly where the design-system
   <a class="csat-btn"> sat; the look is applied to the link (see the
   `.csat-btn > .wp-block-button__link` twins in design-system.css).
   A Buttons wrapper marked .csat-btn-slot also drops out (it stands in for no
   element at all); other Buttons wrappers are real layout containers. */
.csat-page .wp-block-button.csat-btn,
.csat-page .wp-block-buttons.csat-btn-slot { display: contents; }
/* Buttons blocks always get flex layout (and core centres the items). Wrappers that
   stand in for a plain block <div> go back to block; flex ones keep the default
   stretch alignment the design system was written against. */
.csat-page .wp-block-buttons.is-layout-flex { align-items: normal; }
.csat-page .wp-block-buttons.csat-buttons--block { display: block; }
.csat-page .wp-block-button.csat-modal__close { display: contents; }
.csat-page .csat-btn > .wp-block-button__link {
	width: auto;
	height: auto;
	word-break: normal;
	align-content: normal;
	text-align: inherit;
}
/* Arrow glyphs that used to be inline <svg>/<span> children of the link. */
.csat-page .csat-btn--arrow > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.csat-page .csat-btn--arrow-text > .wp-block-button__link::after {
	content: "\2192";
	width: auto;
	height: auto;
	display: inline-block;
	background: none;
	-webkit-mask: none;
	mask: none;
}
/* Classes that sat on the old link now sit on the (display: contents) wrapper. */
.csat-page .csat-card__link > .wp-block-button__link { margin-top: auto; }

/* ---- Paragraphs that stand in for former <span>/<div> text boxes ----------
   Converted text boxes carry .csat-text: no paragraph margins, so they sit exactly
   like the old element. Same specificity as the reset's p rule, so any design-system
   class rule still wins. */
p:where(.csat-text) { margin: 0; }

/* Former <span> labels on the home page (hand-built before .csat-text existed). ----
   The design system styled these spans as display:block with only a top margin. */
.csat-page :is(.weekly-counter, .annual-counter, .csat-hero__metric-value, .csat-hero__metric-label,
	.csat-aifeature__num, .csat-aifeature__lbl, .csat-split-stats__num, .csat-split-stats__label) {
	margin-inline: 0;
	margin-bottom: 0;
}

/* ---- Images ---------------------------------------------------------------- */
.csat-page figure.wp-block-image { margin: 0; }
.csat-page .csat-card__media > a { display: block; height: 100%; }
.csat-page .csat-split__media > figure > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Background video embed (home hero) ------------------------------------
   The figure takes the box the iframe used to have (see .csat-hero__video in the
   design system); the wrapper and iframe fill it. */
.csat-page figure.csat-hero__video { margin: 0; }
.csat-page .csat-hero__video .wp-block-embed__wrapper { position: absolute; inset: 0; }
.csat-page .csat-hero__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	pointer-events: none;
}

/* ---- Client logo row ------------------------------------------------------
   Four logo chips. Static 4-up at >=1024px; below that a swipeable row with
   2 (768-1023px) or 3 (<768px) chips in view, matching the former carousel. */
.csat-page .csat-logos {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 50px) / 4);
	gap: 50px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.csat-page .csat-logos::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
	.csat-page .csat-logos { gap: 10px; grid-auto-columns: calc((100% - 10px) / 2); }
}
@media (max-width: 767px) {
	.csat-page .csat-logos { grid-auto-columns: calc((100% - 2 * 10px) / 3); }
}
.csat-page .csat-logos__item {
	scroll-snap-align: start;
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 156px;
	margin: 0;
	padding: 16px 18px;
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
	transition: all .4s ease;
}
.csat-page .csat-logos__item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 120px;
	object-fit: contain;
	vertical-align: baseline;
	filter: grayscale(1);
	opacity: 0.9;
	user-select: none;
	transition: opacity .3s ease, filter .3s ease;
}
.csat-page .csat-logos__item:hover img { filter: grayscale(0); opacity: 1; }

/* ---- Stretched links -------------------------------------------------------
   A whole-block link (old <a> wrapping a card/row) is now a group whose first
   heading or paragraph carries the link; the link's hit area covers the group. */
.csat-page .csat-stretch { position: relative; }
.csat-page .csat-stretch a::after { content: ""; position: absolute; inset: 0; }
.csat-page .csat-stretch :is(h1, h2, h3, h4, h5, h6, p) > a:first-child,
.csat-page .csat-stretch :is(h1, h2, h3, h4, h5, h6, p) > span:first-child > a:only-child { color: inherit; text-decoration: none; }

/* ---- Lifecycle wheel data (read by lifecycle-wheel.js, not shown) ---------- */
.lc-services { display: none; }

/* ---- Image blocks standing in for a classed image element -----------------
   The class moved to the block's figure; the figure drops out of layout and
   design-system twins (`.class > img`) style the image exactly as before. */
.csat-page figure.wp-block-image:is(.csat-carousel__slide, .csat-team__photo, .csat-modal__photo) { display: contents; }