/*
Theme Name: Temanovo
Theme URI: https://example.com/temanovo
Author: PixelAds
Author URI: https://pixelads.com.br
Description: Tema clássico e leve para blog, com menu responsivo e suporte a logo e cores personalizadas via Customizer.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temanovo
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ---------- Variáveis ---------- */
:root {
	/* Cores personalizáveis via Customizer (botões, links, hover, bordas, destaques). */
	--tn-color-primary: #2563eb;
	--tn-color-secondary: #1d4ed8;
	--tn-color-extra: #f59e0b;

	/* Fundo é sempre branco em todo o site, inclusive header e footer. */
	--tn-color-bg: #ffffff;
	--tn-color-text: #1f2933;
	--tn-color-muted: #6b7280;
	--tn-color-border: #e5e7eb;
	--tn-color-surface: #f7f8fa;
	--tn-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
	--tn-content-width: 45rem;
	--tn-wide-width: 70rem;
	--tn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tn-font-heading: Georgia, "Times New Roman", serif;
}

/* ---------- Reset básico ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* Rede de segurança: nenhum elemento (novo template, script de anúncio de
	   terceiro) deve conseguir gerar scroll horizontal na página. */
	overflow-x: hidden;
	/* Scrollbar (Firefox): thumb, depois track. */
	scrollbar-width: thin;
	scrollbar-color: var(--tn-color-primary) var(--tn-color-surface);
}

/* Scrollbar (Chrome, Edge, Safari) */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--tn-color-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--tn-color-primary);
	border-radius: 10px;
	border: 3px solid var(--tn-color-surface);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--tn-color-secondary);
}
*::selection {
  background-color: var(--tn-color-secondary); /* Um fundo quase invisível só para dar profundidade */
	color: white;
}
body {
	margin: 0;
	font-family: var(--tn-font);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--tn-color-text);
	background-color: var(--tn-color-bg);
	/* Pontinhos bem discretos (SVG embutido, sem requisição HTTP extra)
	   pra quebrar o branco chapado atrás do conteúdo — aparece
	   principalmente nas margens fora da coluna central, já que os
	   blocos internos (header, cards, footer) redeclaram um fundo sólido
	   próprio por cima. Cor neutra (cinza, não ligada às cores de marca
	   do Customizer) pra funcionar em qualquer site que use este tema. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23000000' fill-opacity='0.08'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }

a {
	color: var(--tn-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus { color: var(--tn-color-secondary); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: unset;
	line-height: 1.25;
	margin: 2rem 0 1rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

p, ul, ol, blockquote, pre, figure, table { margin: 0 0 1.5rem; }

blockquote {
	border-left: 4px solid var(--tn-color-extra);
	padding-left: 1rem;
	color: var(--tn-color-muted);
	font-style: italic;
}

pre, code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--tn-color-surface);
	padding: 1rem;
	overflow-x: auto;
	border-radius: 6px;
}

code { background: var(--tn-color-surface); padding: 0.15em 0.35em; border-radius: 4px; }
pre code { background: none; padding: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--tn-color-border); padding: 0.5rem 0.75rem; text-align: left; }

/* ---------- Acessibilidade ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--tn-color-text);
	color: #fff;
	padding: 0.75rem 1rem;
	z-index: 1000;
}

.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--tn-color-primary); outline-offset: 2px; }

/* ---------- Layout ---------- */
.tn-container {
	width: 100%;
	max-width: var(--tn-wide-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.site-content {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	min-width: 100%;
	gap: 3rem;
	padding: 0;
}

.content-area {min-width: 100%;}
.widget-area { flex: 1 1 15rem; }

@media (max-width: 60rem) {
	.site-content { flex-direction: column; gap: 2.5rem; }
	.content-area { max-width: none; }
}

/* ---------- Cabeçalho ---------- */
.site-header {
	background: var(--tn-color-bg);
	box-shadow: var(--tn-shadow);
	position: relative;
	z-index: 30;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	justify-content: space-evenly;
	margin: 0;
	min-width: 100%;
	height: 70px;
	padding: 0;
}

.site-branding { flex: none; display: flex; align-items: center; }
.custom-logo-link { display: block; }
.custom-logo { max-height: 2rem; width: auto; }

/* ---------- Navegação ---------- */
.main-navigation { display: flex; justify-content: center; min-width: 0; }

.menu-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--tn-color-border);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	color: var(--tn-color-text);
}

.menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.menu-toggle__bar::before,
.menu-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.menu-toggle__bar::before { top: -6px; }
.menu-toggle__bar::after { top: 6px; }

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2.25rem;
}

.main-navigation li { position: relative; }

.main-navigation a {
	position: relative;
	display: block;
	padding: 0.25rem 0 0.5rem;
	color: var(--tn-color-text);
	text-decoration: none;
	font-size: 1rem;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--tn-color-primary); }

.main-navigation .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--tn-color-primary);
}

/* Submenus */
.main-navigation ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 0;
	background: var(--tn-color-bg);
	border: 1px solid var(--tn-color-border);
	border-radius: 6px;
	min-width: 12rem;
	padding: 0.5rem 0;
	display: none;
	z-index: 20;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul { display: block; }
.main-navigation ul ul a { padding: 0.4rem 1rem; }

/* No desktop a busca fica no botão/painel flutuante, não dentro do menu. */
.mobile-search { display: none; }

@media (max-width: 48rem) {
	.menu-toggle { display: inline-flex; }

	.main-navigation .menu-wrapper {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--tn-color-bg);
		border-bottom: 1px solid var(--tn-color-border);
		padding: 1rem 1.25rem;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
	}

	.main-navigation.toggled .menu-wrapper { display: block; }

	.site-header__inner { position: relative; flex-wrap: wrap; gap: 0.75rem; }

	.site-branding { flex: 1 1 auto; min-width: 0; }
	.custom-logo { max-height: 2.25rem; }

	.main-navigation { flex: none; justify-content: flex-start; }

	.main-navigation ul { flex-direction: column; gap: 0.25rem; }
	.main-navigation ul ul {
		position: static;
		display: block;
		border: 0;
		padding: 0 0 0 1rem;
		min-width: 0;
	}

	/* A busca fica dentro do menu mobile; o botão circular flutuante some. */
	.header-search { display: none; }

	.mobile-search {
		display: block;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--tn-color-border);
	}

	.mobile-search .search-form { margin: 0; }
}

/* ---------- Busca do cabeçalho ---------- */
.header-search {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
}

.search-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: linear-gradient(135deg, var(--tn-color-primary), var(--tn-color-secondary));
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.search-toggle:hover { filter: brightness(1.05); }

.header-search.is-open .search-toggle { display: none; }

.header-search__panel {
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 18rem;
	max-width: 60vw;
	z-index: 40;
}

.header-search.is-open .header-search__panel { display: block; }

.header-search .search-form {
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid var(--tn-color-primary);
	border-radius: 999px;
	overflow: hidden;
	background: var(--tn-color-bg);
}

.header-search .search-form label { display: flex; flex: 1; }

.header-search .search-field {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	padding: 0.6rem 1rem;
}

.header-search .search-field:focus { border: 0; }

.header-search .search-submit {
	flex: none;
	border-radius: 0;
	background: var(--tn-color-primary);
	padding: 0.6rem 1.25rem;
}

.header-search .search-submit:hover { background: var(--tn-color-secondary); }

/* ---------- Posts ---------- */
.entry { margin-bottom: 3.5rem; }

.entry-header { margin-bottom: 1rem; }

.entry-title { margin: 0 0 0.5rem; }
.entry-title a { color: var(--tn-color-text); text-decoration: none; }
.entry-title a:hover { color: var(--tn-color-primary); }

.entry-meta {
	font-size: 0.9rem;
	color: var(--tn-color-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.entry-meta a { color: inherit; }

.post-thumbnail { display: block; margin-bottom: 1.5rem; }
.post-thumbnail img { border-radius: 8px; width: 100%; object-fit: cover; }

.entry-content { overflow-wrap: break-word; }

.entry-content > *:first-child { margin-top: 0; }

.entry-footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tn-color-border);
	font-size: 0.9rem;
	color: var(--tn-color-muted);
}

.entry-footer .tags-links,
.entry-footer .edit-link { margin-bottom: 0.5rem; }
.entry-footer .entry-meta { margin-top: 0.5rem; }

/* ---------- Bio do autor (post individual) ---------- */
.author-bio {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--tn-color-surface);
	border-radius: 8px;
}

.author-bio__avatar img { display: block; border-radius: 50%; }

