/* DRAFT PREVIEW BANNER (admin-only, unpublished posts) */
.tn-draft-banner { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 0; border-bottom:1px solid #fde68a; background:#fffbeb; color:#92400e; font-size:13px; font-weight:700; text-align:center; }

/* BREADCRUMB */
.tn-breadcrumb-wrap { padding:18px 0; border-bottom:1px solid var(--tn-border); background:var(--tn-background); }
.tn-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; font-size:13px; }
.tn-breadcrumb li { display:flex; align-items:center; gap:8px; color:var(--tn-muted); }
.tn-breadcrumb li:not(:last-child)::after { content:"/"; color:#cbd5e1; }
.tn-breadcrumb a { color:var(--tn-muted); font-weight:600; }
.tn-breadcrumb a:hover { color:var(--tn-primary); }
.tn-breadcrumb .tn-current { overflow:hidden; max-width:280px; color:var(--tn-text); font-weight:600; white-space:nowrap; text-overflow:ellipsis; }

/* ARTICLE HERO */
.tn-article-hero { padding:0 0 28px; }

.tn-article-title { margin:16px 0; color:var(--tn-text); font-size:42px; line-height:1.15; font-weight:800; letter-spacing:-1.4px; }
.tn-article-excerpt { margin:0 0 22px; color:var(--tn-muted); font-size:18px; line-height:1.7; }

/* ARTICLE META */
.tn-article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; color:var(--tn-muted); font-size:13px; }
.tn-article-meta-item { display:flex; align-items:center; gap:7px; }
.tn-article-meta-item i { color:#94a3b8; }

.tn-author { display:flex; align-items:center; gap:9px; }
.tn-author-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--tn-primary-soft); color:var(--tn-primary); font-size:11px; font-weight:800; }
.tn-author-name { color:var(--tn-text); font-weight:700; }

