/* ============================================
   Shirofan Link Card CSS
   ============================================ */
/* ===== Link Card 強制パッチ（最下部に追記） ===== */

/* 1) 枠線を少し濃く */
.link-card.link-card {
  border-color: #9f9f9f !important; /* #aaa より少し視認性UP */
  border-width: 1.6px !important;
  overflow: visible !important;      /* クリップ回避 */
  padding-top: 14px !important;      /* タイトルが枠に触れるのを予防 */
}

/* 2) ホバー時シャドーを少し濃く */
.link-card.link-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.20) !important;
  transform: translateY(-2px);
}

/* 3) タイトルの1行目が枠に当たる問題の根治（display系を強制） */
.link-card .link-card-title,
.link-card .link-card-title a {
  display: block !important;             /* -webkit-box等を無効化 */
  margin: 0 0 4px 0 !important;
  line-height: 1.5 !important;
  white-space: normal !important;         /* きちんと改行 */
  word-break: break-word !important;      /* 長い語/URLも折返し */
  -webkit-line-clamp: unset !important;   /* 旧指定を無効化 */
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  padding-top: 2px !important;            /* 文字の“食い込み”を防止 */
  color: #333 !important;
  font-weight: 600 !important;
}

/* サムネとテキストの基本整列（万一の崩れ防止） */
.link-card .link-card-content {
  padding-left: 12px !important;
  overflow: visible !important;
}
.link-card img {
  width: 120px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}
/* ===== LinkCard 最終パッチ（末尾に追記） ===== */

/* 1) 枠線をほんの少し濃く */
.sf-linkcard,
.link-card {
  border-color: #aaa !important;   /* わずかに濃く */
  border-width: 1.6px !important;
}

/* 2) ホバー時のシャドーを少し濃く */
.sf-linkcard:hover,
.link-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  transform: translateY(-2px);
}

/* 3) タイトル1行目が枠で切れる問題の対策
   - 親とのマージン相殺を避けるため margin-topをゼロ & 親に薄くpadding
   - 2行省略（-webkit-line-clamp）を維持しつつ、食い込み回避 */
.sf-linkcard__title {
  margin: 0 0 4px 0 !important;       /* ← margin-topをゼロに */
  padding-top: 2px !important;        /* ← 文字が上枠に触れないように */
  line-height: 1.5 !important;
  color: #333 !important;
  font-weight: 600 !important;

  /* 2行で省略表示（Safari/Chromium系） */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;  /* 長い語/URLも折り返し */
}

/* 親側の上パディングを少し確保して“枠当たり”を根治 */
.sf-linkcard,
.link-card {
  padding-top: 14px !important;       /* ← タイトル行頭が枠線に触れない */
}

/* ===== LinkCard アイキャッチ画像を角丸に ===== */
.sf-linkcard img,
.link-card img {
  border-radius: 8px !important; /* ← 半径8pxで自然な角丸に */
  overflow: hidden !important;
  display: block; /* 行間の余白防止（inline要素対策） */
}

/* ===== LinkCard タイトル行末のみ余裕を持たせるパッチ ===== */
.sf-linkcard__title {
  padding-right: 4.5em !important;  /* ← 行末にだけ余裕を作る（約文字1〜2個分） */
  line-height: 1.5 !important;
  margin: 0 0 4px 0 !important;
  color: #333 !important;
  font-weight: 600 !important;

  /* 2行で省略表示を維持 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
}
/* 行頭はそのまま／行末だけ短くして右側に余白を確保 */
.sf-linkcard__title {
  /* テキストの見え方は従来どおり（2行省略のまま） */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;

  /* ここがポイント：要素幅を少しだけ小さくする */
  width: auto !important;                 /* 既存の width:100% を打ち消し */
  max-width: calc(100% - 2em) !important; /* ← 右側だけ約2文字分の“逃げ” */
  min-width: 0 !important;                /* flex環境での縮小阻害を回避 */
  margin-right: 0 !important;             /* 予期せぬ相殺を防止 */
  padding-right: 0 !important;            /* 左位置は一切ずらさない */
}

/* 万一、タイトル内が <a> のみの場合にも効くよう保険 */
.sf-linkcard__title > a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;

  width: auto !important;
  max-width: calc(100% - 2em) !important;
  min-width: 0 !important;
}
/* ============================================
   レイアウト修正 FINAL-FINAL: IDセレクタによる強制適用
   ============================================ */
/* ============================================
   レイアウト修正: 1列表示の強制 (Final)
   ============================================ */

/* 1. ラッパー要素のレイアウト設定を完全にリセット */
.sf-linkcard-wrap {
    margin: 0 !important;
    padding: 0 !important;
    /* widthやmax-widthはテーマのデフォルトに任せる */
}

/* 2. リストの親要素 (UL) からFlexbox/Gridを完全に解除 */
.sf-linkcard-grid {
    display: block !important;       /* Flexbox/Gridの強制解除 */
    list-style: none !important;
    margin: 0 !important;            /* マージンをリセット */
    padding: 0 !important;           /* パディングをリセット */
    width: 100% !important;          /* 幅を強制的に100%に */
}

/* 3. 各カード要素 (LI) を標準のブロック要素に戻し、全幅を確保 */
.sf-linkcard {
    display: block !important;       /* ブロック要素として縦に並ぶ */
    width: 100% !important;          /* 親要素の幅いっぱいに広げる */
    margin-top: 15px !important;     /* カード間の縦の隙間を確保 */
    margin-bottom: 15px !important;
    float: none !important;          /* floatの強制解除 */
    box-sizing: border-box !important;
    /* その他の個別デザイン（枠線など）は既存のスタイルが適用されます */
}

/* 最初のカードの上部マージンは不要な場合が多いためリセット */
.sf-linkcard-grid > .sf-linkcard:first-child {
    margin-top: 0 !important;
}