/* Opt-in block
   Email opt-in with the photo as the left wall of the card and the text beside it: date eyebrow,
   title with a brass rule, description, WPForms email field and Submit. Two styles share one layout:
   Light = linen card, Ink text, Green button (brass is never used on a light background);
   Dark = Primary band, ivory/mist text, brass button. Phones: wide photo on top, stacked form.
--------------------------------------------- */

.block-opt-in {
	container-type: inline-size; /* lets the plane-trail icon size itself to the card (cqw) */
	--opt-in-pad: 24px;
	--opt-in-eyebrow: var(--wp--preset--color--green);
	--opt-in-title: var(--wp--preset--color--black);
	--opt-in-text: var(--wp--preset--color--black);
	position: relative;
	display: grid;
	gap: 0;
	overflow: hidden;
	margin: var(--wp--custom--layout--padding) 0;
	border-radius: var(--wp--custom--border-radius--small);
	color: var(--opt-in-text);
	font-family: var(--wp--preset--font-family--secondary);
}
.block-opt-in.has-background {
	padding: 0; /* the text column carries its own padding */
}
/* "Brass frame" (on by default, a switch in the block settings). On a card: a 1px brass line
   drawn 10px outside it, the page's ivory showing between the two (an outline, so the card itself
   is untouched); not on phones, where the card runs edge to edge. On an edge-to-edge band (the
   Newsletter bar, a full-width card) there is no outside to draw in, so the frame is a brass
   hairline along the band's top and bottom edges. Not on the photo band. */
.block-opt-in.block-opt-in--framed:is(.is-style-bar, .alignfull) {
	border-top: 1px solid var(--wp--preset--color--quaternary);
	border-bottom: 1px solid var(--wp--preset--color--quaternary);
}
@media (min-width: 768px) {
	.block-opt-in.block-opt-in--framed:not(.is-style-band, .is-style-bar, .alignfull) {
		outline: 1px solid var(--wp--preset--color--quaternary);
		outline-offset: 10px;
	}
}
.block-opt-in--dark {
	--opt-in-eyebrow: var(--wp--preset--color--quaternary);
	--opt-in-title: var(--wp--preset--color--background);
	--opt-in-text: var(--wp--custom--color--mist);
}

/* Align: full. The card paints edge to edge (out over the page padding, like the bands) and its
   photo and text are held to the wide width inside: the side padding is whatever is left over
   between the page edge and a wide block, never less than the page padding. */
.block-opt-in.has-background.alignfull,
.block-area > .block-opt-in.alignfull {
	max-width: none;
	padding-top: 0; /* the theme pads full-width backgrounds; the opt-in's content carries its own */
	padding-bottom: 0;
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
	padding-left: max(var(--wp--custom--layout--padding), calc(50% + var(--wp--custom--layout--padding) - var(--wp--custom--layout--wide) / 2));
	padding-right: max(var(--wp--custom--layout--padding), calc(50% + var(--wp--custom--layout--padding) - var(--wp--custom--layout--wide) / 2));
	border-radius: 0;
}
/* Full width without a photo (the sign-up band near the bottom of the challenge pages): the page's
   full-width rule centres the text column with auto margins, which in a grid shrinks it to the
   width of its text and squeezes the form. Fill the column; that rule's max-width still holds it. */
.block-opt-in.alignfull:not(.block-opt-in--has-image) .block-opt-in__content {
	width: 100%;
}
.block-opt-in.alignwide {
	max-width: var(--wp--custom--layout--wide);
	margin-left: auto;
	margin-right: auto;
}

/* Text column (the title is a paragraph styled as a heading): everything centred, the same as the
   Newsletter bar on phones, so the two read as one family */
.block-opt-in__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 20px 16px 22px;
	text-align: center;
}
.block-opt-in__inner > * {
	margin: 0;
}
.block-opt-in .block-opt-in__eyebrow {
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--opt-in-eyebrow);
}
.block-opt-in .block-opt-in__title {
	margin: 5px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--opt-in-title);
}
.block-opt-in__title::after {
	content: "";
	display: block;
	width: var(--wp--custom--title-rule--width);
	height: 1px;
	margin: var(--wp--custom--title-rule--gap) auto 0;
	background: var(--wp--preset--color--quaternary);
}
.block-opt-in .block-opt-in__text {
	margin: 12px 0 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--opt-in-text);
}
.block-opt-in__text a {
	color: inherit;
}

