/* === Journal pages === */

/*
 * Articles (tools/sections/journal-posts.js), as the source's Elementor posts. The
 * rotated ARTICLE tag sits 58px down the hero's right edge (36px down and 22px out
 * on phones), turned about its centre.
 */
div:has(> h2.is-style-journal-side-label) {
	position: relative;
}

h2.is-style-journal-side-label {
	top: 58px;
	right: 0;
	z-index: 1;
}

/* Article lists: items 0.9rem apart; the numbers are set in the body face at
   weight 100, as the source's list items (which also gives each item its 25px line). */
.wp-block-post-content .wp-block-group .wp-block-list.is-style-journal-list > li + li {
	margin-top: 0.9rem;
}

.wp-block-list.is-style-journal-list > li::marker {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 100;
}

/* The article's MAINTENANCE SERVICES link: a 1.5px underline drawn from the left
   over 0.25s (ease-out); on phones an outlined full-width button. */
p.is-style-journal-service-link a[href]::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease-out;
}

p.is-style-journal-service-link a[href]:hover::after,
p.is-style-journal-service-link a[href]:focus-visible::after {
	transform: scaleX(1);
}

/* The theme's page numbers (archive and search): 40px squares side by side (no
   gaps between them), the current page on #336, the arrows its 22px chevrons
   (inc/journal.php). */
.wp-block-query-pagination.is-style-journal-pagination > .wp-block-query-pagination-numbers,
.wp-block-query-pagination.is-style-journal-pagination > .wp-block-query-pagination-previous,
.wp-block-query-pagination.is-style-journal-pagination > .wp-block-query-pagination-next {
	margin: 0;
}

.wp-block-query-pagination.is-style-journal-pagination > .wp-block-query-pagination-numbers {
	display: flex;
}

.wp-block-query-pagination.is-style-journal-pagination .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination.is-style-journal-pagination .wp-block-query-pagination-next-arrow {
	display: inline-flex;
	margin: 0;
}

.wp-block-query-pagination.is-style-journal-pagination .page-numbers,
.wp-block-query-pagination.is-style-journal-pagination > a[href] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: #c36;
	text-decoration: none;
}

.wp-block-query-pagination.is-style-journal-pagination .page-numbers.current {
	border-radius: 4px;
	color: #fff;
	background: #336;
}

.wp-block-query-pagination.is-style-journal-pagination .page-numbers.dots {
	color: #333;
}

/* The results and the page numbers are 60px apart (the theme's column gap). */
.wp-block-query > .wp-block-query-pagination.is-style-journal-pagination {
	margin-top: 60px;
}

/*
 * The Journal page's article cards: on hover the photo zooms to 105% over 0.6s
 * (ease) and READ THE ARTICLE draws its 1.125px underline from the left over 0.3s;
 * that link covers the whole card.
 */
.wp-block-group.is-style-journal-article-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: inherit;
	transition: transform 0.6s ease;
}

.wp-block-group.is-style-journal-article-card:hover::before {
	transform: scale(1.05);
}

.wp-block-group.is-style-journal-article-card h4 a[href] {
	display: inline-block;
	padding-bottom: 3px;
	line-height: 1;
	background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1.125px no-repeat;
	transition: background-size 0.3s ease;
}

.wp-block-group.is-style-journal-article-card:hover h4 a[href] {
	background-size: 100% 1.125px;
}

.wp-block-group.is-style-journal-article-card h4 a[href]::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-heading.is-style-journal-fade-in-tablet {
		animation: none;
	}

	.wp-block-group.is-style-journal-article-card::before,
	.wp-block-group.is-style-journal-article-card h4 a[href],
	p.is-style-journal-service-link a[href]::after {
		transition: none;
	}
}

/* The flip boxes' link title is a 1em line with its underline 0.2em under it, and
   the whole back is the link. */
.wp-block-tillander-flip-card.is-style-journal-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) a[href] {
	display: inline-block;
	line-height: 1;
}

.wp-block-tillander-flip-card.is-style-journal-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) a[href]::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* A caption pulled up over its flip box (the product name and collection) stays
   above it, as the source's caption container (z-index 10). */
.wp-block-tillander-flip-card.is-style-journal-flip + .wp-block-group {
	position: relative;
	z-index: 10;
}

/*
 * Archive, search and 404: the source theme's (Hello Biz) column, 1140px wide and
 * stepping down at its own breakpoints; search puts the form beside the results,
 * 404 sits 5% of the page width down, centred.
 */
