/* ==========================================================================
   Blog: lista, kategória/archívum és cikk sablonok
   Betöltés: inc/blog.php (csak blog oldalakon)
   Arculat: Montserrat, narancs (#fa6400) és sárga-narancs színátmenet, 5px-es gombok
   ========================================================================== */

.blog-wrap,
.blog-single {
	--b-orange: #fa6400;
	--b-amber: #fa8c00;
	--b-yellow: #fac800;
	--b-ink: #282828;
	--b-text: #3a3a3a;
	--b-muted: #6c757d;
	--b-line: #ece7df;
	--b-soft: #fff7ea;
	--b-radius: 10px;
	--b-shadow: 0 2px 14px rgba(40, 40, 40, .07);
	--b-shadow-hover: 0 10px 30px rgba(40, 40, 40, .14);
	background: #fff;
}

/* A téma kikapcsolja a fókuszkeretet, a blog elemeknél visszaadjuk (billentyűzetes használat) */
.blog-wrap a:focus-visible,
.blog-wrap button:focus-visible,
.blog-single a:focus-visible,
.blog-single button:focus-visible {
	outline: 3px solid var(--b-orange) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Hero (blog főoldal, archívumok) ---------- */
.blog-hero {
	position: relative;
	padding: 64px 0 44px;
	text-align: center;
	background: linear-gradient(180deg, var(--b-soft) 0%, #fff 100%);
	border-bottom: 1px solid #f3e6cf;
}
.blog-hero::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 6px;
	background: linear-gradient(90deg, var(--b-yellow) 0, var(--b-amber) 100%);
}
.blog-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--b-orange);
}
.blog-hero__title {
	margin: 0 0 14px;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.12;
	font-weight: 800;
	color: var(--b-ink);
}
.blog-hero__page {
	font-size: .5em;
	font-weight: 600;
	color: var(--b-muted);
	white-space: nowrap;
}
.blog-hero__lead {
	max-width: 700px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.65;
	color: #555;
}
.blog-hero__lead p { margin: 0; color: inherit; }

.blog-container {
	padding-top: 36px;
	padding-bottom: 72px;
}

/* ---------- Kategória szűrő ---------- */
.blog-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}
.blog-cats a {
	display: inline-block;
	padding: 8px 18px;
	border: 2px solid var(--b-orange);
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--b-orange);
	background: #fff;
	transition: background .3s, color .3s;
}
.blog-cats a:hover,
.blog-cats .is-active a {
	background: var(--b-orange);
	color: #fff;
}

/* ---------- Kártyák ---------- */
.blog-grid { margin-top: 24px; }

.blog-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	box-shadow: var(--b-shadow);
	transition: transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--b-shadow-hover);
}
.blog-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f4efe6;
}
.blog-card__media img.blog-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img.blog-img { transform: scale(1.04); }

.blog-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #fff3d6, #ffe1b0);
}
.blog-card__placeholder img { width: 130px; height: auto; opacity: .85; }

.blog-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 22px 22px 24px;
}
.blog-chip {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #f6dcb0;
	border-radius: 30px;
	background: var(--b-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--b-orange);
	transition: background .3s, color .3s;
}
.blog-chip:hover { background: var(--b-orange); color: #fff; }

.blog-card__title {
	margin: 12px 0 10px;
	font-size: 20px;
	line-height: 1.32;
	font-weight: 700;
}
.blog-card__title a { color: var(--b-ink); transition: color .25s; }
.blog-card__title a:hover { color: var(--b-orange); }

.blog-card__excerpt {
	flex: 1;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
	color: #555;
}
.blog-card__meta {
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--b-muted);
}
.blog-card__meta time,
.blog-card__meta span { color: inherit; font-size: inherit; }
.blog-card__dot { margin: 0 6px; }

.blog-card__more {
	position: relative;
	padding-right: 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--b-orange);
}
.blog-card__more::after {
	content: "→";
	position: absolute;
	right: 0;
	top: 0;
	transition: transform .25s;
}
.blog-card__more:hover::after { transform: translateX(5px); }

/* Kiemelt (első) kártya */
@media (min-width: 992px) {
	.blog-card--featured { flex-direction: row; min-height: 380px; }
	.blog-card--featured .blog-card__media { flex: 0 0 56%; aspect-ratio: auto; }
	.blog-card--featured .blog-card__body { flex: 1; justify-content: center; padding: 40px; }
	.blog-card--featured .blog-card__title { font-size: 32px; }
	.blog-card--featured .blog-card__excerpt { flex: 0 0 auto; font-size: 16px; }
}

