/* ═══════════════════════════════════════════════════════════════════════
   OPTIKA LJILJANA — pages/journal.css
   ─────────────────────────────────────────────────────────────────────
   Dijeljeni dark dizajn za journal index (page-journal.php) i arhive
   (archive.php — kategorije/oznake/datumi). Klase .ol-jx-* su self-contained
   (literalni hex, bez var(--ol-*)) pa preživljavaju neovisno o style.css.
   Wrap 1320px = usklađeno s OL landing/hero širinom.

   Enqueue: functions.php — is_page('journal') || is_home() || is_archive(),
   dep 'optika-ljiljana-child', + dodan u §10g RUCSS exclude (kao style.css).
   Fontovi: GLOBALNI async (§1b) — NE učitavati ovdje.
   ═══════════════════════════════════════════════════════════════════════ */

/* scoped reset (samo .ol-jx) */
.ol-jx, .ol-jx *, .ol-jx *::before, .ol-jx *::after { box-sizing: border-box; }
.ol-jx img { display: block; max-width: 100%; }
.ol-jx a { text-decoration: none; }

/* ── FONT ENFORCEMENT (bulletproof) ─────────────────────────────────────
   KLJUČNO: font se postavlja DIREKTNO na tekst-elemente, NE samo na .ol-jx
   wrapper. Betheme Theme Options imaju direktna pravila na p/a/li/span — a
   direktno pravilo UVIJEK pobijedi naslijeđeni font. Zato wrapper-only
   enforcement (oslonjen na nasljeđivanje) ne radi; ovaj radi.
   Specifičnost .ol-jx p (0,1,1) + !important nadjača Betheme body/p pravila.
   Naslovni <a> (.ol-jx h3 a, 0,1,2) ostaje Playfair jer nadjača .ol-jx a. */
