/* =========================================================
   components.css: pieces shared across templates.
   Breadcrumbs, the post card and its grid, section titles,
   the author box, related posts, the empty state.
   ========================================================= */

/* ---------- Breadcrumbs ----------
   Home / topic / page, as a mono readout with slashes between the steps. */
.breadcrumbs { margin: 0 0 var(--space-3); }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .6rem;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: var(--faint); }
.breadcrumbs__link { display: inline-block; color: var(--muted); text-decoration: none; }
.breadcrumbs__link:hover { color: var(--action); text-decoration: underline; }
.breadcrumbs__current { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Section title ---------- */
.section-title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
	font-weight: 900;
	letter-spacing: -.03em;
}

/* ---------- Post grid ---------- */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}
@media (max-width: 980px) { .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .posts-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

/* ---------- Post card ----------
   A cover (the featured photo, or a drawing in the topic's colour), then
   topic, title, summary and a mono readout. The title's link is stretched
   over the card, so the whole card is the target; the topic link sits
   above it. On hover the card lifts, as the panels on sonix.ai do. */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 24px 48px -24px rgba(6, 11, 35, .28), 0 0 0 1px rgba(79, 70, 229, .25);
}
.post-card:focus-within { border-color: var(--action); }

.post-card__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--tint);
	overflow: hidden;
}
.post-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__image { transform: scale(1.03); }
/* No photo: a recording becoming text, tinted with the topic's colour. The
   article hero's panel uses the same drawing (single.css sizes it). */
.post-card__cover--drawn,
.post-hero--drawn .post-hero__media {
	background:
		radial-gradient(ellipse 70% 90% at 20% 0%, color-mix(in srgb, var(--tone-mark, var(--wave-blue)) 22%, transparent), transparent 70%),
		radial-gradient(ellipse 60% 80% at 100% 100%, rgba(244, 114, 182, .14), transparent 70%),
		var(--cover-base);
}
.post-card__cover .wave-art { width: 100%; height: 100%; }
.wave-art--cover .wave-art__frame { stroke: color-mix(in srgb, var(--tone, var(--muted)) 45%, transparent); }
.wave-art--cover .wave-art__base  { stroke: color-mix(in srgb, var(--tone, var(--muted)) 40%, transparent); }
.wave-art--cover .wave-art__bars  { fill: var(--tone-mark, var(--wave-blue)); }
.wave-art--cover .wave-art__dot   { fill: var(--tone, var(--tone-blue)); }
.wave-art--cover .wave-art__lines { fill: color-mix(in srgb, var(--tone, var(--tone-blue)) 55%, white); }
.wave-art--cover .wave-art__speaker { fill: var(--signal-amber); }
.wave-art--cover .wave-art__speaker--b { fill: var(--signal-rose); }

.post-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: var(--space-4);
}

.post-card__topic {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--tone, var(--muted));
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
}
.post-card__topic::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--tone-mark, var(--line));
}
.post-card__topic:hover { color: var(--tone, var(--action)); text-decoration: underline; }

.post-card__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	overflow-wrap: break-word;
}
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.post-card:hover .post-card__title a { color: var(--action); }
.post-card__title a:focus-visible { outline: none; }
.post-card__title a:focus-visible::after { outline: 2px solid var(--action); outline-offset: 2px; }

.post-card__excerpt {
	margin: 0;
	color: var(--muted);
	font-size: .97rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.post-card__meta {
	margin: auto 0 0;
	padding-top: .5rem;
	display: flex;
	flex-wrap: wrap;
	gap: .15rem 1rem;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- Author box ---------- */
.author-box {
	display: flex;
	gap: var(--space-4);
	margin: var(--space-7) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--line);
}
.author-box__avatar { flex-shrink: 0; }
.author-box__img { border-radius: 50%; width: 72px; height: 72px; }
.author-box__name { margin: 0 0 .1rem; font-size: 1.15rem; font-weight: 700; }
.author-box__name a { color: var(--ink); text-decoration: none; }
.author-box__name a:hover { color: var(--action); }
.author-box__role { margin: 0 0 var(--space-2); font-size: .9rem; color: var(--muted); }
.author-box__bio { margin: 0 0 var(--space-2); color: var(--body); font-size: 1rem; line-height: 1.6; }
.author-box__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .92rem; font-weight: 700; }
@media (max-width: 560px) { .author-box { flex-direction: column; gap: var(--space-3); } }

/* ---------- Related posts ---------- */
.related-posts {
	max-width: var(--site-max);
	margin: var(--space-8) auto 0;
	padding: 0 var(--gutter);
}
.related-posts__title {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
	font-weight: 900;
	letter-spacing: -.03em;
}

/* ---------- Empty state ---------- */
.no-results { max-width: 40rem; padding: var(--space-5) 0; }
.no-results__title { font-size: 1.5rem; margin-bottom: var(--space-2); }
.no-results__copy { color: var(--muted); margin-bottom: var(--space-4); }
.no-results__topics { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ---------- Touch targets ----------
   Small text links (a breadcrumb, a topic label, an author link) keep their
   size on the page and get an invisible hit area at least 48px square, centred on them,
   so a thumb does not have to be exact. */
.breadcrumbs__link,
.post-card__topic,
.topic-shelf__title a,
.topic-shelf__all,
.post-hero__author a,
.post-hero__markdown,
.author-box__name a,
.author-box__links a { position: relative; }
.breadcrumbs__link::after,
.post-card__topic::after,
.topic-shelf__title a::after,
.topic-shelf__all::after,
.post-hero__author a::after,
.post-hero__markdown::after,
.author-box__name a::after,
.author-box__links a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100% + 8px, 48px); /* a one-letter link ("X") is still a full target */
	height: 48px;
	transform: translate(-50%, -50%);
}