/* Új (AJAX-szal betöltött) kártyák megjelenése */
.blog-card-col.is-new { animation: blogFadeUp .5s ease both; }
@keyframes blogFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* ---------- „További cikkek" gomb + lapozó ---------- */
.blog-loadmore { display: none; margin-top: 40px; text-align: center; }
.blog-js .blog-loadmore { display: block; }
.blog-js .blog-pagination { display: none; }

.blog-loadmore__btn {
	display: inline-block;
	padding: 14px 38px;
	border: 2px solid var(--b-orange);
	border-radius: 5px;
	background: var(--b-orange);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	transition: background .4s, color .4s;
}
.blog-loadmore__btn:hover { background: #fff; color: var(--b-orange); }
.blog-loadmore.is-loading .blog-loadmore__btn { pointer-events: none; opacity: .85; }
.blog-loadmore.is-loading .blog-loadmore__btn::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: blogSpin .7s linear infinite;
}
@keyframes blogSpin { to { transform: rotate(360deg); } }
.blog-loadmore.is-done .blog-loadmore__btn { display: none; }
.blog-loadmore__status {
	min-height: 1.4em;
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--b-muted);
}

.blog-pagination { margin-top: 44px; }
.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.blog-pagination .page-numbers {
	min-width: 42px;
	padding: 9px 14px;
	border: 2px solid var(--b-line);
	border-radius: 5px;
	font-weight: 600;
	text-align: center;
	color: var(--b-ink);
	transition: border-color .25s, color .25s;
}
.blog-pagination a.page-numbers:hover { border-color: var(--b-orange); color: var(--b-orange); }
.blog-pagination .page-numbers.current {
	border-color: var(--b-orange);
	background: var(--b-orange);
	color: #fff;
}
.blog-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.blog-empty { padding: 60px 0; text-align: center; }

/* ==========================================================================
   Cikk (single)
   ========================================================================== */
.container.blog-narrow { max-width: 800px; width: 100%; }
.container.blog-wide { max-width: 1100px; width: 100%; }

.blog-single__head {
	padding: 42px 0 28px;
	background: linear-gradient(180deg, var(--b-soft) 0%, #fff 100%);
	text-align: center;
}
.blog-breadcrumb {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--b-muted);
}
.blog-breadcrumb a { color: var(--b-muted); }
.blog-breadcrumb a:hover { color: var(--b-orange); }
.blog-breadcrumb span { color: inherit; font-size: inherit; }
.blog-breadcrumb .breadcrumb_last { color: var(--b-ink); font-weight: 600; }

.blog-single__title {
	margin: 16px 0 16px;
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.16;
	font-weight: 800;
	color: var(--b-ink);
}
.blog-single__meta {
	font-size: 14px;
	color: var(--b-muted);
}
.blog-single__meta span,
.blog-single__meta time { color: inherit; font-size: inherit; }
.blog-single__author { font-weight: 600; color: var(--b-ink) !important; }

.blog-single__hero { margin: 8px 0 40px; }
.blog-single__hero img.blog-single__hero-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: var(--b-shadow-hover);
}
.blog-single__hero figcaption {
	margin-top: 10px;
	font-size: 13px;
	text-align: center;
	color: var(--b-muted);
}

/* Cikk szövege */
.blog-content {
	font-size: 18px;
	line-height: 1.8;
	color: var(--b-text);
	overflow-wrap: break-word;
}
.blog-content > *:first-child { margin-top: 0; }
.blog-content p,
.blog-content li { font-size: inherit; line-height: inherit; color: var(--b-text); }
.blog-content p { margin: 0 0 1.3em; }
.blog-content h2,
.blog-content h3,
.blog-content h4 {
	color: var(--b-ink);
	font-weight: 800;
	line-height: 1.25;
	scroll-margin-top: 120px;
}
.blog-content h2 { margin: 2em 0 .6em; font-size: clamp(24px, 3.2vw, 32px); }
.blog-content h3 { margin: 1.7em 0 .5em; font-size: clamp(20px, 2.6vw, 25px); }
.blog-content h4 { margin: 1.5em 0 .4em; font-size: 20px; }
.blog-content a:not(.wp-block-button__link) {
	color: var(--b-orange);
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .25s;
}
.blog-content a:not(.wp-block-button__link):hover { color: #c24d00; }
.blog-content strong { font-weight: 700; color: var(--b-ink); }
.blog-content ul,
.blog-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.blog-content li { margin-bottom: .45em; }
.blog-content img { height: auto; border-radius: var(--b-radius); }
.blog-content figure { margin: 1.8em 0; }
.blog-content figcaption { margin-top: 8px; font-size: 13px; text-align: center; color: var(--b-muted); }
.blog-content blockquote {
	margin: 1.8em 0;
	padding: 18px 24px;
	border-left: 5px solid var(--b-orange);
	border-radius: 0 var(--b-radius) var(--b-radius) 0;
	background: var(--b-soft);
	font-style: italic;
}
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 16px;
}
.blog-content figure.wp-block-table { overflow-x: auto; }
.blog-content th,
.blog-content td { padding: 10px 14px; border: 1px solid var(--b-line); text-align: left; }
.blog-content th { background: var(--b-soft); font-weight: 700; color: var(--b-ink); }
.blog-content hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--b-line); opacity: 1; }
.blog-content code {
	padding: 2px 6px;
	border-radius: 4px;
	background: #f4f1ea;
	font-size: .9em;
}

