/* ==========================================================================
   p-events — イベント関連ページ固有（08_Events / 09_Meetup / 10_EventDetail / 11_EventDetail--closed）
   ========================================================================== */

/* ---- 08_Events: Meetup 紹介セクション（Figma: sec-materials-general / bg/brand-subtle） ---- */
.p-events-meetup {
  background-color: var(--color-bg-brand-subtle);
}

/* ==========================================================================
   10_EventDetail / 11_EventDetail--closed
   ========================================================================== */

/* ---- 記事ヘッダー（Figma: sec-article-header） ---- */
.p-event-header {
  padding-block: var(--space-80);
  background-color: var(--color-bg-base);
}

.p-event-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-event-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-event-header__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-event-header__date {
  color: var(--color-text-muted);
}

.p-event-header__title {
  color: var(--color-text-base);
}

.p-event-header__share {
  justify-content: flex-end;
}

/* ---- 本文 + 右カラム（Figma: sec-main / body-with-sidebar 720 + 24 + 336） ---- */
.p-event-detail {
  padding-block: var(--space-80);
}

.p-event-detail__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
}

.p-event-detail__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
  max-width: var(--layout-article-max);
}

.p-event-detail__side {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-32);
  width: 336px; /* Figma 固有寸法: 右カラム幅 */
}

/* 目次は Figma では SP のみ */
.p-event-detail__toc {
  display: none;
}

.p-event-detail__share {
  justify-content: flex-end;
}

.p-event-detail__back {
  display: flex;
  justify-content: center;
}

/* ---- 開催概要（Figma: company-profile） ---- */
.p-event-detail__outline {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-base);
}

.p-event-detail__outline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
}

.p-event-detail__outline-row {
  display: flex;
  align-items: center; /* 値が 2 行でも項目名は縦中央（静的HTML の p-article-info__row と同じ） */
  gap: var(--space-8);
}

.p-event-detail__outline-label {
  flex-shrink: 0;
  width: 72px; /* Figma 固有寸法: ラベル列の幅 */
  color: var(--color-text-muted);
}

.p-event-detail__outline-value {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* ---- 申込フォーム / 終了表示の枠（Figma: 2px のグラデーション枠 FinanScope/Primary/Gradation） ---- */
.p-event-detail__form,
.p-event-detail__closed {
  border: 2px solid transparent; /* Figma: 枠線 2px */
  background:
    linear-gradient(var(--color-bg-base), var(--color-bg-base)) padding-box,
    var(--gradient-primary) border-box;
}

/* 終了表示は c-card-cta。SP の c-card-cta の枠線色（.c-card-cta:not(.c-card-cta--brand)）が透明の枠線を上書きして
   グレーになるため、グラデーション枠のまま保つ（静的HTML は SP も紫の枠） */
.c-card-cta.p-event-detail__closed {
  border-color: transparent;
}

@media (max-width: 1023px) {

  .p-event-header {
    padding: var(--space-64) 0;
  }

  .p-event-header__inner,
  .p-event-header__content {
    gap: var(--space-24);
  }

  .p-event-header__inner {
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-event-header__heading {
    gap: var(--space-8);
  }

  .p-event-header__date {
    font-family: var(--font-en); /* SP: renewal/EN/Label/14/Regular（tokens.css .t-en-label-14-regular） */
    font-size: 0.875rem;
    line-height: calc(20 / 14);
    font-weight: var(--font-weight-regular);
  }

  .p-event-header__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（tokens.css .t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .p-event-detail {
    padding-block: var(--space-64);
  }

  .p-event-detail__inner {
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-event-detail__main,
  .p-event-detail__side {
    gap: var(--space-24);
    width: 100%;
    max-width: none;
  }

  .p-event-detail__toc {
    display: flex;
  }

  .p-event-detail__share {
    justify-content: center;
  }

  .p-event-detail__back .c-button {
    width: 100%;
  }
}

/* 右カラム幅（264px）では c-button の左右 80px だとラベルが折り返すため縮める（Figma は 80px 指定だが幅内に収まる前提） */
.p-event-detail__submit {
  padding-inline: var(--space-24);
}