/* Blog (book p13, p15, p17): blog page, topic pages, search, author pages, 404 search. Breadcrumb, hero, search form,
   topic chips, post grid (3 / 3 / 2 / 1) and cards (also related articles on posts), pagination, empty state, avatars.
   Royal Original tokens only. Mobile first, full width inside the 1600px page max. */

:root { --banner-ratio: 2059 / 1413; } /* article banners are 2059 x 1413 */

/* Hero (blog, topic, search, all authors) */
.blog-hero {
	display: grid; gap: var(--space-6); align-items: end;
	padding: var(--section-padding) var(--page-inline) var(--space-7);
}
@media (min-width: 1024px) { .blog-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--grid-gap); } }
.blog-hero__text { display: grid; justify-items: start; gap: var(--space-4); min-width: 0; }
.blog-hero__lead { max-width: 60ch; color: var(--color-text-muted); font-size: var(--font-size-lead); line-height: var(--line-height-lead); }

/* Search form: 48px field with a leading icon + primary button. */
.search-form {
	display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: 640px; padding: 5px;
	background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-pill);
}
.search-form:focus-within { border-color: var(--color-text); }
@media (hover: hover) { .search-form:hover { border-color: var(--color-text); } }
.search-form__field { position: relative; flex: 1; min-width: 0; }
.search-form__icon { position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search-form .search-form__input { min-height: 44px; padding-left: 44px; background: transparent; border: 0; border-radius: var(--radius-pill); }
.search-form .search-form__input:focus, .search-form .search-form__input:focus-visible { outline: none; box-shadow: none; }
.search-form .btn { flex: none; min-height: 44px; border-radius: var(--radius-pill); }

/* List section */
.blog-list { display: grid; gap: var(--space-6); padding: 0 var(--page-inline) var(--section-padding); }
.blog-list > * { min-width: 0; }
.blog-list__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.blog-list__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.blog-list__authors { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: var(--font-weight-label); }
.blog-list__authors .icon { width: 20px; height: 20px; }

/* Topic chips: wrap on wide screens, one scrolling row on phones. */
.blog-chips { min-width: 0; max-width: 100%; }
.blog-chips__list { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
.blog-chips__list::-webkit-scrollbar { display: none; }
.blog-chips__list li { flex: none; }
@media (min-width: 768px) { .blog-chips__list { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; } }

/* Post grid: 3 / 3 / 2 / 1 (--blog-columns), cards fill their tracks. */
.post-grid { display: grid; gap: var(--space-7) var(--grid-gap); grid-template-columns: repeat(var(--blog-columns), minmax(0, 1fr)); }
/* Short 3-card rows (related, recent): the 3rd card hides at 2 columns so no row is half empty. */
@media (min-width: 768px) and (max-width: 1023px) { .post-grid--related > :nth-child(3) { display: none; } }

.post-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.post-card__media {
	display: block; aspect-ratio: var(--banner-ratio); overflow: hidden;
	background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.post-card__img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; }
.post-card__mark { width: 64px; height: auto; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.post-card__media { transition: transform var(--motion-duration-base) var(--motion-ease); }
	.post-card:hover .post-card__media { transform: translateY(-2px); }
}
@media (hover: hover) { .post-card:hover .post-card__media { box-shadow: var(--shadow-card); } }

.post-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.post-card__cat { color: var(--color-primary); font-weight: var(--font-weight-label); line-height: var(--line-height-label); }
.post-card__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.post-card__link { color: var(--color-text); text-decoration: none; }
.post-card__link:hover, .post-card:hover .post-card__link { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; }
.post-card__excerpt {
	color: var(--color-text-muted);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.post-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: auto; padding-top: var(--space-2); color: var(--color-text-muted); line-height: var(--line-height-small); }
.post-card__meta > * + *::before { content: '\00B7'; margin-right: var(--space-3); }

/* Pagination: Previous / numbers / Next, 44px targets, current page primary. */
.blog-pages { margin-top: var(--space-2); }
.blog-pages__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); }
.blog-pages__list li { display: flex; }
.blog-pages .page-numbers, .blog-pages__step {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-width: 44px; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-control);
	color: var(--color-text); font-weight: var(--font-weight-label); text-decoration: none;
	border: 1px solid transparent;
}
.blog-pages__step { padding: 0 var(--space-4); color: var(--color-primary); border-color: var(--color-primary); }
.blog-pages__step .icon { width: 20px; height: 20px; }
.blog-pages__step[aria-disabled="true"] { color: var(--color-disabled-text); background: var(--color-disabled-bg); border-color: var(--color-disabled-bg); cursor: not-allowed; }
@media (hover: hover) {
	.blog-pages a.page-numbers:hover { background: var(--color-surface-tint); color: var(--color-text); }
	a.blog-pages__step:hover { background: var(--color-surface-tint); color: var(--color-primary); }
}
.blog-pages .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.blog-pages .page-numbers.dots { min-width: 24px; padding: 0; color: var(--color-text-muted); }
@media (max-width: 479px) {
	.blog-pages__prev, .blog-pages__next { flex-basis: calc(50% - var(--space-1)); }
	.blog-pages__prev { order: 1; } .blog-pages__next { order: 2; }
	.blog-pages__step { width: 100%; }
}

/* Empty state: small envelope outline, clear reason, one next action (book p15). */
.blog-empty {
	display: grid; justify-items: start; gap: var(--space-4);
	padding: var(--panel-padding); background: var(--color-surface-tint); border-radius: var(--radius-panel);
}
.blog-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--color-primary); }
.blog-empty__icon .icon { width: 32px; height: 32px; }
.blog-empty h2 { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
.blog-empty p { max-width: 60ch; color: var(--color-text-muted); }

/* Avatars: author photo, or initials when there is no photo */
.avatar {
	display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-info-bg); color: var(--color-primary); font-weight: var(--font-weight-label); font-size: var(--font-size-small); line-height: 1;
	object-fit: cover;
}
.avatar--photo { background: var(--color-surface-tint); }
.avatar.avatar--lg { width: 72px; height: 72px; font-size: var(--font-size-h4); }