.ol-jx,
.ol-jx p, .ol-jx li, .ol-jx span, .ol-jx a, .ol-jx time,
.ol-jx strong, .ol-jx em, .ol-jx button, .ol-jx figcaption {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.ol-jx h1, .ol-jx h2, .ol-jx h3, .ol-jx h4,
.ol-jx h1 a, .ol-jx h2 a, .ol-jx h3 a, .ol-jx h4 a,
.ol-jx blockquote {
	font-family: 'Playfair Display', Georgia, serif !important;
}

/* ── HERO ── */
.ol-jx-hero { max-width: 1320px; margin: 0 auto; padding: 80px 24px 40px; text-align: center; }
.ol-jx-eb {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: #c8a96e; font-weight: 600; margin-bottom: 24px;
}
.ol-jx-eb::before, .ol-jx-eb::after { content: ''; width: 30px; height: 1px; background: #c8a96e; }
.ol-jx-hero h1 {
	font-family: 'Playfair Display', Georgia, serif; font-weight: 900;
	color: #fafaf8; font-size: clamp(40px, 6vw, 72px);
	line-height: 1.1; letter-spacing: -.01em; margin: 0 0 24px;
}
.ol-jx-hero h1 em { font-style: italic; color: #c8a96e; }
.ol-jx-lede { max-width: 620px; margin: 0 auto; color: #c5c2bd; font-size: 18px; line-height: 1.7; }
.ol-jx-back {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
	font-family: 'DM Sans', -apple-system, sans-serif; font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
	color: #9a9693; transition: color .2s;
}
.ol-jx-back::before { content: '←'; }
.ol-jx-back:hover { color: #c8a96e; }

/* ── FILTER CHIPS ── */
.ol-jx-filters {
	max-width: 1320px; margin: 0 auto; padding: 0 24px 56px;
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.ol-jx-chip {
	padding: 9px 20px; border: 1px solid #2a2010; border-radius: 2px;
	font-family: 'DM Sans', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
	color: #c5c2bd; background: transparent; transition: color .2s, border-color .2s, background .2s;
}
.ol-jx-chip:hover { border-color: #c8a96e; color: #c8a96e; }
.ol-jx-chip.is-active { background: #c8a96e; border-color: #c8a96e; color: #0a0a0a; }

/* ── FEATURED ── */
.ol-jx-featured { max-width: 1320px; margin: 0 auto 80px; padding: 0 24px; }
.ol-jx-feat {
	display: grid; grid-template-columns: 1fr; background: #131211;
	border: 1px solid #1a1408; overflow: hidden;
	transition: transform .35s, border-color .35s, box-shadow .35s;
}
.ol-jx-feat:hover { transform: translateY(-3px); border-color: #c8a96e; box-shadow: 0 30px 80px -30px rgba(0,0,0,.55); }
.ol-jx-feat-img { aspect-ratio: 16/10; overflow: hidden; background: #0e0d0c; }
.ol-jx-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ol-jx-feat:hover .ol-jx-feat-img img { transform: scale(1.04); }
.ol-jx-feat-body { padding: 40px 32px; }
.ol-jx-tag {
	display: inline-block; font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: #c8a96e; font-weight: 600; margin-bottom: 18px;
}
.ol-jx-feat h2 {
	font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
	color: #fafaf8; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; margin: 0 0 20px;
}
.ol-jx-feat-ex { color: #c5c2bd; margin-bottom: 28px; line-height: 1.7; font-size: 15px; }
.ol-jx-feat-meta {
	display: flex; gap: 24px; align-items: center; font-size: 13px;
	color: #9a9693; padding-top: 20px; border-top: 1px solid #1a1408;
}
.ol-jx-feat-cta {
	margin-left: auto; font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
	color: #fafaf8; display: inline-flex; align-items: center; gap: 8px;
}
.ol-jx-feat-cta::after { content: '→'; transition: transform .3s; }
.ol-jx-feat:hover .ol-jx-feat-cta { color: #c8a96e; }
.ol-jx-feat:hover .ol-jx-feat-cta::after { transform: translateX(4px); }
@media (min-width: 900px) {
	.ol-jx-feat { grid-template-columns: 1.15fr 1fr; align-items: center; }
	.ol-jx-feat-body { padding: 56px; }
}

/* ── GRID ── */
.ol-jx-posts { max-width: 1320px; margin: 0 auto; padding: 0 24px 64px; }
.ol-jx-head { margin-bottom: 40px; }
.ol-jx-head h2 {
	font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
	color: #fafaf8; font-size: clamp(28px, 4vw, 36px); margin: 0;
}
.ol-jx-head h2 em { font-style: italic; color: #c8a96e; }
.ol-jx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px 28px; }
.ol-jx-card {
	background: #131211; border: 1px solid #1a1408;
	display: flex; flex-direction: column;
	transition: transform .35s, border-color .35s, box-shadow .35s;
}
.ol-jx-card:hover { transform: translateY(-4px); border-color: #c8a96e; box-shadow: 0 24px 60px -25px rgba(0,0,0,.55); }
.ol-jx-card-img { aspect-ratio: 4/3; overflow: hidden; background: #0e0d0c; display: block; }
.ol-jx-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.ol-jx-card:hover .ol-jx-card-img img { transform: scale(1.05); }
.ol-jx-card-body { padding: 28px 26px 32px; flex: 1; display: flex; flex-direction: column; }
.ol-jx-card-meta {
	display: flex; gap: 14px; font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: #9a9693; margin-bottom: 16px; font-weight: 500;
}
.ol-jx-card-meta .cat { color: #c8a96e; font-weight: 600; }
.ol-jx-card-title {
	font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
	font-size: 22px; line-height: 1.25; margin: 0 0 14px;
}
.ol-jx-card-title a { color: #fafaf8; transition: color .2s; }
.ol-jx-card:hover .ol-jx-card-title a { color: #c8a96e; }
.ol-jx-card-ex { font-size: 14.5px; color: #c5c2bd; line-height: 1.65; flex: 1; margin-bottom: 22px; }
.ol-jx-card-link {
	font-family: 'DM Sans', -apple-system, sans-serif; font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
	color: #fafaf8; display: inline-flex; align-items: center; gap: 8px;
}
.ol-jx-card-link::after { content: '→'; transition: transform .3s; }
.ol-jx-card:hover .ol-jx-card-link { color: #c8a96e; }
.ol-jx-card:hover .ol-jx-card-link::after { transform: translateX(4px); }

/* ── PAGINATION (arhive) ── */
.ol-jx-pagination {
	max-width: 1320px; margin: 0 auto; padding: 0 24px 100px;
	display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.ol-jx-pagination .page-numbers {
	min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px; border: 1px solid #2a2010; color: #c5c2bd;
	font-family: 'DM Sans', -apple-system, sans-serif; font-size: 14px; border-radius: 2px;
	transition: border-color .2s, color .2s, background .2s;
}
.ol-jx-pagination a.page-numbers:hover { border-color: #c8a96e; color: #c8a96e; }
.ol-jx-pagination .page-numbers.current { background: #c8a96e; border-color: #c8a96e; color: #0a0a0a; }
.ol-jx-pagination .page-numbers.dots { border-color: transparent; }

/* ── CTA ── */
.ol-jx-cta {
	background: #131211; border-top: 1px solid #1a1408; border-bottom: 1px solid #1a1408;
	padding: 88px 24px; text-align: center;
}
.ol-jx-cta-in { max-width: 720px; margin: 0 auto; }
.ol-jx-cta h2 {
	font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
	color: #fafaf8; font-size: clamp(30px, 5vw, 48px); margin: 0 0 18px;
}
.ol-jx-cta h2 em { font-style: italic; color: #c8a96e; }
.ol-jx-cta p { color: #c5c2bd; margin: 0 0 32px; font-size: 16px; line-height: 1.7; }
.ol-jx-btn {
	display: inline-block; background: #c8a96e; color: #0a0a0a;
	padding: 16px 36px; font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	border-radius: 2px; transition: background .25s, transform .25s;
}
.ol-jx-btn:hover { background: #e8d5b0; transform: translateY(-2px); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
	.ol-jx-hero { padding: 56px 20px 32px; }
	.ol-jx-feat-body { padding: 32px 24px; }
}
/* ── :has()-NEOVISNA TAMNA POZADINA (mobilna sigurnost) ──────────────────
   Glavna crna pozadina inače dolazi iz §1d kritičnog CSS-a preko
   body:has(.ol-site-head). :has() može zakazati na starijem mobilnom
   browseru → pozadina padne na svijetlo i stranica izgleda "po starome".
   Ovdje je postavljamo NEOVISNO o :has(), preko body klasa koje template
   već dodaje (journal-page / journal-archive / journal-single) + ol-page
   iz §3. BEZ :is()/:has() → RUCSS-safe na svakom URL-u. */
body.ol-page,
body.journal-page,
body.journal-archive,
body.journal-single {
	background: #0a0a0a !important;
	color: #fafaf8 !important;
}
body.ol-page .ol-jx,
body.journal-page .ol-jx,
body.journal-archive .ol-jx,
body.journal-single .ol-jx {
	background: #0a0a0a !important;
	color: #fafaf8 !important;
}