/* ==========================================================================
   imotigreece-design — Блог
   Обхват: архива (мрежа + списък с голямо изображение) и единична публикация.
   Тема g5-beyot: .blog-wrap, article.post-grid / .post-large-image, .single-blog-wrap
   Всички визуални стойности идват от tokens.css — без hardcoded цветове.
   Спецификация: design/DESIGN.md §4 (Property Card — образец), §7, §8.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Архив — мрежа 3 / 2 / 1 колони
   -------------------------------------------------------------------------- */
.imotigreece-design .blog-wrap.row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 28px;
	margin-left: 0;
	margin-right: 0;
}

/* clearfix псевдо-елементите стават grid items и заемат празна клетка/редове. */
.imotigreece-design .blog-wrap.row::before,
.imotigreece-design .blog-wrap.row::after,
.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap::before,
.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap::after {
	display: none;
}

/* Нулираме bootstrap колоните — в grid контекст те пречат. */
.imotigreece-design .blog-wrap.row > article {
	float: none;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1199px) {
	.imotigreece-design .blog-wrap.row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.imotigreece-design .blog-wrap.row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   2. Карта на публикация — бяло, рамка, радиус 3px, hover повдигане
   -------------------------------------------------------------------------- */
.imotigreece-design .blog-wrap .post-grid {
	background-color: var(--ig-surface-card);
	border: 1px solid var(--ig-border);
	border-radius: var(--ig-radius);
	overflow: hidden;
	box-shadow: var(--ig-shadow-1);
	transition: transform var(--ig-t-slow) var(--ig-ease),
	            box-shadow var(--ig-t-slow) var(--ig-ease);
}

.imotigreece-design .blog-wrap .post-grid:hover {
	transform: translateY(-3px);
	box-shadow: var(--ig-shadow-3);
}

/* Вътрешната обвивка е grid — корицата и мета лентата делят една клетка. */
.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Корица — фиксирано съотношение 16/9, за да е равна редицата
   -------------------------------------------------------------------------- */
.imotigreece-design .blog-wrap .post-grid .entry-thumb-wrap {
	position: relative;
	overflow: hidden;
}

.imotigreece-design .blog-wrap .post-grid .entry-thumbnail {
	aspect-ratio: 16 / 9;
}

.imotigreece-design .blog-wrap .post-grid .entry-thumbnail a {
	display: block;
	height: 100%;
}

.imotigreece-design .blog-wrap .post-grid .entry-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   4. Мета лента — полупрозрачен тъмен ред в долната част на снимката
   -------------------------------------------------------------------------- */
/* Общо нулиране на темата: тя прави лентата плътна, с float-ове и ширини.
   Скоупът .blog-wrap / .post-single вдига специфичността над правилата на темата
   (вкл. мобилните `@media` с `> div:first-child`). */
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta,
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta * {
	float: none;
	width: auto;
	font-family: var(--ig-font-body);
	font-size: 13px;
	line-height: 1.45;
}

.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta i {
	float: none;
	margin: 0 4px 0 0;
	font-size: 14px;
	line-height: 1;
	opacity: .85;
}

.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta > div,
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta > div:first-child {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
}

.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta a {
	color: inherit;
	text-decoration: none;
}

.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta a:hover {
	text-decoration: underline;
}

/* Разделител между видимите елементи. */
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta > div + div::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin: 0 10px 0 4px;
	background-color: currentColor;
	opacity: .45;
}

/* Скриване на празните елементи (автор без име, „0 comments“). */
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta > div:empty,
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta .entry-meta-author:has(a:empty),
.imotigreece-design :is(.blog-wrap, .post-single) .entry-post-meta .entry-meta-comment:has(a[href*="#respond"]) {
	display: none;
}

/* --- Вариант „върху снимката“ (мрежовият архив) ------------------------- */
.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap > .entry-thumb-wrap {
	grid-area: 1 / 1 / 2 / 2;
}