/* Tartalomjegyzék */
.blog-toc {
	margin: 0 0 2em;
	padding: 20px 26px;
	border: 1px solid #f3e0bd;
	border-left: 5px solid var(--b-orange);
	border-radius: var(--b-radius);
	background: var(--b-soft);
}
.blog-toc__title { margin: 0 0 10px !important; font-size: 18px !important; font-weight: 800; color: var(--b-ink); }
.blog-toc ol { margin: 0; padding-left: 1.3em; }
.blog-toc li { margin-bottom: .3em; font-size: 16px; line-height: 1.5; }
.blog-content .blog-toc a:not(.wp-block-button__link) { color: var(--b-ink) !important; text-decoration: none !important; transition: color .25s; }
.blog-content .blog-toc a:not(.wp-block-button__link):hover { color: var(--b-orange) !important; }

/* Cikk lábléc: címkék, megosztás */
.blog-article__footer {
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--b-line);
}
.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.blog-tags a {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid var(--b-line);
	border-radius: 30px;
	font-size: 13px;
	color: var(--b-muted);
	transition: border-color .25s, color .25s;
}
.blog-tags a:hover { border-color: var(--b-orange); color: var(--b-orange); }

.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.blog-share__label { font-size: 14px; font-weight: 700; color: var(--b-ink); }
.blog-share a,
.blog-share button {
	padding: 7px 16px;
	border: 2px solid var(--b-orange);
	border-radius: 5px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--b-orange);
	cursor: pointer;
	transition: background .3s, color .3s;
}
.blog-share a:hover,
.blog-share button:hover { background: var(--b-orange); color: #fff; }

/* CTA doboz */
.blog-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
	margin: 48px 0;
	padding: 32px 34px;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--b-yellow) 0, var(--b-amber) 100%);
}
.blog-cta__text { flex: 1 1 320px; }
.blog-cta__title { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--b-ink); }
.blog-cta__lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--b-ink); }
.blog-cta__btn {
	display: inline-block;
	padding: 13px 30px;
	border: 2px solid var(--b-ink);
	border-radius: 5px;
	background: var(--b-ink);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	transition: background .35s, color .35s;
}
.blog-cta__btn:hover { background: #fff; color: var(--b-ink); }

/* Előző / következő cikk */
.blog-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 56px;
}
.blog-postnav__item {
	display: block;
	padding: 18px 22px;
	border: 1px solid var(--b-line);
	border-radius: var(--b-radius);
	transition: border-color .25s, box-shadow .25s;
}
.blog-postnav__item:hover { border-color: var(--b-orange); box-shadow: var(--b-shadow); }
.blog-postnav__item--next { grid-column: 2; text-align: right; }
.blog-postnav__label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--b-orange); }
.blog-postnav__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--b-ink); }

/* Kapcsolódó cikkek */
.blog-related { padding: 56px 0 72px; background: var(--b-soft); }
.blog-related__title {
	margin: 0 0 28px;
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 800;
	text-align: center;
	color: var(--b-ink);
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
	.blog-hero { padding: 44px 0 30px; }
	.blog-hero__lead { font-size: 16px; }
	.blog-container { padding-top: 26px; padding-bottom: 52px; }
	.blog-single__head { padding: 30px 0 20px; }
	.blog-content { font-size: 17px; line-height: 1.75; }
	.blog-content table { display: block; overflow-x: auto; }
	.blog-cta { padding: 26px 22px; }
	.blog-cta__btn { width: 100%; text-align: center; }
	.blog-postnav { grid-template-columns: 1fr; }
	.blog-postnav__item--next { grid-column: auto; text-align: left; }
	.blog-related { padding: 40px 0 52px; }
}

/* Mozgáscsökkentés kérése esetén nincs animáció */
@media (prefers-reduced-motion: reduce) {
	.blog-card,
	.blog-card__media img.blog-img,
	.blog-card__more::after,
	.blog-loadmore__btn { transition: none; }
	.blog-card:hover { transform: none; }
	.blog-card-col.is-new { animation: none; }
}