/* Phase 10: /blog/ archive redesign — approved "Editorial list rows"
   direction (Variation A). Scoped to is_home() (the site's designated
   posts page). Colors are literal here, not ww-shop.css's --shop-* vars —
   those are deliberately scoped to .woocommerce/.woocommerce-page (see
   that file's own header comment), and /blog/ carries neither class, so
   the vars resolve to nothing there (confirmed live: a tag pill rendered
   with no background at all until this was hardcoded instead). The row
   markup itself lives in the theme pattern
   waifuworld/blog-post-card-row.php (a separate pattern from Ollie's own
   ollie/blog-post-card, so this leaves that pattern's other usage
   untouched); this only styles what it can't express via block
   attributes alone — line-clamping, the tag pill's gradient, image
   sizing within the row, and hover states. */

/* The approved mockup used a narrower ~920px editorial reading measure for
   the list layout, not the theme's default "wide" alignment (1260px on
   this site) — confirmed live the row was rendering nearly 1260px wide
   without this. Only targets this exact class combination (alignwide +
   is-layout-flow), which is unique to this list usage — the grid variant
   used elsewhere on the site renders is-layout-grid instead, untouched. */
.wp-block-post-template.alignwide.is-layout-flow {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

.ww-blog-row {
	overflow: hidden;
	box-shadow: 0 2px 10px rgba( 20, 10, 15, 0.05 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	align-items: stretch;
}
.ww-blog-row:hover {
	box-shadow: 0 10px 26px rgba( 20, 10, 20, 0.1 );
	transform: translateY( -2px );
}
.ww-blog-row:hover .ww-blog-title {
	color: #b12704 !important;
}
.ww-blog-row:hover .ww-blog-row-image img {
	transform: scale( 1.05 );
}

.ww-blog-row-image {
	flex: 0 0 260px;
	margin: 0;
}
.ww-blog-row-image img {
	transition: transform 0.35s ease;
}

.ww-blog-row-content {
	flex: 1 1 auto;
	min-width: 0;
}

.ww-blog-row .ww-blog-tag {
	display: inline-flex !important;
	align-self: flex-start;
	background: linear-gradient( 90deg, #ff2d78, #c71585 ) !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	line-height: 1.4;
}
.ww-blog-row .ww-blog-tag a {
	text-decoration: none;
	color: inherit;
}

.ww-blog-title {
	font-size: 21px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease;
}
.ww-blog-title a {
	color: inherit;
}

.ww-blog-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

@media ( max-width: 700px ) {
	.ww-blog-row {
		flex-direction: column;
	}
	.ww-blog-row-image {
		flex-basis: auto;
		width: 100%;
	}
}