/*
 * About the author + featured book band.
 * --ylb-u = one mockup pixel (1024px design), scaled with the viewport.
 */
.ylb-about-featured {
	--ylb-u: clamp(0.8px, 0.09766vw, 1.4px);
	--ylb-heart-color: var(--wp--preset--color--heart-red);
	overflow: hidden;
	background-image: var(--ylb-grain);
	background-blend-mode: multiply;
}

.ylb-about-featured .wp-block-columns { margin: 0; flex-wrap: nowrap; }
.ylb-about-featured .wp-block-column { margin: 0; }

/* ---- Shared block styles ------------------------------------------------ */

/* Gold-ringed portrait. */
.wp-block-image.is-style-ylb-ring img {
	border: 6px solid #e0a63a;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(150, 90, 20, 0.35);
	box-sizing: border-box;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

/* Rounded card with a dashed stitch line inset in a lighter tint of its own colour. */
.wp-block-group.is-style-ylb-stitched {
	position: relative;
	border-radius: 14px;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
	background-image: var(--ylb-grain-light);
}

.wp-block-group.is-style-ylb-stitched::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1.5px dashed rgba(255, 255, 255, 0.32);
	border-radius: 10px;
	pointer-events: none;
}

/* ---- About column -------------------------------------------------------- */

.ylb-about-featured .ylb-about-col {
	position: relative;
	min-height: calc(345 * var(--ylb-u));
}

.ylb-about-featured .ylb-about-col > .wp-block-columns { flex-wrap: nowrap; }

.ylb-about-featured .ylb-about-portrait {
	padding: calc(39 * var(--ylb-u)) 0 0 calc(38 * var(--ylb-u));
}

.ylb-about-featured .ylb-about-portrait .wp-block-image { margin: 0; width: calc(197 * var(--ylb-u)); }

.ylb-about-featured .ylb-about-text {
	padding: calc(42 * var(--ylb-u)) calc(12 * var(--ylb-u)) 0 0;
}

.ylb-about-featured .ylb-about-text h2,
.ylb-about-featured .ylb-featured-text h2 {
	margin: 0;
	font-weight: 600;
	line-height: 1.2;
}

.ylb-about-featured .ylb-about-text h2,
.ylb-about-featured .ylb-about-text .wp-block-separator {
	margin-right: calc(30 * var(--ylb-u));
}

.ylb-about-featured .ylb-about-text .wp-block-separator {
	margin-top: calc(10 * var(--ylb-u));
	margin-bottom: 0;
	width: calc(170 * var(--ylb-u));
	font-size: calc(16 * var(--ylb-u));
}

.ylb-about-featured .ylb-about-text p {
	margin: calc(19 * var(--ylb-u)) 0 0;
	letter-spacing: -0.015em;
	line-height: calc(21 / 10.45);
	text-align: left;
	white-space: nowrap;
}

.ylb-about-featured .wp-block-buttons { margin: 0; }

.ylb-about-featured .ylb-about-text .wp-block-buttons { margin-top: calc(10 * var(--ylb-u)); padding-left: calc(15 * var(--ylb-u)); }

.ylb-about-featured .wp-block-button__link {
	font-size: clamp(11px, 1.367vw, 19.6px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.ylb-about-featured .ylb-about-text .wp-block-button__link {
	width: calc(164 * var(--ylb-u));
	padding: calc(7.6 * var(--ylb-u)) 0;
	box-sizing: border-box;
}

/* Decorative icons placed as a percentage of the about column. */
.ylb-about-featured .ylb-deco {
	position: absolute;
	margin: 0;
	z-index: 2;
}

.ylb-about-featured .ylb-deco img { display: block; width: 100%; height: auto; }
.ylb-about-featured .ylb-deco-star-purple { left: 6.64%; top: 12.75%; width: calc(22 * var(--ylb-u)); }
.ylb-about-featured .ylb-deco-heart { left: 6.25%; top: 70.7%; width: calc(22 * var(--ylb-u)); }
.ylb-about-featured .ylb-deco-star-blue { left: 16.8%; top: 80.9%; width: calc(20 * var(--ylb-u)); }
.ylb-about-featured .ylb-deco-star-gold { left: 36.1%; top: 78%; width: calc(22 * var(--ylb-u)); }

/* ---- Featured column ----------------------------------------------------- */

.ylb-about-featured .ylb-featured-col {
	padding: calc(5 * var(--ylb-u)) calc(9 * var(--ylb-u)) calc(6 * var(--ylb-u)) calc(3 * var(--ylb-u));
	box-sizing: border-box;
}

.ylb-about-featured .ylb-featured-card {
	height: 100%;
	min-height: calc(334 * var(--ylb-u));
	padding: calc(27 * var(--ylb-u)) calc(20 * var(--ylb-u)) 0 calc(30 * var(--ylb-u));
	box-sizing: border-box;
}

.ylb-about-featured .ylb-featured-card > .wp-block-columns { flex-wrap: nowrap; }

.ylb-about-featured .ylb-featured-cover { padding-top: calc(26 * var(--ylb-u)); }

.ylb-about-featured .is-style-ylb-book { margin: 0; width: calc(200 * var(--ylb-u)); position: relative; }

.wp-block-image.is-style-ylb-book img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px 5px 5px 2px;
	box-shadow:
		2px 0 0 #efe3c9,
		4px 0 0 #d9c9a6,
		6px 2px 0 #c9b88f,
		10px 14px 22px rgba(0, 0, 0, 0.45);
}

/* Flanking stars sit at about cap height. */
.ylb-about-featured .ylb-featured-text h2 mark { font-size: 0.66em; vertical-align: 0.06em; }
.ylb-about-featured .wp-block-button__link mark { font-size: 1.2em; vertical-align: -0.05em; }

.ylb-about-featured .ylb-featured-text h2 { color: var(--wp--preset--color--lilac-white); }

.ylb-about-featured .ylb-featured-text .wp-block-separator {
	--ylb-heart-color: var(--wp--preset--color--gold);
	margin-top: calc(11 * var(--ylb-u));
	margin-bottom: 0;
	width: calc(165 * var(--ylb-u));
	font-size: calc(16 * var(--ylb-u));
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold-line) 12%, var(--wp--preset--color--gold-line) 88%, transparent);
}

