/*
 * SOA イベントバナー バリアント：noche-papel-picado
 * 対象記事：ノーチェUFC（シウヴァ対デルガド／2026年9月12日・日本時間9月13日）
 *
 * 設置先：project-child-theme/assets/event-banners/noche-papel-picado.css
 *
 * 重要：event-banner-base.css は box-sizing / container-type / br非表示 などの
 * リセットしか持たない。グリッド・余白・文字サイズを含むレイアウト一式は
 * このバリアントファイル側で完結させる。配色だけを書くと無装飾のバナーになる。
 *
 * 単位は cqw（コンテナクエリ）を使う。base.css が .soa-event-banner に
 * container-type:inline-size を与えているため、記事カラム幅に追従する。
 *
 * 構造：パペル・ピカド型（2026年8月30日、Syunが選択）
 *   sacramento-capital-grid の「チケット半券」型（右にスタブ）、
 *   shanghai-bund-neon の「タイムライン」型（左が過去・右が現在）、
 *   paris-tricolore-scale の「天秤」型（左右対称の2枚パネル）のいずれとも別物にする。
 *   上辺にメキシコの切り絵飾り（パペル・ピカド）の帯を CSS だけで敷き、
 *   その下に「吊り下げられた掲示」として情報を縦に積む。
 *     __papel = 切り絵の帯（三角のフリンジ）。マスクで下辺をギザギザに抜く
 *     __cord  = 飾りを吊るしている紐。1本の破線
 *     以下、__header → __body（__match-list） → __countdown → __footer の順に中央寄せ
 *   __aside（半券）は使わない。
 *
 * 配色：メキシコ国旗（2026年8月30日、Syunが選択）
 *   緑 #006847 を主面に、金 #d4a537 を罫と数字に、赤 #ce1126 を階級表記と
 *   切り絵の差し色に使う。白は象牙色 #f7f4ee に寄せて紙の質感を出す。
 *
 * バナーに載せる数値は「大会後も意味が変わらないもの」に限る（design-specs.md）。
 * オッズ・ランキング・連勝数はここに置かず、留保を書ける本文側に置いている。
 */

.soa-event-banner--noche-papel-picado {
  --nc-green: #006847;
  --nc-green-deep: #00402b;
  --nc-green-soft: #0b8358;
  --nc-red: #ce1126;
  --nc-red-deep: #8d0b19;
  --nc-gold: #d4a537;
  --nc-gold-soft: #efd08a;
  --nc-ivory: #f7f4ee;
  --nc-ink: #f7f4ee;
  --nc-ink-dim: rgba(247, 244, 238, .74);
  --nc-rule: rgba(212, 165, 55, .5);
  --nc-panel: rgba(0, 0, 0, .26);

  --nc-pad-x: clamp(14px, 3cqw, 26px);
  --nc-pad-y: clamp(8px, 1.4cqw, 12px);

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  border-radius: 6px;
  overflow: hidden;
  color: var(--nc-ink);
  background:
    radial-gradient(130% 80% at 50% 100%, var(--nc-green-soft) 0%, transparent 62%),
    linear-gradient(172deg, var(--nc-green) 0%, var(--nc-green-deep) 100%);
  font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif);
}

