/* =========================================
   Single Post (post.css)
   - Layout, Sidebar sticky, Meta, Share, Side blocks
   - Breakpoints: 1024px / 768px
========================================= */

/* ---------- Theme tokens ---------- */
:root {
    --bb-accent: #D35B29; /* オレンジ */
    --bb-accent-ink: #fff;
    --bb-border: #e6e6e6;
    --bb-ink-weak: #666;
    --bb-ink-mute: #888;
    --bb-radius: 10px;
    --bb-gap: 24px;
    --bb-stick-top: 20px; /* 固定開始のオフセット。固定ヘッダがあれば調整 */

    /* 幅トークン（PC想定） */
    --bb-main-w: 760px;
    --bb-side-w: 370px;
}

/* ---------- Layout ---------- */
.u-flex {
    display: flex;
    gap: var(--bb-gap);
    align-items: flex-start;
    max-width: calc(var(--bb-main-w) + var(--bb-side-w) + var(--bb-gap));
    margin-inline: auto;
}

.bb-article {
    flex: 0 0 var(--bb-main-w);
    max-width: var(--bb-main-w);
    min-width: 0;
}

.bb-sidebar {
    flex: 0 0 var(--bb-side-w);
    max-width: var(--bb-side-w);
    position: sticky; /* 追従 */
    top: var(--bb-stick-top);
    align-self: flex-start;
    /* 長いときの視認性。必要ならコメント解除
    max-height: calc(100dvh - var(--bb-stick-top));
    overflow: auto;
    */
}

/* ---------- Article Head ---------- */
.bb-article__title {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.25;
    margin: 0 0 8px;
}

/* メタ行 */
.bb-article__meta {
    color: var(--bb-ink-weak);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

/* カテゴリを“目立つタグ”に */
.bb-article__cats a {
    display: inline-block;
    background: var(--bb-accent);
    color: var(--bb-accent-ink);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border: 1px solid var(--bb-accent); /* fallback */
    border: 1px solid color-mix(in srgb, var(--bb-accent) 90%, #000 10%);
}
.bb-article__cats a:hover,
.bb-article__cats a:focus {
    filter: brightness(0.95);
}

/* 他のメタは少し控えめに */
.bb-article__author,
.bb-article__date {
    color: var(--bb-ink-weak);
}

/* ---------- Eyecatch ---------- */
.bb-article__thumb {
    margin: 20px 0;
}
.bb-article__thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--bb-radius);
}

/* ---------- Content ---------- */
.bb-article__content { line-height: 1.9; }
.bb-page-links { margin-top: 24px; }

/* ---------- Share ---------- */
.bb-share { margin: 32px 0 0; }
.bb-share__title { font-size: 16px; margin: 0 0 10px; }
.bb-share__list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bb-share__btn {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--bb-border);
    text-decoration: none;
    font-size: 14px;
}
.bb-share__btn--x:hover,
.bb-share__btn--fb:hover,
.bb-share__btn--copy:hover {
    border-color: #ccc;
}

/* ---------- Prev/Next ---------- */
.bb-post-nav {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.bb-post-nav a { text-decoration: none; }
.bb-post-nav__prev a,
.bb-post-nav__next a {
    border: 1px solid #ccc;
    color: #000;
    padding: 10px 15px;
    background-color: #fff;
}
.bb-post-nav__prev a:hover,
.bb-post-nav__next a:hover {
    background-color: #eee;
}

/* =========================================
   Sidebar
========================================= */
.bb-side-block {
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    padding: 16px;
    margin: 0 0 16px;
}
.bb-side-title {
    font-size: 16px;
    margin: 0 0 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 見出しのアクセントライン */
    position: relative;
    padding-left: 10px;
}
.bb-side-title::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 2px;
    background: var(--bb-accent);
}

