/* ══════════════════════════════════════════════════════════════
   TrueKatana Blog — Design System v2
   Color: blue-gray + red CTA + cold-blue links
   Font:  Nunito (body) / Zen Antique Soft (display H1 only)
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Background layers (blue-gray, deep to light) */
  --one-bg-void:      #080C10;
  --one-bg-primary:   #12161A;
  --one-bg-card:      #181C21;
  --one-bg-elevated:  #1E2228;
  --one-bg-surface:   #252A30;

  /* Red CTA (3 levels) */
  --one-red:          #DC3545;
  --one-red-hover:    #C82333;
  --one-red-active:   #B21F2D;

  /* Text hierarchy */
  --one-text-primary:   #F0F1F3;
  --one-text-secondary: #9BA1AA;
  --one-text-muted:     #5C6370;
  --one-text-inverse:   #FFFFFF;

  /* Links (cold blue) */
  --one-link:         #6CA0DC;
  --one-link-hover:   #8BB8E8;
  --one-link-visited: #8A7FC7;

  /* Borders */
  --one-border:        #2A2F36;
  --one-border-subtle: #1C2026;
  --one-border-hover:  #3A4048;

  /* Semantic */
  --one-success: #28A745;
  --one-star:    #F5C518;

  /* Radius */
  --one-radius-none: 0px;
  --one-radius-xs:   2px;
  --one-radius-sm:   4px;
  --one-radius-md:   6px;
  --one-radius-full: 9999px;

  /* Fonts */
  --one-font-body:    'Nunito', sans-serif;
  --one-font-display: 'Zen Antique Soft', serif;

  /* Shadows */
  --one-shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --one-shadow-md:  0 4px 12px rgba(0,0,0,0.5);

  /* Transitions */
  --one-ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
  --one-duration:      250ms;
  --one-duration-slow: 400ms;
}


/* ── Animations ── */

.one-fadein { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.one-fadein.is-visible { opacity: 1; transform: translateY(0); }


/* ── Blog page shell ── */

.one-blog { background: var(--one-bg-primary) !important; color: var(--one-text-primary); }

.one-blog-container {
  margin: 50px auto 100px;
  max-width: 1320px;
  min-height: 800px;
  font-size: 1.1em;
  font-family: var(--one-font-body);
  color: var(--one-text-secondary);
}


/* ── Breadcrumb ── */

.breadcrumb { display: flex; gap: 8px; font-size: 12px; color: var(--one-text-muted); padding: 6px 0; flex-wrap: wrap; }
.breadcrumb a { color: var(--one-text-muted); }
.breadcrumb a:hover { color: var(--one-link); }
.breadcrumb-item::before { color: var(--one-text-muted) !important; }


/* ── Blog hero (index page) ── */

.one-blog-hero { padding: 60px 15px 20px; border-bottom: 1px solid var(--one-border-subtle); }
.one-blog-hero h1 { font-family: var(--one-font-display); font-size: 42px; line-height: 1.15; margin-bottom: 12px; }
.one-blog-hero h1 .gold { color: var(--one-link); }
.one-blog-hero-sub { font-size: 18px; color: var(--one-text-muted); max-width: 960px; line-height: 1.6; }


/* ── Tag bar (horizontal pill scroll) ── */

.one-tag-bar { padding: 20px 40px 20px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.one-tag-bar::-webkit-scrollbar { display: none; }
.one-tag-pills { display: flex; gap: 8px; white-space: nowrap; }
.one-tag-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: var(--one-radius-full);
  font-size: 13px; font-weight: 500; font-family: var(--one-font-body);
  color: var(--one-text-muted); background: var(--one-bg-card);
  border: 1px solid var(--one-border); cursor: pointer;
  transition: all 0.2s; user-select: none;
}
.one-tag-pill:hover { border-color: var(--one-border-hover); color: var(--one-text-primary); }
.one-tag-pill.active { background: var(--one-link); color: #0A1628; border-color: var(--one-link); font-weight: 600; }
.one-tag-pill .count { font-size: 11px; opacity: 0.6; }


/* ── Featured article card ── */

.one-featured { margin-top: 40px; margin-bottom: 30px; cursor: pointer; }

.one-featured-card {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-radius: var(--one-radius-sm); overflow: hidden;
  border: 1px solid var(--one-border); background: var(--one-bg-card);
  transition: border-color 0.2s, transform 0.25s;
}
.one-featured-card:hover { border-color: var(--one-link); transform: translateY(-2px); }

.one-featured-img { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.one-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.one-featured-card:hover .one-featured-img img { transform: scale(1.04); }
.one-featured-img .badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--one-red); color: var(--one-text-inverse);
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--one-radius-full); letter-spacing: 0.04em; text-transform: uppercase;
}