/* Photo: no frame, no inset; it is the card's left wall on desktop and its top on phones */
.block-opt-in__image {
	position: relative; /* anchors the photo tag */
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
}
.block-opt-in__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: 50% 50%;
	border: 0;
	border-radius: 0;
	margin: 0;
}
.block-opt-in__image--focus-top img {
	object-position: 50% 0;
}
.block-opt-in__image--focus-bottom img {
	object-position: 50% 100%;
}

/* Photo tag: small label flush with the photo's left edge (for example "FREE!"; empty by default).
   Square on the left with a dark accent line, rounded on the right. The right padding is trimmed
   by the letter-spacing so the text sits centred. */
.block-opt-in__tag {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 1;
	padding: 10px calc(16px - 0.14em) 10px 16px;
	border-left: 3px solid;
	border-radius: 0 var(--wp--custom--border-radius--small) var(--wp--custom--border-radius--small) 0;
	font-size: var(--wp--custom--caps--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.block-opt-in__tag--brass {
	background: var(--wp--preset--color--quaternary);
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
}
.block-opt-in__tag--ivory {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green);
}
.block-opt-in__tag--green {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--background);
}

/* Form: shared .sgs-form styling (see _blocks-plugin.scss); the block only sets the gap above it */
.block-opt-in__form {
	margin-top: 16px;
}
.block-opt-in__form-note {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--opt-in-text);
}

/* Decorative icon (only without a photo): brass, in the open space; phones show it small in the top right */
.block-opt-in__icon {
	position: absolute;
	top: 50%;
	right: 40px;
	display: none;
	transform: translateY(-50%);
	color: var(--wp--preset--color--quaternary);
	line-height: 0;
}
.block-opt-in__icon svg {
	fill: currentColor;
}
/* The line-art plane: brass stroke, trail looping down to a small heart; sits higher and closer to the edge */
.block-opt-in__icon--plane-trail svg {
	fill: none;
}
/* Its trail runs into the form button: the icon is anchored to the button's right edge (the form is
   560px wide from the content padding) and its bottom to the button's top edge, so the line curves
   down into the button's top-right corner at any width from tablet up; it shrinks when the card is
   narrower than the full drawing. */
.block-opt-in__icon--plane-trail {
	top: auto;
	right: auto;
	bottom: calc(var(--opt-in-pad) + 64px - 30px); /* the button's top edge (64px button) minus the trail's end height; the loop droops below it, beside the button */
	left: calc(var(--opt-in-pad) + 560px);
	transform: none;
}
.block-opt-in__icon--plane-trail svg {
	width: clamp(150px, calc(100cqw - var(--opt-in-pad) - 560px - 16px), 260px);
	height: auto;
	aspect-ratio: 260 / 190; /* the drawing's own proportions (the icon helper writes a square width/height) */
}
.block-opt-in--light .block-opt-in__icon {
	color: var(--wp--preset--color--green);
}

/* Phones: wide photo on top, the whole description under it */
@media (max-width: 767px) {
	.block-opt-in__image img {
		aspect-ratio: 2 / 1;
	}

	/* The card is centred on a phone, so its email field's label and typed address are too */
	.block-opt-in--card .block-opt-in__form {
		--form-field-align: center;
	}
}

/* Tablet and up: photo column on the left, text beside it. On the card (the default style) the
   photo is a square at least - taller only if the text needs more room - and takes 36% of the
   card up to 440px, so a card running the full page width (the Soup Challenge on the home page
   and the 404 page) is photo-led instead of a long, thin strip with a stretched form. */