.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap > .entry-post-meta {
	grid-area: 1 / 1 / 2 / 2;
	align-self: end;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 16px;
	color: var(--ig-text-on-dark);
	/* Полупрозрачен тъмен ред: цветът пак е само от токена (color-mix намалява
	   алфата му), за да прозива снимката под лентата. */
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--ig-surface-dark) 92%, transparent),
		color-mix(in srgb, var(--ig-surface-dark) 45%, transparent) 60%,
		transparent
	);
}

.imotigreece-design .blog-wrap .post-grid > .entry-content-wrap > .entry-content-inner {
	grid-area: 2 / 1 / 3 / 2;
}

/* --- Вариант „дискретен ред“ (списък с голямо изображение, вложени постове) */
.imotigreece-design .archive-large-image .entry-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--ig-s-5);
	padding: 0 0 var(--ig-s-3);
	color: var(--ig-text-tertiary);
	background: none;
	background-image: none;
	border-bottom: 1px solid var(--ig-border-subtle);
}

/* --------------------------------------------------------------------------
   5. Текст в картата — заглавие 2 реда, резюме 3 реда
   -------------------------------------------------------------------------- */
.imotigreece-design .blog-wrap .entry-content-inner {
	padding: var(--ig-s-5);
	border: 0;
}

.imotigreece-design .blog-wrap .entry-info-post {
	margin-bottom: var(--ig-s-3);
}

.imotigreece-design .blog-wrap .entry-post-title {
	margin: 0;
	font-family: var(--ig-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--ig-text);
}

.imotigreece-design .blog-wrap .entry-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.imotigreece-design .blog-wrap .entry-post-title a:hover {
	color: var(--ig-link);
}

.imotigreece-design .blog-wrap .entry-excerpt {
	max-height: none;
	margin: 0;
	overflow: hidden;
}

.imotigreece-design .blog-wrap .entry-excerpt p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ig-text-tertiary);
}

/* „Прочетете“ (темата го подава през gettext, не се пипа текстът). */
.imotigreece-design .blog-wrap .blog-read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--ig-s-3);
	font-family: var(--ig-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--ig-link);
	text-decoration: none;
}

.imotigreece-design .blog-wrap .blog-read-more::after {
	content: "→";
	transition: transform var(--ig-t-fast) ease;
}

.imotigreece-design .blog-wrap .blog-read-more:hover::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. Единична публикация — тясна колона, серифно заглавие, четим текст
   -------------------------------------------------------------------------- */
.imotigreece-design .single-blog-wrap .single-blog-inner {
	max-width: var(--ig-container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.imotigreece-design .post-single .entry-post-title {
	margin: 0 0 var(--ig-s-5);
	font-family: var(--ig-font-display);
	font-size: var(--ig-fs-display);
	font-weight: 600;
	line-height: var(--ig-lh-display);
	letter-spacing: -0.01em;
	color: var(--ig-text);
}

/* Мета редът е дискретен — не тъмна лента. */
.imotigreece-design .post-single .entry-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--ig-s-4);
	padding: 0;
	color: var(--ig-text-tertiary);
	background: none;
	background-image: none;
	border: 0;
}

.imotigreece-design .post-single .entry-post-meta a {
	color: var(--ig-text-tertiary);
}

/* Снимката на публикацията — същото съотношение като в архива. */
.imotigreece-design .post-single .entry-thumb-wrap {
	overflow: hidden;
	margin-bottom: var(--ig-s-6);
	border-radius: var(--ig-radius-lg);
}

.imotigreece-design .post-single .entry-thumbnail {
	aspect-ratio: 16 / 9;
}

.imotigreece-design .post-single .entry-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. Типография на съдържанието (параграфи, списъци, цитати, връзки, таблици)
   -------------------------------------------------------------------------- */
.imotigreece-design .single-blog-wrap .entry-content {
	font-family: var(--ig-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ig-text-secondary);
}

.imotigreece-design .single-blog-wrap .entry-content p {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ig-text-secondary);
}

.imotigreece-design .single-blog-wrap .entry-content :is(h2, h3, h4) {
	font-family: var(--ig-font-body);   /* под 28px → винаги Golos Text */
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ig-text);
}

.imotigreece-design .single-blog-wrap .entry-content h2 {
	margin: var(--ig-s-7) 0 var(--ig-s-4);
	font-size: var(--ig-fs-section);
	line-height: var(--ig-lh-heading);
}

