/* RetroGrade: deltas from the approved mock on top of the parent's layout. Generated header; edit brands/retrogradecinemas.ca.css. */

/* Art-directed mobile crop (generated). */
@media (max-width: 700px) {
	.bcs-cover .wp-block-cover__image-background {
		display: none;
	}

	.bcs-cover.wp-block-cover::before {
		content: "";
		display: block;
		height: 220px;
		background: url("../img/hero-v3-mobile.avif") 64% 44% / cover no-repeat;
	}
}

/* Cinema feel: headline, form and teasers stack in one left column over the drive-in screen. */
.bcs-cover .bcs-copy {
	align-self: start;
	padding-top: 24px;
	max-width: 700px;
}

.bcs-page .bcs-cover-line mark.has-accent-color {
	color: var(--wp--preset--color--ink) !important;
}

/* Neon rule under the headline. */
.bcs-page .bcs-cover-line::after {
	content: "";
	display: block;
	width: 100px;
	height: 3px;
	margin-top: 28px;
	background: linear-gradient(90deg, #0ff, #f0f);
}

@media (min-width: 701px) {
	.bcs-cover .wp-block-cover__inner-container {
		display: block;
		padding-block: 40px;
	}

	.bcs-cover .bcs-teasers {
		margin-top: 16px;
	}

	.bcs-cover .bcs-card {
		width: 410px;
		margin-top: 28px;
	}

	/* First name and email sit side by side; everything else spans the card. */
	.bcs-cover .bcs-card .fluentform fieldset {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}

	.bcs-cover .bcs-card .fluentform fieldset > * {
		grid-column: 1 / -1;
	}

	.bcs-cover .bcs-card .fluentform fieldset > .ff-name-field-wrapper,
	.bcs-cover .bcs-card .fluentform fieldset > .ff-name-field-wrapper + .ff-el-group {
		grid-column: auto;
	}
}

@media (max-width: 700px) {
	/* The mock's brand rule keeps the 780px minimum on phones. */
	.bcs-cover.wp-block-cover {
		min-height: 780px !important;
	}

	.bcs-cover .bcs-copy {
		padding-top: 0;
	}

	.bcs-page .bcs-cover-line {
		font-size: 44px;
	}

	.bcs-page .bcs-cover-line::after {
		width: 64px;
		height: 2px;
		margin-top: 14px;
	}

	.bcs-page .bcs-sub {
		font-size: 12px;
	}
}