/* ==========================================================================
   c-card-cta — Figma: Card/CTA（プロパティ1=pc, プロパティ2=management 24597:22484）
   CTA ゾーン用カード（見出し + 説明 + ボタン）。並べる親（例: 灰色の枠）はページ側で用意する
   PC: 枠線 border/default / SP: 枠線 icon/default（Figma SP の指定）
   ========================================================================== */

.c-card-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-base);
}

/* display: flex が hidden 属性より優先されるため（イベントの受付終了の表示を JS で出し分ける） */
.c-card-cta[hidden] {
  display: none;
}

.c-card-cta__title,
.c-card-cta__desc {
  width: 100%;
  color: var(--color-text-base);
}

.c-card-cta__button {
  margin-top: auto;
}

/* --brand: Figma プロパティ2=brand（枠 2px・ボタンはグラデーション）
   Figma の枠色は #6426f8 の直値（バリアブル未結合）。値が一致する --color-gradient-start を使用 */
.c-card-cta--brand {
  border: 2px solid var(--color-gradient-start);
}

.c-card-cta--brand .c-card-cta__button {
  background: var(--gradient-primary);
}

/* ホバーは他のボタンと同じ bg/inverse（グラデーションの指定より強くする） */
.c-card-cta--brand .c-card-cta__button:hover,
.c-card-cta--brand .c-card-cta__button:focus-visible {
  background: var(--color-bg-inverse);
}

@media (max-width: 1023px) {

  .c-card-cta:not(.c-card-cta--brand) {
    border-color: var(--color-icon-default); /* Figma SP: color/icon/default を枠線に使用 */
  }
}

/* サイドバーの CTA（--brand。幅 336px）: ボタンの左右は 16px（静的HTML の .p-list-layout__side / .p-article-layout__side .c-button--size-m と同じ）。
   SP はカードの内側を上下 24px・左右 16px、要素の間 8px・左揃え（静的HTML の SP の c-card-cta と同じ） */
.c-card-cta--brand .c-card-cta__button {
  padding-inline: var(--space-16);
}

@media (max-width: 1023px) {

  .c-card-cta--brand {
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-24) var(--space-16);
  }
}