/* =====================================================
   AGORA TOP tiles (FINAL)
   - fixed width 240px
   - fixed height 240px (desktop)
   - thumb RIGHT: 120x120 (contain)
   - title: 1-line ellipsis
   - no tile footer row
   - author colors: tile border + title band + author chip
===================================================== */

:root{
  --ag-tile-maxw: 240px;
  --ag-tile-h: 240px;
  --ag-gap: 14px;

  --ag-thumb: 120px;      /* 右サムネ */
  --ag-pad-l: 18px;       /* 左余白 */
  --ag-pad-r: 16px;
}

/* タイル下（記事を読む等）は不要 */
.agora-foot{ display:none !important; }

/* グリッド：カード幅固定で増殖、伸びない */
.agora-grid{
  align-items: start;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(var(--ag-tile-maxw), var(--ag-tile-maxw)));
  gap: 18px;
}

/* タイル幅固定（横に伸びない） */
.agora-tile{
  max-width: var(--ag-tile-maxw);
  width: 100%;
}

/* =========================
   Desktop: fixed height card
========================= */
@media (min-width: 500px){
  .agora-tile{
    height: var(--ag-tile-h);
    display:flex;
    flex-direction: column;
    overflow:hidden;
    box-sizing: border-box;
  }

  .agora-tile-link{
    height: 100%;
    display:flex;
    flex-direction: column;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* 上段（作者/日時/コメントバッジなど） */
  .agora-meta{
    padding: 12px var(--ag-pad-r) 8px var(--ag-pad-l);
  }

  /* タイトル：折返しなし→… / 帯（背景）はここに付いている */
  .agora-tile-title{
    padding: 10px var(--ag-pad-r) 10px var(--ag-pad-l);
    margin: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    border: none !important;      /* 下線が残るのを防ぐ */
    display: flex;
    align-items: center;
    min-height: 36px;
    border-radius: 12px;
  }

  /* 本文ブロック：左右2カラム（文章左・サムネ右） */
  .agora-body{
    flex: 1 1 auto;
    min-height: 0;
    display:flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--ag-gap);
    padding: 10px var(--ag-pad-r) 14px var(--ag-pad-l);
    box-sizing: border-box;
  }

  /* 抜粋 */
  .agora-excerpt{
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.65;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    word-break: break-word;
  }

  /* 右サムネ（正方形寄り、全体が入る） */
  .agora-sideimg{
    flex: 0 0 var(--ag-thumb);
    width: var(--ag-thumb);
    height: var(--ag-thumb);
    border-radius: 14px;
    overflow:hidden;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.12);
  }

  .agora-sideimg img{
    width:100%;
    height:100%;
    object-fit: contain;  /* 全体が入る */
    display:block;
    background: #fff;
  }

  /* 画像なし：サムネ枠を消して文章多め */
  .no-thumb .agora-sideimg{ display:none !important; }
  .no-thumb .agora-body{ gap: 0; }
  .no-thumb .agora-excerpt{ -webkit-line-clamp: 8; }

  /* 画像あり：6行のまま */
  .has-thumb .agora-excerpt{ -webkit-line-clamp: 6; }
}

/* =========================
   Mobile: height auto, thumb full width
========================= */
@media (max-width: 499px){
  .agora-tile{ height: auto; }

  .agora-meta{
    padding: 12px 16px 8px 16px;
  }
  .agora-tile-title{
    padding: 10px 16px 10px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 12px;
  }
  .agora-body{
    display:block;
    padding: 10px 16px 14px 16px;
  }
  .agora-sideimg{
    width: 100%;
    height: 180px;
    margin-top: 10px;
  }
  .agora-sideimg img{
    object-fit: contain;
    background:#fff;
  }
  .agora-excerpt{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow:hidden;
  }
}
/* =====================================================
   AGORA TOP tiles (clean final)
   - fixed width 240px
   - fixed height 240px (desktop)
   - thumb RIGHT: 120x120 (contain)
   - title: 1-line ellipsis
   - no tile footer row
===================================================== */

:root{
  --ag-tile-maxw: 240px;
  --ag-tile-h: 240px;
  --ag-gap: 14px;

  --ag-thumb: 120px;      /* 右サムネ */
  --ag-pad-l: 18px;       /* 左余白 */
  --ag-pad-r: 16px;
}

/* タイル下（記事を読む等）は不要 */
.agora-foot{ display:none !important; }

/* グリッド：カード幅固定で増殖、伸びない */
.agora-grid{
  align-items: start;
  justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(var(--ag-tile-maxw), var(--ag-tile-maxw)));
  gap: 18px;
}

/* タイル幅固定（横に伸びない） */
.agora-tile{
  max-width: var(--ag-tile-maxw);
  width: 100%;
}

