/*
 * tochkab-child / assets/blog.css
 * Доповнення до _astro/index.*.css ЛИШЕ там, де Tailwind вичистив класи разом
 * із прибраним FreshArticles (сітка карток, aspect 16/10, hover) + .prose для
 * тіла статті. Усе на токенах лендінга — нічого нового не вводимо.
 */

/* База сторінки (на випадок відсутніх утиліт у бандлі). */
body.tochkab-blog {
	font-family: var(--font-sans);
	background: var(--background);
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

/* ── Грід карток: sm:2 / lg:4 ───────────────────────────────────────────── */
.blog-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Картка (1:1 з FreshArticles) ───────────────────────────────────────── */
.blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--border);
	background: var(--card);
	color: inherit;
	text-decoration: none;
	transition: border-color .3s ease, transform .3s ease;
}
.blog-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); transform: translateY(-2px); }

.blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--secondary); }
.blog-card__media img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }

.blog-card__badge {
	position: absolute; left: .75rem; top: .75rem;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--background) 90%, transparent);
	padding: .25rem .75rem;
	font-size: .75rem; font-weight: 500; color: var(--foreground);
	backdrop-filter: blur(8px);
}

.blog-card__body  { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.blog-card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.blog-card__teaser {
	margin-top: .75rem; flex: 1;
	font-size: .875rem; line-height: 1.6; color: var(--muted-foreground);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
	margin-top: 1.25rem;
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid var(--border); padding-top: 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem; color: var(--muted-foreground);
}
.blog-card__meta .blog-card__time { display: inline-flex; align-items: center; gap: .375rem; }
.blog-card__read { display: inline-flex; align-items: center; gap: .25rem; font-weight: 500; color: var(--foreground); }

/* ── Перемикач мов ──────────────────────────────────────────────────────── */
.lang-switcher { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.lang-switcher .sep { color: var(--border); }
.lang-switcher a { color: var(--muted-foreground); text-decoration: none; transition: color .2s ease; }
.lang-switcher a:hover { color: var(--foreground); }
.lang-switcher .is-current { color: var(--primary); }

/* ── .prose — тіло одиночної статті ─────────────────────────────────────── */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--font-display); font-size: 1.6rem;  font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin-top: 2em; }
.prose h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 1.6em; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.75; color: var(--foreground); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; color: var(--muted-foreground); font-style: italic; }
.prose img { border-radius: .75rem; max-width: 100%; height: auto; }