/* Layout */
.jt-wrap { max-width: 1140px; margin: 0 auto; padding: 32px 16px; }
.jt-article { margin: 0 auto; }

/* Hero */
.jt-hero { margin-bottom: 22px; }
.jt-hero-inner { max-width: 76ch; }

.jt-kicker { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; opacity: .7; margin: 0 0 8px; }
.jt-lead { font-size: 18px; line-height: 1.6; opacity: .9; margin: 0 0 10px; max-width: 76ch; }

.jt-meta { font-size: 14px; opacity: .75; display: flex; gap: 10px; align-items: center; }
.jt-dot { opacity: .5; }

/* Grid: desktop 2 columns, mobile stacked */
.jt-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 980px) {
  .jt-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Content */
.jt-content { min-width: 0; }

/* Featured image IN content (full width + mooie crop) */
.jt-feature {
  margin: 16px 0 22px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.jt-feature-img {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 420px);
  object-fit: cover;
}

/* Prose styling */
.jt-prose { font-size: 18px; line-height: 1.75; max-width: 76ch; }
.jt-prose h2 { margin-top: 28px; font-size: 26px; line-height: 1.25; }
.jt-prose h3 { margin-top: 20px; font-size: 20px; line-height: 1.3; }
.jt-prose p { margin: 0 0 16px; }
.jt-prose ul, .jt-prose ol { padding-left: 20px; margin: 0 0 16px; }
.jt-prose li { margin: 6px 0; }
.jt-prose blockquote { border-left: 4px solid rgba(0,0,0,.15); padding: 10px 14px; margin: 18px 0; opacity: .9; }

/* Sidebar */
.jt-aside { position: relative; }
@media (min-width: 980px) {
  .jt-aside { position: sticky; top: 24px; align-self: start; }
}
.jt-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
}
.jt-card h3 { margin: 0 0 8px; font-size: 16px; }
.jt-small { font-size: 14px; opacity: .8; margin: 0 0 10px; }

/* CTA */
.jt-cta {
  margin-top: 34px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
}
.jt-cta h2 { margin: 0 0 6px; font-size: 18px; }
.jt-cta p { margin: 0; opacity: .8; font-size: 15px; max-width: 60ch; }

.jt-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jt-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }