/* Today's post layout, for a post whose featured image has words in it (a flyer, a logo, a screenshot):
   the banner shows the image whole on the teal panel, never faded or cropped, and on phones the title
   sits above the image instead of on top of it. Only on posts in aptb_banner_whole_ids() or with the
   "Show the featured image whole" box ticked; every other post is unchanged. */

body.aptb-banner-whole.single-post .yak-featured-image-top-wrapper {
	height: auto;
	min-height: clamp(320px, 32vw, 460px);
	margin-bottom: 0;
	background: var(--yak-color-primary);
	align-items: stretch;
}
body.aptb-banner-whole.single-post .yak-featured-image-img-wrapper {
	width: 56%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem) 0;
	box-sizing: border-box;
	overflow: visible;
}
body.aptb-banner-whole.single-post .yak-featured-image-img-wrapper::before,
body.aptb-banner-whole.single-post .yak-featured-image-img-wrapper::after {
	content: none;
	display: none;
}
body.aptb-banner-whole.single-post picture.yak-featured-image-bg {
	display: contents;
}
body.aptb-banner-whole.single-post img.yak-featured-image-bg {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 440px;
	object-fit: contain;
	border-radius: var(--yak-radius);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
body.aptb-banner-whole.single-post .yak-featured-image-title {
	width: 44%;
	box-sizing: border-box;
	padding: 3rem clamp(2rem, 4vw, 4rem);
}
body.aptb-banner-whole.single-post .yak-featured-image-title h1 {
	text-shadow: none;
	text-wrap: balance;
}

@media (max-width: 960px) {
	/* Phones and tablets: title first, then the image under it. Today the title is laid over
	   the image, so a picture with words in it (Nov 4 post) has two lines of text on top of each other. */
	body.aptb-banner-whole.single-post .yak-featured-image-top-wrapper {
		flex-direction: column-reverse;
		min-height: 0;
	}
	body.aptb-banner-whole.single-post .yak-featured-image-title {
		position: static;
		width: 100%;
		padding: 2.25rem 1.5rem 1.25rem;
		background: transparent;
	}
	body.aptb-banner-whole.single-post .yak-featured-image-title h1 {
		font-size: var(--yak-font-2xl);
		line-height: var(--yak-lh-2xl);
	}
	body.aptb-banner-whole.single-post .yak-featured-image-img-wrapper {
		width: 100%;
		padding: 0 1.5rem 2rem;
	}
	body.aptb-banner-whole.single-post img.yak-featured-image-bg {
		max-height: 70vw;
	}
}


/* ---------- the end of the post: topics on their own line, then the author with their photo ---------- */
body.aptb-banner-whole.single-post .entry-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(15, 81, 95, 0.16); }
body.aptb-banner-whole.single-post .entry-footer .entry-meta { font-size: 0.95em; line-height: 1.8; }
body.aptb-banner-whole.single-post .entry-footer .entry-tags { display: block; }
body.aptb-banner-whole.single-post .author-box { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(15, 81, 95, 0.16); }
body.aptb-banner-whole.single-post .author-box img.aptb-author-photo { float: left; width: 88px; height: 88px; margin: 0 1.5rem 1rem 0; border-radius: 50%; object-fit: cover; }
body.aptb-banner-whole.single-post .author-box-title { font-size: 1.35rem; margin: 0 0 0.5rem; }