/*
 * Full-width Covers (post headers, page heroes, CTA bands) keep the page's side
 * padding, which core drops inside a Cover: their content lines up with the
 * 80% rows, as Divi's did (AGENTS.md).
 */
.wp-block-cover.alignfull {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/*
 * Core gives an embed in a Cover a 320px minimum width, wider than a phone's
 * column once the page's padding is taken (the home page's mission video,
 * 5i): it may shrink to its column, keeping its aspect ratio. One class
 * stronger than core's rule, which can come later in the page.
 */
.wp-block-cover .wp-block-cover__inner-container .wp-block-embed {
	min-width: min(320px, 100%);
}

/*
 * Post headers (parts/post-header-*.html, patterns/post-header-*.php).
 *
 * A full-width Cover holds the "title box": a wide row with a veil over the
 * image, the title on its left two thirds, the byline and date on the right
 * (plan §9.4). Light: navy text on a white veil. Dark: white text on a dark
 * veil. The press-release and podcast designs show a band of their fixed image
 * around the box.
 */

.wp-block-cover.sutherland-post-header {
	min-height: 0;
	padding-block: 0;
	align-items: stretch;
}

/* A dark header on a post with no featured image stays readable. */
.wp-block-cover.sutherland-post-header--dark {
	background-color: var(--wp--preset--color--navy);
}

.wp-block-cover.sutherland-post-header--fixed {
	padding-block: var(--wp--preset--spacing--40);
}

.sutherland-post-header__box {
	padding-block: clamp(100px, 11vw, 160px) clamp(60px, 8vw, 114px);
	padding-inline: max(24px, 8%);
}

.sutherland-post-header--light .sutherland-post-header__box {
	background-color: rgb(255 255 255 / 85%);
}

.sutherland-post-header--dark .sutherland-post-header__box {
	background-color: rgb(0 0 0 / 44%);
}

/* Core colours a Cover's text by its brightness; the design fixes it. */
.wp-block-cover.sutherland-post-header--light .wp-block-cover__inner-container {
	color: var(--wp--preset--color--navy);
}

.wp-block-cover.sutherland-post-header--dark .wp-block-cover__inner-container {
	--wp--custom--color--focus: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.sutherland-post-header .wp-block-post-title {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	line-height: 1.3;
}

.sutherland-post-header__title {
	padding-inline-end: 8%;
}

/* The byline and date. */
.sutherland-post-header .sutherland-byline,
.sutherland-post-header .sutherland-date {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.6;
}

.sutherland-post-header .sutherland-byline a {
	color: inherit;
	text-decoration: none;
}

.sutherland-post-header .sutherland-byline a:hover {
	text-decoration: underline;
}

/* Dark designs: a larger byline, each line with its icon, as on Divi. */
.sutherland-post-header--dark .sutherland-byline {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.sutherland-post-header--dark .sutherland-byline,
.sutherland-post-header--dark .sutherland-date {
	position: relative;
	padding-inline-start: 44px;
}

.sutherland-post-header--dark .sutherland-byline::before,
.sutherland-post-header--dark .sutherland-date::before {
	position: absolute;
	top: 0.1em;
	left: 4px;
	width: 22px;
	height: 22px;
	background-color: currentcolor;
	content: "";
	mask: var(--sutherland-icon) center / contain no-repeat;
}

.sutherland-post-header--dark .sutherland-byline::before {
	--sutherland-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.4 0-8 2.5-8 5.5V21h16v-1.5c0-3-3.6-5.5-8-5.5Z'/%3E%3C/svg%3E");
}

.sutherland-post-header--dark .sutherland-date::before {
	top: 0.15em;
	width: 16px;
	height: 16px;
	--sutherland-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2Zm12 8H5v9h14v-9Z'/%3E%3C/svg%3E");
}

/*
 * Series: the series title, then the post's own title, smaller
 * (Divi's "sub" layout).
 */
.sutherland-series-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	line-height: 1.3;
}

.sutherland-series-title:empty {
	display: none;
}

.sutherland-post-header--series .wp-block-post-title {
	margin-block-start: 10px;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.2;
}

@media (width <= 782px) {

	/* The columns stack: the byline goes under the title. */
	.sutherland-post-header__title {
		padding-inline-end: 0;
	}

	.sutherland-post-header__box .wp-block-columns {
		row-gap: var(--wp--preset--spacing--30);
	}
}