/* =============================================================
 * pages/column.css
 * シェアハウスコラム 一覧 (/column/) / 詳細 (/column/{cl_cd}/)
 * legacy: pc_column / sp_column 互換
 * ============================================================= */

/* ===== Page Heading ===== */
.page-heading--column {
  --page-heading-accent: #f5b642;
  --page-heading-accent-rgb: 245, 182, 66;
  --page-heading-accent-d: #b57a1c;
  --page-heading-accent-l: #fff2d8;
  --page-heading-ink: #5a391d;
  --page-heading-line: rgba(245, 182, 66, .54);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .90) 44%, rgba(255, 242, 216, .72) 100%),
    url('/images/top/sp_bg_column.png') no-repeat right bottom,
    repeating-radial-gradient(circle at 12px 12px, rgba(245, 182, 66, .18) 0 4px, transparent 5px 22px),
    #fffaf0;
  background-size: auto, auto, 24px 24px, auto;
  border-top: 8px solid #f5b642;
  border-bottom-color: rgba(245, 182, 66, .40);
}
.page-heading--column .page-heading__title {
  color: #6b4722;
  font-size: 2rem;
  font-weight: 900;
}
.page-heading--column .page-heading__lead {
  color: var(--sc-text-2);
}
.page-heading--column .page-heading__badge {
  color: #8a5c18;
  background: rgba(255, 255, 255, .82);
  border-color: rgba(245, 182, 66, .38);
}
.page-heading--column .page-heading__badge::before {
  background: linear-gradient(90deg, #f5b642 0%, #9b6b35 100%);
}
.page-heading--column::before {
  background: linear-gradient(90deg, #f5b642 0%, #f5b642 68%, #9b6b35 100%);
}
@media (max-width: 767px) {
  .page-heading--column {
    background-size: auto, 190px auto, 22px 22px, auto;
    background-position: center, right bottom, center, center;
  }
  .page-heading--column .page-heading__title {
    font-size: 1.38rem;
  }
}

/* ===== カテゴリタブ ===== */
.column-cats {
  margin-bottom: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.column-cats__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--sp-1) var(--sp-3);
  background: #fff;
  border: 1px solid var(--sc-primary);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sc-text);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.column-cats__item:hover {
  background: var(--sc-primary);
  color: var(--sc-text);
  text-decoration: none;
}
.column-cats__item--active {
  background: var(--sc-primary);
  color: var(--sc-text);
  pointer-events: none;
}

/* ===== 件数 ===== */
.column-count {
  font-size: var(--fs-sm);
  color: var(--sc-text-2);
  margin-bottom: var(--sp-3);
  text-align: center;
}
.column-count strong {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--sc-text);
}

/* ===== 記事リスト (横並びカード) ===== */
.column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ===== 記事カード ===== */
.column-card {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: var(--sc-text);
  transition: box-shadow .15s ease;
}
.column-card:hover {
  box-shadow: var(--sh-2);
  text-decoration: none;
}

/* サムネイル */
.column-card__thumb {
  flex: 0 0 140px;
  width: 140px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sc-bg-alt);
  position: relative;
}
.column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.column-card__thumb .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sc-text-3);
  font-size: 2rem;
}

/* 本文エリア */
.column-card__body {
  flex: 1 1 auto;
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  justify-content: center;
}
.column-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}
.column-card__cat {
  display: inline-block;
  padding: 2px 8px;
  background: var(--sc-primary);
  color: var(--sc-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  text-decoration: none;
}
.column-card__date {
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
  display: flex;
  align-items: center;
  gap: 3px;
}
.column-card__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--sc-accent-d, #333);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.column-card__excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--sc-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .column-card__thumb { flex: 0 0 100px; width: 100px; }
  .column-card__body { padding: var(--sp-2) var(--sp-3); }
  .column-card__title { font-size: var(--fs-sm); }
}

/* ===== ページネーション ===== */
.column-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.column-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--sc-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--sc-text);
  text-decoration: none;
  background: #fff;
  transition: background .1s, color .1s;
}
.column-pagination__item:hover { background: var(--sc-bg-alt); text-decoration: none; }
.column-pagination__item--active {
  background: var(--sc-primary);
  color: var(--sc-text);
  border-color: var(--sc-primary);
  font-weight: 700;
  pointer-events: none;
}
.column-pagination__item--disabled {
  color: var(--sc-text-3);
  pointer-events: none;
}

/* ===== 詳細ページ ===== */
.column-article__head {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid var(--sc-primary);
}
.column-article__cat {
  display: inline-block;
  padding: 3px 10px;
  background: var(--sc-primary);
  color: var(--sc-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  text-decoration: none;
}
.column-article__cat:hover { opacity: .85; text-decoration: none; }
.column-article__title {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--sc-text);
  line-height: 1.4;
}
.column-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--sc-text-2);
}
.column-article__meta i { margin-right: 2px; }

/* ヒーロー画像 */
.column-article__hero {
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sc-bg-alt);
}
.column-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文 (DB の HTML をそのまま描画)
   コラムは管理画面で WYSIWYG 編集された HTML を {!! !!} で出力するため、
   レガシー版の固定幅 / inline style が混入しがち。
   ここでオーバーフローを完全に封じ込めてレスポンシブを保証する */
.column-article__body {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--sc-text);
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  /* どうしても収まらない要素 (横長表など) は本文自体を横スクロールで救済 */
  overflow-x: auto;
}
/* SP: 読み物としての可読性向上のため本文だけ一段大きく (16px → 18px) */
@media (max-width: 767px) {
  .column-article__body { font-size: var(--fs-md); }
}
/* 子孫すべての max-width をコンテナ幅以内に強制 (inline style="width:800px" 等を打ち消す) */
.column-article__body * {
  max-width: 100% !important;
  box-sizing: border-box;
}
.column-article__body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: var(--sp-6) 0 var(--sp-3);
  padding-left: var(--sp-2);
  border-left: 4px solid var(--sc-primary);
  line-height: 1.4;
}
.column-article__body h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: var(--sp-4) 0 var(--sp-2);
  color: #6b4722;
}
.column-article__body p { margin: 0 0 var(--sp-3); }
.column-article__body img,
.column-article__body video,
.column-article__body iframe,
.column-article__body embed,
.column-article__body object {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  display: block;
  margin: var(--sp-3) auto;
}
.column-article__body ul,
.column-article__body ol {
  padding-left: 1.5em;
  margin-bottom: var(--sp-3);
}
.column-article__body li { margin-bottom: var(--sp-1); }
.column-article__body a { color: var(--sc-primary-d, #c17d00); text-decoration: underline; }
.column-article__body table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  word-break: break-word;
}
/* 横長 table は本文自体ではなくテーブル単独で横スクロール (UX 改善) */
.column-article__body pre,
.column-article__body code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.column-article__body table th,
.column-article__body table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--sc-border);
  vertical-align: top;
}
.column-article__body table th {
  background: var(--sc-bg-alt);
  font-weight: 700;
}

/* タグ */
.column-article__tags {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--sc-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.column-article__tags-label { color: var(--sc-text-2); font-weight: 700; margin-right: var(--sp-1); }
.column-article__tags-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--sc-bg-alt);
  border: 1px solid var(--sc-border);
  border-radius: var(--r-sm);
  color: var(--sc-text-2);
}

/* 一覧へ戻るリンク */
.column-article__back {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: center;
}
.column-article__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  border: 1px solid var(--sc-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--sc-text);
  text-decoration: none;
  background: #fff;
  transition: background .1s;
}
.column-article__back-link:hover { background: var(--sc-bg-alt); text-decoration: none; }