/*
 * SOA イベントバナー バリアント：nevada-redrock-strata
 * 対象記事：UFCファイトナイト・ラスベガス122（アレン対ダンカン／現地2026年10月10日・日本時間10月11日）
 *
 * 設置先：project-child-theme/assets/event-banners/nevada-redrock-strata.css
 *
 * 重要：event-banner-base.css は box-sizing / container-type / br非表示 などの
 * リセットしか持たない。グリッド・余白・文字サイズを含むレイアウト一式は
 * このバリアントファイル側で完結させる。配色だけを書くと無装飾のバナーになる。
 * 単位は cqw（コンテナクエリ）を使い、記事カラム幅に追従させる。
 *
 * 構造：レッドロック・キャニオンの地層型（2026年9月25日、Syunが選択）
 *   ラスベガス西郊のレッドロック・キャニオンの砂岩の断面を、横3段の帯にした。
 *     上段 __header = 大会名（左）とコピー行（右）
 *     中段 __body   = 対戦（左）とカウントダウン（右）。岩棚のように1段張り出す
 *     下段 __footer = 日時。いちばん下の明るい地層
 *   段の境目は波打つ地層線（__body / __footer の ::before を data URI SVG の mask で切る）。
 *   ベガス121の vegas-neon-diamond（中央の菱形看板・夜のネオン）とは、
 *   中央対称 → 左寄せの横帯、看板 → 地形、という2点で構造レベルで別物にしている。
 *
 * 配色：フリーモントの夜（2026年9月25日、Syunが選択。いったん「ネバダ州旗」の
 *   コバルト×シルバーで組んだあと、比較ページの「B × 配色3」に変更された）
 *   ダウンタウンのフリーモント・ストリートの夜。深夜紺 #090b17 を上段に、
 *   紫がかった紺 #1c1533 を中段に、LEDのアンバー #ffb020 を下段と差し色に、
 *   ホットピンク #ff3d7f を階級ラベルに使う。ラベル頭の小さな星はマーキーの星。
 *   ベガス121（vegas-neon-diamond）と色の系統は近いが、構造（中央の菱形看板 →
 *   左寄せの3段の地層）で別物にしている。
 *
 * 図版は実写を使わず、グラデーションと data URI の SVG（パスのみ）で描いている。
 * バナーに載せる数値は「大会後も意味が変わらないもの」に限る（design-specs.md）。
 */

