/* single.css - split dari main.css LiputanJatim */

/* SINGLE / ARCHIVE LAYOUT */
.lj-layout { max-width: 1200px; margin: 34px auto 64px; padding: 0 15px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.lj-single { background: #fff; border: 1px solid var(--lj-border); border-radius: 22px; padding: 32px; box-shadow: 0 12px 30px rgba(15,23,42,.06); }
.lj-single h1 { margin: 12px 0 14px; font-size: 42px; line-height: 1.12; letter-spacing: -1.2px; }
.lj-single .featured { width: 100%; max-height: 520px; object-fit: cover; border-radius: 20px; margin: 24px 0; }
.lj-ai-summary { background: #f8fafc; border-left: 5px solid var(--lj-red); border-radius: 16px; padding: 18px 20px; margin: 24px 0; }
.lj-ai-summary b { display: block; margin-bottom: 8px; font-size: 18px; }
.lj-entry { font-size: 18px; line-height: 1.85; color: #1f2937; }
.lj-entry p { margin: 0 0 22px; }
.lj-entry h2, .lj-entry h3 { color: var(--lj-dark); line-height: 1.25; }
.lj-entry img { border-radius: 18px; }
.lj-share { display: flex; gap: 10px; margin: 26px 0; flex-wrap: wrap; }
.lj-share a { background: var(--lj-dark); color: #fff; padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.lj-author-box { margin-top: 34px; padding: 24px; border-radius: 20px; background: #f8fafc; border: 1px solid var(--lj-border); }
.lj-author-box h3 { margin: 0 0 8px; }

/* COMMENTS */
.lj-comments { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--lj-border); }
.lj-comments-title { font-size: 28px; font-weight: 900; margin-bottom: 25px; }
.lj-comment-list { list-style: none; margin: 0; padding: 0; }
.lj-comment-list li { background: #fff; border: 1px solid var(--lj-border); border-radius: 18px; padding: 20px; margin-bottom: 18px; }
.lj-comment-list .comment-author { font-weight: 800; }
.lj-comment-list .comment-meta { font-size: 13px; color: var(--lj-muted); margin-bottom: 12px; }
.lj-comment-list p { line-height: 1.7; }
.lj-comment-form-title { margin-top: 40px; margin-bottom: 20px; font-size: 24px; font-weight: 900; }
.comment-form { display: grid; gap: 16px; }
.comment-form input, .comment-form textarea { width: 100%; border: 1px solid var(--lj-border); border-radius: 14px; padding: 14px; font-size: 15px; }
.comment-form textarea { min-height: 180px; }
.lj-comment-submit { border: 0; background: var(--lj-red); color: #fff; padding: 14px 24px; border-radius: 999px; font-weight: 900; cursor: pointer; }

/* RELATED ENTITIES */
.lj-related-tokoh { margin: 26px 0; padding: 20px; border: 1px solid var(--lj-border); border-radius: 20px; background: #f8fafc; }
.lj-related-tokoh h3 { margin: 0 0 16px; font-size: 21px; font-weight: 900; color: var(--lj-dark); }
.lj-related-tokoh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lj-related-tokoh-card { display: grid; grid-template-columns: 68px 1fr; gap: 13px; align-items: center; background: #fff; border: 1px solid var(--lj-border); border-radius: 16px; padding: 12px; transition: .2s ease; }
.lj-related-tokoh-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.12); }
.lj-related-tokoh-photo img, .lj-related-tokoh-photo span { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #6b7280; }
.lj-related-tokoh-card b { display: block; font-size: 15px; line-height: 1.25; color: var(--lj-dark); }
.lj-related-tokoh-card small { display: block; margin-top: 4px; color: var(--lj-muted); font-size: 12px; line-height: 1.35; }
.lj-related-tokoh-card em { display: block; margin-top: 6px; color: var(--lj-red); font-style: normal; font-size: 12px; font-weight: 900; }

/* Isi artikel */
.lj-entry{
  font-size:18px;
  line-height:1.9;
  font-weight:400;
  color:#1f2937;
}

.lj-entry p{
  margin-bottom:22px;
}

/* SINGLE POST MOBILE MODERN */

@media(max-width:768px){

  .lj-layout{
    display:block !important;
    max-width:100% !important;
    margin:18px auto 50px !important;
    padding:0 14px !important;
  }

  .lj-single{
    padding:20px !important;
    border-radius:24px !important;
    box-shadow:0 12px 34px rgba(15,23,42,.06) !important;
  }

  .lj-single h1{
    font-size:30px !important;
    line-height:1.18 !important;
    letter-spacing:-.8px !important;
    margin:12px 0 14px !important;
  }

  .lj-single .featured,
  .lj-single img.featured{
    width:100% !important;
    max-height:none !important;
    height:auto !important;
    border-radius:20px !important;
    margin:18px 0 !important;
  }

  .lj-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 12px !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .lj-ai-summary{
    border-left:4px solid #e30613 !important;
    border-radius:18px !important;
    padding:16px !important;
    margin:20px 0 !important;
    font-size:14px !important;
  }

  .lj-entry{
    font-size:17px !important;
    line-height:1.85 !important;
  }

  .lj-entry p{
    margin-bottom:20px !important;
  }

  .lj-entry h2{
    font-size:24px !important;
    line-height:1.25 !important;
    margin:26px 0 12px !important;
  }

  .lj-entry h3{
    font-size:21px !important;
    line-height:1.3 !important;
    margin:24px 0 10px !important;
  }

  .lj-entry blockquote{
    margin:24px 0 !important;
    padding:18px !important;
    border-left:5px solid #e30613 !important;
    background:#f8fafc !important;
    border-radius:18px !important;
    font-size:17px !important;
    line-height:1.7 !important;
  }

  .lj-share{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    margin:24px 0 !important;
  }

  .lj-share a{
    text-align:center !important;
    padding:12px !important;
    border-radius:999px !important;
    font-size:13px !important;
  }

  .lj-author-box{
    border-radius:20px !important;
    padding:18px !important;
    margin-top:26px !important;
  }

  .lj-related-tokoh{
    padding:18px !important;
    border-radius:22px !important;
    margin:24px 0 !important;
  }

  .lj-related-tokoh-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .lj-related-tokoh-card{
    grid-template-columns:64px 1fr !important;
    border-radius:18px !important;
  }

  .lj-sidebar{
    margin-top:24px !important;
    display:grid !important;
    gap:18px !important;
  }

  .lj-widget{
    border-radius:22px !important;
    padding:18px !important;
  }

  .lj-widget-title{
    font-size:20px !important;
  }
}

.lj-featured-figure {
    margin: 18px 0 24px;
}

.lj-featured-figure .featured {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.lj-image-caption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    font-style: italic;
}

.lj-image-credit {
    font-weight: 600;
    color: #444;
}

.lj-author-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lj-author-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}

.lj-action-view {
    background: #e60012;
}

.lj-action-edit {
    background: #06223d;
}
.lj-mid-related {
    margin: 24px 0;
    padding: 16px 18px;
    border-left: 4px solid #e60012;
    background: #f7f9fc;
    border-radius: 10px;
}

.lj-mid-related span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #e60012;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.lj-mid-related a {
    color: #061d36;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: none;
}

.lj-mid-related a:hover {
    color: #e60012;
}