/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

/* ---------------------------------------------------------------------------
 * Block: framework/split — text + image side-by-side.
 * ------------------------------------------------------------------------- */

.fw-split {
	padding: var(--fw-section-py, 48px) 20px;
}

.fw-split__inner {
	max-width: var(--fw-split-inner-max-width, 0);
	margin: var(--fw-split-inner-margin, 0);
	display: grid;
	/* The measured ratio, defaulting to an even split. Fixed at 1fr 1fr the
	   pane boundary landed wherever half the band was: the case management
	   benefits sit in a 55% column beside a 38% photograph, and an even split
	   pushed every line of them 123px right of live. */
	grid-template-columns: var(--fw-split-cols, 1fr 1fr);
	gap: var(--fw-split-inner-gap, 0);
	align-items: center;
}

/* Stack the two panes on tablet/mobile. */
@media (max-width: 768px) {
	.fw-split__inner {
	grid-template-columns: 1fr;
	gap: var(--fw-split-inner-gap, 0);
}
}

.fw-split__content :is(h1, h2, h3) {
	margin: var(--fw-split-content-margin, 0);
}

.fw-split__content p {
	margin: var(--fw-split-content-margin, 0);
}

.fw-split__content p:last-of-type {
	margin-bottom: var(--fw-split-content-margin-bottom, 0);
}

.fw-split__content .wp-block-buttons {
	margin: 0;
}

.fw-split__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--fw-wp-block-button-link-gap, 0);
	padding: var(--fw-wp-block-button-link-padding, 0);
	transition: background 0.25s ease, color 0.25s ease;
}
/* Arrow slides right on hover (Figma secondary button hover state). */
.fw-split__content .wp-block-button__link::after {
	transition: transform 0.25s ease;
}
.fw-split__content .wp-block-button__link:hover::after {
	transform: translateX(6px);
}

.fw-split__content .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: var(--fw-wp-block-button-link-width, 0);
	height: var(--fw-wp-block-button-link-height, 0);
	flex-shrink: 0;
}

.fw-split__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Only the pane's OWN image (direct child) gets the full-bleed cover treatment;
   using a child combinator keeps it from leaking into nested card content such
   as the case-study PDF modal pages or the course/news thumbnails. */
.fw-split__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Logo variant — show the whole mark on white, never crop it. */
.fw-split--logo .fw-split__media {
	aspect-ratio: 16 / 10;
}
.fw-split--logo .fw-split__media img {
	object-fit: contain;
	padding: var(--fw-split-media-padding, 0);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Form variant — the media pane holds a Forminator form. Drop the fixed
 * aspect-ratio / grey fill / crop so the form sizes to its own height, and
 * align the panes to the top rather than centred.
 * ------------------------------------------------------------------------- */
.fw-split--form .fw-split__inner {
	align-items: start;
}
/* The form pane is itself the white "card" (Forminator can't override this
   element), so the form sits on white with padding + shadow like the live site. */
.fw-split--form .fw-split__media,
.fw-split__form {
	aspect-ratio: auto;
	overflow: visible;
	display: block;
	min-width: 0;
	padding: var(--fw-split-form-padding, 0);
}
.fw-split__form .forminator-ui {
	width: 100%;
}
@media ( max-width: 600px ) { .fw-split__form {
	padding: var(--fw-split-form-padding, 0);
} }
/* Editor placeholder for the form pane. */
.fw-split__form-placeholder {
	text-align: center;
	padding: var(--fw-split-form-placeholder-padding, 0);
}

/* ---------------------------------------------------------------------------
 * Video facade — poster + play button on load, swapped for an autoplay iframe
 * on click by view.js. Keeps the same 3/2 footprint as the image media pane.
 * ------------------------------------------------------------------------- */
.fw-split__video {
	position: relative;
	overflow: hidden;
}
.fw-split__video-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	display: block;
}
.fw-split__video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.fw-split__video-play:hover .fw-split__video-poster {
	transform: scale( 1.05 );
}
.fw-split__video-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: var(--fw-split-video-btn-width, 0);
	height: var(--fw-split-video-btn-height, 0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-left: var(--fw-split-video-btn-padding-left, 0);
	transition: background 0.25s ease, transform 0.25s ease;
}
.fw-split__video-play:hover .fw-split__video-btn,
.fw-split__video-play:focus-visible .fw-split__video-btn {
	transform: translate( -50%, -50% ) scale( 1.08 );
}
.fw-split__video-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Content-card media types: Case Study / Testimonial / Course / News rendered
 * in the media pane instead of an image. Constrain + centre the single card so
 * it doesn't stretch across the whole 50% pane, and strip the section chrome
 * the wrapper blocks bring with them.
 * ------------------------------------------------------------------------- */
.fw-split__card {
	/* Cancel the image pane's fixed 3/2 crop so the card shows in full. */
	aspect-ratio: auto;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fw-split__card > * {
	width: 100%;
	max-width: var(--fw-split-card-max-width, 0);
	margin: 0;
}

/* Small label above the card (Case Study: / Related News: / Featured Course:). */
.fw-split__card-label {
	width: 100%;
	max-width: var(--fw-split-card-label-max-width, 0);
	margin: var(--fw-split-card-label-margin, 0);
}

/* Case Study / Testimonial wrappers carry their own full-section padding and
   background; neutralise it inside the pane so only the card shows. */
.fw-split__card .fw-cases,
.fw-split__card .fw-testimonials {
	padding: 0;
}
.fw-split__card .fw-cases__grid {
	display: block;
	margin: 0;
}
.fw-split__card .fw-cases__controls {
	display: none;
}

/* News card styles normally live in the latest-news block's own <style>; repeat
   the essentials so a standalone news card renders correctly here. */
.fw-split__card--news .fw-news-card {
	position: relative;
}
.fw-split__card--news .fw-news-card__image {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.fw-split__card--news .fw-news-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.fw-split__card--news .fw-news-card:hover .fw-news-card__image img {
	transform: scale( 1.08 );
}
.fw-split__card--news .fw-news-card h3 a {
	transition: color 0.25s ease;
}

/* The case-study PDF modal renders INSIDE this pane, so pane/theme rules can
   height-drive its page images and leave a gap. Force the modal to size its
   inner + page images to full width, whatever else is on the cascade. */
.fw-split__card .fw-cases__modal-inner {
	width: var(--fw-cases-modal-inner-width, 0);
	max-width: var(--fw-cases-modal-inner-max-width, 0);
}
.fw-split__card .fw-cases__modal-content {
	width: var(--fw-cases-modal-content-width, 0);
	display: block !important;
}
.fw-split__card .fw-cases__modal-page {
	width: var(--fw-cases-modal-page-width, 0);
	max-width: var(--fw-cases-modal-page-max-width, 0);
	height: var(--fw-cases-modal-page-height, 0);
	object-fit: fill !important;
}