/* --- Search --- */
.bb-side-search .bb-search { display: flex; gap: 8px; align-items: center; }
.bb-search__input {
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    font-size: 14px;
}
.bb-search__submit {
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}
.bb-search__submit:hover { border-color: #ccc; }

/* --- Related --- */
.bb-side-related .bb-side-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bb-side-related .bb-side-item {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 10px;
    align-items: flex-start;
}
.bb-side-related .bb-side-thumb {
    inline-size: 84px;
    block-size: 64px;
    border-radius: var(--bb-radius);
    overflow: hidden;
    background: #f6f6f6;
    border: 1px solid var(--bb-border);
}
.bb-side-related .bb-side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bb-side-related .bb-side-titlelink {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}
.bb-side-related .bb-side-titlelink:hover { text-decoration: underline; }
.bb-side-related .bb-side-date {
    display: block;
    color: var(--bb-ink-mute);
    font-size: 12px;
}

/* --- Categories --- */
.bb-side-cats .bb-side-list { list-style: none; padding: 0; margin: 0; columns: 1; }
.bb-side-cats .bb-side-list li { margin: 0; }
.bb-side-cats .bb-side-list a {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 8px 8px 0;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    background: #d35b29;
    border: 1px solid #d35b29;
}
.bb-side-cats .bb-side-list a:hover {
    filter: brightness(.95);
    border-color: #c55325;
}

/* =========================================
   Archive Grid & Card
========================================= */
.bb-archive__head { margin: 0 0 20px; }
.bb-archive__title { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.bb-archive__desc { color:#666; margin-top:8px; }

.bb-archive-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Card */
.bb-archive-card{
  background:#fff;
  border:1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bb-archive-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-color:#ddd;
}
.bb-archive-card__link{ display:block; color:inherit; text-decoration:none; }
.bb-archive-card__thumb{
  aspect-ratio: 16/9;
  background:#f6f6f6;
  border-bottom:1px solid var(--bb-border);
}
.bb-archive-card__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.bb-archive-card__body{ padding:14px 14px 16px; }
.bb-archive-card__title{
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.4;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.bb-archive-card__meta{
  display:flex; flex-wrap: wrap; gap:8px 10px; align-items:center;
  font-size:13px; color: var(--bb-ink-mute);
  margin: 0 0 8px;
}
/* カテゴリをタグ風に（詳細と統一） */
.bb-archive-card__cats a{
  display:inline-block;
  background: var(--bb-accent);
  color: var(--bb-accent-ink);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  border: 1px solid var(--bb-accent); /* fallback */
  border: 1px solid color-mix(in srgb, var(--bb-accent) 90%, #000 10%);
}
/* 抜粋は2行でカット */
.bb-archive-card__excerpt{
  margin:0;
  color:#444;
  font-size:14px;
  line-height: 1.7;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Pagination */
.navigation.pagination{ margin-top: 24px; }
.navigation .nav-links a,
.navigation .nav-links span{
  display:inline-block;
  min-width: 36px;
  padding:8px 10px;
  margin-right: 6px;
  border:1px solid var(--bb-border);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}
.navigation .nav-links .current{
  background: #fafafa;
  font-weight: 700;
}
.navigation .nav-links a:hover{ border-color:#ccc; }

/* =========================================
   Responsive
========================================= */
@media (max-width: 1024px) {
    .u-flex { gap: 24px; }
    .bb-article { flex: 1 1 auto; max-width: 100%; }
    .bb-sidebar { flex-basis: 320px; max-width: 320px; }
    .u-flex { max-width: 100%; }
}
@media (max-width: 768px) {
    .u-flex {
        flex-direction: column;
        gap: 32px;
        max-width: 100%;
    }
    .bb-article, .bb-sidebar { flex: none; max-width: 100%; }
    .bb-sidebar { position: static; width: 100%; }
    .bb-side-block { border: none; padding: 16px 0; }
    .bb-archive-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 520px){
  .bb-archive-grid{ grid-template-columns: 1fr; }
}

/* アクセシビリティ: 動きを抑制 */
@media (prefers-reduced-motion: reduce) {
  .bb-archive-card { transition: none; }
  .bb-archive-card:hover { transform:none; box-shadow:none; }
}