.wp-block-group.is-style-journal-site-main {
	max-width: 1140px;
	margin-inline: auto;
}

.search .wp-block-group.is-style-journal-site-main {
	display: flex;
	gap: 60px;
	padding: 60px;
}

.search .wp-block-group.is-style-journal-site-main > div {
	flex: 1 0 0;
}

.error404 .wp-block-group.is-style-journal-site-main {
	margin-top: 5%;
	padding: 60px;
	text-align: center;
}

.wp-block-group.is-style-journal-site-main .wp-block-post-featured-image img.wp-post-image {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
}

/* The theme's search form: a 42px field with the magnifier inside its left end,
   at most 294px wide (265px beside the results, 270px on 404, as the theme's
   form sizes there). */
.wp-block-search.is-style-journal-search .wp-block-search__inside-wrapper {
	position: relative;
	width: 294px;
	max-width: 100%;
	padding: 0;
	border: 0;
}

.error404 .wp-block-search.is-style-journal-search .wp-block-search__inside-wrapper {
	width: 270px;
	margin-inline: auto;
}

.wp-block-search.is-style-journal-search .wp-block-search__input {
	padding: 0.5rem 1rem 0.5rem 2.5rem;
	border: 1px solid #666;
	border-radius: 3px;
	font-size: 1em;
	line-height: 1.5;
	transition: all 0.3s;
}

.wp-block-search.is-style-journal-search .wp-block-search__input:focus {
	border-color: #333;
}

.wp-block-search.is-style-journal-search .wp-block-search__button {
	position: absolute;
	top: 0.1rem;
	left: -0.25rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border: 0;
	color: #333;
	font-size: 1rem;
	line-height: 1.5;
	background: none;
}

.wp-block-search.is-style-journal-search .wp-block-search__button svg {
	width: 20px;
	min-width: 0;
	height: 20px;
	min-height: 0;
	vertical-align: baseline;
	fill: none;
}

@media (width > 992px) {
	.search .wp-block-search.is-style-journal-search .wp-block-search__inside-wrapper {
		width: 265px;
	}
}

@media (width < 1200px) {
	.wp-block-group.is-style-journal-site-main {
		max-width: 800px;
	}
}

/* The Journal title fades in (1.25s) on tablets and phones only. */
@media (width <= 1024px) {
	.wp-block-heading.is-style-journal-fade-in-tablet {
		animation: tillander-fade-in 1.25s ease both;
	}
}

@media (width <= 992px) {
	.search .wp-block-group.is-style-journal-site-main {
		flex-direction: column;
	}

	.wp-block-group.is-style-journal-site-main .wp-block-post-featured-image img.wp-post-image {
		max-height: 400px;
	}
}

@media (width < 992px) {
	.wp-block-group.is-style-journal-site-main {
		max-width: 600px;
	}
}

@media (width <= 767px) {
	h2.is-style-journal-side-label {
		top: 36px;
		right: -22px;
	}

	/* The reversed rows wrap in reverse on phones (the source's row-reverse with
	   wrap-reverse): the text above the photo, the row's spare minimum height
	   shared equally between the two lines (a grid's auto rows do the same). */
	.wp-block-post-content .wp-block-group.is-style-journal-reverse {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-post-content .wp-block-group.is-style-journal-reverse > :first-child {
		order: 1;
	}

	/* Phones crop the flip boxes' photos to 4:5. */
	.wp-block-tillander-flip-card.is-style-journal-flip .tillander-flip-card__inner > .wp-block-group:first-child {
		aspect-ratio: 4 / 5;
	}

	p.is-style-journal-service-link {
		padding: 10px 20px;
		border: 1px solid darkgray;
		text-align: center;
		background: #fff;
	}

	.wp-block-post-content .wp-block-group .wp-block-list.is-style-journal-list > li + li {
		margin-top: 0;
	}
}

@media (width < 768px) {
	.wp-block-group.is-style-journal-site-main {
		max-width: 500px;
	}
}

@media (width <= 575px) {
	.wp-block-group.is-style-journal-site-main,
	.search .wp-block-group.is-style-journal-site-main,
	.error404 .wp-block-group.is-style-journal-site-main {
		max-width: none;
		padding-inline: 10px;
	}

	/* The page titles' own 10px inset; search's title has none (the theme's
	   .search .entry-title). */
	body:not(.search) .wp-block-group.is-style-journal-site-main h1 {
		padding-inline: 10px;
	}

	.wp-block-group.is-style-journal-site-main .wp-block-post-featured-image img.wp-post-image {
		max-height: 300px;
	}
}