/*
 * Journal (Blog Index) Redesign — Phase 5
 * "Dark Forest / Imperial Gold / Cream"
 * Loaded only on is_home() / is_category() / is_tag() via NOVAMIRA_JOURNAL_REDESIGN.
 * Ported from design bundle styles.css (JOURNAL INDEX section), scoped under
 * .eh-journal to avoid collisions with the Ecome theme. Newsletter strip cut
 * (no mailing-list system yet); read-time removed everywhere per project rules.
 */

.eh-journal {
	--eh-forest-900: #0d2a20;
	--eh-forest-800: #14392c;
	--eh-forest-700: #1b4332;
	--eh-herb-600: #2d6a4f;
	--eh-herb-500: #3b8466;
	--eh-gold-600: #b78712;
	--eh-gold-500: #d4a017;
	--eh-gold-400: #e6bf4f;
	--eh-cream-50: #faf7f1;
	--eh-cream-100: #f8f5f0;
	--eh-cream-200: #efe8d9;
	--eh-ink-900: #14201a;
	--eh-ink-700: #2f3a32;
	--eh-ink-500: #6b7368;
	--eh-line: rgba(20, 32, 26, 0.12);
	--eh-line-dark: rgba(243, 228, 182, 0.18);
	--eh-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--eh-font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--eh-font-body);
	color: var(--eh-ink-700);
	background: var(--eh-cream-50);
}

.eh-journal *,
.eh-journal *::before,
.eh-journal *::after { box-sizing: border-box; }

.eh-journal img { max-width: 100%; height: auto; display: block; }
.eh-journal a { color: inherit; text-decoration: none; }
.eh-journal button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.eh-journal h1, .eh-journal h2, .eh-journal h3, .eh-journal h4 {
	font-family: var(--eh-font-display);
	color: var(--eh-forest-900);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0;
}

.eh-journal .eh-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 40px;
}
@media (max-width: 720px) { .eh-journal .eh-container { padding: 0 20px; } }

/* === Page head === */
.eh-jhead { background: var(--eh-forest-900); color: var(--eh-cream-100); padding: 90px 0 80px; position: relative; overflow: hidden; }
.eh-jhead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(45, 106, 79, 0.4), transparent 60%); }
.eh-jhead-inner { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: end; }
.eh-jhead h1 { color: var(--eh-cream-100); font-size: clamp(48px, 6vw, 88px); font-weight: 400; }
.eh-jhead h1 .gold { color: var(--eh-gold-500); font-style: italic; font-weight: 400; }
.eh-jhead .eh-breadcrumbs { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(243, 228, 182, 0.55); margin-bottom: 20px; }
.eh-jhead .eh-breadcrumbs a { color: var(--eh-gold-400); }
.eh-jhead .eh-breadcrumbs .sep { margin: 0 12px; opacity: 0.5; }
.eh-jhead .eh-issue-tag { display: inline-flex; align-items: center; gap: 14px; font-family: var(--eh-font-display); font-style: italic; color: var(--eh-gold-400); font-size: 22px; margin-bottom: 16px; }
.eh-jhead .eh-issue-tag::before { content: ""; width: 28px; height: 1px; background: var(--eh-gold-500); }
.eh-jhead .eh-head-meta { text-align: right; color: rgba(243, 228, 182, 0.65); }
.eh-jhead .eh-head-meta p { margin: 0 0 22px; max-width: 360px; margin-left: auto; line-height: 1.7; font-size: 15px; }
.eh-jhead .eh-stats { display: flex; gap: 30px; justify-content: flex-end; }
.eh-jhead .eh-stat-pair .n { font-family: var(--eh-font-display); font-size: 42px; color: var(--eh-gold-500); display: block; line-height: 1; }
.eh-jhead .eh-stat-pair .l { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(243, 228, 182, 0.5); margin-top: 6px; display: block; }
@media (max-width: 800px) { .eh-jhead-inner { grid-template-columns: 1fr; } .eh-jhead .eh-head-meta { text-align: left; } .eh-jhead .eh-head-meta p { margin-left: 0; } .eh-jhead .eh-stats { justify-content: flex-start; } }