.imotigreece-design .single-blog-wrap .entry-content h3 {
	margin: var(--ig-s-6) 0 var(--ig-s-3);
	font-size: var(--ig-fs-subhead);
	line-height: 1.4;
}

.imotigreece-design .single-blog-wrap .entry-content h4 {
	margin: var(--ig-s-5) 0 var(--ig-s-3);
	font-size: var(--ig-fs-body-sm);
	line-height: 1.45;
}

.imotigreece-design .single-blog-wrap .entry-content a {
	color: var(--ig-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.imotigreece-design .single-blog-wrap .entry-content a:hover {
	color: var(--ig-link-hover);
}

.imotigreece-design .single-blog-wrap .entry-content :is(ul, ol) {
	margin: 0 0 20px;
	padding-left: var(--ig-s-5);
}

.imotigreece-design .single-blog-wrap .entry-content li {
	margin-bottom: var(--ig-s-2);
	line-height: 1.65;
}

.imotigreece-design .single-blog-wrap .entry-content ul li::marker {
	color: var(--ig-accent-dark);
}

.imotigreece-design .single-blog-wrap .entry-content blockquote {
	margin: var(--ig-s-6) 0;
	padding: var(--ig-s-2) 0 var(--ig-s-2) var(--ig-s-5);
	border-left: 3px solid var(--ig-accent-dark);
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
	color: var(--ig-text-secondary);
}

.imotigreece-design .single-blog-wrap .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.imotigreece-design .single-blog-wrap .entry-content :is(img, video) {
	max-width: 100%;
	height: auto;
	border-radius: var(--ig-radius-lg);
}

.imotigreece-design .single-blog-wrap .entry-content :is(figure, .wp-caption) {
	max-width: 100%;
	margin: 0 0 var(--ig-s-5);
}

.imotigreece-design .single-blog-wrap .entry-content figcaption,
.imotigreece-design .single-blog-wrap .entry-content .wp-caption-text {
	margin-top: var(--ig-s-2);
	font-size: 13px;
	color: var(--ig-text-tertiary);
}

/* Таблици — пълна ширина, без хоризонтален скрол (DESIGN §8). */
.imotigreece-design .single-blog-wrap .entry-content table {
	width: 100%;
	margin: 0 0 var(--ig-s-5);
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.imotigreece-design .single-blog-wrap .entry-content :is(th, td) {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ig-border-subtle);
}

.imotigreece-design .single-blog-wrap .entry-content th {
	font-weight: 600;
	color: var(--ig-text);
	background-color: var(--ig-surface-alt);
	border-bottom-color: var(--ig-border);
}

.imotigreece-design .single-blog-wrap .entry-content :is(code, pre) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
}

.imotigreece-design .single-blog-wrap .entry-content pre {
	margin: 0 0 var(--ig-s-5);
	padding: var(--ig-s-4);
	overflow: auto;
	color: var(--ig-text-secondary);
	background-color: var(--ig-surface-alt);
	border: 1px solid var(--ig-border);
	border-radius: var(--ig-radius);
}

.imotigreece-design .single-blog-wrap .entry-content hr {
	margin: var(--ig-s-7) 0;
	border: 0;
	border-top: 1px solid var(--ig-border-subtle);
}

/* --------------------------------------------------------------------------
   8. Подобни публикации
   -------------------------------------------------------------------------- */
.imotigreece-design .post-related-wrap {
	margin-top: var(--ig-s-7);
}

.imotigreece-design .post-related-wrap .blog-line-title {
	margin-bottom: var(--ig-s-5);
	font-family: var(--ig-font-body);
	font-size: var(--ig-fs-section);
	font-weight: 600;
	line-height: var(--ig-lh-heading);
	color: var(--ig-text);
}

/* --------------------------------------------------------------------------
   9. prefers-reduced-motion — без движения
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.imotigreece-design .blog-wrap .post-grid,
	.imotigreece-design .blog-wrap .blog-read-more::after {
		transition: none !important;
	}

	.imotigreece-design .blog-wrap .post-grid:hover {
		transform: none !important;
	}
}