.one-featured-body { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }

.one-featured-title {
  font-family: var(--one-font-display); font-size: 32px;
  line-height: 1.2; margin-bottom: 16px; font-weight: 400;
}

.one-featured-excerpt {
  color: var(--one-text-muted); font-size: 16px; line-height: 1.65; margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.one-featured-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--one-text-secondary); }
.one-featured-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--one-text-muted); }

.read-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--one-link);
  margin-top: auto; padding-top: 16px;
}
.read-more-link svg { transition: transform 0.2s; }
.one-featured-card:hover .read-more-link svg { transform: translateX(4px); }


/* ── Tag hero (tag page) ── */

.one-blog-tag-hero h1 { font-family: var(--one-font-display); color: var(--one-text-inverse); font-size: 48px; font-weight: 400; }
.one-blog-tag-hero-stats { font-size: 13px; color: var(--one-text-muted); padding-top: 10px; }


/* ── Blog list (index/tag page) ── */

.one-blog-list-container { background-color: var(--one-bg-card) !important; border-radius: var(--one-radius-sm); }
.one-blog-list-container img { border-top-left-radius: var(--one-radius-sm); border-bottom-left-radius: var(--one-radius-sm); }
.one-blog-list-body {}
.one-blog-list-date { font-size: 0.85em; color: var(--one-text-muted); font-weight: normal; }
.one-blog-list-title { margin: 10px 0; font-size: 1.25em; color: var(--one-text-inverse); line-height: 26px !important; }
.one-blog-list-title a { color: var(--one-text-inverse); }
.one-blog-list-title a:hover { color: var(--one-link); }
.one-blog-list-subtitle { font-size: 0.85em; font-weight: normal; color: var(--one-text-secondary); }


/* ── Tag cloud ── */

