/**
 * Blog — összevont stíluslap (index, kiemelt poszt, kártyarács, lapozó,
 * archívum, keresés, egyedi cikk, megosztás, szerző-doboz, kapcsolódó cikkek).
 *
 * Egyetlen blokk-CSS a teljes blog-élményhez (egy feltételes enqueue ág a
 * functions.php-ban: is_home || is_singular('post') || is_archive || is_search).
 * A kártyák a why-switch feature-kártya mintáját követik (fehér kártya,
 * --radius-panel, 1px --color-border, hover translateY + --shadow-card-hover).
 *
 * BEM-családok: blog-index, blog-featured, blog-list, blog-card, blog-meta,
 * blog-pagination, blog-archive, blog-empty, blog-single, blog-share,
 * blog-author, blog-related.
 */

/* ==========================================================================
   Közös: szekció-wrapper + konténer (a why-switch padding-mintát követi)
   ========================================================================== */

.blog-section {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.blog-section {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.blog-section {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

.blog-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* Cikk-olvasó-mérték (szöveg-tartalom szélessége) */
.blog-measure {
	max-width: 760px;
	margin-inline: auto;
}

/* Hosszú magyar összetett szavak ne csorduljanak túl szűk (mobil) nézetben */
.blog-index__title,
.blog-archive__title,
.blog-single__title,
.blog-featured__title,
.blog-card__title,
.blog-latest__title {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Meta sor — kategória-pill + dátum + olvasási idő (kártyán és cikk-fejlécben)
   ========================================================================== */

.blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.blog-meta__category {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--fs-tag);
	line-height: var(--lh-tag);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.blog-meta__category:hover,
.blog-meta__category:focus-visible {
	background-color: var(--color-primary);
	color: #ffffff;
}

.blog-meta__detail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.blog-meta__dot {
	color: var(--color-border);
}

/* ==========================================================================
   Index — fejléc (eyebrow + cím + bevezető)
   ========================================================================== */

.blog-index__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 780px;
	margin: 0 auto 48px;
}

@media (min-width: 1200px) {
	.blog-index__header {
		margin-bottom: 64px;
	}
}

.blog-index__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.blog-index__intro {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   Kiemelt poszt — full-width split (vizuál + tartalom)
   ========================================================================== */

.blog-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	margin-bottom: 24px;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (min-width: 768px) {
	.blog-featured {
		grid-template-columns: 1.1fr 1fr;
		margin-bottom: 32px;
	}
}

.blog-featured:hover,
.blog-featured:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.blog-featured__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-background-alt);
}

@media (min-width: 768px) {
	.blog-featured__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
	}
}

.blog-featured__image,
.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.blog-featured:hover .blog-featured__image,
.blog-card:hover .blog-card__image {
	transform: scale(1.03);
}

.blog-featured__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px;
}

@media (min-width: 1200px) {
	.blog-featured__body {
		padding: 40px;
		gap: 20px;
	}
}

.blog-featured__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-tag);
	line-height: var(--lh-tag);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.blog-featured__title {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

@media (min-width: 1200px) {
	.blog-featured__title {
		font-size: var(--fs-h2);
		line-height: var(--lh-h2);
	}
}

.blog-featured__title a,
.blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-base);
}

.blog-featured__title a:hover,
.blog-featured__title a:focus-visible,
.blog-card__title a:hover,
.blog-card__title a:focus-visible {
	color: var(--color-primary);
}

.blog-featured__excerpt {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

.blog-featured__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: var(--fs-body-md);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	text-decoration: none;
}

.blog-featured__link:hover,
.blog-featured__link:focus-visible {
	text-decoration: underline;
}

.blog-featured__link i {
	transition: transform var(--transition-base);
}

.blog-featured__link:hover i {
	transform: translateX(3px);
}

/* ==========================================================================
   Kártyarács — 1 → 2 → 3 oszlop (why-switch grid-ritmus)
   ========================================================================== */

.blog-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.blog-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (min-width: 1200px) {
	.blog-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

/* ==========================================================================
   Kártya — média + törzs (why-switch feature-kártya stílus)
   ========================================================================== */

.blog-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover,
.blog-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--color-background-alt);
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	flex: 1 1 auto;
}

@media (min-width: 1200px) {
	.blog-card__body {
		padding: 28px;
	}
}

.blog-card__title {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	letter-spacing: -0.01em;
	margin: 0;
}

.blog-card__excerpt {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* A meta a kártya aljára kerül (egyenletes kártya-magasság) */
.blog-card__footer {
	margin-top: auto;
	padding-top: 4px;
}

/* ==========================================================================
   Kép-placeholder — átlós sraffozás (1. fázis: nincs valódi featured image)
   ========================================================================== */

.blog-media--placeholder {
	background-color: var(--color-background-alt);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--color-border) 0,
		var(--color-border) 1px,
		transparent 1px,
		transparent 11px
	);
}

.blog-media--placeholder::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Lapozó — the_posts_pagination() kimenet stílusozása
   ========================================================================== */

.blog-pagination {
	margin-top: 40px;
}

@media (min-width: 1200px) {
	.blog-pagination {
		margin-top: 56px;
	}
}

.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.blog-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-button);
	border: 1px solid var(--color-border);
	background-color: var(--color-card-bg);
	color: var(--color-text);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

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

.blog-pagination .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
}

/* ==========================================================================
   Archívum / keresés — fejléc
   ========================================================================== */

.blog-archive__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	max-width: 780px;
	margin: 0 auto 48px;
}

