/**
 * File: top/topics.css
 * Usage: TOPページ TOPICS セクション
 */

.ly_topics {
  background: var(--color-white);
  padding-block: 96px;
}

/* 能登マップの透かし(MOVIEと同じく見出しの背面に配置) */
.bl_topics_map {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

.bl_topics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* スライダー(画面幅いっぱい・中央のカードを基準に左右が覗く) */
.bl_topicsSlider {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.bl_topicsSwiper {
  width: 100vw;
}

/* スライドは縦中央揃え(小カードを大カードの中央に) */
.bl_topicsSwiper .swiper-wrapper {
  align-items: center;
}

/* SP は全スライド同サイズ(拡大なし)。
   PC は全スライドを同じ箱幅(560px)にし、箱の中でカードの幅だけを変える。
   スライド(箱)の幅は変わらないため切替時にリフローが起きず移動が最小限。
   文字サイズは拡縮しないので、非アクティブでも本文は 16px のまま。 */
.bl_topicsSlide {
  width: min(82vw, 320px);
  height: auto;
}

/* カード */
.bl_topicCard {
  display: block;
  /* PCでは transform: scale で拡縮する(レイアウト幅は固定 → 折り返しは不変)。
     transform はGPU合成で動くため、切替アニメーションがなめらか。 */
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}

.bl_topicCard_thumb {
  display: block;
  aspect-ratio: 312 / 175;
  overflow: hidden;
  border-radius: 2px;
}

.bl_topicCard_thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.bl_topicCard:hover .bl_topicCard_thumb img {
  transform: scale(1.04);
}

.bl_topicCard_meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.bl_topicCard_date,
.bl_topicCard_cat {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-black);
}

.bl_topicCard_cat {
  padding: 5px 14px;
  border: 1px solid #ded5c4;
}

.bl_topicCard_ttl {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--color-black);
}

.bl_topicCard .el_watch {
  margin-top: 24px;
}

/* 左右の丸矢印(中央の大カードを挟む位置) */
.bl_topicsSlider_arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
}

.bl_topicsSlider_arrow__prev {
  left: 4px;
}

.bl_topicsSlider_arrow__next {
  right: 4px;
}

.bl_topics_more {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .ly_topics {
    padding-block: 160px;
  }

  .bl_topics {
    gap: 64px;
  }

  .bl_topics_map {
    top: -72px;
    left: -32px;
    width: 380px;
  }

  /* 全スライド同じ箱幅(大カード基準)。箱は固定。
     カードは常に560px幅でレイアウトし、拡縮は transform: scale で行う。
     → 折り返し位置(改行)はアクティブ/非アクティブで変わらない。 */
  .bl_topicsSlide {
    width: 560px;
    min-height: 504px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 非アクティブ:560px幅のまま 0.571倍に縮小(= 見た目320px)。
     文字も一緒に縮むが、改行は維持される。 */
  .bl_topicsSlide .bl_topicCard {
    width: 560px;
    transform: scale(0.571);
  }

  /* 中央(アクティブ)カードは原寸 */
  .bl_topicsSwiper .swiper-slide-active .bl_topicCard {
    transform: scale(1);
  }

  .bl_topicsSlider_arrow__prev {
    left: calc(50% - 316px);
    right: auto;
    transform: translate(-50%, -50%);
  }

  .bl_topicsSlider_arrow__next {
    left: calc(50% + 316px);
    right: auto;
    transform: translate(-50%, -50%);
  }
}