/* ---- 切り絵の帯（パペル・ピカド） ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__papel {
  display: block;
  flex: none;
  height: clamp(21px, 3.7cqw, 30px);
  background: repeating-linear-gradient(
    90deg,
    var(--nc-red) 0 12.5%,
    var(--nc-gold) 12.5% 25%,
    var(--nc-ivory) 25% 37.5%,
    var(--nc-gold-soft) 37.5% 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 42% no-repeat,
    repeating-conic-gradient(from -45deg at 50% 0, #000 0% 25%, transparent 0% 50%) bottom / 6.25% 58% repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 42% no-repeat,
    repeating-conic-gradient(from -45deg at 50% 0, #000 0% 25%, transparent 0% 50%) bottom / 6.25% 58% repeat-x;
}

/* ---- 飾りを吊るしている紐 ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__cord {
  display: block;
  flex: none;
  height: 2px;
  margin-top: clamp(4px, .8cqw, 7px);
  background: repeating-linear-gradient(90deg, var(--nc-rule) 0 9px, transparent 9px 16px);
}

/* ---- 本体（中央寄せで縦に積む） ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__header,
.soa-event-banner--noche-papel-picado .soa-event-banner__body,
.soa-event-banner--noche-papel-picado .soa-event-banner__footer {
  padding-left: var(--nc-pad-x);
  padding-right: var(--nc-pad-x);
  text-align: center;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__header {
  padding-top: var(--nc-pad-y);
}

.soa-event-banner--noche-papel-picado .soa-event-banner__label {
  color: var(--nc-gold);
  font-size: clamp(9px, 1.6cqw, 12px);
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1.5;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__title {
  margin: clamp(3px, .7cqw, 6px) 0 clamp(2px, .5cqw, 4px);
  font-family: var(--font-family-serif, Georgia, "Times New Roman", serif);
  font-size: clamp(22px, 5.4cqw, 38px);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__meta {
  color: var(--nc-gold-soft);
  font-size: clamp(10px, 1.7cqw, 13px);
  font-weight: 700;
  letter-spacing: .1em;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__copy {
  margin-top: clamp(2px, .5cqw, 4px);
  color: var(--nc-ink-dim);
  font-size: clamp(10px, 1.7cqw, 13px);
  line-height: 1.5;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, .9cqw, 8px);
  padding-top: clamp(4px, .9cqw, 8px);
  padding-bottom: clamp(3px, .7cqw, 6px);
}

/* ---- 吊り下げられた掲示（対戦カード） ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__match-list {
  display: flex;
  justify-content: center;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__match {
  padding: clamp(6px, 1.2cqw, 11px) clamp(11px, 2.4cqw, 22px);
  border: 1px solid var(--nc-rule);
  border-radius: 5px;
  background: var(--nc-panel);
  max-width: 100%;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__fighters {
  font-size: clamp(15px, 3.1cqw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__division {
  margin-top: clamp(2px, .5cqw, 4px);
  color: var(--nc-red);
  font-size: clamp(9px, 1.5cqw, 12px);
  font-weight: 700;
  letter-spacing: .2em;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__match--main .soa-event-banner__division {
  color: var(--nc-gold);
}

/* ---- カウントダウン ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__countdown-label {
  color: var(--nc-ink-dim);
  font-size: clamp(9px, 1.4cqw, 11px);
  letter-spacing: .2em;
}

.soa-event-banner--noche-papel-picado .soa-countdown {
  color: var(--nc-gold);
  font-size: clamp(14px, 2.7cqw, 21px);
  font-weight: 800;
  letter-spacing: .02em;
}

.soa-event-banner--noche-papel-picado .soa-countdown.is-complete,
.soa-event-banner--noche-papel-picado .soa-countdown.is-error {
  color: var(--nc-gold-soft);
  font-size: clamp(13px, 2.4cqw, 19px);
}

/* ---- フッター ---- */
.soa-event-banner--noche-papel-picado .soa-event-banner__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 3px clamp(10px, 2.4cqw, 22px);
  justify-content: center;
  padding-top: clamp(5px, 1cqw, 9px);
  padding-bottom: var(--nc-pad-y);
  border-top: 1px solid var(--nc-rule);
  margin: 0 var(--nc-pad-x);
}

.soa-event-banner--noche-papel-picado .soa-event-banner__date {
  font-size: clamp(11px, 1.9cqw, 15px);
  font-weight: 700;
}

.soa-event-banner--noche-papel-picado .soa-event-banner__time {
  color: var(--nc-ink-dim);
  font-size: clamp(10px, 1.6cqw, 13px);
}

/* =========================================================
 * 結果記事用の修飾子（--result）
 * 大会が終わったら、記事側のクラスに soa-event-banner--result を足すだけで
 * この見た目に切り替わる。CSSを新しく書き起こさない（design-specs.md）。
 *
 * 設計意図：切り絵は「祭りの前」の飾りなので、終わったあとは色を抜いて
 * 半分だけ残す。カウントダウンの帯は、決着を刷り込んだインクの帯に変わる。
 * ========================================================= */
.soa-event-banner--noche-papel-picado.soa-event-banner--result {
  background:
    radial-gradient(130% 80% at 50% 100%, rgba(11, 131, 88, .55) 0%, transparent 62%),
    linear-gradient(172deg, #04452f 0%, #011c14 100%);
}

.soa-event-banner--noche-papel-picado.soa-event-banner--result .soa-event-banner__papel {
  filter: grayscale(.55) brightness(.85);
  opacity: .8;
}

.soa-event-banner--noche-papel-picado.soa-event-banner--result .soa-event-banner__countdown {
  padding: clamp(6px, 1.2cqw, 10px) clamp(12px, 2.4cqw, 22px);
  background: var(--nc-red-deep);
  border-radius: 3px;
}

.soa-event-banner--noche-papel-picado.soa-event-banner--result .soa-event-banner__countdown-label {
  color: var(--nc-gold-soft);
}

.soa-event-banner--noche-papel-picado.soa-event-banner--result .soa-event-banner__result {
  color: var(--nc-ivory);
  font-size: clamp(15px, 3cqw, 23px);
  font-weight: 800;
  letter-spacing: .02em;
}

.soa-event-banner--noche-papel-picado.soa-event-banner--result .soa-event-banner__aside {
  display: none;
}

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media (max-width: 680px) {
  .soa-event-banner--noche-papel-picado {
    min-height: 0;
  }

  .soa-event-banner--noche-papel-picado .soa-event-banner__papel {
    height: 26px;
  }

  .soa-event-banner--noche-papel-picado .soa-event-banner__footer {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 430px) {
  .soa-event-banner--noche-papel-picado {
    --nc-pad-x: 12px;
    --nc-pad-y: 10px;
  }

  .soa-event-banner--noche-papel-picado .soa-event-banner__title {
    letter-spacing: 0;
  }

  .soa-event-banner--noche-papel-picado .soa-event-banner__match {
    padding: 8px 10px;
  }
}