/**
 * Layout for the main site's enquiry form when it is shown on a blog post.
 *
 * The markup is the main site's, unaltered: a .bscf7-eligibility-form wrapper
 * holding one <p class="bscf7-field"> per field, a title and a submit wrap.
 * Those <p>s become the grid cells, so the desktop layout is a matter of
 * columns only - no field is moved, renamed or re-rendered.
 *
 * Everything here stays inside the form's existing visual system - the white
 * card, the 16px radius, the type and the yellow button all come from the main
 * site's own stylesheet. What changes is spacing and column behaviour, because
 * this form sits mid-article rather than in a popup or a landing-page hero.
 *
 * Mobile keeps the single column the form already uses everywhere else.
 */

.yg-blog-enquiry {
	margin: 44px 0;
}

/*
 * The main site caps this form at 480px because there it lives in a popup or a
 * narrow sidebar card. On a blog post it has the full content column, which is
 * what makes a horizontal layout possible, so the cap is lifted here only.
 *
 * The padding is cut from 32px/28px/28px: that generosity suits a standalone
 * card, but embedded in an article it just pushes the fields away from the
 * heading that introduces them.
 */
.yg-blog-enquiry .bscf7-eligibility-form {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 22px 22px 24px;

	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 14px;
	align-items: start;
	box-sizing: border-box;
}

/*
 * The form carries a hidden "source" input as a direct child. A hidden input
 * is display:none by default, but the main site's stylesheet styles all inputs
 * in this form as blocks, which overrides that - and an element that is not
 * display:none is a grid item, so it would silently claim the first cell.
 */
.yg-blog-enquiry .bscf7-eligibility-form input[type="hidden"] {
	display: none !important;
}

/*
 * ...and wpautop wraps those bare inputs in unclassed <p>s, which stay grid
 * items even once the inputs inside them are hidden - empty cells that push
 * real fields out of position. Every real field carries a class, so keying on
 * the absence of one hits the autop wrappers and nothing else.
 */
.yg-blog-enquiry .bscf7-eligibility-form > p:not([class]) {
	display: none;
}

/*
 * The <p>s carry a 16px bottom margin from the main site's stylesheet
 * (.bscf7-eligibility-form p.bscf7-field), which fights the grid gap and
 * leaves dead space under the button. That selector and a plain `> p` reset
 * have identical specificity, and its sheet loads after this one, so the tie
 * went to it - hence the class in the selector here.
 */
.yg-blog-enquiry .bscf7-eligibility-form p.bscf7-field,
.yg-blog-enquiry .bscf7-eligibility-form p.bscf7-submit-wrap,
.yg-blog-enquiry .bscf7-eligibility-form > p {
	margin: 0;
}

/* Title and any response message always span the full row. */
.yg-blog-enquiry .bscf7-form-title,
.yg-blog-enquiry .wpcf7-response-output {
	grid-column: 1 / -1;
}

/*
 * The blog theme gives article headings a 39px top margin, which opened a gap
 * between the card edge and the title. The element selector is needed to
 * outrank it - a class-only rule loses to the theme's `.entry-content h2`.
 */
.yg-blog-enquiry h2.bscf7-form-title {
	margin: 0 0 12px;
	line-height: 1.25;
}

.yg-blog-enquiry .bscf7-field input,
.yg-blog-enquiry .bscf7-field select {
	width: 100%;
	box-sizing: border-box;

	/*
	 * The blog theme pins form controls to a 40px height. This form is built
	 * for 14px of vertical padding around a 24px line, which needs 52px, so
	 * that cap clips the select labels. Let the padding set the height.
	 */
	height: auto;
	min-height: 52px;
}

/*
 * The branch field is revealed only after a state is chosen, so it arrives on
 * a row of its own with nothing beside it. Left in a single column it reads as
 * a field that failed to load; spanning the row makes it look intended.
 */
.yg-blog-enquiry .bscf7-branch-field {
	grid-column: 1 / -1;
}

/*
 * From tablet up, fit as many columns as the content column can hold rather
 * than guessing from the viewport width - the blog's article column is 960px
 * on a 1440px screen, so a viewport-based rule would get this wrong.
 */
@media (min-width: 768px) {
	.yg-blog-enquiry .bscf7-eligibility-form {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	/* The button takes the full row, matching the fields above it. */
	.yg-blog-enquiry .bscf7-submit-wrap {
		grid-column: 1 / -1;
		display: block;
		margin-top: 2px;
	}

	.yg-blog-enquiry .bscf7-submit-wrap input[type="submit"],
	.yg-blog-enquiry .bscf7-submit-wrap .wpcf7-submit {
		width: 100%;
		margin: 0;
	}
}

/* While a submission is in flight the button reads "Submitting..." and cannot
   be pressed again. Mirrors the main site's own behaviour. */
.yg-blog-enquiry form.yg-sending .wpcf7-submit {
	pointer-events: none;
	cursor: wait;
	opacity: .75;
}

/*
 * CF7 leaves its response box in the markup at all times, and the main site
 * styles it with a 36px top margin for its own layout. Collapse it while it
 * has nothing to say, so it does not reserve space under the button.
 */
.yg-blog-enquiry .wpcf7-response-output:empty {
	display: none;
}

.yg-blog-enquiry .wpcf7-response-output {
	margin: 6px 0 0;
}

/* The branch-selection script's own notice, shown when a state needs a branch. */
.yg-blog-enquiry .bscf7-branch-alert {
	margin-top: 6px;
}