.ylb-about-featured .ylb-featured-text h3 {
	margin: calc(27 * var(--ylb-u)) 0 0;
	font-weight: 700;
	line-height: 1.2;
}

.ylb-about-featured .ylb-featured-text p { margin: 0; line-height: 1.3; }

.ylb-about-featured .ylb-featured-text .has-gold-color { margin-top: calc(8 * var(--ylb-u)); }

.ylb-about-featured .ylb-featured-text p:not(.has-gold-color) {
	margin: calc(8 * var(--ylb-u)) 0 0 calc(39 * var(--ylb-u));
	line-height: 1.5;
	white-space: nowrap;
}

.ylb-about-featured .ylb-featured-text .wp-block-buttons { margin: calc(2 * var(--ylb-u)) 0 0 calc(42 * var(--ylb-u)); }

.ylb-about-featured .ylb-featured-text .wp-block-button__link {
	width: calc(132 * var(--ylb-u));
	padding: calc(7.6 * var(--ylb-u)) 0;
	box-sizing: border-box;
}

/* ---- Stacked (mobile) ---------------------------------------------------- */

@media (max-width: 781px) {
	.ylb-about-featured { --ylb-u: 1px; }
	.ylb-about-featured .wp-block-columns,
	.ylb-about-featured .ylb-about-col > .wp-block-columns,
	.ylb-about-featured .ylb-featured-card > .wp-block-columns { flex-wrap: wrap !important; }
	.ylb-about-featured .wp-block-column { flex-basis: 100% !important; }
	.ylb-about-featured .ylb-about-col { min-height: 0; padding-bottom: 24px; }
	.ylb-about-featured .ylb-about-portrait { padding: 24px 0 0; }
	.ylb-about-featured .ylb-about-portrait .wp-block-image { margin: 0 auto; width: min(260px, 70%); }
	.ylb-about-featured .ylb-about-text { padding: 16px 20px 0; }
	.ylb-about-featured .ylb-about-text h2,
	.ylb-about-featured .ylb-about-text .wp-block-separator { margin-right: auto; }
	.ylb-about-featured .ylb-about-text .wp-block-separator { margin-left: auto; width: 220px; }
	.ylb-about-featured .ylb-about-text p,
	.ylb-about-featured .ylb-featured-text p:not(.has-gold-color) { margin-left: 0; font-size: 12.4px !important; letter-spacing: 0; line-height: 1.7; }
	.ylb-about-featured .ylb-featured-text p:not(.has-gold-color) { font-size: 15px !important; }
	.ylb-about-featured .ylb-featured-text h3 { font-size: 24px !important; }
	.ylb-about-featured .ylb-featured-text .has-gold-color { font-size: 17px !important; }
	.ylb-about-featured .ylb-featured-text h2, .ylb-about-featured .ylb-about-text h2 { font-size: 28px !important; }
	.ylb-about-featured .ylb-about-text .wp-block-buttons,
	.ylb-about-featured .ylb-featured-text .wp-block-buttons { padding-left: 0; margin-left: 0; justify-content: center; }
	.ylb-about-featured .wp-block-button__link { font-size: 16px; width: auto !important; padding: 10px 28px !important; }
	.ylb-about-featured .ylb-deco-star-purple { left: 8%; top: 14px; }
	.ylb-about-featured .ylb-deco-heart,
	.ylb-about-featured .ylb-deco-star-blue,
	.ylb-about-featured .ylb-deco-star-gold { display: none; }
	.ylb-about-featured .ylb-featured-col { padding: 8px 12px 12px; }
	.ylb-about-featured .ylb-featured-card { padding: 28px 20px 28px; }
	.ylb-about-featured .ylb-featured-cover { padding-top: 0; }
	.ylb-about-featured .is-style-ylb-book { margin: 0 auto 24px; width: min(220px, 70%); }
	.ylb-about-featured .ylb-featured-text .wp-block-separator { margin-left: auto; width: 200px; }
}

/* Phones: the Featured Book description is centred with the rest of the card (desktop keeps the mockup's left alignment). */
@media (max-width: 781px) {
	.ylb-about-featured .ylb-featured-text p:not(.has-gold-color) {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
}