/* === Topic chip filter row === */
.eh-jfilter { background: var(--eh-cream-100); border-bottom: 1px solid var(--eh-line); }
.eh-jfilter-inner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 22px 0; }
.eh-jfilter-inner .lbl { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; color: var(--eh-ink-500); margin-right: 8px; }
.eh-jchip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--eh-ink-700); background: transparent;
	border: 1px solid var(--eh-line);
	transition: all .2s;
	cursor: pointer;
}
.eh-jchip:hover { border-color: var(--eh-forest-700); color: var(--eh-forest-900); }
.eh-jchip .ct { font-size: 10px; color: var(--eh-gold-600); font-weight: 700; letter-spacing: 0.1em; }
.eh-jchip.on { background: var(--eh-forest-900); color: var(--eh-gold-400); border-color: var(--eh-forest-900); }
.eh-jchip.on .ct { color: var(--eh-gold-400); }
.eh-jsort { margin-left: auto; font-size: 12px; color: var(--eh-ink-500); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.eh-jsort strong { color: var(--eh-forest-900); }

/* === Editor's pick — large feature === */
.eh-jfeature {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
	border: 1px solid var(--eh-line);
	background: var(--eh-cream-50);
	margin: 70px 0 80px;
	transition: all .3s;
}
.eh-jfeature:hover { border-color: var(--eh-gold-500); }
.eh-jfeature:hover .eh-jf-img img { transform: scale(1.03); }
.eh-jf-img {
	background: var(--eh-cream-100);
	position: relative;
	min-height: 460px;
	display: flex; align-items: center; justify-content: center;
	border-right: 1px solid var(--eh-line);
	overflow: hidden;
}
.eh-jf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.eh-jf-img .eh-jf-ill { width: 60%; height: 60%; color: var(--eh-herb-600); display: flex; align-items: center; justify-content: center; }
.eh-jf-img .eh-jf-ill svg { width: 100%; height: 100%; }
.eh-jf-img .tag {
	position: absolute; top: 24px; left: 24px; z-index: 2;
	background: var(--eh-gold-500); color: var(--eh-forest-900);
	padding: 10px 16px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700;
}
.eh-jf-img .corner {
	position: absolute; bottom: 24px; right: 24px; z-index: 2;
	font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eh-cream-100);
	background: rgba(13, 42, 32, 0.55); padding: 6px 10px;
}
.eh-jf-body { padding: 50px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.eh-jf-cat { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.eh-jf-cat::before { content: ""; width: 22px; height: 1px; background: var(--eh-gold-500); }
.eh-jf-body h2 { font-size: clamp(32px, 3.2vw, 44px); margin: 0 0 18px; line-height: 1.1; }
.eh-jf-body h2 .gold { color: var(--eh-gold-600); font-style: italic; font-weight: 400; }
.eh-jf-body p { font-size: 15px; line-height: 1.75; color: var(--eh-ink-700); margin: 0; }
.eh-jf-byline { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--eh-line); }
.eh-jf-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--eh-forest-700); color: var(--eh-gold-400); display: inline-flex; align-items: center; justify-content: center; font-family: var(--eh-font-display); font-size: 15px; font-weight: 500; flex-shrink: 0; }
.eh-jf-byline .who { font-family: var(--eh-font-display); font-size: 17px; color: var(--eh-forest-900); }
.eh-jf-byline .role { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eh-ink-500); font-weight: 700; margin-top: 2px; }
.eh-jf-byline .eh-jf-read { margin-left: auto; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--eh-forest-900); display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--eh-gold-500); padding-bottom: 4px; }
@media (max-width: 900px) { .eh-jfeature { grid-template-columns: 1fr; } .eh-jf-img { border-right: 0; border-bottom: 1px solid var(--eh-line); min-height: 320px; } .eh-jf-body { padding: 32px; } }

/* === Article cards grid === */
.eh-jsection { padding: 0 0 0; }
.eh-jsection--grid { padding-top: 70px; }
.eh-jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 960px) { .eh-jgrid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 600px) { .eh-jgrid { grid-template-columns: 1fr; } }

.eh-jcard { display: flex; flex-direction: column; background: var(--eh-cream-50); border: 1px solid transparent; transition: all .3s; }
.eh-jcard:hover { border-color: var(--eh-gold-500); }
.eh-jcard:hover .eh-jc-img img { transform: scale(1.04); }
.eh-jcard:hover h3 { color: var(--eh-gold-600); }
.eh-jc-img { aspect-ratio: 4/3; background: var(--eh-cream-100); border: 1px solid var(--eh-line); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.eh-jcard:hover .eh-jc-img { border-color: var(--eh-gold-500); }
.eh-jc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.eh-jc-ill { width: 55%; height: 55%; color: var(--eh-herb-600); display: flex; align-items: center; justify-content: center; }
.eh-jc-ill svg { width: 100%; height: 100%; }
.eh-jc-tag { position: absolute; top: 14px; left: 14px; background: var(--eh-forest-900); color: var(--eh-gold-400); padding: 6px 10px; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; z-index: 2; }
.eh-jc-tag.gold { background: var(--eh-gold-500); color: var(--eh-forest-900); }
.eh-jc-body { padding: 24px 4px 4px; display: flex; flex-direction: column; gap: 10px; }
.eh-jc-cat { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; }
.eh-jcard h3 { font-family: var(--eh-font-display); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--eh-forest-900); margin: 0; transition: color .2s; }
.eh-jc-desc { font-size: 14px; color: var(--eh-ink-500); line-height: 1.65; margin: 0; }
.eh-jc-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11px; letter-spacing: 0.1em; color: var(--eh-ink-500); text-transform: uppercase; font-weight: 700; }
.eh-jc-meta .dot { width: 3px; height: 3px; background: var(--eh-ink-500); border-radius: 50%; opacity: 0.5; }