.soa-event-banner--nevada-redrock-strata {
  --nv-deep: #090b17;
  --nv-deep-2: #100d22;
  --nv-cobalt: #1c1533;
  --nv-cobalt-2: #150f28;
  --nv-silver: #ffb020;
  --nv-silver-2: #f0990f;
  --nv-sage: #ff3d7f;
  --nv-ink: #fff6e0;
  --nv-ink-dark: #140d02;
  --nv-moon: #fff1c9;
  --nv-led: rgba(255, 246, 224, .55);
  --nv-rule: rgba(255, 176, 32, .36);

  --nv-pad-x: clamp(14px, 4cqw, 28px);
  --nv-wave-h: clamp(10px, 2.1cqw, 14px);

  position: relative;
  display: grid;
  grid-template-areas:
    "header"
    "body"
    "footer";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 20rem;
  /*
   * 幅に比例して高さも伸ばす（2026年9月25日、Syunの指摘で追加）。
   * 中身が少ないバナーなので min-height だけだと、PC幅（記事カラム913px）で
   * 913×320 の横長に張り付き、直近の vegas-neon-diamond（913×395）や
   * slc-beehive-honey（913×393）より明らかに薄く見えた。比率はその2つに合わせた。
   * 670px幅では 670÷2.32＝289px となり、min-height の320pxが勝つ。
   */
  aspect-ratio: 2.32 / 1;
  border-radius: 6px;
  overflow: hidden;
  color: var(--nv-ink);
  background: var(--nv-deep);
  box-shadow: 0 14px 34px rgba(7, 5, 16, .4);
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__header,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__body,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__footer,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__label,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__title,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__meta,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__copy,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__match-list,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__match,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__division,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__fighters,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__countdown,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__countdown-label,
.soa-event-banner--nevada-redrock-strata .soa-countdown,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__result,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__date,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__time {
  display: block;
  margin: 0;
}

/* ── 上段の地層：大会名 ── */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__header {
  grid-area: header;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(12px, 3cqw, 24px);
  align-items: end;
  padding: clamp(14px, 3.2cqw, 22px) var(--nv-pad-x) clamp(18px, 3.6cqw, 26px);
  background:
    repeating-linear-gradient(176deg, transparent 0 15px, rgba(255, 255, 255, .035) 15px 17px, transparent 17px 26px, rgba(255, 255, 255, .02) 26px 27px),
    linear-gradient(180deg, var(--nv-deep), var(--nv-deep-2));
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .5em;
  margin-bottom: clamp(3px, .8cqw, 6px);
  color: var(--nv-silver);
  font-size: clamp(9px, 1.55cqw, 11px);
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.4;
}

/* マーキーの星（アンバー） */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__label::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  background: var(--nv-silver);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61.8,37.6 97.6,38.2 69.1,59.9 79.4,94 50,73.6 20.6,94 30.9,59.9 2.4,38.2 38.2,37.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61.8,37.6 97.6,38.2 69.1,59.9 79.4,94 50,73.6 20.6,94 30.9,59.9 2.4,38.2 38.2,37.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__title {
  grid-column: 1;
  font-family: var(--font-family-serif, serif);
  font-size: clamp(26px, 5.4cqw, 38px);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: .98;
  white-space: nowrap;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__meta {
  grid-column: 1;
  margin-top: clamp(3px, .7cqw, 6px);
  color: var(--nv-silver);
  font-size: clamp(10px, 1.7cqw, 12px);
  font-weight: 750;
  letter-spacing: .12em;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__copy {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  justify-self: end;
  padding-right: clamp(8px, 1.6cqw, 12px);
  border-right: 3px solid var(--nv-silver);
  font-family: var(--font-family-serif, serif);
  font-size: clamp(12px, 2.1cqw, 15px);
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

/* ── 中段の地層：対戦とカウントダウン ── */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__body {
  grid-area: body;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 3cqw, 22px);
  padding: clamp(18px, 3.6cqw, 24px) var(--nv-pad-x);
  background:
    repeating-linear-gradient(178deg, transparent 0 9px, rgba(0, 0, 0, .07) 9px 10px, transparent 10px 21px, rgba(255, 255, 255, .04) 21px 23px),
    linear-gradient(180deg, var(--nv-cobalt), var(--nv-cobalt-2));
}

/* 地層の境目（上段→中段）：ゆるく波打つ縁 */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__body::before,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nv-wave-h) * -1 + 1px);
  height: var(--nv-wave-h);
  background: inherit;
  background-position: 0 0;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__body::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 670 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 C40 3 70 11 120 6 C170 1 200 9 250 5 C300 1 330 10 390 7 C450 3 480 11 540 6 C590 2 630 8 670 4 L670 14 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 670 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 9 C40 3 70 11 120 6 C170 1 200 9 250 5 C300 1 330 10 390 7 C450 3 480 11 540 6 C590 2 630 8 670 4 L670 14 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* 中段→下段は、波の山と谷の位置をずらして同じ線の繰り返しに見せない */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__footer::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 670 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 5 C55 10 90 2 150 7 C205 12 245 3 310 6 C370 9 400 1 470 5 C530 9 575 3 620 8 C640 10 655 7 670 6 L670 14 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 670 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 5 C55 10 90 2 150 7 C205 12 245 3 310 6 C370 9 400 1 470 5 C530 9 575 3 620 8 C640 10 655 7 670 6 L670 14 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__match-list {
  min-width: 0;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__division {
  color: var(--nv-sage);
  font-size: clamp(9px, 1.55cqw, 11px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__fighters {
  margin-top: clamp(2px, .5cqw, 4px);
  font-family: var(--font-family-serif, serif);
  font-size: clamp(21px, 4.3cqw, 30px);
  font-weight: 750;
  line-height: 1.15;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__countdown {
  padding: clamp(6px, 1.3cqw, 9px) clamp(10px, 2cqw, 15px);
  border: 1px solid var(--nv-rule);
  background: rgba(0, 0, 0, .28);
  text-align: right;
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__countdown-label {
  color: var(--nv-silver);
  font-size: clamp(9px, 1.5cqw, 11px);
  font-weight: 800;
  letter-spacing: .14em;
}

.soa-event-banner--nevada-redrock-strata .soa-countdown {
  font-family: var(--font-family-serif, serif);
  font-size: clamp(15px, 2.9cqw, 20px);
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

/* ── 下段の地層：日時 ── */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__footer {
  grid-area: footer;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: clamp(8px, 2cqw, 14px);
  padding: clamp(9px, 1.8cqw, 12px) var(--nv-pad-x) clamp(10px, 1.9cqw, 13px);
  color: var(--nv-ink-dark);
  /* フリーモント・ストリートの天井のようなLEDの点の格子（2026年9月25日、Syunが調整案③を選択） */
  background:
    radial-gradient(circle, var(--nv-led) 0 1px, transparent 1.6px) 0 0 / 7px 7px,
    repeating-linear-gradient(179deg, transparent 0 7px, rgba(20, 13, 2, .06) 7px 8px),
    linear-gradient(180deg, var(--nv-silver), var(--nv-silver-2));
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__date,
.soa-event-banner--nevada-redrock-strata .soa-event-banner__time {
  font-size: clamp(10px, 1.75cqw, 12px);
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 半券は使わない */
.soa-event-banner--nevada-redrock-strata .soa-event-banner__aside {
  display: none;
}

/*
 * ---- 結果記事（--result 修飾子） ----
 * 大会が終わったら、同じバナーに soa-event-banner--result を足すだけで結果記事用になる。
 *
 * 設計意図：同じ地層の「夜」を描く。
 *   メインカードは現地時間の午後5時開始で、終わるのは午後9時前後。砂漠の断崖は
 *   夕方から夜へ移る。地層の形と3段の並びはそのままに、
 *     上段 → 星の出た夜空の色（藍を一段深く＋星）
 *     全体 → 右上から月明かりが差す
 *     中段・下段 → 一段暗く沈み、下段のアンバーは灯りを落とした色になる
 *     カウントダウン枠 → 決着の枠（__result）
 *   に変える。星と月明かりは大会の1年後も正しいままで、時間が経っても意味が壊れない。
 * マークアップはプレビュー版と同一（記事側は class に --result を足し、
 * カウントダウンを __result に差し替えるだけ）。
 */
.soa-event-banner--nevada-redrock-strata.soa-event-banner--result {
  --nv-deep: #04050d;
  --nv-deep-2: #0a0918;
  --nv-cobalt: #130e25;
  --nv-cobalt-2: #0e0a1c;
  --nv-silver-2: #cc800c;
  --nv-led: rgba(255, 246, 224, .3);
}

.soa-event-banner--nevada-redrock-strata.soa-event-banner--result .soa-event-banner__header {
  background:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.1px 1.1px at 19% 64%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 33% 15%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.1px 1.1px at 46% 48%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.3px 1.3px at 57% 12%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.1px 1.1px at 66% 36%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 74% 18%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.2px 1.2px at 52% 78%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(ellipse at 94% -10%, rgba(255, 241, 201, .3), transparent 42%),
    linear-gradient(180deg, var(--nv-deep), var(--nv-deep-2));
}

/* 月明かり：右上から斜めに落ちる淡い光を全体にかける */
.soa-event-banner--nevada-redrock-strata.soa-event-banner--result::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(210deg, rgba(255, 241, 201, .12), transparent 45%);
}

/*
 * 三日月。上段の右上、コピー行より上に置く。
 * 背景を透明にして inset の box-shadow で塗ると、欠けた側が本当に抜けて夜空が透ける。
 */
.soa-event-banner--nevada-redrock-strata.soa-event-banner--result .soa-event-banner__header::after {
  content: "";
  position: absolute;
  top: clamp(12px, 2.6cqw, 18px);
  right: clamp(22px, 5.5cqw, 40px);
  width: clamp(20px, 4cqw, 28px);
  height: clamp(20px, 4cqw, 28px);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset clamp(-7px, -1.3cqw, -5px) clamp(-3px, -.5cqw, -2px) 0 0 var(--nv-moon),
    0 0 clamp(12px, 2.4cqw, 18px) rgba(255, 241, 201, .3);
  transform: rotate(-20deg);
}

.soa-event-banner--nevada-redrock-strata .soa-event-banner__result {
  font-family: var(--font-family-serif, serif);
  font-size: clamp(15px, 2.9cqw, 20px);
  font-weight: 750;
  line-height: 1.25;
  color: var(--nv-ink);
  white-space: nowrap;
}

/* ── レスポンシブ ── */
@media (max-width: 680px) {
  .soa-event-banner--nevada-redrock-strata {
    min-height: 0;
    aspect-ratio: auto;
  }

  /* コピー行は大会名の下へ回し、左寄せにする */
  .soa-event-banner--nevada-redrock-strata .soa-event-banner__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__copy {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 8px;
    padding: 0 0 0 10px;
    border-right: 0;
    border-left: 3px solid var(--nv-silver);
    text-align: left;
    white-space: normal;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__countdown {
    text-align: left;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__footer {
    flex-direction: column;
    gap: 1px;
  }
}

@media (max-width: 430px) {
  .soa-event-banner--nevada-redrock-strata {
    --nv-pad-x: 13px;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__label {
    letter-spacing: .14em;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__title {
    font-size: 25px;
  }

  .soa-event-banner--nevada-redrock-strata .soa-event-banner__fighters {
    font-size: 21px;
  }
}