/* ログアウト導線のお知らせカード(Figma: news-card)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * タイトル SP: 14px / PC: 16px、日付 SP: guest/note/sp 10px / PC: guest/note/pc 12px
 *
 * 注意: タイトルの font-weight は Figmaの名前付きスタイル(guest/text/*)では Regular(400) だが、
 *       ノード側は Bold のフォントフェイスで描画されている(スタイルへのローカル上書き)。
 *       実際の見た目に合わせて bold にしている。デザイナー確認待ち。
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-news-card {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 84px;
  padding: 8px 8px 8px 12px;
  overflow: hidden;
  border: 2px solid var(--color-orange-100);
  border-radius: 8px;
  background: var(--guest-color-background-white);
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  text-decoration: none;
}

.guest-news-card__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 1px;
  line-height: var(--guest-line-height-body);
}

.guest-news-card__title {
  width: 100%;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  word-break: break-word;
}

.guest-news-card__date {
  width: 100%;
  font-size: var(--guest-font-size-2xs);
  font-weight: var(--guest-font-weight-regular);
}

/* 右向きシェブロン。丸みのあるベジェパスなのでCSSでは再現できず、
 * Figmaからエクスポートしたsvgをそのまま使っている。
 * PC版とSP版のsvgは相似(7x14 と 5.833x11.667)なので1ファイルを寸法だけ変えて使う。
 * 同じ形で色違い(#5C5647)のものが accordion_faq で使われているため、
 * ファイル名は色で分けている(_orange / _brown)。
 * 枠(20px/24px)は横並びの間隔に影響するのでFigma通り保持している。 */
.guest-news-card__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  background: url(/img/guest/icon_chevron_right_orange.svg) no-repeat center;
  background-size: 5.833px 11.667px;
}

/* Figma: news-card / state=vacant */
.guest-news-card--vacant {
  height: auto;
  justify-content: center;
  padding: 24px;
  border: none;
  background: var(--color-brown-100);
}

.guest-news-card__vacant-text {
  margin: 0;
  width: 100%;
  color: var(--guest-color-text-default);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  text-align: center;
  word-break: break-word;
}

@media (min-width: 1080px) {
  .guest-news-card {
    height: auto;
    padding: 16px;
  }

  .guest-news-card__body {
    gap: 8px;
  }

  .guest-news-card__title {
    font-size: var(--guest-font-size-base);
  }

  .guest-news-card__date {
    font-size: var(--guest-font-size-xs);
  }

  .guest-news-card__chevron {
    width: 24px;
    height: 24px;
    background-size: 7px 14px;
  }

  .guest-news-card--vacant {
    padding: 24px;
  }

  .guest-news-card__vacant-text {
    font-size: var(--guest-font-size-base);
  }
}