@media (min-width: 768px) {
	.block-opt-in {
		--opt-in-pad: 32px;
		grid-template-columns: clamp(220px, 36%, 440px) minmax(0, 1fr);
	}
	.block-opt-in:not(.is-style-band, .is-style-bar, .is-style-hero) .block-opt-in__image {
		aspect-ratio: 1;
	}
	.block-opt-in:not(.block-opt-in--has-image) {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Without a photo ("Save this for later" in articles) the form keeps a comfortable width */
	.block-opt-in:not(.block-opt-in--has-image) .block-opt-in__form {
		width: 100%; /* auto side margins in the flex column would otherwise shrink it to its content */
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	/* Optional icon in the open space on the right (brass, big, vertically centred); the text stays clear of it */
	.block-opt-in--has-icon .block-opt-in__content {
		padding-right: 220px;
	}
	.block-opt-in--has-icon:has(.block-opt-in__icon--plane-trail) .block-opt-in__content {
		padding-right: 180px; /* the plane sits in the top right; the trail runs under the text to the button */
	}
	.block-opt-in__icon {
		display: block;
	}
	.block-opt-in__image {
		position: relative;
		align-self: stretch;
		min-height: 100%;
	}
	.block-opt-in__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.block-opt-in__content {
		padding: var(--opt-in-pad);
	}
}

/* Card (the default style): the Soup Challenge in posts, and the same card set wide on a page.
   A padded card - Dark green or Linen - with the photo inset and its corners softened, the photo
   tag inside the photo's corner, and the words left-aligned beside it: date, a big title over a
   short brass rule, the line about it, the form (an ivory field and the scheme's button) and an
   optional note under the form. The brass frame drawn 10px outside the card (above) stays. The
   title scales with the card (cqw: the card is its own container), from about 34px in a post to
   52px on a wide page. Phones keep the stacked, centred layout below. */
.block-opt-in--card .block-opt-in__tag {
	top: var(--wp--custom--photo-frame--tag);
	left: var(--wp--custom--photo-frame--tag);
	padding: 8px calc(12px - 0.14em) 8px 12px;
	border-left: 0;
	border-radius: var(--wp--custom--border-radius--button);
}
.block-opt-in--card.block-opt-in--dark .block-opt-in__form {
	--form-field-bg: var(--wp--preset--color--background); /* ivory field on the dark green */
}
.block-opt-in__note {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--opt-in-text);
}

@media (min-width: 768px) {
	/* Photo and words side by side, each at least 280px; when the card is too narrow for both (a
	   post column beside the sidebar on a small laptop) the two columns wrap into one and the card
	   stacks, photo on top. The gap and padding are fixed so the stacking point is
	   known to the container query below (which measures the card inside its padding). */
	.block-opt-in--card.block-opt-in--has-image {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 24px 32px;
		align-items: center;
		padding: 28px;
	}
	/* The photo fills its column's width and stays square (a 2:1 band once stacked); the words sit
	   centred beside it. justify-self: stretch sets the width from the column, so the square shape
	   can't set it from a tall text column and push the photo out under the words. */
	.block-opt-in--card .block-opt-in__image {
		justify-self: stretch;
		align-self: center;
		min-height: 0;
		max-height: 450px; /* on a wide page the square would pass 450px: it keeps its width and crops to a shorter frame */
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: var(--wp--custom--border-radius--small);
	}
	.block-opt-in--card.block-opt-in--has-image .block-opt-in__content {
		padding: 0;
		text-align: left;
	}
	.block-opt-in--card .block-opt-in__title {
		margin-top: 8px;
		font-size: clamp(1.875rem, 4.6cqw, 3.25rem);
		line-height: 1.05;
	}
	.block-opt-in--card.block-opt-in--has-image .block-opt-in__title::after {
		margin-left: 0;
	}
	.block-opt-in--card .block-opt-in__text {
		max-width: 36em;
		margin-top: 16px;
		font-size: 1.0625rem;
		line-height: 1.55;
	}
	.block-opt-in--card.block-opt-in--has-image .block-opt-in__form {
		max-width: 560px;
		margin-top: 22px;
		margin-left: 0;
	}
}

/* The card stacked (its inside narrower than 592px: two 280px columns and the 32px gap), the photo a wide 2:1 band on top */
@container (max-width: 591px) {
	.block-opt-in.block-opt-in--card .block-opt-in__image { /* outranks the square photo rule above */
		aspect-ratio: 2 / 1;
	}
	.block-opt-in--card .block-opt-in__title {
		font-size: 2rem;
	}
}

/* Band style (Before Footer area): the full-width opt-in band under every page. The block sits
   inside a full-width Group with the Primary background; the band itself has no radius and no
   card edge. Text on the left, photo on the right with arched top corners (photo on top on phones).
   Bigger title and more room than the card. */
.block-opt-in.is-style-band {
	margin: 0 auto;
	max-width: var(--wp--custom--layout--wide);
	border-radius: 0;
	overflow: visible;
}
.block-opt-in.is-style-band .block-opt-in__content {
	padding: 48px 0;
}
.block-opt-in.is-style-band .block-opt-in__title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
}
.block-opt-in.is-style-band .block-opt-in__text {
	max-width: 520px;
	font-size: 1.0625rem;
}
.block-opt-in.is-style-band .block-opt-in__form {
	max-width: 540px;
	margin-top: 24px;
}
/* The photo: arch on top, flat at the bottom; its photo tag is not used in the band */
.block-opt-in.is-style-band .block-opt-in__image {
	align-self: center;
	justify-self: center;
	width: min(100%, 300px);
	min-height: 0;
	margin: 40px auto 0;
	border-radius: 150px 150px 0 0;
	overflow: hidden;
}
.block-opt-in.is-style-band .block-opt-in__image img {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
}
.block-opt-in.is-style-band .block-opt-in__tag {
	display: none;
}
@media (max-width: 767px) {
	/* Phones: the arch photo sits above the text, centred */
	.block-opt-in.is-style-band .block-opt-in__image {
		order: -1;
		width: min(100%, 240px);
		margin: 40px auto 0;
		border-radius: 120px 120px 0 0;
	}
}
@media (min-width: 768px) {
	.block-opt-in.is-style-band {
		grid-template-columns: minmax(0, 1fr) clamp(260px, 32%, 380px);
		column-gap: 64px;
		align-items: center;
	}
	.block-opt-in.is-style-band .block-opt-in__content {
		order: -1; /* text first, photo second */
		padding: var(--wp--custom--layout--section-padding) 0;
	}
	.block-opt-in.is-style-band .block-opt-in__image {
		width: 100%;
		margin: 48px 0;
		border-radius: 190px 190px 0 0;
	}
}


