/* ============================================
   News Detail Page
   ============================================ */

.news-detail {

  /* --- Hero ---
     events-detail で使用。news 単体では news-fv が代わりになる。 */
  .hero {
    width: 100%;
    height: 800rem;
    background-color: var(--color-black);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;

    > .text-sticker {
      width: 1040rem;
      max-width: 100%;
      margin-bottom: -56rem;
    }
  }

  /* --- Article Stack ---
     Hero と本文セクション群（entry-body / guest-list / article-classes 等）の間の
     上余白だけを担う薄いラッパー。幅・水平 padding は持たない（各本文コンポーネントが
     自前で持つ）。news-fv が直前にある場合は news-fv 側で間隔を制御するためここでは
     上余白を持たない（後述 .news-fv + .article-stack）。 */
  .article-stack {
    padding-top: 180rem;
  }

  /* --- Article Classes (本文下: 関連クラスへのリンク) --- */
  .article-classes {
    max-width: 720rem;
    margin: 108rem auto 0;
    padding: 0 var(--padding-x);
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32rem;
  }

  .article-classes-label {
    font-family: var(--font-en);
    font-size: 16rem;
    line-height: normal;
  }

  .article-classes-pill {
    font-size: 15rem;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;

    &:hover {
      background-color: var(--color-black);
      color: #fff;
    }
  }

  /* --- Color Fade --- */
  .color-fade {
    --gradient-height: 400rem;
    height: var(--gradient-height);
    background: linear-gradient(to bottom, var(--event-bg-color, var(--color-white)), var(--color-white));
  }
}

/* ============================================
   News Detail — FV
   タイトル / "News + 日付" / カテゴリ pill を中央積み（PC）。
   SP は label + pill を上段、その下に日付・タイトル。
   ============================================ */
.news-fv {
  padding: 277rem var(--padding-x) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 47rem;
}

.news-fv-title {
  font-family: var(--font-ja);
  font-size: 48rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  max-width: 1080rem;
}

.news-fv-meta {
  display: flex;
  align-items: center;
  gap: 30rem;
}

.news-fv-label,
.news-fv-date {
  font-family: var(--font-en);
  font-size: 19rem;
  line-height: 2.4;
}

.news-fv-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  justify-content: center;
}

.news-fv-category {
  font-weight: var(--font-weight-bold);
  font-size: 15rem;
}

/* news-fv が直前にある場合は news-fv 側で本文との間隔を制御するため
   article-stack 側の上余白を取り除く */
.news-fv + .article-stack {
  padding-top: 64rem;
}

/* ============================================
   News Detail — Next / Previous ニュース
   現在表示中のニュースの前後に位置する 1 件ずつを表示する
   ============================================ */
.news-nav {
  padding-top: 240rem;
  display: flex;
  flex-direction: column;
  gap: 90rem;
}

.news-nav-section > .section-heading {
  padding-left: var(--padding-x);
  margin-bottom: 50rem;
}

/* ============================================
   Events Detail — Next / Previous イベント
   現在表示中のイベントの前後に位置する 1 件ずつを表示する
   ============================================ */
.events-detail .event-nav {
  display: flex;
  flex-direction: column;
  gap: 78rem;
}

.events-detail .event-nav-section > .section-heading {
  padding-left: var(--padding-x);
  margin-bottom: 50rem;
}

.news-detail--colored .event-nav {
  background-color: var(--color-white);
}

/* ============================================
   Events Detail — FV layout
   .news-detail を継承しつつ、Hero まわりの構造を上書きする
   ビューポート高さに合わせて可変
   ============================================ */
.events-detail {
  .hero {
    height: 100vh;
    display: block;
    background-color: var(--color-black);
    background-image: var(--hero-image-pc);
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  /* DANC ロゴ（FV左中段、text-fitで横方向に伸縮） */
  .hero-logo {
    position: absolute;
    top: 50%;
    left: 35rem;
    width: calc(100% - var(--padding-x) * 2);
    transform: translateY(-50%);
    .text-fit-text {
      color: var(--color-black);
    }
  }

  /* Sticker（FV右下） */
  .hero-sticker-wrap {
    position: absolute;
    top: 56%;
    left: calc(50% + 99rem);
  }

  /* SCROLL（FV右下に常時固定） */
  .hero-scroll {
    position: absolute;
    bottom: 30rem;
    right: 36rem;
  }
}

/* 下部バー：News/Events ラベル＋SCROLL＋公開イベントpill
   HTML上は .hero の次に配置。
   PC では「News / Events」だけ transform で上にずらして hero 末尾に重ねる。
   SP ではずらしを解除して hero と本文の間に通常配置。 */
.events-detail .hero-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 36rem;
  margin-bottom: 60rem;
}

