/**
 * Real Estate Forms Pro — "Guided" step layout.
 *
 * The alternative to the numbered-progress-list multi-step presentation in
 * forms.css: a two-column hero (heading/description beside an image) for
 * any step that has uploaded its own (see Forms\Form::step_hero_image()) —
 * a centered single-column layout for any step that hasn't, and a slim linear
 * progress bar instead of the numbered circles. Opt-in per
 * Settings::get('step_layout'); every rule here is scoped under
 * .rep-form--steps-guided, so a form left on "Classic" never loads any of
 * this. Registered as a second stylesheet depending on rep-forms (see
 * Plugin.php) rather than folded into forms.css, so the two presentations
 * stay easy to tell apart in the source.
 *
 * Colors, radius and shadow all come from the same --rep-forms-* aliases
 * forms.css itself declares (which resolve through Core Design's own
 * tokens/Design Override) — nothing here is a fixed color, so this adapts
 * automatically to whichever template/brand color is active, exactly like
 * every other axis of this plugin's own styling.
 */

/* Progress: swap the numbered list for the linear bar. Both are always
   rendered (see public/views/form.php) and kept in sync by the same
   updateProgress() in forms.js regardless of which one is visible — no JS
   branching needed when a form's Step Layout changes. */
.rep-form__progress-bar {
	display: none;
}

.rep-form--steps-guided .rep-form__progress {
	display: none;
}

.rep-form--steps-guided .rep-form__progress-bar {
	display: block;
	width: 100%;
	height: 6px;
	margin: 0 0 var(--rep-space-lg);
	border-radius: 999px;
	background: var(--rep-forms-border, var(--rep-border, #e2e2e2));
	overflow: hidden;
}

.rep-form--steps-guided .rep-form__progress-bar-fill {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--rep-forms-primary, var(--rep-primary));
	transform: scaleX(var(--rep-progress-ratio, 0));
	transform-origin: left;
	transition: transform var(--rep-transition-normal, 300ms ease);
}

/* Step content: hero (two columns) vs centered (one column, capped
   width) — same .rep-form__step-media class forms.css already styles
   (rounded corners, responsive image/video) reused unchanged here, just
   placed inside this grid instead of stacked above the body text. */
.rep-form--steps-guided .rep-form__step-inner {
	display: block;
}

.rep-form--steps-guided .rep-form__step[data-rep-step-hero="1"] .rep-form__step-inner {
	display: grid;
	/* Content-favoring, not an even split — an even 1fr/1fr column next
	   to a photo reads as oversized once it's inside a compact form card
	   rather than a full-width page hero. */
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--rep-space-lg, 24px);
}

.rep-form--steps-guided .rep-form__step:not([data-rep-step-hero="1"]) .rep-form__step-content {
	max-width: 30rem;
	/* Centered, not left-anchored — .rep-form__step-inner can be wider
	   than this cap (e.g. align="full", or a wide --rep-forms-max-width),
	   and hugging the left edge there just reads as a large empty gap on
	   the right rather than a deliberately narrow column. */
	margin-left: auto;
	margin-right: auto;
}

.rep-form--steps-guided .rep-form__step-title {
	margin: 0 0 var(--rep-space-sm);
	font-size: var(--rep-text-2xl, 1.75rem);
	font-weight: var(--rep-weight-bold, 700);
	color: var(--rep-forms-text);
	line-height: 1.2;
}

.rep-form--steps-guided .rep-form__step-description {
	margin: 0 0 var(--rep-space-lg);
	color: var(--rep-muted);
}

.rep-form--steps-guided .rep-form__step[data-rep-step-hero="1"] .rep-form__step-media {
	margin: 0;
}

/* A fixed aspect ratio, not a tall max-height stretched to match
   whatever the content column's own height happens to be — that made
   the image balloon to dominate the card on a step with only a couple
   lines of text. 4:3 keeps it a supporting visual, sized the same
   regardless of how much text sits next to it. */
.rep-form--steps-guided .rep-form__step[data-rep-step-hero="1"] .rep-form__step-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 18rem;
	object-fit: cover;
}

/* Nav buttons: pill-shaped, matching the rounded hero/progress-bar look —
   scoped to guided forms only, so every other .rep-btn on the site (other
   forms, other plugins) is unaffected. */
.rep-form--steps-guided .rep-form__nav .rep-btn {
	border-radius: 999px;
	padding-left: var(--rep-space-lg, 24px);
	padding-right: var(--rep-space-lg, 24px);
}

/* Narrow viewports: one column always, image below its step's text
   (kept, not hidden — worth keeping even when space is tight). */
@media (max-width: 640px) {
	.rep-form--steps-guided .rep-form__step[data-rep-step-hero="1"] .rep-form__step-inner {
		grid-template-columns: 1fr;
	}

	.rep-form--steps-guided .rep-form__step[data-rep-step-hero="1"] .rep-form__step-media img {
		max-height: 14rem;
	}

	.rep-form--steps-guided .rep-form__nav {
		flex-direction: column-reverse;
	}

	.rep-form--steps-guided .rep-form__nav .rep-form__next,
	.rep-form--steps-guided .rep-form__nav .rep-form__submit {
		margin-left: 0;
		width: 100%;
	}
}