/* ══════════════════════════════════════════════════════════════
   TrueKatana Blog — V2 Tamahagane
   Tokens: inherits from 100010.live.layout.css :root
   Font:   Nunito only (800 for display, 700/600/400 for body)
   ══════════════════════════════════════════════════════════════ */


/* ── 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; background-color: var(--one-bg-hero); border-bottom: 1px solid var(--one-border-subtle); }
.one-blog-hero h1 { font-family: var(--one-font-body); font-weight: 800; font-size: 42px; line-height: 1.15; letter-spacing: -0.01em; 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-pill-text); background: var(--one-pill-bg);
  border: 1px solid var(--one-pill-border); cursor: pointer;
  transition: all 0.2s; user-select: none;
}
.one-tag-pill:hover { border-color: var(--one-pill-hover-border); color: var(--one-pill-hover-text); }
.one-tag-pill.active { background: var(--one-pill-active-bg); color: var(--one-pill-active-text); border-color: var(--one-pill-active-border); 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-border-hover); 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: 700; padding: 4px 12px;
  border-radius: var(--one-radius-none); 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-body); font-weight: 700; font-size: 32px;
  line-height: 1.2; margin-bottom: 16px;
}

.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 { background-color: var(--one-bg-hero); }
.one-blog-tag-hero h1 { font-family: var(--one-font-body); font-weight: 800; color: var(--one-text-primary); font-size: 48px; letter-spacing: -0.02em; }
.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-primary); line-height: 26px !important; font-weight: 600; }
.one-blog-list-title a { color: var(--one-text-primary); }
.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-pill-text);
  background: var(--one-pill-bg); border: 1px solid var(--one-pill-border);
  cursor: pointer; transition: all 0.2s;
}
.one-blog-tag-cloud-item:hover { border-color: var(--one-pill-hover-border); color: var(--one-pill-hover-text); }
.one-blog-tag-cloud-item.current { background: var(--one-pill-active-bg); color: var(--one-pill-active-text); border-color: var(--one-pill-active-border); 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-pill-text);
  background: var(--one-pill-bg); padding: 5px 14px;
  border-radius: var(--one-radius-full); border: 1px solid var(--one-pill-border);
  transition: all var(--one-duration);
}
.one-blog-post-tags a:hover { border-color: var(--one-pill-hover-border); color: var(--one-pill-hover-text); }

.one-blog-post-title {
  margin: auto; font-family: var(--one-font-body); font-weight: 800;
  color: var(--one-text-primary); font-size: 2.5em; max-width: 900px; letter-spacing: -0.01em;
}

.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: 8px; line-height: 1.75; }
.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 { font-size: 26px; font-weight: 700; margin: 32px 0 12px; line-height: 1.3; color: var(--one-text-primary); }
.one-blog-post-container h2 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; line-height: 1.35; color: var(--one-text-primary); }
.one-blog-post-container h3 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; line-height: 1.4; color: var(--one-text-primary); }


/* ── 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-body); font-weight: 800; color: var(--one-text-primary); font-size: 2.25em; padding: 10px 0; letter-spacing: -0.01em; }
.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-body); font-weight: 800; color: var(--one-text-primary); font-size: 2.25em; padding: 10px 0; letter-spacing: -0.01em; }
.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-body); font-weight: 800; font-size: 34px; letter-spacing: -0.01em; 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
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop (≥768px) ── */
@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; }
}

/* ── Tablet (≤991px) ── */
@media (max-width: 991.98px) {
  .one-blog-post-container img { max-width: 100%; }
  .one-blog-tag-hero h1 { font-size: 32px; }
  .one-blogs-cta-banner h3 { font-size: 28px; }
  .one-blogs-explore-h2,
  .one-blogs-related-h2 { font-size: 1.85em; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767.98px) {

  /* Blog container base */
  .one-blog-container { font-size: 1em; margin: 30px auto 60px; }

  /* Hero */
  .one-blog-hero { padding: 32px 12px 16px; }
  .one-blog-hero h1 { font-size: 28px; line-height: 1.2; }
  .one-blog-hero-sub { font-size: 15px; line-height: 1.55; }

  /* Tag pills */
  .one-tag-bar { padding: 14px 24px 14px 8px; }
  .one-tag-pill { padding: 6px 14px; font-size: 13px; }

  /* Featured card */
  .one-featured { margin-top: 24px; margin-bottom: 20px; }
  .one-featured-body { padding: 20px 16px; }
  .one-featured-title { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
  .one-featured-excerpt { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }

  /* Blog list */
  .one-blog-list-title { font-size: 1.1em; line-height: 1.35 !important; }

  /* Tag hero */
  .one-blog-tag-hero h1 { font-size: 26px; }

  /* Blog post (single article) */
  .one-blog-post { padding-top: 20px; }
  .one-blog-post-header { min-height: 240px; margin-bottom: 16px; }
  .one-blog-post-title { font-size: 1.65em; line-height: 1.25; max-width: 100%; }
  .one-blog-post-subtitle { font-size: 13px; }

  /* Post content */
  .one-blog-post-container { margin: 28px auto 60px; font-size: 15px; }
  .one-blog-post-container h1 { font-size: 22px; margin: 24px 0 10px; }
  .one-blog-post-container h2 { font-size: 19px; margin: 20px 0 8px; }
  .one-blog-post-container h3 { font-size: 16px; margin: 18px 0 6px; }

  /* Explore / Related section titles */
  .one-blogs-explore-h2,
  .one-blogs-related-h2 { font-size: 1.5em; padding: 6px 0; }

  /* Related cards */
  .one-blogs-related-title { font-size: 15px; }
  .one-blogs-related-content { font-size: 13px; }

  /* CTA banner */
  .one-blogs-cta-banner { padding: 28px 20px; margin: 32px auto; }
  .one-blogs-cta-banner h3 { font-size: 22px; }
  .one-blogs-cta-banner p { font-size: 14px; }
  .one-blogs-cta-btn,
  .one-blogs-related-btn { font-size: 15px; padding: 10px 28px; }
}