.events-detail .hero-bar-label {
  margin: 0;
  font-family: var(--font-en);
  font-size: 27rem;
  line-height: normal;
  transform: translateY(-67rem);
}

.events-detail .hero-bar-pill {
  background-color: var(--color-black);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: 15rem;
  border-color: var(--color-black);
  /* デザイン: SCROLL（FV内）と公開イベント pill の縦間隔を確保 */
  margin-top: 35rem;
}

/* --- FV text color variant ---
   FV 画像の上に乗る文字要素（DANC ロゴ・SCROLL・News/Events ラベル）の色。
   ステッカーは別管理なので対象外。
   グロナビ（#header）は JS でスクロール位置に応じて hero/body を切り替える。
   黒はデフォルト動作なので white のみ上書きルールを置く。 */
.news-detail--hero-white {
  .hero-logo .text-fit-text {
    color: var(--color-white);
  }

  .hero-scroll {
    color: var(--color-white);
  }

  .hero-bar-label {
    color: var(--color-white);
  }
}

/* --- Body text color variant ---
   .article-stack 配下（本文）の文字色。
   黒はデフォルト動作なので white のみ上書きルールを置く。 */
.news-detail--body-white {
  /* 公開イベント pill: 暗い本文背景の上では白背景・黒文字に反転 */
  .hero-bar-pill {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
  }

  .article-stack {
    color: var(--color-white);

    /* 旧コンテンツに残った Gutenberg のインライン色指定（has-*-color）を本文白に揃える */
    .has-text-color {
      color: inherit;
    }

    a {
      color: var(--color-white);
    }

    .wp-block-button__link {
      border-color: var(--color-white);
      color: var(--color-white);

      &:hover {
        background-color: var(--color-white);
        color: var(--color-black);
      }
    }

    .article-classes-pill {
      border-color: var(--color-white);
      color: var(--color-white);

      &:hover {
        background-color: var(--color-white);
        color: var(--color-black);
      }
    }

  }
}

/* --- Colored background variant --- */
.news-detail--colored {
  background-color: var(--event-bg-color);

  .hero {
    background-color: var(--event-bg-color);
  }
}

/* ============================================
   Responsive - SP
   ============================================ */
@media (max-width: 700px) {
  .news-detail {
    .hero {
      height: 400rem;

      > .text-sticker {
        margin-bottom: 20rem;
      }
    }

    .article-stack {
      padding-top: 40rem;
    }

    /* Article Body SP — 共通スタイルは entry-body.css */

    .article-classes {
      margin-top: 90rem;
      gap: 29rem;
    }

    .article-classes-pill {
      font-size: 12rem;
    }
  }

  .news-detail .color-fade {
    --gradient-height: 200rem;
  }

  /* News Detail SP — FV
     label + pill を上段、その下に date、最後にタイトル */
  .news-fv {
    padding: 136rem var(--padding-x) 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label category"
      "date  date"
      "title title";
    column-gap: 8rem;
    align-items: center;
    text-align: left;
    gap: 0;
  }

  .news-fv-meta { display: contents; }

  .news-fv-label {
    grid-area: label;
    font-size: 18rem;
  }

  .news-fv-categories {
    grid-area: category;
    justify-self: end;
  }

  .news-fv-category {
    font-size: 12rem;
  }

  .news-fv-date {
    grid-area: date;
    font-size: 12rem;
  }

  .news-fv-title {
    grid-area: title;
    font-size: 25rem;
    line-height: 1.5;
    margin-top: 44rem;
  }

  .news-fv + .article-stack {
    padding-top: 56rem;
  }

  /* News Detail SP — Next / Previous ニュース */
  .news-nav {
    padding-top: 80rem;
    gap: 38rem;
  }

  .news-nav-section > .section-heading {
    margin-bottom: 25rem;
  }

  /* Events Detail SP — FV */
  .events-detail {
    .hero {
      height: var(--initial-vh, 100vh);
      background-image: var(--hero-image-sp, var(--hero-image-pc));
    }

    .hero-logo {
      left: 24rem;
      right: 24rem;
      width: auto;
    }

    .hero-sticker-wrap {
      top: auto;
      bottom: 90rem;
      left: 24rem;
      right: 24rem;
    }
  }

  /* SP: ずらしを解除して hero の下、本文の上に通常配置 */
  .events-detail .hero-bar {
    padding: 24rem;
    margin-bottom: 0;
    align-items: center;
  }

  .events-detail .hero-bar-label {
    transform: none;
    font-size: 13rem;
  }

  .events-detail .hero-bar-pill {
    font-size: 12rem;
    margin-top: 0;
  }

  /* Events Detail SP — Next / Previous イベント */
  .events-detail .event-nav {
    padding-top: 80rem;
    gap: 30rem;
  }

  .events-detail .event-nav-section > .section-heading {
    margin-bottom: 46rem;
  }
}