/* =========================
   Desktop: fixed height card
========================= */
@media (min-width: 500px){
  .agora-tile{
    height: var(--ag-tile-h);
    display:flex;
    flex-direction: column;
    overflow:hidden;
    box-sizing: border-box;
  }

  .agora-tile-link{
    height: 100%;
    display:flex;
    flex-direction: column;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* 上段（作者/日時/コメントバッジなど） */
  .agora-meta{
    padding: 12px var(--ag-pad-r) 8px var(--ag-pad-l);
  }

  /* タイトル：折返しなし→… */
  .agora-tile-title{
    padding: 0 var(--ag-pad-r) 8px var(--ag-pad-l);
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 本文ブロック：左右2カラム（文章左・サムネ右） */
  .agora-body{
    flex: 1 1 auto;
    min-height: 0;
    display:flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--ag-gap);
    padding: 10px var(--ag-pad-r) 14px var(--ag-pad-l);
    box-sizing: border-box;
  }

  /* 抜粋 */
  .agora-excerpt{
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.65;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    word-break: break-word;
  }

  /* 右サムネ（正方形寄り、全体が入る） */
  .agora-sideimg{
    flex: 0 0 var(--ag-thumb);
    width: var(--ag-thumb);
    height: var(--ag-thumb);
    border-radius: 14px;
    overflow:hidden;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.12);
  }

  .agora-sideimg img{
    width:100%;
    height:100%;
    object-fit: contain;  /* 全体が入る */
    display:block;
    background: #fff;
  }

  /* 画像なし：サムネ枠を消して文章多め */
  .no-thumb .agora-sideimg{ display:none !important; }
  .no-thumb .agora-body{ gap: 0; }
  .no-thumb .agora-excerpt{ -webkit-line-clamp: 8; }

  /* 画像あり：少し控えめでもOKなら 6行のまま */
  .has-thumb .agora-excerpt{ -webkit-line-clamp: 6; }
}

/* =========================
   Mobile: height auto, thumb full width
========================= */
@media (max-width: 499px){
  .agora-tile{ height: auto; }

  .agora-meta{
    padding: 12px 16px 8px 16px;
  }
  .agora-tile-title{
    padding: 0 16px 8px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .agora-body{
    display:block;
    padding: 10px 16px 14px 16px;
  }
  .agora-sideimg{
    width: 100%;
    height: 180px;
    margin-top: 10px;
  }
  .agora-sideimg img{
    object-fit: contain;
    background:#fff;
  }
  .agora-excerpt{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow:hidden;
  }
}

/* =========================
   Title bar / header chip styling (your finalized)
========================= */
.agora-header,
.agora-title{
  border-bottom: none !important;
}

.agora-header{
  display:flex;
  align-items:center;
  padding: 10px 14px;
  background: #f2eefe;
  border-radius: 12px;
}

.agora-title{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3;
  font-weight: 600;
}
/* Author color sync (button <-> tile border) */
.agora-tile{
  border-color: var(--aCol, rgba(255,154,60,0.95)) !important;
}

.agora-chip{
  border-color: var(--aCol, rgba(0,0,0,0.18)) !important;
  background: color-mix(in srgb, var(--aCol) 18%, white) !important;
  color: #111 !important;
}

/* もし color-mix が効かない環境があれば保険（上書きされない限り問題なし） */
@supports not (background: color-mix(in srgb, #000 10%, #fff)){
  .agora-chip{ background: rgba(0,0,0,0.05) !important; }
}

.agora-chip.is-active{
  background: var(--aCol, #111) !important;
  border-color: var(--aCol, #111) !important;
  color: #fff !important;
}
/* =========================
   Author color -> tile border & title bg (FINAL)
   - 二重枠を完全に無効化（.agora-tile側の枠/影/擬似要素を殺す）
   - 枠色は --aCol を唯一のソースにする（PHPが inline style で渡す）
   - タイル見出しは「作者色」で塗る（角丸なし）
   - 見出し＆本文の開始位置を 2px 上へ
========================= */

/* 1) タイル外枠はリンク側だけに統一（タイル側の枠は無効） */
.agora-tile{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 2) 枠線は .agora-tile-link の border のみ */
.agora-tile-link{
  height: 100%;
  display:flex;
  flex-direction: column;
  padding: 0 !important;
  box-sizing: border-box;
  border: 2px solid var(--aCol, rgba(255,154,60,0.95)) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff;
}

/* 3) “擬似要素/outline/box-shadow で線を描く” 系は全部殺す（＝二重線の原因対策） */
.agora-tile-link::before,
.agora-tile-link::after{
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.agora-tile-link:focus,
.agora-tile-link:focus-visible,
.agora-tile-link:hover{
  outline: none !important;
  box-shadow: none !important;
}

/* 4) タイル内余白（上側）を 2px だけ詰める */
.agora-meta{
  padding: 10px 14px 0 14px !important;   /* 12px→10px */
}
.agora-body{
  padding: 8px 14px 14px 14px !important; /* 10px→8px */
}

/* 5) タイル見出し：作者色で塗り、位置を 2px 上へ / 角丸なし / 左の余白をなくす */
.agora-tile-title{
  margin: 0 !important;
  padding: 10px 14px !important;
  background: var(--aCol, rgba(255,154,60,0.95)) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  top: -2px;              /* “見出し位置が下がる”の修正 */
}

/* 6) 見出しの左右にできる“内側のスキマ”対策（もし親に余白がある場合） */
.agora-tile-title{
  width: 100%;
  box-sizing: border-box;
}

/* 7) 既存の淡い紫を混ぜない（完全に作者色に統一） */
.agora-tile-title{
  background-image: none !important;
}

/* 8) コメントアイコンなどは触らない（念のため） */
.agora-comment,
.agora-comment *{
  background: initial;
}