.one-blog-tag-cloud { padding: 50px 0; }
.one-blog-tag-cloud-title {
  font-size: 12px; font-weight: 600; color: var(--one-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px;
}
.one-blog-tag-cloud-list { display: flex; flex-wrap: wrap; gap: 8px; }
.one-blog-tag-cloud-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: var(--one-radius-full);
  font-size: 13px; color: var(--one-text-muted);
  background: var(--one-bg-card); border: 1px solid var(--one-border);
  cursor: pointer; transition: all 0.2s;
}
.one-blog-tag-cloud-item:hover { border-color: var(--one-border-hover); color: var(--one-text-primary); }
.one-blog-tag-cloud-item.current { background: var(--one-link); color: #0A1628; border-color: var(--one-link); font-weight: 600; }
.one-blog-tag-cloud-item .cnt { font-size: 11px; opacity: 0.55; }


/* ── Blog post (single article) ── */

.one-blog-post { padding-top: 40px; }
.one-blog-post-header { min-height: 450px; border-radius: var(--one-radius-md); background-position: center center; margin-bottom: 25px; }

.one-blog-post-tags { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
.one-blog-post-tags a {
  font-size: 12px; font-weight: 500; color: var(--one-link);
  background: rgba(108,160,220,0.1); padding: 5px 14px;
  border-radius: var(--one-radius-full); border: 1px solid rgba(108,160,220,0.2);
  transition: all 0.2s;
}
.one-blog-post-tags a:hover { background: rgba(108,160,220,0.2); }

.one-blog-post-title {
  margin: auto; font-family: var(--one-font-display);
  color: var(--one-text-inverse); font-size: 2.5em; max-width: 900px; font-weight: 400;
}

.one-blog-post-subtitle { max-width: 860px; margin: auto; color: var(--one-text-secondary); font-size: 14px; }


/* ── Post content ── */

.one-blog-post-container {
  margin: 50px auto 100px; max-width: 1280px; min-height: 800px;
  color: var(--one-text-secondary); font-family: var(--one-font-body);
}
.one-blog-post-container p { margin-bottom: 5px; }
.one-blog-post-container a { color: var(--one-link); text-decoration: underline; }
.one-blog-post-container img { max-width: 760px; border-radius: var(--one-radius-sm); }
.one-blog-post-container h1 { margin-bottom: 3px; font-size: 28px; }
.one-blog-post-container h2 { margin-bottom: 3px; font-size: 22px; }
.one-blog-post-container h3 { margin-bottom: 3px; font-size: 18px; }


/* ── Explore row (horizontal scroll) ── */

.one-blogs-explore-row { display: flex; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.one-blogs-explore-row::-webkit-scrollbar { display: none; }
.one-blogs-explore-block {
  flex: 0 0 200px; background: var(--one-bg-card);
  border: 1px solid var(--one-border); border-radius: var(--one-radius-sm);
  overflow: hidden; transition: border-color 0.2s; cursor: pointer;
}
.one-blogs-explore-block:hover { border-color: var(--one-border-hover); }
.one-blogs-explore-h2 { font-family: var(--one-font-display); color: var(--one-text-primary); font-size: 2.25em; padding: 10px 0; }
.one-blogs-explore-figure { margin-bottom: 0; }
.one-blogs-explore-title a { font-size: 16px; color: var(--one-text-primary); }
.one-blogs-explore-title a:hover { color: var(--one-link); }


/* ── Related articles grid ── */

.one-blogs-related-block {
  border-radius: var(--one-radius-sm); overflow: hidden;
  border: 1px solid var(--one-border); background: var(--one-bg-card);
  cursor: pointer; transition: border-color 0.2s, transform 0.25s;
  display: flex; flex-direction: column;
}
.one-blogs-related-block:hover { border-color: var(--one-border-hover); transform: translateY(-5px); }

.one-blogs-related-h2 { font-family: var(--one-font-display); color: var(--one-text-primary); font-size: 2.25em; padding: 10px 0; }
.one-blogs-related-figure { margin-bottom: 0; }
.one-blogs-related-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.one-blogs-related-figure img:hover { transform: scale(1.05); }

.one-blogs-related-title {
  font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.one-blogs-related-title a { color: var(--one-text-primary); }
.one-blogs-related-title a:hover { color: var(--one-link); }

.one-blogs-related-content {
  font-size: 13px; color: var(--one-text-secondary); line-height: 1.55;
  flex: 1; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px;
}

.one-blogs-related-datetime {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--one-text-muted);
  padding-top: 14px; border-top: 1px solid var(--one-border-subtle);
}

.one-blogs-related-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--one-red); color: var(--one-text-inverse);
  padding: 12px 34px; border-radius: var(--one-radius-none);
  font-size: 17px; font-weight: 600; font-family: var(--one-font-body);
  border: none; cursor: pointer; transition: background 0.2s;
}
.one-blogs-related-btn:hover { background: var(--one-red-hover); color: var(--one-text-inverse); }


/* ── CTA banner ── */

.one-blogs-cta-banner {
  background: var(--one-bg-card); border: 1px solid var(--one-border);
  border-radius: var(--one-radius-sm); padding: 40px 32px;
  text-align: center; margin: 48px auto;
}
.one-blogs-cta-banner h3 { font-family: var(--one-font-display); font-size: 34px; margin-bottom: 8px; }
.one-blogs-cta-banner p { color: var(--one-text-secondary); font-size: 15px; margin-bottom: 20px; }

.one-blogs-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--one-red); color: var(--one-text-inverse);
  padding: 12px 34px; border-radius: var(--one-radius-none);
  font-size: 17px; font-weight: 600; font-family: var(--one-font-body);
  border: none; cursor: pointer; transition: background 0.2s;
}
.one-blogs-cta-btn:hover { background: var(--one-red-hover); color: var(--one-text-inverse); }


/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .one-blog-hero h1 { font-size: 46px; }
  .one-featured-card { grid-template-columns: 1fr 1fr; }
  .one-featured-body { padding: 40px 36px; }
  .one-featured-title { font-size: 32px; }
}

@media (max-width: 991.98px) {
  .one-blog-post-container img { max-width: 100%; }
  .one-blog-tag-hero h1 { font-size: 32px; }
}