/* Блок «Блог» на головній (Blog_Showcase) — у стилі блоку «Останні акції» */
.bl {
	--bl-accent: var(--ds-primary-color, #2abd13);
	--bl-text: #1d2433;
	--bl-muted: #7a8291;
	--bl-soft: #f5f7fa;
	display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 32px; align-items: start; padding: 32px;
}
.bl.content-block { border-radius: 20px; }
.bl-title { display: flex; align-items: center; gap: 10px; color: var(--bl-text); font-size: 26px; font-weight: 700; line-height: 1.2; }
.bl-title svg { flex: 0 0 auto; color: var(--bl-accent); }
.bl-text { margin: 16px 0 0; color: var(--bl-text); font-size: 16px; line-height: 1.5; }
.bl-all {
	display: inline-flex; align-items: center; height: 52px; margin-top: 24px; padding: 0 26px; border-radius: 26px;
	background: var(--bl-accent); color: #fff !important; font-size: 17px; font-weight: 600; text-decoration: none !important; transition: filter .15s;
}
.bl-all:hover { filter: brightness(.94); }

.bl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bl-card { display: flex; flex-direction: column; min-width: 0; color: var(--bl-text) !important; text-decoration: none !important; }
.bl-img { position: relative; display: block; aspect-ratio: var(--bl-ratio, 16 / 9); overflow: hidden; border-radius: 12px; background: var(--bl-soft); }
.bl-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bl-card:hover .bl-img img { transform: scale(1.04); }
.bl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 10px; }
.bl-cat { display: inline-block; max-width: 100%; overflow: hidden; padding: 4px 12px; border-radius: 14px; background: #E8F1FD; color: #1E66D0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.bl-card:nth-child(3n+2) .bl-cat { background: #F1EAFE; color: #7B3FE4; }
.bl-card:nth-child(3n+3) .bl-cat { background: #FDECF3; color: #B0245F; }
.bl-date { color: var(--bl-muted); font-size: 14px; }
.bl-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 18px; font-weight: 600; line-height: 1.4; transition: color .15s; }
.bl-card:hover .bl-name { color: var(--bl-accent); }
.bl-short { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 8px; color: var(--bl-muted); font-size: 14px; line-height: 1.5; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--bl-muted); font-size: 13px; }
.bl-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bl-meta svg { flex: none; opacity: .8; }

@media (max-width: 1199.98px) {
	.bl { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
	.bl-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
	.bl-text { flex: 1 0 100%; order: 2; margin: 0; }
	.bl-all { order: 3; margin: 0; }
}
@media (max-width: 767.98px) {
	.bl { padding: 16px; }
	.bl.content-block { border-radius: 16px; }
	.bl-title { font-size: 21px; }
	.bl-all { height: 44px; font-size: 15px; }
	.bl-list { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
	.bl-list::-webkit-scrollbar { display: none; }
	.bl-card { scroll-snap-align: start; }
	.bl-name { font-size: 16px; }
	.bl-tags { margin: 12px 0 8px; }
}

.dark-theme .bl { --bl-text: #f1f3f5; --bl-muted: #9aa1a9; --bl-soft: #222; }