/* === Pagination (shared idiom with shop) === */
.eh-pagination { margin: 60px 0 0; }
.eh-pagination ul { list-style: none; display: flex; gap: 8px; justify-content: center; padding: 0; margin: 0; flex-wrap: wrap; }
.eh-pagination a, .eh-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--eh-line); color: var(--eh-ink-700);
	font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
	transition: all .2s;
}
.eh-pagination a:hover { border-color: var(--eh-forest-700); color: var(--eh-forest-900); }
.eh-pagination .current { background: var(--eh-forest-900); color: var(--eh-gold-400); border-color: var(--eh-forest-900); }
.eh-pagination .dots { border: 0; }

/* === Archive — dense list section === */
.eh-jarchive { background: var(--eh-cream-100); border-top: 1px solid var(--eh-line); padding: 100px 0; margin-top: 100px; }
.eh-jarchive-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 50px; padding-bottom: 22px; border-bottom: 1px solid var(--eh-line); }
.eh-jarchive-head h2 { font-size: clamp(32px, 3.5vw, 46px); }
.eh-jarchive-head h2 .gold { color: var(--eh-gold-500); font-style: italic; font-weight: 400; }
.eh-jarchive-head .eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; }
.eh-jarchive-head .meta { font-size: 13px; color: var(--eh-ink-500); letter-spacing: 0.06em; }
.eh-jarchive-head .meta strong { color: var(--eh-forest-900); }

.eh-jlist { display: flex; flex-direction: column; }
.eh-jrow {
	display: grid; grid-template-columns: 56px 88px 1fr auto 44px;
	gap: 22px; align-items: center;
	padding: 22px 0;
	border-top: 1px solid var(--eh-line);
	transition: padding .25s;
}
.eh-jrow:last-child { border-bottom: 1px solid var(--eh-line); }
.eh-jrow:hover { padding-left: 10px; }
.eh-jrow:hover .eh-jr-arrow { background: var(--eh-gold-500); color: var(--eh-forest-900); border-color: var(--eh-gold-500); transform: rotate(-45deg); }
.eh-jrow:hover .eh-jr-title { color: var(--eh-gold-600); }
.eh-jr-num { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-gold-600); font-size: 18px; font-variant-numeric: tabular-nums; }
.eh-jr-thumb { width: 88px; height: 88px; background: var(--eh-cream-50); border: 1px solid var(--eh-line); display: flex; align-items: center; justify-content: center; color: var(--eh-herb-600); overflow: hidden; }
.eh-jr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eh-jr-thumb .eh-jr-ill { padding: 12px; width: 100%; height: 100%; }
.eh-jr-thumb svg { width: 100%; height: 100%; }
.eh-jr-body .cat { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; margin-bottom: 4px; }
.eh-jr-title { font-family: var(--eh-font-display); font-size: 24px; color: var(--eh-forest-900); font-weight: 500; line-height: 1.2; margin: 0; transition: color .2s; }
.eh-jr-byline { font-size: 12px; color: var(--eh-ink-500); margin-top: 4px; letter-spacing: 0.04em; }
.eh-jr-byline em { font-style: italic; font-family: var(--eh-font-display); color: var(--eh-forest-900); margin-right: 6px; }
.eh-jr-when { text-align: right; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eh-ink-500); font-weight: 700; }
.eh-jr-when strong { display: block; color: var(--eh-forest-900); font-family: var(--eh-font-display); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; margin-bottom: 2px; }
.eh-jr-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--eh-forest-700); color: var(--eh-forest-700); display: inline-flex; align-items: center; justify-content: center; transition: all .3s; }
.eh-jr-arrow svg { width: 14px; height: 14px; }
@media (max-width: 1080px) { .eh-jrow { grid-template-columns: 40px 72px 1fr 36px; } }
@media (max-width: 720px) { .eh-jrow { grid-template-columns: 1fr 36px; gap: 14px; } .eh-jr-num, .eh-jr-thumb, .eh-jr-when { display: none; } .eh-jr-body { grid-column: 1; } }

/* === Buttons === */
.eh-journal .eh-btn-outline {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 32px; border: 1px solid var(--eh-forest-700); color: var(--eh-forest-900);
	font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	transition: all .2s;
}
.eh-journal .eh-btn-outline:hover { background: var(--eh-forest-900); color: var(--eh-gold-400); border-color: var(--eh-forest-900); }

/* === Empty state === */
.eh-jempty { padding: 90px 0 110px; text-align: center; }
.eh-jempty h2 { font-size: 32px; margin-bottom: 14px; }
.eh-jempty p { color: var(--eh-ink-500); font-size: 15px; }