/* Newsletter bar (block style "Newsletter bar"): a short full-width band for the email list. Title
   and one line of text on the left, the email field and button on the right, in one row on
   desktop; stacked and centred on phones. The Style setting still picks Dark (Primary, ivory
   text, brass button) or Light (linen, Ink text, Green button). No photo, no card frame; the
   eyebrow is left empty. About 120px tall on desktop.
--------------------------------------------- */
.block-opt-in.is-style-bar,
.block-area > .block-opt-in.is-style-bar {
	/* always edge to edge, whatever the block's alignment setting says and whatever width the area
	   around it caps its blocks at (the Before Footer caps them at the wide width) */
	display: block;
	max-width: none;
	margin: 0 calc(-1 * var(--wp--custom--layout--padding));
	padding: 0 var(--wp--custom--layout--padding); /* the band runs edge to edge like the other bands */
	border-radius: 0;
	overflow: visible;
	outline: none;
}
/* ...and its photo and content are held to the page width, the same as the sections above it */
.block-opt-in.is-style-bar .block-opt-in__bar-inner {
	max-width: var(--wp--custom--layout--page);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
}
.block-opt-in.is-style-bar .block-opt-in__icon,
.block-opt-in.is-style-bar .block-opt-in__eyebrow:empty {
	display: none;
}
/* A photo in the bar is a small square beside the text (not the card's tall left wall) */
.block-opt-in.is-style-bar .block-opt-in__image {
	position: relative;
	align-self: center;
	justify-self: center;
	width: 96px;
	height: 96px;
	min-height: 0;
	margin: 20px 0 0;
	overflow: hidden;
	outline: 1px solid var(--wp--preset--color--quaternary);
	outline-offset: 4px;
}
.block-opt-in.is-style-bar .block-opt-in__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
}
.block-opt-in.is-style-bar .block-opt-in__tag {
	display: none;
}
.block-opt-in.is-style-bar .block-opt-in__content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 44px 0; /* phones; the section-padding token from tablet up */
	display: grid;
	gap: 18px;
	align-items: center;
	text-align: center;
}
.block-opt-in.is-style-bar .block-opt-in__title {
	font-size: 1.875rem; /* the same as the card's title */
	line-height: 1.15;
}
.block-opt-in.is-style-bar .block-opt-in__title::after {
	display: none; /* no rule under the title: the bar is one line of thought */
}
.block-opt-in.is-style-bar .block-opt-in__text {
	margin-top: 4px;
	font-size: 0.9375rem;
	line-height: 1.45; /* a touch tighter than the card's text: two lines read as one thought */
}
.block-opt-in.is-style-bar .block-opt-in__form {
	margin: 0;
	width: 100%;
}
.block-opt-in.is-style-bar .block-opt-in__form .wpforms-container,
.block-opt-in.is-style-bar .block-opt-in__form .wpforms-form {
	margin: 0; /* nothing above or below the field row */
}
/* Phones: the field's label and the address you type are centred, like the words above them */
@media (max-width: 767px) {
	.block-opt-in.is-style-bar .block-opt-in__form .wpforms-field-label,
	.block-opt-in.is-style-bar .block-opt-in__form .wpforms-field input[type="email"] {
		text-align: center;
	}
}
/* (The bar touches the band before or after it: see the shared band rule in
   assets/scss/partials/_blocks-core.scss) */
