/*
Theme Name: Lightning Child
Template: lightning
*/

/* =========================================
   Lightning：2カラム由来の余白を全ページで解消
   ========================================= */
.sub-section,
.siteContent .sub-section{
  display: none !important;
}

.main-section--col--two{
  display: block !important;
  width: 100% !important;
}

.main-section--col--two #main,
.main-section--col--two .main-section__main{
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* コンテナ幅：全ページ共通（好みで 1280〜1600） */
.site-body-container.container{
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* =========================================
   Events アーカイブ：カード（3カラム最終版）
   左=画像 / 中=情報 / 右=ボタン
   ========================================= */

/* 親のflex等でカードが縮むのを防止 */
body.post-type-archive-events .post-list.vk_posts{
  display: block !important;
}

body.post-type-archive-events article.event-card{
  display: grid !important;
  grid-template-columns: 450px 1fr 160px !important; /* 画像/情報/ボタン */
  gap: 28px !important;
  align-items: center !important;

  padding: 18px 0 !important;
  border-bottom: 1px solid #ddd !important;

  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 画像（4:3 トリミング） */
body.post-type-archive-events article.event-card .event-thumb{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  display: block !important;
}
body.post-type-archive-events article.event-card .event-thumb img,
body.post-type-archive-events article.event-card .event-thumb__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 中列（タイトル＋メタ） */
body.post-type-archive-events article.event-card .event-body{
  display: block !important;
  width: 100% !important;
}

body.post-type-archive-events article.event-card .event-title{
  margin: 0 0 8px !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}
body.post-type-archive-events article.event-card .event-title a{
  text-decoration: none !important;
}

body.post-type-archive-events article.event-card .event-meta{
  margin: 0 !important;
}
body.post-type-archive-events article.event-card .event-meta__row{
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  gap: 10px !important;
  padding: 6px 0 !important;
}
body.post-type-archive-events article.event-card .event-meta__row dt{
  font-weight: 700 !important;
}
body.post-type-archive-events article.event-card .event-meta__row dd{
  margin: 0 !important;
}

/* 右列：ボタン */
body.post-type-archive-events article.event-card .event-actions{
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
}
body.post-type-archive-events article.event-card .event-btn{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: #111 !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* スマホ：縦並び */
@media (max-width: 767px){
  body.post-type-archive-events article.event-card{
    grid-template-columns: 1fr !important;
  }
  body.post-type-archive-events article.event-card .event-actions{
    justify-self: start !important;
    margin-top: 10px !important;
  }
}

/* Events一覧：画像幅を小さく */
body.post-type-archive-events article.event-card{
  grid-template-columns: 380px 1fr 160px !important; /* 450→380 */
}

/* 全ページ：左右余白を広げる */
.site-body-container.container{
  padding-left: 32px !important;  /* 20→32（好みで 28〜48） */
  padding-right: 32px !important;
}

/* Events一覧：詳細を見るボタンをTOPのボタン風に統一 */
body.post-type-archive-events article.event-card .event-btn{
  display: inline-block !important;
  padding: 14px 40px !important;     /* ←TOPのボタンに合わせた値 */
  border: 1px solid #333 !important;
  border-radius: 0 !important;       /* 角丸なら 6〜10px に */
  background: transparent !important;
  color: #333 !important;
  text-decoration: none !important;
  letter-spacing: .1em !important;
  transition: all .3s ease !important;
}

/* hover */
body.post-type-archive-events article.event-card .event-btn:hover{
  background: #111 !important;
  color: #fff !important;
}

/* =========================================
   Events アーカイブ（あなたのHTML構造に合わせた最終上書き）
   .event-card直下に .event-thumb / .event-title / .event-meta がある前提
========================================= */

/* PC/共通：2カラム化 + タイトル/メタを右列に固定 */
body.post-type-archive-events .post-list.vk_posts .event-card{
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid #ddd !important;
}

/* 画像は左列 */
body.post-type-archive-events .post-list.vk_posts .event-card .event-thumb{
  grid-column: 1 !important;
  width: 100% !important;
}

/* タイトルとメタを「右列」に固定（←ここが重要） */
body.post-type-archive-events .post-list.vk_posts .event-card .event-title,
body.post-type-archive-events .post-list.vk_posts .event-card .event-meta{
  grid-column: 2 !important;
}

body.post-type-archive-events .post-list.vk_posts .event-card .event-thumb img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* タイトル/メタ微調整 */
body.post-type-archive-events .post-list.vk_posts .event-card .event-title{
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
}
body.post-type-archive-events .post-list.vk_posts .event-card .event-title a{
  text-decoration: none !important;
}

body.post-type-archive-events .post-list.vk_posts .event-card .event-meta{
  margin: 0 !important;
}
body.post-type-archive-events .post-list.vk_posts .event-card .event-meta p{
  margin: 6px 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* SP：縦並び（画像→タイトル→メタ） */
@media (max-width: 767px){

  /* SPだけ余白広すぎ対策（32px指定が効いてる場合） */
  .site-body-container.container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.post-type-archive-events .post-list.vk_posts .event-card{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }

  /* SPは列固定を解除 */
  body.post-type-archive-events .post-list.vk_posts .event-card .event-thumb,
  body.post-type-archive-events .post-list.vk_posts .event-card .event-title,
  body.post-type-archive-events .post-list.vk_posts .event-card .event-meta{
    grid-column: auto !important;
  }

  body.post-type-archive-events .post-list.vk_posts .event-card .event-title{
    font-size: 18px !important;
    margin: 0 0 6px !important;
  }

  body.post-type-archive-events .post-list.vk_posts .event-card .event-meta p{
    margin: 4px 0 !important;
  }
}

/* =========================================
   Events アーカイブ：PCレイアウト修正（画像大きく＋ボタン右カラム固定）
   ※追加CSSの一番下に追記
========================================= */

@media (min-width: 768px){

  /* カード：3カラム（画像 / 情報 / ボタン） */
  body.post-type-archive-events .post-list.vk_posts .event-card{
    display: grid !important;
    grid-template-columns: 380px 1fr 260px !important; /* ←画像を大きく、ボタン列も確保 */
    gap: 28px !important;
    align-items: center !important;
    padding: 26px 0 !important;
  }

  /* 画像：左列に固定＆大きめ */
  body.post-type-archive-events .post-list.vk_posts .event-card .event-thumb{
    grid-column: 1 !important;
    width: 100% !important;
  }
  body.post-type-archive-events .post-list.vk_posts .event-card .event-thumb img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* タイトル＋メタ：中央列に固定 */
  body.post-type-archive-events .post-list.vk_posts .event-card .event-title,
  body.post-type-archive-events .post-list.vk_posts .event-card .event-meta{
    grid-column: 2 !important;
  }

  /* ボタン：右列に固定して中央寄せ（極端に右に寄るのを防止） */
  body.post-type-archive-events .post-list.vk_posts .event-card .event-actions{
    grid-column: 3 !important;
    justify-self: center !important;  /* ←右端ではなくカラム中央 */
    align-self: center !important;
    margin: 0 !important;
  }

  /* もしevent-actionsが無く、ボタンがevent-btnだけの場合の保険 */
  body.post-type-archive-events .post-list.vk_posts .event-card .event-btn{
    margin: 0 !important;
    justify-self: center !important;
  }
}