/**
 * KrsKrt Section block — full-width section with a 1024px content column.
 *
 * The section is full-bleed (`alignfull`, like the KrsKrt Finish block); its
 * inner content — the embedded Header Bar + the inner blocks — is centred and
 * capped to a content width. Padding / margin / border / colour / typography are
 * the block-supports styles set inline by the server render
 * (templates/fields/krskrt-section.php) / the native sidebar panels.
 *
 * Mirrors the Finish block's full-width + is-constrained pattern (krskrt-finish.css).
 */

.krskrt-section {
	box-sizing: border-box;
	width: 100%;
}

/* Inner column — the Header Bar and all inner blocks live here, centred and
   capped to the content width. `display: flow-root` contains the floated side
   block so it can't bleed into the next section. */
.krskrt-section__inner {
	width: 100%;
	max-width: var( --krskrt-section-content-width, 1024px );
	margin-left: auto;
	margin-right: auto;
	display: flow-root;
}

/* The embedded Header Bar sits flush at the section top (the section padding-top
   owns the gap above it); give it a little breathing room before the content. */
.krskrt-section__inner > .krskrt-header-bar {
	margin-bottom: var( --wp--preset--spacing--20, 16px );
}

/* Editor canvas: the block-list item does not get the front-end full-bleed
   alignfull break-out, so just keep the inner column centred and readable. */
.editor-styles-wrapper .wp-block-jet-forms-krskrt-section .krskrt-section__inner,
.wp-block-jet-forms-krskrt-section .krskrt-section__inner {
	margin-left: auto;
	margin-right: auto;
}

/* ── Optional side block (floated) ─────────────────────────────────────────
   The side block (Magic Marker / Session QR / Report / Image / Video) FLOATS to
   the right (or left); the header bar + content flow around it — the standard WP
   image-alignment behaviour. Its width is set inline by the render. The header
   bar (a flex box) sits beside the float; paragraphs/fields wrap around it and
   continue full-width once past it. */
.krskrt-section__side {
	box-sizing: border-box;
}
.krskrt-section__side--right {
	float:  right;
	margin: 0 0 0 var( --wp--preset--spacing--20, 16px );
}
.krskrt-section__side--left {
	float:  left;
	margin: 0 var( --wp--preset--spacing--20, 16px ) var( --wp--preset--spacing--20, 16px ) 0;
}
/* Media side blocks fill the floated box width. */
.krskrt-section__side img,
.krskrt-section__side .jet-form-builder__field-wrap {
	max-width: 100%;
}

/* When a side block is floated, the header bar must sit BESIDE the float, not
   force its full width (which pushes it BELOW the float, leaving the side block
   sitting alone on top). The bar is a flex box — it establishes a formatting
   context — so dropping the explicit width:100% lets it shrink to the space left
   of the float. Plain content (paragraphs/fields) then wraps around the float and
   structured full-width blocks (columns) fall below it, reclaiming the width. */
.krskrt-section__inner--has-side > .krskrt-header-bar {
	width: auto;
}

/* Hide the side block on narrow screens (WP "mobile" breakpoint) when toggled —
   the content then reclaims the full width (no float). */
@media ( max-width: 781px ) {
	.krskrt-section__side.krskrt-section--hide-side-narrow {
		display: none;
	}
}

/* Editor placeholder for the side block (the real card renders on the live page). */
.krskrt-section__side-ph {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	box-sizing:     border-box;
	width:          208px;
	padding:        18px 14px;
	border:         1px dashed #b9b9c3;
	border-radius:  8px;
	background:     rgba( 0, 55, 74, 0.03 );
	color:          #50575e;
	text-align:     center;
	font-size:      12px;
}
.krskrt-section__side-ph .ph {
	font-size: 30px;
	color:     #00374a;
}
.krskrt-section__side-ph strong {
	font-size: 13px;
	color:     #1e1e1e;
}