@media (min-width: 768px) {
	/* text on the left half, the form filling the right half, from page edge to page edge;
	   with a photo, the photo takes a 96px column first and the rest shares the width */
	.block-opt-in.is-style-bar.block-opt-in--has-image .block-opt-in__bar-inner {
		grid-template-columns: 96px minmax(0, 1fr);
	}
	.block-opt-in.is-style-bar .block-opt-in__image {
		margin: 0;
	}
	.block-opt-in.is-style-bar .block-opt-in__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
		padding: var(--wp--custom--layout--section-padding) 0;
		align-items: end; /* the form's foot sits on the same line as the last line of text */
		text-align: left;
	}
	.block-opt-in.is-style-bar .block-opt-in__inner {
		display: grid;
		gap: 2px;
		margin-bottom: -6px; /* the last line's leading and descender space, so the letters' baseline, not the line box, sits on the form's foot */
	}
	.block-opt-in.is-style-bar .block-opt-in__form,
	.block-opt-in:not(.block-opt-in--has-image).is-style-bar .block-opt-in__form {
		max-width: none;
	}
	/* the email field takes the room the button leaves */
	.block-opt-in.is-style-bar .block-opt-in__form .wpforms-form {
		width: 100%;
	}
	.block-opt-in.is-style-bar .block-opt-in__form .wpforms-field-container {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Save article on tablet and up: the band reads the way it does on a phone — the eyebrow, title
   and line all ranged left, and the form filling the width rather than sitting in a narrow
   centred column. The plane keeps its own space at the right so the trail still runs into the
   top-right corner of the Save it button. */
@media only screen and (min-width: 768px) {
	.block-save-article .block-opt-in__content,
	.block-save-article.block-opt-in--has-icon .block-opt-in__content,
	.block-save-article.block-opt-in--has-icon:has(.block-opt-in__icon--plane-trail) .block-opt-in__content {
		padding-right: 300px;
		text-align: left;
	}

	.block-save-article .block-opt-in__title::after {
		margin-left: 0;
		margin-right: 0;
	}

	.block-save-article .block-opt-in__form,
	.block-opt-in:not(.block-opt-in--has-image).block-save-article .block-opt-in__form {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* The plane is anchored to the band's right edge now that the form reaches across */
	.block-save-article .block-opt-in__icon--plane-trail {
		right: var(--opt-in-pad);
		left: auto;
	}

	.block-save-article .block-opt-in__icon--plane-trail svg {
		width: clamp(170px, 24cqw, 280px);
	}
}

/* Page hero style (Opt-in > Styles > Page hero): the top of a free opt-in page such as the Free
   Soup Challenge. A full-width band (Dark = Primary, the default for a hero; Light = ivory) with
   the photo and the text held to the wide page width inside it: photo on the left (the top on
   phones, edge to edge) with the photo tag hanging off its edge, and the page's H1, a short intro
   and the email form beside it. Left-aligned, unlike the centred cards, because it reads as the
   start of the page. The form keeps the site's shared .sgs-form look for its scheme. */
.block-opt-in.is-style-hero {
	overflow: visible; /* the tag hangs past the photo's edge */
	max-width: none;
	margin-top: 0;
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
	border-radius: 0;
}
.block-opt-in.is-style-hero.block-opt-in--light {
	--opt-in-eyebrow: var(--wp--preset--color--brass-dark);
	background: var(--wp--preset--color--background);
}
/* First on the page it meets the site header with no gap, as the first full-width band does
   (_singular.scss); the band's colour is what separates it from the menu */
.entry-content > .block-opt-in.is-style-hero:first-child {
	margin-top: calc(-1 * var(--wp--custom--layout--block-gap-large));
}
.block-opt-in.is-style-hero .block-opt-in__content {
	padding: 40px var(--wp--custom--layout--padding) 48px;
	text-align: left;
}
.block-opt-in.is-style-hero .block-opt-in__headline {
	margin: 12px 0 0;
	color: var(--opt-in-title);
}
.block-opt-in.is-style-hero .wp-block-site-reviews-summary {
	margin-top: 14px;
}
.block-opt-in.is-style-hero .block-opt-in__text {
	margin-top: 16px;
	font-size: 1.125rem;
	line-height: 1.55;
}
.block-opt-in.is-style-hero .block-opt-in__form {
	max-width: 560px;
	margin-top: 24px;
}
/* Whatever the editor puts under the form (a credit line) keeps clear of it */
.block-opt-in.is-style-hero .block-opt-in__form + * {
	margin-top: 20px;
}

/* The photo tag in the hero wears the post listing tag (brass, white caps, square corners, see
   blocks/post-listing/style.css) a size up, and hangs past the photo's edge: off its bottom on
   phones, off its right edge into the text column from tablet up. */
.block-opt-in.is-style-hero .block-opt-in__tag {
	top: auto;
	bottom: -14px;
	left: var(--wp--custom--layout--padding);
	padding: 9px calc(14px - 0.14em) 9px 14px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
}

@media (max-width: 767px) {
	.block-opt-in.is-style-hero .block-opt-in__image img {
		aspect-ratio: 4 / 3;
	}
}

/* Tablet and up: the band keeps the sales-section rhythm (48px top and bottom) and holds the
   photo and text to the wide page width, the same side padding a full-width opt-in uses. On a
   tablet the text column takes the larger share, so the email field and its button still have
   room side by side; from laptop up the two halves are equal. */
@media (min-width: 768px) {
	.block-opt-in.is-style-hero {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		padding: 48px max(var(--wp--custom--layout--padding), calc(50% + var(--wp--custom--layout--padding) - var(--wp--custom--layout--wide) / 2));
	}
	.block-opt-in.is-style-hero .block-opt-in__image {
		/* The same band height as the sales and thank-you heroes: their picture is hero-media tall
		   inside 10px more padding (for the brass frame) top and bottom; this photo has no frame,
		   so it takes those 20px itself and sits the section padding from the band's edges */
		min-height: calc(var(--wp--custom--layout--hero-media) + 20px);
	}
	.block-opt-in.is-style-hero .block-opt-in__content {
		padding: 24px 0 24px clamp(32px, 5vw, 72px);
	}
	.block-opt-in.is-style-hero .block-opt-in__tag {
		top: 24px;
		bottom: auto;
		left: auto;
		right: -10px;
	}
}

@media (min-width: 1024px) {
	.block-opt-in.is-style-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}