/* MAIN ARTICLE FEATURED IMAGE */
.tn-article-image-wrap { width:100%; overflow:hidden; margin-bottom:36px; border-radius:20px; background:#e2e8f0; }
.tn-article-image { display:block; width:100%; height:auto; }

/* ARTICLE BODY */
.tn-article-body { max-width:100%; color:#334155; font-size:17px; line-height:1.85; }
.tn-article-body > *:first-child { margin-top:0; }

.tn-article-body h2 { margin:38px 0 16px; color:var(--tn-text); font-size:27px; font-weight:800; letter-spacing:-.6px; }
.tn-article-body h3 { margin:30px 0 14px; color:var(--tn-text); font-size:21px; font-weight:750; }
.tn-article-body h4 { margin:26px 0 12px; color:var(--tn-text); font-size:18px; font-weight:700; }

.tn-article-body p { margin:0 0 20px; }

.tn-article-body a { color:#fff; font-weight:600; background:#000;border:none; }
.tn-article-body a:hover { color:#fff; text-decoration-color:var(--tn-primary); }

.tn-article-body strong { color:var(--tn-text); font-weight:700; }

/* LISTS */
.tn-article-body ul,
.tn-article-body ol { margin:0 0 22px; padding-left:23px; }

.tn-article-body li { margin-bottom:9px; padding-left:2px; }
.tn-article-body li::marker { color:var(--tn-primary); font-weight:700; }

/* CHECK LIST */
.tn-article-body .tn-check-list { margin:24px 0 28px!important; padding:0!important; list-style:none!important; }

.tn-article-body .tn-check-list li { position:relative; padding-left:29px!important; }

.tn-article-body .tn-check-list li::before {
  content:"\f058";
  position:absolute;
  top:1px;
  left:0;
  color:var(--tn-green);
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

/* IN-CONTENT IMAGE */
.tn-article-body figure { margin:32px 0; }

.tn-article-body figure img {
  display:block;
  width:100%;
  max-height:620px;
  border-radius:16px;
  object-fit:cover;
  background:#e2e8f0;
}

.tn-article-body figcaption { margin-top:10px; color:#94a3b8; font-size:13px; line-height:1.6; text-align:center; }

/* CALLOUT */
.tn-article-body .tn-callout { margin:28px 0; padding:21px 22px; border:1px solid #bfdbfe; border-left:4px solid var(--tn-primary); border-radius:12px; background:var(--tn-primary-soft); }

.tn-article-body .tn-callout-title { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--tn-primary-dark); font-size:14px; font-weight:800; }

.tn-article-body .tn-callout p { margin:0; color:#475569; font-size:14px; line-height:1.7; }

.tn-article-body .tn-callout-success { border-color:#bbf7d0; border-left-color:var(--tn-green); background:var(--tn-green-soft); }
.tn-article-body .tn-callout-success .tn-callout-title { color:#15803d; }

.tn-article-body .tn-callout-warning { border-color:#fde68a; border-left-color:#d97706; background:#fffbeb; }
.tn-article-body .tn-callout-warning .tn-callout-title { color:#b45309; }

/* QUOTE */
.tn-article-body blockquote { margin:32px 0; padding:25px 27px; border-left:4px solid var(--tn-primary); border-radius:0 15px 15px 0; background:#f8fafc; }

.tn-article-body blockquote p { margin:0; color:var(--tn-text); font-size:19px; line-height:1.6; font-weight:600; font-style:normal; }

.tn-article-body blockquote footer { margin-top:12px; color:var(--tn-muted); font-size:12px; font-weight:600; }

/* TABLE */
.tn-table-wrap { width:100%; overflow-x:auto; margin:30px 0; border:1px solid var(--tn-border); border-radius:14px; }

.tn-article-table { width:100%; min-width:560px; margin:0; border-collapse:collapse; background:#fff; }

.tn-article-table th { padding:14px 16px; border-bottom:1px solid var(--tn-border); background:#f8fafc; color:var(--tn-text); font-size:13px; font-weight:700; text-align:left; }

.tn-article-table td { padding:14px 16px; border-bottom:1px solid #edf2f7; color:#475569; font-size:13px; line-height:1.6; }

.tn-article-table tr:last-child td { border-bottom:0; }

/* DIVIDER */
.tn-article-body hr { margin:42px 0; border:0; border-top:1px solid var(--tn-border); }

/* ARTICLE BOTTOM */
.tn-article-bottom { margin-top:46px; padding-top:26px; border-top:1px solid var(--tn-border); }

.tn-article-bottom-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }

/* TAGS */
.tn-article-tags { display:flex; flex-wrap:wrap; gap:8px; }

.tn-article-tag { padding:7px 10px; border:1px solid var(--tn-border); border-radius:8px; background:#f8fafc; color:#475569; font-size:11px; font-weight:600; }

.tn-article-tag:hover { border-color:#bfdbfe; background:var(--tn-primary-soft); color:var(--tn-primary); }

/* SHARE */
.tn-share-links { display:flex; align-items:center; gap:7px; }

.tn-share-label { margin-right:4px; color:var(--tn-muted); font-size:12px; font-weight:600; }

.tn-share-link { display:grid; place-items:center; width:37px; height:37px; border:1px solid var(--tn-border); border-radius:9px; background:#fff; color:#64748b; transition:.2s; }

.tn-share-link:hover { border-color:#bfdbfe; background:var(--tn-primary-soft); color:var(--tn-primary); }

.tn-share-link.tn-share-copied { border-color:var(--tn-green); background:var(--tn-green-soft); color:var(--tn-green); }

/* RELATED POSTS */
.tn-related-section { margin-top:58px; padding-top:42px; border-top:1px solid var(--tn-border); }

.tn-related-title { margin:0 0 24px; font-size:24px; font-weight:800; }

.tn-related-card { display:block; height:100%; overflow:hidden; border:1px solid var(--tn-border); border-radius:16px; background:#fff; transition:transform .2s ease,box-shadow .2s ease; }

.tn-related-card:hover { transform:translateY(-3px); box-shadow:0 13px 30px rgba(15,23,42,.06); }

.tn-related-image { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#e2e8f0; }

.tn-related-content { padding:17px; }

.tn-related-category { display:block; margin-bottom:7px; color:var(--tn-primary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }

.tn-related-card h3 { margin:0; font-size:15px; line-height:1.5; font-weight:700; }

.tn-related-card h3 a { color:var(--tn-text); }

.tn-related-card:hover h3 a { color:var(--tn-primary); }

/* TABLET + MOBILE */
@media (max-width:767px) {
  .tn-article-title { font-size:30px; letter-spacing:-1px; }

  .tn-article-excerpt { font-size:16px; }

  .tn-article-image-wrap { border-radius:14px; }

  .tn-article-body { font-size:16px; }

  .tn-article-body h2 { font-size:23px; }

  .tn-article-body blockquote { padding:20px; }

  .tn-article-body blockquote p { font-size:17px; }
}

/* SMALL MOBILE */
@media (max-width:575px) {
  .tn-breadcrumb-wrap { padding:14px 0; }

  .tn-breadcrumb { font-size:11px; }

  .tn-breadcrumb .tn-current { max-width:160px; }

  .tn-article-meta { gap:10px 15px; }

  .tn-article-bottom-row { align-items:flex-start; flex-direction:column; }
}