/* ==========================================================================
   ContentKida – Learning Journal (blog redo)
   Uses ONLY existing theme tokens from style.css (:root). No new colours/fonts.
   Loaded only on pages/posts using template-journal-index.php or template-journal-article.php.
   ========================================================================== */

.ck-journal { padding-top: 140px; padding-bottom: var(--space-24); }
.ck-journal [hidden] { display: none !important; }
.ck-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shared bits ---------- */
.ck-jkicker { color: var(--color-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.ck-jbadge { display: inline-block; padding: var(--space-1) var(--space-3); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-radius: var(--radius-md); }
.ck-jtag { position: relative; z-index: 2; display: inline-block; width: fit-content; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(68, 222, 172, .1); border: 1px solid rgba(68, 222, 172, .25); color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
.ck-jtag:hover, .ck-jtag:focus-visible { background: rgba(68, 222, 172, .2); color: var(--color-primary-light); }
.ck-jmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-outline); font-size: var(--text-sm); margin: 0; }
.ck-jmeta__dot { opacity: .7; }
.ck-stretched { color: inherit; text-decoration: none; }
.ck-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ck-stretched:focus-visible { outline: none; }
.ck-stretched:focus-visible::after { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* <picture> wrappers are layout-transparent so existing img rules apply */
.ck-journal picture { display: contents; }
/* Theme's existing banner overlay (same gradient as the legacy article hero) for brighter photos */
.ck-jcard__media, .ck-jbanner { position: relative; }
.has-overlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 21, 34, 0.75), transparent 60%); }

/* ---------- Index intro ---------- */
.ck-jintro { margin-bottom: var(--space-10); }
.ck-jintro__title { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; margin: 0; }
.ck-jintro__title span { color: var(--color-primary); }

/* ---------- Featured ---------- */
.ck-jfeatured { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-3xl); margin-bottom: var(--space-12); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.ck-jfeatured:hover { border-color: rgba(68, 222, 172, .4); box-shadow: var(--shadow-primary); }
.ck-jfeatured__media { position: relative; min-height: 380px; background: var(--color-surface-variant); }
.ck-jfeatured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.ck-jfeatured:hover .ck-jfeatured__media img { transform: scale(1.03); }
.ck-jfeatured__body { padding: var(--space-12); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
.ck-jfeatured__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ck-jfeatured__title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin: 0; }
.ck-jfeatured:hover .ck-jfeatured__title { color: var(--color-primary); }
.ck-jfeatured__excerpt { color: var(--color-on-surface-variant); font-size: var(--text-lg); line-height: 1.7; margin: 0; }
.ck-jfeatured__cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-family: var(--font-headline); font-weight: 700; font-size: var(--text-lg); }

/* ---------- Filter (reuses .blog-filter-bar / .blog-filter-chip) ---------- */
.ck-jfilter { scroll-margin-top: 120px; }
.ck-jfilter .blog-filter-chip { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.ck-jfilter__count { font-size: var(--text-xs); font-weight: 700; padding: 0 .45rem; min-width: 1.4rem; line-height: 1.4rem; border-radius: var(--radius-full); background: var(--color-surface-variant); color: var(--color-on-surface-variant); }
.blog-filter-chip.is-active .ck-jfilter__count { background: rgba(0, 56, 40, .25); color: var(--color-on-primary); }

/* ---------- Grid + cards ---------- */
.ck-jgrid-wrap { scroll-margin-top: 120px; }
.ck-jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.ck-jcard { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-2xl); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.ck-jcard:hover { transform: translateY(-4px); border-color: rgba(68, 222, 172, .4); box-shadow: var(--shadow-primary); }
.ck-jcard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-variant); }
.ck-jcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.ck-jcard:hover .ck-jcard__media img { transform: scale(1.05); }
.ck-jcard__noimg { width: 100%; height: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, rgba(68, 222, 172, .18), transparent 55%), linear-gradient(135deg, var(--color-surface-container) 0%, var(--color-surface-container-low) 100%); }
.ck-jcard__noimg .material-symbols-outlined { font-size: 3.5rem; color: var(--color-primary); opacity: .75; }
.ck-jfeatured__media .ck-jcard__noimg { position: absolute; inset: 0; }
.ck-jcard__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; }
.ck-jcard__title { font-size: var(--text-xl); line-height: 1.35; margin: 0; }
.ck-jcard:hover .ck-jcard__title { color: var(--color-primary); }
.ck-jcard__excerpt { color: var(--color-on-surface-variant); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ck-jcard .ck-jmeta { margin-top: auto; padding-top: var(--space-2); }
.ck-jempty { padding: var(--space-10); text-align: center; color: var(--color-on-surface-variant); background: var(--color-surface); border: 1px dashed var(--color-outline-variant); border-radius: var(--radius-2xl); }
.ck-jempty a { color: var(--color-primary); }

/* ---------- CTA ---------- */
.ck-jcta { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-16); padding: var(--space-8) var(--space-10); background: linear-gradient(135deg, var(--color-surface-container) 0%, var(--color-surface) 100%); border: 1px solid rgba(68, 222, 172, .25); border-radius: var(--radius-3xl); }
.ck-jcta__icon { flex-shrink: 0; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(68, 222, 172, .12); color: var(--color-primary); }
.ck-jcta__text { flex: 1; }
.ck-jcta__title { font-size: var(--text-2xl); margin: 0 0 var(--space-1); color: var(--color-on-surface); }
.ck-jcta__text p { margin: 0; color: var(--color-on-surface-variant); }
.ck-jcta__btn { flex-shrink: 0; }