.author-bio__name {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.author-bio__name a { color: var(--tn-color-text); text-decoration: none; }
.author-bio__name a:hover { color: var(--tn-color-primary); }

.author-bio__description {
	margin: 0;
	font-size: 0.95rem;
	color: var(--tn-color-muted);
}

@media (max-width: 30rem) {
	.author-bio { flex-direction: column; }
}

.read-more {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
}

.sticky-badge {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--tn-color-extra);
	color: #fff;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.page-header { margin-bottom: 2.5rem; }
.page-title { margin: 0; }

/* ---------- Paginação ---------- */
.tn-pagination { margin-top: 2rem; }

.tn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.tn-pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--tn-color-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--tn-color-text);
}

.tn-pagination .page-numbers.current {
	background: var(--tn-color-primary);
	border-color: var(--tn-color-primary);
	color: #fff;
}

.tn-pagination .page-numbers:hover:not(.current) {
	border-color: var(--tn-color-secondary);
	color: var(--tn-color-secondary);
}

.post-navigation { margin-top: 3rem; display: flex; justify-content: space-between; gap: 1rem; }
.post-navigation a { text-decoration: none; }
.post-navigation .nav-subtitle { display: block; font-size: 0.8rem; color: var(--tn-color-muted); }

/* ---------- Sidebar / Widgets ---------- */
.widget { margin-bottom: 2.5rem; }
.widget-title { margin: 0 0 1rem; font-size: 1.1rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 0.35rem 0; border-bottom: 1px solid var(--tn-color-border); }
.widget a { text-decoration: none; }

/* ---------- Comentários ---------- */
.comments-area { margin-top: 3.5rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-body {
	padding: 1.25rem 0;
	border-top: 1px solid var(--tn-color-border);
}
.comment-author { font-weight: 600; }
.comment-author .avatar { border-radius: 50%; vertical-align: middle; margin-right: 0.5rem; }
.comment-metadata { font-size: 0.85rem; color: var(--tn-color-muted); }
.comment-metadata a { color: inherit; text-decoration: none; }

.comment-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--tn-color-border);
	border-radius: 6px;
	font: inherit;
	margin-bottom: 1rem;
}

.comment-form input:not([type="submit"]):not([type="checkbox"]):focus,
.comment-form textarea:focus,
.search-form .search-field:focus {
	border-color: var(--tn-color-primary);
	outline: none;
}

/* ---------- Formulários / Botões ---------- */
button,
input[type="submit"],
.wp-block-button__link,
.button {
	display: inline-block;
	background: var(--tn-color-primary);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.65rem 1.25rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.button:hover { background: var(--tn-color-secondary); }

.search-form { display: flex; gap: 0.5rem; }
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--tn-color-border);
	border-radius: 6px;
	font: inherit;
}

/* ---------- Rodapé ---------- */
.site-footer {
	background: var(--tn-color-bg);
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
	margin-top: 3rem;
	font-size: 0.95rem;
	color: var(--tn-color-muted);
}

/* Faixa do aviso legal, em gradiente, com o cartão branco por cima. */
.legal-banner {
	background: linear-gradient(115deg, var(--tn-color-primary), var(--tn-color-secondary));
	padding: 2.5rem 0;
}

.legal-banner__card {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	background: var(--tn-color-bg);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	padding: 1.75rem 2rem;
}

.legal-banner__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--tn-color-surface);
	color: var(--tn-color-muted);
}

.legal-banner__title {
	margin: 0 0 0.5rem;
	font-family: var(--tn-font);
	font-size: 1.15rem;
	color: var(--tn-color-primary);
}

.legal-notice { font-size: 0.9rem; color: var(--tn-color-text); }
.legal-notice p { margin: 0 0 0.5rem; }
.legal-notice p:last-child { margin-bottom: 0; }
.legal-notice a { color: inherit; text-decoration: underline; }

@media (max-width: 30rem) {
	.legal-banner__card { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
}

/* Colunas principais: marca, navegação, links úteis. */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 2.5rem;
	padding: 3rem 0 2.5rem;
}

.footer-logo { margin: 0 0 0.75rem; }
.footer-logo .custom-logo { max-height: 2.75rem; }
.footer-logo--text a { font-family: var(--tn-font-heading); font-size: 1.4rem; color: var(--tn-color-text); text-decoration: none; }

