/*
 * SLC Beehive Honey — ユタ州の紋章「蜂の巣」
 *
 * ユタ州の愛称はそのまま "The Beehive State"。1847年に入植したブリガム・ヤングが、
 * 砂漠を耕すための協働の象徴として蜂の巣を選び、以来この紋章は州旗・州議事堂・
 * 道路標識・マンホールの蓋にまで入っている。2023年制定の新州旗も、六角形の中に
 * 蜂の巣を置いたデザイン。配色（紺 #1b2a41 × 蜂蜜 #d99a1e × 生成り #f4efe4）は
 * その新州旗から採った。
 *
 * 構造は3行2列（header / body / footer ＋ 右スタブ）。六角形のハニカムを地紋に敷き、
 * 対戦カードの枠と右スタブの数字も六角形に切り抜いている。
 *
 * --result は「同じ絵の、時間が経ったあと」。プレビュー版のハニカムは輪郭線だけの
 * 空のセルで、結果版ではそのセルが蜂蜜で満たされる。空位だったベルトが埋まる、という
 * この大会の縦軸がそのまま絵になる。マークアップはプレビュー版と同じで、
 * カウントダウンを決着帯に差し替え、__aside を省くだけ。
 *
 * すべての宣言を .soa-event-banner--slc-beehive-honey の内側へ限定し、
 * 共通レイヤー（event-banner-base.css / event-banner.js）には手を入れない。
 */

.soa-event-banner--slc-beehive-honey {
  /* 新ユタ州旗（2023年制定） */
  --sbh-bg: #1b2a41;
  --sbh-bg-2: #24364f;
  --sbh-ink: #f4efe4;
  --sbh-ink-dim: rgba(244, 239, 228, 0.7);
  --sbh-honey: #d99a1e;
  --sbh-honey-deep: #b47c11;
  --sbh-on-honey: #1b2a41;
  --sbh-rule: rgba(217, 154, 30, 0.42);
  --sbh-stub: #141f30;

  /* 余白とスタブ幅 */
  --sbh-pad-inline: clamp(1.1rem, 3.2cqw, 2rem);
  --sbh-pad-block: clamp(0.85rem, 2cqw, 1.2rem);
  --sbh-stub-w: 9.5rem;

  background: linear-gradient(160deg, var(--sbh-bg-2), var(--sbh-bg));
  border: 2px solid var(--sbh-honey);
  color: var(--sbh-ink);
  display: grid;
  grid-template-areas:
    "header stub"
    "body   stub"
    "footer stub";
  grid-template-columns: minmax(0, 1fr) var(--sbh-stub-w);
  grid-template-rows: auto 1fr auto;
  margin-block: var(--space-4, 2rem);
  min-height: 20rem;
  overflow: hidden;
  position: relative;
}

/*
 * ハニカムの地紋。輪郭線だけの「空のセル」。
 * 六角形がシームレスに繰り返すタイルを data URI SVG で敷いている。
 */
