/* ========================================================================
 * LawHub Executive Premium Card Stylesheet
 *
 * ჩასატვირთად:
 *   wp_enqueue_style( 'lawhub-cards',
 *       get_template_directory_uri() . '/assets/css/lawhub-cards.css' );
 * ======================================================================== */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
	--lh-primary:        #1e2022;
	--lh-accent:         #8a0d14;       /* Deep Burgundy — რეალური accent ფერი */
	--lh-accent-nav:     #14213D;       /* Dark Navy — ნავის სპეციფიური */
	--lh-text-muted:     #8e9aa8;
	--lh-bg-card:        #ffffff;
	--lh-border-subtle:  rgba(0, 0, 0, 0.05);
	--lh-shadow-base:    0 4px 20px rgba(0, 0, 0, 0.02);
	--lh-shadow-hover:   0 15px 35px rgba(30, 32, 34, 0.04);
	--lh-transition:    cubic-bezier(0.25, 1, 0.5, 1);
	--lh-radius:         8px;
	--lh-radius-sm:      4px;
}

/* ── 1. LUXURY MINIMALIST NAVIGATION BAR ───────────────────────────────────── */
.lh-nav-container {
	width: 100%;
	margin-bottom: 45px;
	padding: 0 15px;
	display: flex;
	justify-content: center;
}

.lh-nav-bar {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	width: 100%;
	max-width: 900px;
	justify-content: center;
	gap: 35px;
	flex-wrap: wrap;
	padding-bottom: 5px;
	background: transparent;
}

.lh-nav-bar .lh-nav-btn {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	outline: none;
	text-shadow: none;
	color: var(--lh-text-muted);
	padding: 12px 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2px;
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.35s var(--lh-transition);
	-webkit-tap-highlight-color: transparent;
}

.lh-nav-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.35s var(--lh-transition);
	flex-shrink: 0;
}

.lh-nav-bar .lh-nav-btn:hover,
.lh-nav-bar .lh-nav-btn[aria-pressed="true"] {
	color: var(--lh-primary);
}

.lh-nav-btn:hover svg {
	transform: translateY(-1px);
}

.lh-nav-btn::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--lh-accent-nav);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--lh-transition);
}

.lh-nav-bar .lh-nav-btn:hover::after,
.lh-nav-bar .lh-nav-btn[aria-pressed="true"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

.lh-nav-bar .lh-nav-btn[aria-pressed="true"] {
	font-weight: 600;
}

.lh-nav-bar .lh-nav-btn.lh-exam-btn {
	color: var(--lh-accent-nav);
	font-weight: 600;
}

/* ── 2. PREMIUM CARD ARCHITECTURE ──────────────────────────────────────────── */
.post-col {
	margin-bottom: 30px;
	display: flex;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s var(--lh-transition),
	            transform 0.4s var(--lh-transition);
}

.post-col.lh-switching {
	opacity: 0;
	transform: translateY(12px);
}

.custom-post-card {
	display: flex;
	flex-direction: column;
	background: var(--lh-bg-card);
	border: 1px solid var(--lh-border-subtle);
	border-radius: var(--lh-radius);
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-shadow: var(--lh-shadow-base);
	transition: box-shadow 0.4s var(--lh-transition),
	            border-color 0.4s var(--lh-transition);
}

.custom-post-card:hover {
	border-color: rgba(30, 32, 34, 0.08);
	box-shadow: var(--lh-shadow-hover);
}

/* Focus ring for keyboard users */
.custom-post-card:focus-within {
	outline: 2px solid var(--lh-accent);
	outline-offset: 2px;
}

/* ── Image Container ──────────────────────────────────────────────────────── */
.post-img-container {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	background-color: #f8f9fa;
	transition: all 0.4s var(--lh-transition);
}

.post-img-container.archive { height: 230px; }
.post-img-container.single  { height: 460px; margin-bottom: 25px; border-radius: var(--lh-radius); }

.post-img-link {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s var(--lh-transition);
}

.post-img-full {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	cursor: zoom-in;
	transition: transform 0.7s var(--lh-transition);
}

.custom-post-card:hover .post-img-link,
.custom-post-card:hover .post-img-full {
	transform: scale(1.02);
}

/* ── Watermark ─────────────────────────────────────────────────────────────── */
.post-watermark {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	z-index: 5;
	background: rgba(255, 255, 255, 0.96);
	padding: 5px;
	border-radius: var(--lh-radius-sm);
	box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* ── Category Badge ────────────────────────────────────────────────────────── */
.category-badge-wrap {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 5;
}

.cat-links a {
	background: rgba(30, 32, 34, 0.85);
	color: #ffffff;
	padding: 5px 12px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: var(--lh-radius-sm);
	backdrop-filter: blur(4px);
	transition: background-color 0.3s ease;
}

.custom-post-card:hover .cat-links a {
	background: var(--lh-accent);
}

/* ── Content Wrapper ──────────────────────────────────────────────────────── */
.content-wrapper-flex {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	transition: padding 0.4s var(--lh-transition);
}

/* ── Title ──────────────────────────────────────────────────────────────────── */
.entry-title {
	margin: 0 0 12px 0;
}

.entry-title a {
	color: var(--lh-primary);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 48px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.entry-title a:hover,
.entry-title a:focus-visible {
	color: var(--lh-accent);
}

/* ── Author Meta ───────────────────────────────────────────────────────────── */
.author-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--lh-text-muted);
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding-bottom: 12px;
}

.author-meta a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--lh-primary);
	font-weight: 600;
	text-decoration: none;
}

