/**
 * Blog — listing cards and single post.
 *
 * The card images previously used `the_post_thumbnail('medium_large', 'w-100
 * h-auto')`: full width, natural height. Whatever aspect the editor uploaded is
 * what the card became, so a portrait photo made its card twice as tall as its
 * neighbour and the grid lost its rhythm.
 *
 * Two changes work together:
 *  - functions.php registers `shv-card` (720x480 hard crop) and the template
 *    asks for it, so the browser downloads a correctly-sized, pre-cropped file.
 *  - the aspect-ratio + object-fit below crop whatever actually arrives.
 *
 * The CSS alone fixes the layout immediately, including for every image
 * uploaded before the size existed — those keep their old dimensions until
 * thumbnails are regenerated, and are cropped on the fly meanwhile.
 */

.shv-card-media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--shv-stone);
	line-height: 0;
}

.shv-card-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	/* cover, not contain: a card is a crop, and letterboxing every mismatched
	   photo would trade one ragged grid for another. */
	object-fit: cover;
	object-position: center;
	display: block;
	height: auto;
}

/* Stands in for a missing featured image. Drawn rather than loaded: the theme
   referenced assets/images/default-blog.jpg, which is not in the theme, so
   those posts rendered a broken image. Same 3:2 box, so the grid holds. */
.shv-card-placeholder,
.shv-recent-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--shv-stone);
	color: var(--shv-stone-line);
}

.shv-card-placeholder {
	width: 100%;
	font-size: 30px;
}

.shv-recent-placeholder {
	width: 76px;
	font-size: 16px;
}

/* The listing markup is a Bootstrap row of equal-width columns; make the cards
   fill their cell so the row bottoms line up even when titles differ in length. */
.blog-list .blog-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
}

.blog-list .blog-info {
	flex: 1 1 auto;
}

/* ============================================================
   SIDEBAR — recent posts
   ============================================================
   Was a bare list of coral titles behind flame bullets: no thumbnails, no
   dates, and the global body{font-weight:900} rendered every title at maximum
   weight, so nothing had a hierarchy. Rebuilt on the same pattern as the
   product page's document list — thumbnail, title, date, one row per item.
   ============================================================ */
.shv-widget {
	background: #fff;
	border: 1px solid var(--shv-line);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 24px;
}

.shv-widget-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.3;
	color: var(--shv-ink);
	background: #fafaf8;
	border-bottom: 1px solid var(--shv-line);
	margin: 0;
	padding: 14px 16px;
}

.shv-recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shv-recent li + li {
	border-top: 1px solid var(--shv-line);
}

.shv-recent-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.shv-recent-item:hover,
.shv-recent-item:focus-visible {
	background: #fafaf8;
	text-decoration: none;
}

.shv-recent-media {
	flex: none;
	width: 76px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--shv-stone);
	line-height: 0;
}

.shv-recent-img {
	width: 76px;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------
   <picture>-wrapped images (Imagify "<picture> tags" mode)
   ------------------------------------------------------------
   The theme puts the sizing class on the <img>, but an optimizer that wraps the
   image can carry that class onto the <picture> wrapper instead — leaving the
   inner <img> unstyled, so it renders at its natural aspect and the 3:2 card
   crop is lost (obvious on portrait photos, invisible on landscape ones).
   When the class lands on the wrapper it already supplies the 3:2 box (it also
   sets display:block, which beats the global picture{display:contents}); these
   rules just make the inner image fill and crop to it. Inert when the class
   stayed on the <img>. */
picture.shv-card-img > img,
picture.shv-recent-img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.shv-recent-text {
	display: block;
	min-width: 0;
}

.shv-recent-heading {
	display: block;
	font-family: "Manrope", "Inter", sans-serif;
	/* 700, not the inherited 900 — these are list items, not headlines. */
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--shv-ink);
	/* Post titles here run long; cap at three lines so one entry cannot
	   dominate the column. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shv-recent-item:hover .shv-recent-heading,
.shv-recent-item:focus-visible .shv-recent-heading {
	color: var(--shv-coral-dark);
}

.shv-recent-date {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--shv-muted);
	margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.shv-recent-item {
		transition: none;
	}
}

/* ============================================================
   SINGLE POST
   ============================================================ */
/* .shv-page-title lives in shv-base.css — shared with pages, cart and 404. */

/* The post's own featured image keeps its natural proportions — it is the
   subject here, not a thumbnail in a grid, so cropping it would lose content. */
.blog-detail .blog-image img {
	height: auto;
}