/* ---------- Article ---------- */
.ck-jhero { max-width: 52rem; margin: 0 auto var(--space-10); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.ck-jcrumbs { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-outline); }
.ck-jcrumbs a { color: var(--color-on-surface-variant); text-decoration: none; }
.ck-jcrumbs a:hover { color: var(--color-primary); }
.ck-jhero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.12; margin: 0; }
.ck-jhero__dek { color: var(--color-on-surface-variant); font-size: var(--text-xl); line-height: 1.65; margin: 0; max-width: 46rem; }
.ck-jhero__meta { justify-content: center; }
.ck-jbanner { margin: 0 auto var(--space-12); max-width: 72rem; aspect-ratio: 16 / 9; max-height: 560px; width: 100%; overflow: hidden; border-radius: var(--radius-3xl); background: var(--color-surface-variant); border: 1px solid var(--color-outline-variant); }
.ck-jbanner img { width: 100%; height: 100%; object-fit: cover; }
.ck-jrule { max-width: 44rem; margin: 0 auto var(--space-10); border: 0; border-top: 1px solid var(--color-outline-variant); }

.ck-jlayout { display: grid; grid-template-columns: minmax(0, 44rem); justify-content: center; gap: var(--space-12); }
.ck-jtoc details { background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); }
.ck-jtoc summary { cursor: pointer; font-family: var(--font-headline); font-weight: 700; color: var(--color-on-surface); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; }
.ck-jtoc ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ck-jtoc a { color: var(--color-on-surface-variant); text-decoration: none; line-height: 1.4; }
.ck-jtoc a:hover { color: var(--color-primary); }

.ck-prose { font-size: var(--text-lg); line-height: 1.8; color: var(--color-on-surface-variant); min-width: 0; }
.ck-prose > * + * { margin-top: var(--space-5); }
.ck-prose > p:first-child { font-size: var(--text-xl); color: var(--color-on-surface); }
.ck-prose h2 { font-size: var(--text-3xl); line-height: 1.25; color: var(--color-on-surface); margin-top: var(--space-12); margin-bottom: 0; scroll-margin-top: 120px; }
.ck-prose h3 { font-size: var(--text-xl); line-height: 1.35; color: var(--color-on-surface); margin-top: var(--space-8); }
.ck-prose a:not(.btn) { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.ck-prose .btn { text-decoration: none; }
.ck-prose strong { color: var(--color-on-surface); }
.ck-prose ul, .ck-prose ol { padding-left: var(--space-6); }
.ck-prose li + li { margin-top: var(--space-2); }
.ck-prose li::marker { color: var(--color-primary); }
.ck-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); display: block; overflow-x: auto; }
.ck-prose th, .ck-prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-outline-variant); text-align: left; vertical-align: top; }
.ck-prose th { color: var(--color-on-surface); font-family: var(--font-headline); background: var(--color-surface); }
.ck-pullquote { margin: var(--space-12) 0 0; padding: var(--space-6) var(--space-8); border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; }
.ck-pullquote blockquote { margin: 0; }
.ck-pullquote p { font-family: var(--font-headline); font-size: var(--text-2xl); line-height: 1.4; color: var(--color-on-surface); margin: 0; }
.ck-pullquote p::before { content: "\201C"; color: var(--color-primary); margin-right: .1em; }
.ck-pullquote p::after { content: "\201D"; color: var(--color-primary); margin-left: .05em; }
.ck-prose .ck-jcta { margin-top: var(--space-12); padding: var(--space-6) var(--space-8); flex-wrap: wrap; font-size: var(--text-base); line-height: 1.6; }
.ck-prose .ck-jcta__text { min-width: 16rem; }
.ck-prose .ck-jcta__title { margin-top: 0; }

.ck-jrelated { margin-top: var(--space-20); padding-top: var(--space-12); border-top: 1px solid var(--color-outline-variant); }
.ck-jrelated__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.ck-jrelated__head h2 { font-size: var(--text-3xl); margin: 0; }
.ck-jrelated__all { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 700; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1180px) {
	.ck-jlayout { grid-template-columns: 15rem minmax(0, 44rem); justify-content: center; }
	.ck-jlayout:not(:has(.ck-jtoc)) { grid-template-columns: minmax(0, 44rem); }
	.ck-jtoc { position: sticky; top: 120px; align-self: start; }
}
@media (max-width: 1023px) {
	.ck-jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ck-jfeatured { grid-template-columns: 1fr; }
	.ck-jfeatured__media { min-height: 0; aspect-ratio: 16 / 9; }
	.ck-jfeatured__body { padding: var(--space-8); }
}
@media (max-width: 700px) {
	.ck-journal { padding-top: 112px; padding-bottom: var(--space-16); }
	.ck-jgrid, .ck-jgrid--3 { grid-template-columns: 1fr; }
	.ck-jfeatured__body { padding: var(--space-6); gap: var(--space-4); }
	.ck-jfeatured__excerpt { font-size: var(--text-base); }
	.ck-jcta { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
	.ck-jcta__btn { width: 100%; }
	.ck-jhero { text-align: left; align-items: flex-start; }
	.ck-jhero__meta { justify-content: flex-start; }
	.ck-jhero__dek { font-size: var(--text-lg); }
	.ck-jbanner { border-radius: var(--radius-2xl); margin-bottom: var(--space-8); }
	.ck-prose { font-size: var(--text-base); }
	.ck-prose > p:first-child { font-size: var(--text-lg); }
	.ck-prose h2 { font-size: var(--text-2xl); margin-top: var(--space-10); }
	.ck-pullquote { padding: var(--space-5); }
	.ck-pullquote p { font-size: var(--text-xl); }
	.ck-jrelated__head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.ck-jcard, .ck-jcard__media img, .ck-jfeatured__media img { transition: none; }
	.ck-jcard:hover { transform: none; }
}