.blog-archive__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.blog-archive__description {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

.blog-archive__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body-md);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	text-decoration: none;
}

.blog-archive__back:hover,
.blog-archive__back:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Üres állapot
   ========================================================================== */

.blog-empty {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.blog-empty__title {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0;
}

.blog-empty__text {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   Egyedi cikk — fejléc + featured kép + tartalom-tipográfia
   ========================================================================== */

.blog-single__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	margin-bottom: 32px;
}

.blog-single__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.blog-single__header .blog-meta {
	justify-content: center;
}

.blog-single__featured {
	max-width: 760px;
	margin: 0 auto 40px;
	border-radius: var(--radius-panel-lg);
	overflow: hidden;
	background-color: var(--color-background-alt);
	aspect-ratio: 1200 / 630;
	position: relative;
}

.blog-single__featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Gutenberg-tartalom tipográfia (.blog-single__content > natív blokkok) --- */

.blog-single__content {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.blog-single__content > * {
	margin-block: 0 24px;
}

.blog-single__content > *:last-child {
	margin-bottom: 0;
}

.blog-single__content p {
	color: var(--color-text-muted);
}

.blog-single__content h2 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin-top: 48px;
}

.blog-single__content h3 {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin-top: 36px;
}

.blog-single__content h4 {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin-top: 28px;
}

.blog-single__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog-single__content a:hover,
.blog-single__content a:focus-visible {
	color: var(--color-primary-dark);
}

.blog-single__content ul,
.blog-single__content ol {
	padding-left: 24px;
	color: var(--color-text-muted);
}

.blog-single__content li {
	margin-bottom: 8px;
}

.blog-single__content li::marker {
	color: var(--color-primary);
}

.blog-single__content blockquote {
	margin-inline: 0;
	padding: 8px 0 8px 24px;
	border-left: 3px solid var(--color-primary);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.blog-single__content blockquote p {
	color: var(--color-text);
}

.blog-single__content img,
.blog-single__content .wp-block-image img {
	border-radius: var(--radius-panel);
	height: auto;
}

.blog-single__content figure {
	margin-inline: 0;
}

.blog-single__content figcaption {
	margin-top: 8px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--color-text-muted);
	text-align: center;
}

.blog-single__content pre {
	padding: 20px;
	border-radius: var(--radius-small);
	background-color: var(--color-text);
	color: #ffffff;
	overflow-x: auto;
	font-size: var(--fs-body-sm);
}

.blog-single__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.blog-single__content :not(pre) > code {
	padding: 2px 6px;
	border-radius: 6px;
	background-color: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.blog-single__content hr {
	border: 0;
	height: 1px;
	background-color: var(--color-border);
	margin-block: 40px;
}

.blog-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body-md);
}

.blog-single__content th,
.blog-single__content td {
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	text-align: left;
}

.blog-single__content th {
	background-color: var(--color-background-alt);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

/* Cikk-láblec: címkék */
.blog-single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.blog-single__tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background-color: var(--color-card-bg);
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: border-color var(--transition-base), color var(--transition-base);
}

.blog-single__tag:hover,
.blog-single__tag:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ==========================================================================
   Megosztás
   ========================================================================== */

.blog-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}

.blog-share__label {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.blog-share__buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-share__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-icon-bubble);
	border: 1px solid var(--color-border);
	background-color: var(--color-card-bg);
	color: var(--color-text-muted);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.blog-share__button:hover,
.blog-share__button:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

.blog-share__button i {
	font-size: 18px;
}

.blog-share__button--copied {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: #ffffff;
}

/* ==========================================================================
   Szerző-doboz
   ========================================================================== */

.blog-author {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 40px;
	padding: 28px;
	border-radius: var(--radius-panel);
	border: 1px solid var(--color-border);
	background-color: var(--color-background-alt);
}

.blog-author__avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-icon-bubble);
	overflow: hidden;
	background-color: var(--color-primary-light);
}

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

.blog-author__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.blog-author__eyebrow {
	font-size: var(--fs-tag);
	line-height: var(--lh-tag);
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.blog-author__name {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0;
}

.blog-author__bio {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   Kapcsolódó cikkek
   ========================================================================== */

.blog-related {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background-alt);
}

@media (min-width: 768px) {
	.blog-related {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.blog-related {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

.blog-related__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

.blog-related__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	text-align: center;
	margin: 0 0 40px;
}

/* A blog-related-en belül a kártya háttere fehér marad (a szekció szürke) */
.blog-related .blog-card {
	background-color: var(--color-card-bg);
}

/* ==========================================================================
   Főoldali „Legújabb cikkek" teaser-szekció (front-page.php)
   Világosszürke háttér, fehér kártyák — a design-reference layoutja.
   ========================================================================== */

.blog-latest {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background-alt);
}

@media (min-width: 768px) {
	.blog-latest {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.blog-latest {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

.blog-latest__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

.blog-latest__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 780px;
	margin: 0 auto 48px;
}

@media (min-width: 1200px) {
	.blog-latest__header {
		margin-bottom: 64px;
	}
}

.blog-latest__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.blog-latest__intro {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* A teaser-en belül a kártya háttere fehér marad (a szekció szürke) */
.blog-latest .blog-card {
	background-color: var(--color-card-bg);
}

.blog-latest .section-more-link {
	margin-top: 40px;
}

@media (min-width: 1200px) {
	.blog-latest .section-more-link {
		margin-top: 48px;
	}
}