/*
 * Block style "Photo print" (is-style-print)
 * for core/image, core/post-featured-image and core/group.
 *
 * A white-bordered print with a soft shadow, a little askew, its caption in
 * handwriting. On an Image or a Featured Image block the figure is the print.
 * On a Group it is a card: a picture and a post title, where the title's link
 * is stretched over the whole card so the card is one link, not two.
 */

.wp-block-image.is-style-print,
.wp-block-post-featured-image.is-style-print,
.wp-block-group.is-style-print {
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--preset--shadow--print);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 0.75rem 0.5rem;
	rotate: calc(var(--tpt-tilt, -1.5deg) * var(--tpt-tilt-scale, 1));
}

/* A print is as wide as its picture; a long caption wraps under it instead of widening it. */
.wp-block-image.is-style-print:not(.alignwide):not(.alignfull) {
	width: fit-content;
}

.wp-block-image.is-style-print figcaption {
	contain: inline-size;
}

.wp-block-image.is-style-print img,
.wp-block-post-featured-image.is-style-print img {
	border-radius: 0;
	display: block;
}

.wp-block-image.is-style-print figcaption,
.wp-block-post-featured-image.is-style-print figcaption {
	color: inherit;
	font-family: var(--wp--preset--font-family--hand);
	font-size: var(--wp--custom--hand--small);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
	padding-block-start: 0.5rem;
	text-align: center;
}

/* Room for the corners that turning lifts out of the box. */
.wp-block-post-content > .wp-block-image.is-style-print {
	margin-block: 2.5rem;
}

/* ---- The card: a Group holding a featured image and a post title ---- */

.wp-block-group.is-style-print {
	position: relative;
}

.wp-block-group.is-style-print > * {
	margin-block: 0;
}

.wp-block-group.is-style-print .wp-block-post-featured-image {
	margin: 0;
}

.wp-block-group.is-style-print .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
}

.wp-block-group.is-style-print .wp-block-post-title {
	font-family: var(--wp--preset--font-family--hand);
	font-size: var(--wp--custom--hand--small);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	overflow-wrap: anywhere;
	padding-block-start: 0.5rem;
	text-align: center;
	text-wrap: balance;
}

/* The element names add the weight that keeps the title in the card's ink when the card lies on a coloured panel. */
.wp-block-group.is-style-print :is(h1, h2, h3, h4, h5, h6, p).wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-print .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.wp-block-group.is-style-print .wp-block-post-title a:hover,
.wp-block-group.is-style-print .wp-block-post-title a:focus {
	text-decoration: underline;
}

/* The focus ring goes on the stretched area, so it surrounds the whole card. */
.wp-block-group.is-style-print .wp-block-post-title a:focus-visible {
	outline: none;
}

.wp-block-group.is-style-print .wp-block-post-title a:focus-visible::after {
	outline: 3px solid var(--tpt-focus-color, currentcolor);
	outline-offset: 4px;
}

/* A post without a picture still gets a print: the site's mark on butter. */
.wp-block-post-template .wp-block-group.is-style-print:not(:has(img))::before {
	aspect-ratio: var(--tpt-print-ratio, 1);
	background: var(--wp--preset--color--butter) url(../images/bun.svg) center / 38% no-repeat;
	content: "";
	display: block;
}

/* ---- Angles ---- */

/*
 * In a list of posts the angle goes by position, five to a cycle so that a
 * four-column grid does not repeat itself column by column.
 */
.wp-block-post-template > li:nth-child(5n + 1) {
	--tpt-tilt: -2deg;
}

.wp-block-post-template > li:nth-child(5n + 2) {
	--tpt-tilt: 1.5deg;
}

.wp-block-post-template > li:nth-child(5n + 3) {
	--tpt-tilt: -1deg;
}

.wp-block-post-template > li:nth-child(5n + 4) {
	--tpt-tilt: 2.5deg;
}

.wp-block-post-template > li:nth-child(5n + 5) {
	--tpt-tilt: -1.5deg;
}

.wp-block-gallery > .wp-block-image.is-style-print:nth-child(odd) {
	--tpt-tilt: 1.5deg;
}

.wp-block-gallery > .wp-block-image.is-style-print:nth-child(3n) {
	--tpt-tilt: -2.5deg;
}

/* ---- Sizes ---- */

/* The large print beside a post's title. */
.tpt-post-header > .wp-block-post-featured-image.is-style-print {
	--tpt-tilt: 2.5deg;
	box-shadow: 0 12px 28px rgba(42, 26, 18, 0.22);
	padding: 1rem 1rem 0.625rem;
}

.tpt-post-header > .wp-block-post-featured-image.is-style-print figcaption {
	font-size: var(--wp--custom--hand--medium);
}

/* The print in the front page hero. */
.tpt-hero__print .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tpt-hero__print .wp-block-group.is-style-print {
	--tpt-print-ratio: 4 / 3;
	--tpt-tilt: 3deg;
	box-shadow: var(--wp--preset--shadow--print-hero);
	padding: 0.875rem 0.875rem 0.625rem;
}

.tpt-hero__print .wp-block-group.is-style-print .wp-block-post-title {
	font-size: var(--wp--custom--hand--medium);
}

/* The small print beside a search result. */
.tpt-result > .wp-block-group.is-style-print {
	flex: none;
	padding: 0.375rem;
	width: 6.5rem;
}

@media (min-width: 37.5rem) {

	.tpt-result > .wp-block-group.is-style-print {
		width: 8.5rem;
	}
}