/* gc-archive-grid.css
 * galleryclass / galleryoutgoing アーカイブ用：正方形タイルのグリッド（Masonryなし）
 *
 * - galleryclass : .gc-archive-grid （全体がグリッド）
 * - galleryoutgoing : .gco-archive-grid（投稿ブロックの縦積み） + .gco-post-grid（投稿内がグリッド）
 */

/* ========== galleryclass（全体がグリッド） ========== */
.gc-archive-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホ2列 */
  gap: 10px;
  margin: 12px 0 24px;
}

@media (min-width: 768px){
  .gc-archive-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC3列 */
    gap: 12px;
  }
}

/* ========== galleryoutgoing（投稿ごとに改行） ========== */
.gco-archive-grid{
  display: flex;
  flex-direction: column;   /* 投稿ごとに改行（ブロック化） */
  gap: 14px;
  margin: 12px 0 24px;
}

.gco-post-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* スマホ2列 */
  gap: 10px;
}

@media (min-width: 768px){
  .gco-post-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC3列 */
    gap: 12px;
  }
}

/* ========== 共通タイル（galleryclass / outgoing 両方） ========== */
.gc-archive-grid .gc-tile,
.gco-post-grid .gc-tile{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* 正方形 */
  overflow: hidden;
  border-radius: 10px;      /* 角丸（既存の雰囲気を維持） */
  text-decoration: none;
}

/* 画像タイル */
.gc-archive-grid .gc-tile img,
.gco-post-grid .gc-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトルタイル（あなたの指定色） */
.gc-archive-grid .gc-tile.gc-title-tile,
.gco-post-grid .gc-tile.gc-title-tile{
  border: 1px solid #666666;
  background: #f5f5f5;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* タイトルタイル内レイアウト */
.gc-archive-grid .gc-title-tile,
.gco-post-grid .gc-title-tile{
  flex-direction: column;
  gap: 4px;
}

.gc-archive-grid .gc-title-tile .gc-date,
.gco-post-grid .gc-title-tile .gc-date{
  font-size: 11px;
  line-height: 1.2;
  opacity: .9;
  text-align: center;
}

/* タイトル文字 */
.gc-archive-grid .gc-title-tile .gc-title,
.gco-post-grid .gc-title-tile .gc-title{
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: #666666;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* PCだけ少しだけ余白を増やす（文字の詰まり防止） */
@media (min-width: 768px){
  .gc-archive-grid .gc-tile.gc-title-tile,
  .gco-post-grid .gc-tile.gc-title-tile{
    padding: 8px;
  }
}


/* PATCH_TITLE_TILE_PADDING_20260213: タイトルタイルは余白ゼロ＋はみ出し防止 */
.gc-archive-grid .gc-tile.gc-title-tile,
.gco-post-grid .gc-tile.gc-title-tile{
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden; /* 角丸内に収める */
}

/* タイトルタイル内側コンテナも余白ゼロ */
.gc-archive-grid .gc-title-inner,
.gco-post-grid .gc-title-inner{
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

/* 日付・タイトル：折り返しを強制してはみ出しを防ぐ */
.gc-archive-grid .gc-date,
.gco-post-grid .gc-date{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  line-height: 1.15;
  max-width: 100%;
}

.gc-archive-grid .gc-title,
.gco-post-grid .gc-title{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* a要素が変な余白を持っていた場合も殺す */
.gc-archive-grid .gc-title-tile a,
.gco-post-grid .gc-title-tile a{
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}