.author-meta a:focus-visible {
	outline: 2px solid var(--lh-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.author-meta img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

/* ── Entry Content ─────────────────────────────────────────────────────────── */
.entry-content {
	font-size: 14px;
	line-height: 1.6;
	color: #4a5568;
	margin-bottom: 20px;
	text-align: justify;
}

.entry-excerpt-grid { display: block; }
.entry-excerpt-list { display: none; }

/* ── Card Footer ───────────────────────────────────────────────────────────── */
.custom-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.modern-btn {
	color: var(--lh-accent);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	padding-bottom: 2px;
}

.modern-btn::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--lh-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--lh-transition);
}

.custom-post-card:hover .modern-btn::after {
	transform: scaleX(1);
}

.modern-btn:focus-visible {
	outline: 2px solid var(--lh-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.follow-btn {
	color: var(--lh-text-muted);
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.follow-btn svg { width: 13px; height: 13px; fill: currentColor; }
.follow-btn:hover { color: var(--lh-primary); }
.follow-btn:focus-visible {
	outline: 2px solid var(--lh-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── 3. LUXURY EDITORIAL LIST VIEW ─────────────────────────────────────────── */
.is-list-view .post-col {
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom: 25px;
}

.is-list-view .custom-post-card {
	flex-direction: row;
	align-items: center;
	padding: 16px;
}

.is-list-view .post-img-container.archive {
	width: 300px;
	height: 190px;
	border-radius: 6px;
}

.is-list-view .content-wrapper-flex {
	padding: 10px 0 10px 28px;
}

.is-list-view .entry-excerpt-grid { display: none; }
.is-list-view .entry-excerpt-list { display: block; }

/* ── 4. EXAM HUB FULLSCREEN MODAL ──────────────────────────────────────────── */
.lh-exam-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: -webkit-fill-available;
	background: #ffffff;
	z-index: 99999999;
	display: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.lh-exam-modal[aria-hidden="false"] {
	display: block;
}

/* Smooth fade-in */
.lh-exam-modal.is-opening {
	animation: lhModalIn 0.3s var(--lh-transition) forwards;
}

@keyframes lhModalIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.lh-exam-modal-header {
	position: fixed;
	top: 15px;
	right: 20px;
	z-index: 100000000;
}

.lh-exam-close {
	background: #1C2F52;
	color: white;
	border: none;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(200, 0, 0, 0.25);
	transition: background 0.2s, transform 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.lh-exam-close:active { transform: scale(0.95); }
.lh-exam-close:hover { background: #cc0000; }
.lh-exam-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.lh-exam-iframe-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.lh-exam-iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* ── Loading overlay ───────────────────────────────────────────────────────── */
.lh-loading-card { opacity: 0.3; }

/* ── Screen-reader only (SEO img fallback) ───────────────────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── 5. MEDIA QUERIES ─────────────────────────────────────────────────────── */

@media (max-width: 991px) {
	.is-list-view .post-img-container.archive {
		width: 240px;
		height: 170px;
	}
	.lh-nav-bar { gap: 20px; }
}

@media (max-width: 767px) {
	.lh-nav-bar #gridBtn,
	.lh-nav-bar #listBtn,
	.lh-nav-bar #latestBtn,
	.lh-nav-bar #archiveBtn {
		display: none;
	}

	.lh-nav-container {
		margin-bottom: 25px;
	}

	.lh-nav-bar {
		border-bottom: none;
	}

	.lh-nav-bar .lh-nav-btn.lh-exam-btn {
		background: var(--lh-accent-nav);
		color: #ffffff;
		padding: 12px 30px;
		border-radius: 50px;
		font-size: 14px;
		box-shadow: 0 4px 15px rgba(20, 33, 61, 0.2);
		width: 100%;
		justify-content: center;
	}

	.lh-nav-bar .lh-nav-btn.lh-exam-btn::after { display: none; }

	.is-list-view .custom-post-card {
		flex-direction: column;
		padding: 0;
	}

	.is-list-view .post-img-container.archive {
		width: 100%;
		height: 210px;
		border-radius: 0;
	}

	.is-list-view .content-wrapper-flex {
		padding: 20px;
	}

	.lh-exam-modal-header {
		top: 10px;
		right: 10px;
	}

	.lh-exam-close {
		padding: 8px 15px;
		font-size: 13px;
	}
}

/* ── 6. REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}