.footer-tagline { margin: 0 0 1.25rem; font-size: 0.9rem; }

.footer-col__title {
	position: relative;
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	font-size: 1rem;
	font-family: var(--tn-font);
	color: var(--tn-color-text);
}

.footer-col__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--tn-color-primary), var(--tn-color-secondary));
}

.footer-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; }
.footer-navigation a { color: inherit; text-decoration: none; }
.footer-navigation a:hover { color: var(--tn-color-primary); }

.social-links { display: flex; gap: 0.75rem; }

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--tn-color-primary);
	background: var(--tn-color-surface);
	color: var(--tn-color-text);
}

.social-links a:hover { background: var(--tn-color-primary); color: #fff; }

@media (max-width: 60rem) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30rem) {
	.site-footer__grid { grid-template-columns: 1fr; }
}

/* Barra final: copyright + crédito. */
.site-footer__bottom {
	background: #9098a3;
	color: #23262b;
	padding: 1rem 0;
	font-size: 0.85rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}

.copyright { margin: 0; }

.footer-credit {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
}

.footer-credit__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.footer-credit__item a { color: inherit; text-decoration: none; }
.footer-credit__item a:hover { text-decoration: underline; }
.footer-credit__divider { opacity: 0.6; }

@media (max-width: 30rem) {
	.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Alinhamentos WP ---------- */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--tn-color-muted); text-align: center; }
.sticky, .bypostauthor { display: block; }

.alignwide { width: min(var(--tn-wide-width), 100%); margin-left: calc(50% - min(var(--tn-wide-width), 100vw) / 2); }

/* ---------- Sem sidebar ---------- */
.no-sidebar .widget-area { display: none; }
.no-sidebar .content-area,
.content-area--full { max-width: none; flex-basis: 100%; }

/* Obs.: front-page.php tem seu próprio <style> com o design da home
   (hero, seções, cards) — nada fica definido aqui pra não colidir/duplicar. */

/* ---------- Post individual (single.php) ---------- */
/* Escopado a .single-post porque category.php e templates/blog.php também usam
   a classe .site-main no <main> e não podem herdar essa largura limitada. */
.single-post .site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	max-width: var(--tn-wide-width);
	margin: 0 auto;
	/* Transparente de propósito: o padrão de pontinhos mora só no <body>
	   (ver acima) — esse wrapper não pinta fundo próprio, pra deixar ele
	   aparecer por trás em vez de duplicar a declaração aqui. Causa raiz
	   do padrão não aparecer antes era outra: header.php tinha um
	   `background:` (shorthand) no body que zerava o background-image —
	   corrigido lá pra `background-color`. */
	background: transparent;
}

.single-post .site-main > * { width: 100%; }

.post-categories-only {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ---------- Grade de posts (blog/arquivo/busca) ---------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-bottom: 2.5rem;
}

@media (max-width: 60rem) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
	.post-grid { grid-template-columns: 1fr; }
}

.entry-card {
	display: flex;
	flex-direction: column;
	background: var(--tn-color-bg);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.entry-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14); transform: translateY(-2px); }

.entry-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.entry-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--tn-color-surface);
}

.entry-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.entry-card__date {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	background: var(--tn-color-bg);
	color: var(--tn-color-text);
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

.entry-card__date-day { font-size: 1.05rem; font-weight: 700; }
.entry-card__date-month { font-size: 0.65rem; text-transform: uppercase; color: var(--tn-color-muted); }

.entry-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.5rem 1.5rem;
}

.category-badge {
	align-self: flex-start;
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--tn-color-surface);
	color: var(--tn-color-primary);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.category-badge:hover { background: var(--tn-color-primary); color: #fff; }

.entry-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--tn-color-text);
	transition: color 0.2s ease;
}

.entry-card:hover .entry-card__title { color: var(--tn-color-primary); }

.entry-card__excerpt {
	margin-bottom: 1rem;
	font-size: 0.95rem;
	color: var(--tn-color-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-card__excerpt p { margin: 0; }

.entry-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.8rem;
	color: var(--tn-color-muted);
}

.entry-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--tn-color-primary);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}

.entry-card__more svg { transition: transform 0.15s ease; }
.entry-card:hover .entry-card__more svg { transform: translateX(3px); }

.entry-card .sticky-badge { align-self: flex-start; }