/*
  dokodemo-column.css
  DOKODEMO_ABISU-561 fanbi-store.jp カスタムコンテンツ「コラム」
  登録先: column-list.html / column-detail.html / column-top-block.html の3ページ共通スタイル枠

  配色: サイトロゴ準拠の緑系(判断メモ)
    - メイン: #2e7d32(濃緑・見出し/リンクhover)
    - サブ:   #f1f8e9(淡緑・背景)
    - ライン: #c8e6c9(淡緑・border)
  実際のロゴ配色と差異があれば、この3色を差し替えるだけで全体に反映される想定。
*/

/* ==========================================================================
   ちらつき防止(implementation.md準拠)
   up-d-column-page が付くページ(コラム一覧・コラム詳細)のみに効かせる。
   本番TOPページのbodyにはこのクラスが無いため影響しない。
   ========================================================================== */
   body.up-d-column-page {
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  
  body.up-d-column-page.is-loaded,
  body.up-d-column-page[data-element-id] {
    opacity: 1 !important;
  }
  
  /* ==========================================================================
     コラム一覧(column-list.html)
     既存 block-topic-details 系クラスは流用。新規装飾は up-d- 配下に限定。
     ========================================================================== */
  .up-d-column-list .up-d-column-pager-wrap {
    text-align: center;
  }
  
  .up-d-column-list .up-d-column-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* A-BiSU側が data-collection-list-pagination 配下に生成するページ番号リンクの想定スタイル。
     実際に出力される要素名が異なる場合は、テストページのDOM構造を見て調整すること(README参照) */
  .up-d-column-list .up-d-column-pager a,
  .up-d-column-list .up-d-column-pager span {
    display: inline-block;
    min-width: 32px;
    padding: 6px 10px;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    color: #2e7d32;
    text-decoration: none;
    font-size: 13px;
  }
  
  .up-d-column-list .up-d-column-pager a:hover {
    background: #f1f8e9;
  }
  
  .up-d-column-list .up-d-column-pager .current,
  .up-d-column-list .up-d-column-pager .is-current {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
  }
  
  /* 一覧カードのレイアウトは up-d-column-card 系クラスのみで完結させる。
     dl/dt/dd自体や block-topic-details--items 等、既存クラスのCSSは上書きしない。
     (経緯1: block-topic-details--icon をサムネイルに流用し、お知らせ用の装飾バッジ向けCSSを
      意図せず継承して重なりが発生。経緯2: dt/dd化した後も、既存サイト側の
      `.block-topic-details--items dt/dl/dd`という要素+クラスセレクタが
      クラス単独の up-d-column-date より詳細度で優先され、表示が崩れた。
      → dl/dt/dd の使用自体をやめ、div/spanのみで組むことで要素セレクタごと回避する) */
  .up-d-column-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .up-d-column-thumb {
    flex-shrink: 0;
    display: block;
    width: 120px;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    background: #f1f8e9;
  }
  
  .up-d-column-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .up-d-column-card-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
  }
  
  /* 日付をタイトルの直上に配置(表示順はDOM順そのまま: 日付span → タイトルspan)。
     display/colorは、既存サイトの要素セレクタ(dt/dd等)による詳細度負けが
     今後別の要素構造で再発しても崩れないよう保険で !important を付与している。 */
  .up-d-column-date {
    display: block !important;
    color: #2e7d32 !important;
    font-size: 13px;
    font-weight: 700;
    margin-top: 7px;
  }
  
  .up-d-column-title {
    display: block;
    color: #333;
    font-size: 15px; 
  }
  
  .up-d-column-card:hover .up-d-column-title {
    color: #2e7d32;
    text-decoration: underline;
  }
  
  @media (max-width: 860px) {
    .up-d-column-card {
      gap: 10px;
    }
  
    .up-d-column-thumb {
      width: 96px;
      aspect-ratio: 16 / 9;
      height: auto;
    }
  }
  
  /* ==========================================================================
     コラム詳細(column-detail.html)
     ========================================================================== */
  .up-d-column-detail {
    max-width: 840px;
    margin: 0 auto;
  }
  
  .up-d-column-detail .up-d-column-date {
    color: #2e7d32;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .up-d-column-detail .up-d-column-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f8e9;
    margin-bottom: 24px;
  }
  
  .up-d-column-detail .up-d-column-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .up-d-column-detail .up-d-column-body {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
  }
  
  .up-d-column-detail .up-d-column-body img {
    max-width: 100%;
    height: auto;
  }
  
  .up-d-column-detail .up-d-column-body p {
    margin: 0 0 1.4em;
  }
  
  .up-d-column-detail .up-d-column-body a {
    color: #2e7d32;
  }
  
  .up-d-column-back {
    display: block;
    text-align: center;
    margin-top: 32px;
  }
  
  /* ==========================================================================
     TOP導線ブロック(column-top-block.html)
     ========================================================================== */
  .up-d-column-top {
    padding: 40px 0;
  }
  
  .up-d-column-top--header {
    margin-bottom: 24px;
  }
  
  .up-d-column-top--list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  .up-d-column-top--card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: 0.2s;
  }
  
  .up-d-column-top--card:hover {
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
    transform: translateY(-2px);
  }
  
  .up-d-column-top--card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f8e9;
  }
  
  .up-d-column-top--card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .up-d-column-top--card-body {
    display: block;
    padding: 12px;
  }
  
  .up-d-column-top--card-date {
    display: block;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  
  .up-d-column-top--card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
  }
  
  .up-d-column-top--more {
    display: block;
  }
  
  @media (max-width: 860px) {
    .up-d-column-top--list {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }