/* =========================================================
   Base Styles - 全体共通
   ========================================================= */

/* サムネイル画像の基本スタイル */
.thumb { 
  width: 100%; 
  aspect-ratio: 16/9; 
  object-fit: cover; 
  border-radius: 8px; 
}

/* ナビゲーションバーの調整（モバイル） */
@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: 1rem;
  }
  .navbar-nav {
    padding-bottom: 0.5rem;
  }
  .navbar-text {
    padding-bottom: 0.5rem;
  }
}

/* =========================================================
   Like Button — canonical styles (use class="like-btn")
   ========================================================= */
:root{
  --like-pink:    #e91e63;   /* 押下時の文字色 */
  --like-pink-bg: #ffe4ec;   /* 押下時の背景色 */
  --like-gray:    #6b7280;   /* 未押下の文字色 */
  --like-border:  #e5e7eb;   /* 未押下の枠線色 */
}

button.like-btn,
.like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;                 /* カードでの標準サイズ */
  border:1px solid var(--like-border);
  border-radius:999px;
  background:#fff;
  color:var(--like-gray);
  line-height:1;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}

.like-btn:hover{ background:#f8fafc; }

.like-btn .heart{ font-size:14px; line-height:1; }
.like-btn .count,
.like-count{ font-size:14px; line-height:1; }  /* どちらのclass名でも数字が整う */

/* 押した状態：枠線を消してピンクに */
.like-btn.liked{
  background:var(--like-pink-bg);
  color:var(--like-pink);
  border-color:transparent;         /* ← 外枠をなくす */
}

/* 無効化（連打防止など） */
.like-btn:disabled{ opacity:.85; cursor:default; }

/* 投稿詳細ページで少し大きくしたいときは class="like-btn like-btn-lg" を追加 */
.like-btn.like-btn-lg{
  padding:8px 16px;
  font-size:.95rem;
}

/* Bootstrapの outline ボタンと併用時、liked で枠が残らないように */
.like-btn.liked.btn-outline-secondary{ border-color:transparent !important; }

/* ほんのりホバー影（好みで） */
.like-btn:not(.liked):hover{ box-shadow:0 1px 3px rgba(16,24,40,.06); }

/* =========================================================
   Sticky Sidebar - 投稿詳細ページ用
   ========================================================= */

/* デスクトップでのスティッキーサイドバー */
@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 24px; /* ナビゲーションバーの高さ + 余白 */
    z-index: 10;
  }
  
  /* スクロール時の最大高さ設定（必要に応じて） */
  .sticky-sidebar {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  
  /* スクロールバーのスタイリング（オプション） */
  .sticky-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  
  .sticky-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  .sticky-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
  
  .sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* モバイルではスティッキーを無効化 */
@media (max-width: 991px) {
  .sticky-sidebar {
    position: static;
  }
}