@layer plugins.blog {
	/* Listing patterns follow the Figma "Tips" band (8901:419): entry title in
	   Feature h3 (semibold, dark), italic category/tag line in brand blue,
	   paragraph excerpt, underlined "Continue Reading" link with arrow. */

	.blog-category-lead {
		max-inline-size: var(--measure);
		margin-block-end: var(--space-lg);
		font-size: var(--step-1);
	}

	.blog-featured-story,
	.blog-listing-story {
		display: grid;
		gap: var(--space-md);
		align-items: start;
	}

	.blog-featured-story__image,
	.blog-listing-story__image {
		width: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		border-radius: var(--radius-md);
	}

	.blog-featured-story__meta,
	.blog-listing-story__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-sm);
	}

	.blog-featured-story__flag,
	.blog-story-eyebrow {
		color: var(--color-brand-accent);
		font-size: var(--step--1);
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
	}

	.blog-featured-story__title,
	.blog-listing-story__title {
		margin: 0;
		color: var(--color-ink-strong);
		font-size: var(--step-3);
		font-weight: var(--font-weight-semibold);
		line-height: var(--lh-title-tight);
	}

	.blog-featured-story__title {
		font-size: var(--step-4);
	}

	.blog-featured-story__title a,
	.blog-listing-story__title a {
		color: inherit;
		text-decoration: none;
	}

	.blog-featured-story__title a:hover,
	.blog-featured-story__title a:focus,
	.blog-listing-story__title a:hover,
	.blog-listing-story__title a:focus {
		color: var(--color-brand-primary);
	}

	.blog-featured-story__details,
	.blog-listing-story__details {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-sm);
		color: var(--color-brand-primary);
		font-size: var(--step-0);
		font-style: italic;
		font-weight: var(--font-weight-semibold);
	}

	.blog-featured-story__summary,
	.blog-listing-story__summary {
		max-width: 68ch;
	}

	/* "Continue Reading" text link with trailing arrow, per the Tips band. */
	.blog-story-more {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		color: var(--color-brand-primary);
		font-size: var(--step-0);
	}

	.blog-story-more::after {
		content: "";
		flex: none;
		width: 0.95em;
		height: 0.9em;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M0 11h21M12 2l9 9-9 9'/%3E%3C/svg%3E") no-repeat center / contain;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M0 11h21M12 2l9 9-9 9'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.blog-listing__rule {
		margin-block: var(--space-lg);
		border: 0;
		height: 2px;
		background: var(--color-border-muted);
	}

	/* Pull quote: base blockquote already carries the Figma blockquote
	   design; this hook stays for blog-specific spacing only. */
	.blog-pull-quote {
		margin-inline: 0;
	}

	.blog-related-products {
		margin-block: var(--space-xl);
	}

	.blog-related-products h2 {
		color: var(--color-ink-strong);
	}

	@media screen and (min-width: 861px) {
		.blog-featured-story,
		.blog-listing-story {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			gap: var(--space-lg);
		}

		.blog-featured-story--no-image,
		.blog-listing-story--no-image {
			grid-template-columns: 1fr;
		}

		.blog-listing-story--reverse .blog-listing-story__media {
			order: 2;
		}
	}
}