/* =========================================================================
   05 — VIDEO / BLOG CARDS  (homepage grid + archives)
   Flatsome .box-blog-post boxes upgraded to premium dark cards with gold-glow
   hover, image zoom, category chip and a play overlay for video posts.
   ========================================================================= */

.box.box-blog-post {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
		var(--s67-bg-elev-1);
	border: 1px solid var(--s67-border-strong);
	border-radius: var(--s67-radius-md);
	overflow: hidden;
	box-shadow: var(--s67-shadow-md);
	transition:
		transform var(--s67-dur-base) var(--s67-ease),
		box-shadow var(--s67-dur-base) var(--s67-ease),
		border-color var(--s67-dur-base) var(--s67-ease);
}
.col.post-item .col-inner > a.plain { color: inherit; }

.box.box-blog-post.has-hover:hover {
	transform: translateY(-4px);
	border-color: var(--s67-border-gold);
	box-shadow:
		var(--s67-shadow-lg),
		0 16px 40px -16px var(--s67-gold-glow),
		inset 0 2px 0 var(--s67-gold-300);
}

/* Let the post column be a clean passthrough so the card's own radius +
   shadow render fully (old theme CSS clipped .col-inner with overflow:hidden). */
.row > .col.post-item > .col-inner,
.col.post-item > .col-inner {
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	border-radius: 0 !important;
}

/* Image */
.box-blog-post .box-image {
	position: relative;
	border-radius: 0 !important;
	overflow: hidden;
	background: var(--s67-bg-elev-2);
}
.box-blog-post .box-image img {
	transition: transform var(--s67-dur-slow) var(--s67-ease), filter var(--s67-dur-base) var(--s67-ease);
}
.box-blog-post.has-hover:hover .box-image img {
	transform: scale(1.06);
	filter: brightness(1.06) saturate(1.08);
}
/* Legibility gradient at the bottom of the thumb */
.box-blog-post .box-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Play overlay for video posts */
.has-post-icon .box-image::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 60px; height: 60px;
	transform: translate(-50%, -50%) scale(0.8);
	border-radius: var(--s67-radius-pill);
	background:
		rgba(10, 10, 13, 0.55)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='%23f4c430'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
		center / 26px no-repeat;
	border: 2px solid var(--s67-border-gold);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--s67-dur-base) var(--s67-ease), transform var(--s67-dur-base) var(--s67-ease);
	z-index: 2;
	pointer-events: none;
}
.has-post-icon .box.has-hover:hover .box-image::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Text block */
.box-blog-post .box-text {
	position: relative;
	padding: var(--s67-space-4) var(--s67-space-4) var(--s67-space-5) !important;
	background: transparent;
}
/* Gold hairline separating the thumbnail from the text */
.box-blog-post .box-text::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--s67-space-4);
	right: var(--s67-space-4);
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(241, 194, 51, 0.5), transparent);
	opacity: 0.6;
	transition: opacity var(--s67-dur-base) var(--s67-ease);
}
.box.box-blog-post.has-hover:hover .box-text::before { opacity: 1; }

/* Category chip */
.box-blog-post .cat-label,
.box-blog-post .tag-label {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--s67-radius-pill);
	background-image: var(--s67-grad-gold-soft);
	color: var(--s67-gold-100) !important;
	border: 1px solid var(--s67-border-gold);
	font-weight: 700;
	font-size: 10.5px !important;
	letter-spacing: 0.04em;
	opacity: 1 !important;
	margin-bottom: var(--s67-space-2);
}

/* Title */
.box-blog-post .post-title {
	color: var(--s67-text) !important;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 var(--s67-space-1);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--s67-dur-fast) var(--s67-ease);
}
.box-blog-post.has-hover:hover .post-title { color: var(--s67-gold-100) !important; }

/* Meta */
.box-blog-post .post-meta { color: var(--s67-text-dim) !important; }