.soa-event-banner--slc-beehive-honey::before {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zM0 36.5L12.98 44v5h-2v-3.85L0 38.81V36.5zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zM28 36.5L15.01 44V49h2v-3.85L28 38.81v-2.3z' fill='%23d99a1e' fill-opacity='.2'/%3E%3C/svg%3E");
  background-repeat: repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.soa-event-banner--slc-beehive-honey > * {
  position: relative;
  z-index: 1;
}

/* ── ヘッダー ── */
.soa-event-banner--slc-beehive-honey .soa-event-banner__header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  grid-area: header;
  padding: 1.5rem var(--sbh-pad-inline) 1rem;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__label {
  color: var(--sbh-honey);
  font-family: var(--font-family-display, sans-serif);
  font-size: clamp(0.6rem, 1.05cqw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.5;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__title {
  font-family: var(--font-family-serif, serif);
  font-size: clamp(2rem, 6cqw, 3.4rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__meta {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.66rem, 1.15cqw, 0.78rem);
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__copy {
  font-family: var(--font-family-serif, serif);
  font-size: clamp(0.88rem, 1.7cqw, 1.08rem);
  line-height: 1.6;
  margin-top: 0.45rem;
}

/* ── 本体 ── */
.soa-event-banner--slc-beehive-honey .soa-event-banner__body {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  grid-area: body;
  justify-content: center;
  padding: 0 var(--sbh-pad-inline) var(--sbh-pad-block);
}

/* 六角形に切り抜いた対戦カードの枠 */
.soa-event-banner--slc-beehive-honey .soa-event-banner__match--main {
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid var(--sbh-honey);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.8rem 1.1rem 0.8rem 1.7rem;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__division {
  color: var(--sbh-honey);
  font-size: clamp(0.58rem, 1cqw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__fighters {
  font-family: var(--font-family-serif, serif);
  font-size: clamp(1.15rem, 3cqw, 1.75rem);
  font-weight: 750;
  line-height: 1.15;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__countdown {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__countdown-label {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.62rem, 1.05cqw, 0.74rem);
  letter-spacing: 0.16em;
}

.soa-event-banner--slc-beehive-honey .soa-countdown {
  color: var(--sbh-honey);
  font-family: var(--font-family-serif, serif);
  font-size: clamp(1rem, 2.4cqw, 1.45rem);
  font-weight: 700;
}

.soa-event-banner--slc-beehive-honey .soa-countdown.is-live {
  color: var(--sbh-ink);
}

.soa-event-banner--slc-beehive-honey .soa-countdown.is-complete,
.soa-event-banner--slc-beehive-honey .soa-countdown.is-error {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.85rem, 1.9cqw, 1.1rem);
}

/* ── フッター ── */
.soa-event-banner--slc-beehive-honey .soa-event-banner__footer {
  border-top: 1px solid var(--sbh-rule);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  grid-area: footer;
  padding: 0.85rem var(--sbh-pad-inline);
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__date {
  font-size: clamp(0.74rem, 1.35cqw, 0.9rem);
  font-weight: 700;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__time {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.62rem, 1.08cqw, 0.74rem);
  line-height: 1.5;
}

/* ── 右スタブ ── */
.soa-event-banner--slc-beehive-honey .soa-event-banner__aside {
  align-items: center;
  background: var(--sbh-stub);
  border-left: 1px solid var(--sbh-rule);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  grid-area: stub;
  justify-content: center;
  padding: 1rem 0.6rem;
  text-align: center;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__aside-label {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.54rem, 0.92cqw, 0.64rem);
  letter-spacing: 0.2em;
  line-height: 1.4;
}

/* 六角形に切り抜いた数字ブロック */
.soa-event-banner--slc-beehive-honey .soa-event-banner__aside-value {
  align-items: center;
  background: var(--sbh-honey);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--sbh-on-honey);
  display: flex;
  font-family: var(--font-family-serif, serif);
  font-size: clamp(1.5rem, 3.8cqw, 2.1rem);
  font-weight: 750;
  height: 5.1rem;
  justify-content: center;
  line-height: 1;
  margin: 0.35rem 0;
  width: 4.6rem;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__aside-meta {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.54rem, 0.92cqw, 0.64rem);
  letter-spacing: 0.18em;
}

.soa-event-banner--slc-beehive-honey .soa-event-banner__aside-date {
  color: var(--sbh-ink-dim);
  font-size: clamp(0.56rem, 0.96cqw, 0.66rem);
  letter-spacing: 0.14em;
  margin-top: 0.5rem;
}

/* ── レスポンシブ ── */
@media (max-width: 680px) {
  .soa-event-banner--slc-beehive-honey {
    grid-template-areas:
      "header"
      "body"
      "footer"
      "stub";
    grid-template-columns: minmax(0, 1fr);
  }

  .soa-event-banner--slc-beehive-honey .soa-event-banner__aside {
    border-left: 0;
    border-top: 1px solid var(--sbh-rule);
    flex-direction: row;
    gap: 0.8rem;
    padding: 0.7rem 0.6rem;
  }

  .soa-event-banner--slc-beehive-honey .soa-event-banner__aside-value {
    font-size: 1.4rem;
    height: 4rem;
    margin: 0;
    width: 3.6rem;
  }

  .soa-event-banner--slc-beehive-honey .soa-event-banner__aside-date {
    margin-top: 0;
  }
}

@media (max-width: 430px) {
  .soa-event-banner--slc-beehive-honey {
    --sbh-pad-inline: 0.9rem;
    min-height: 17rem;
  }

  .soa-event-banner--slc-beehive-honey .soa-event-banner__match--main {
    padding-left: 1.3rem;
  }

  .soa-event-banner--slc-beehive-honey .soa-countdown {
    font-size: 0.95rem;
  }

  .soa-event-banner--slc-beehive-honey .soa-event-banner__aside-value {
    font-size: 1.2rem;
    height: 3.4rem;
    width: 3rem;
  }
}

/* ============================================================
   結果記事版（--result）
   同じ蜂の巣のまま、空だったセルが蜂蜜で満たされた状態を描く。
   空位だったベルトが埋まる、という大会の縦軸がそのまま絵になる。
   ============================================================ */

.soa-event-banner--slc-beehive-honey.soa-event-banner--result {
  --sbh-bg: #14202f;
  --sbh-bg-2: #1d2c3f;
}

/* セルが塗りつぶされたハニカム。輪郭線ではなく面で持つタイルに差し替える。 */
.soa-event-banner--slc-beehive-honey.soa-event-banner--result::before {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.99 11.56L3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34z' fill='%23d99a1e' fill-opacity='.3'/%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zM0 36.5L12.98 44v5h-2v-3.85L0 38.81V36.5zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zM28 36.5L15.01 44V49h2v-3.85L28 38.81v-2.3z' fill='%23d99a1e' fill-opacity='.34'/%3E%3C/svg%3E");
}

/* 対戦カードの六角形も、輪郭だけの枠から蜂蜜で満たされた面へ */
.soa-event-banner--slc-beehive-honey.soa-event-banner--result .soa-event-banner__match--main {
  background: linear-gradient(180deg, var(--sbh-honey), var(--sbh-honey-deep));
  border-color: var(--sbh-honey-deep);
}

.soa-event-banner--slc-beehive-honey.soa-event-banner--result .soa-event-banner__division,
.soa-event-banner--slc-beehive-honey.soa-event-banner--result .soa-event-banner__fighters {
  color: var(--sbh-on-honey);
}

/* カウントダウン帯 → 決着帯 */
.soa-event-banner--slc-beehive-honey.soa-event-banner--result .soa-event-banner__result {
  color: var(--sbh-honey);
  font-family: var(--font-family-serif, serif);
  font-size: clamp(1rem, 2.4cqw, 1.45rem);
  font-weight: 700;
}

/* スタブは持たない。マークアップから省いてよい。 */
.soa-event-banner--slc-beehive-honey.soa-event-banner--result {
  grid-template-areas:
    "header"
    "body"
    "footer";
  grid-template-columns: minmax(0, 1fr);
}

.soa-event-banner--slc-beehive-honey.soa-event-banner--result .soa-event-banner__aside {
  display: none;
}