/* /assets/css/blocks.css
   =========================================================
   BENMI blocks
   - Detail pages blocks (/e/<slug>/, /r/<slug>/)
   - Home: UPCOMING / LATEST big blocks
   ========================================================= */

/* =========================================================
   Detail blocks
   ========================================================= */

.block{
  border: 0 solid var(--line);
  border-radius: 0; /* 角丸は使わない */
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0 0 0;
}

.block-body{ padding: 16px; }

.block-title{
  margin: 0;
  padding: 14px 16px 0;
  font-size: 16px;
  letter-spacing: .08em;
}

.block-hero{
  position: relative;
  min-height: clamp(260px, 34vw, 520px);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.block-hero .hero-veil{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.block-hero .hero-inner{
  position: relative;
  padding: clamp(16px, 2.2vw, 26px);
}

.hero-badge{
  display: inline-block;
  margin: 0 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .16em;
  background: rgba(0,0,0,.55);
}

.hero-title{
  margin: 0 0 8px;
  font-size: clamp(34px, 5.2vw, 74px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.02;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.hero-sub{
  margin: 0 0 10px;
  font-size: clamp(16px, 2.0vw, 28px);
  color: rgba(233,233,233,.92);
  font-weight: 800;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.hero-meta{
  margin: 0;
  font-size: clamp(13px, 1.35vw, 18px);
  color: rgba(233,233,233,.86);
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

/* =========================================================
   Home UPCOMING / LATEST
   ========================================================= */

.upcoming-list,
.latest-list{
  display: grid;
  gap: 30px;
}

.upcoming-block{
  display: block;
  position: relative;
  border: 0px solid rgba(255,255,255,.12);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: clamp(260px, 32vw, 460px);
  background: #000;
}

/* ---------------------------------------------------------
   Detail HERO
   - Rendered with the same markup as HOME upcoming/latest
   - Optional veil via --hero-veil (0..1)
   --------------------------------------------------------- */

.hero-block .hero-veil{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--hero-veil, 0));
  pointer-events: none;
  z-index: 1;
}

/* ---------------------------------------------------------
   Event detail HERO image
   - width: fit block
   - height: auto (preserve aspect ratio)
   --------------------------------------------------------- */
.hero-block{
  background: var(--block-bg, #000);
}

body[data-page="benmi-event"] .hero-block{
  /* override the home thumb min-height clamp */
  min-height: auto;
}

.hero-media{
  position: relative;
  z-index: 0;
}

.hero-img{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}


/* サムネ画像は全面展開。ズームやフェードは入れない */
.upcoming-media{
  position: absolute;
  inset: 0;
  background-image: var(--up-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
}

/* 以前のフェード(グラデ)は無効 */
.upcoming-block::before{ content:none; }

.upcoming-overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2.2vw, 26px);
}

.upcoming-badge{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .18em;
  font-weight: 900;
  margin-bottom: 12px;
}

.upcoming-title{
  font-size: clamp(36px, 5.6vw, 78px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.02;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.upcoming-sub{
  margin-top: 8px;
  font-size: clamp(16px, 2.1vw, 28px);
  font-weight: 800;
  color: rgba(233,233,233,.92);
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.upcoming-meta{
  margin-top: 10px;
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(233,233,233,.86);
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

/* entry button (and generic .btn) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--btn-pad-y, 14px) var(--btn-pad-x, 20px);
  font-size: var(--btn-fs, 18px);
  font-weight: var(--btn-fw, 900);
  letter-spacing: var(--btn-ls, .12em);

  border: var(--btn-border, 1px solid var(--line));
  border-radius: var(--btn-radius, 0);

  background: var(--btn-bg, rgba(255,255,255,.06));
  color: var(--btn-ink, currentColor);

  text-decoration: none;
  box-shadow: var(--btn-shadow, none);
}

.btn:hover{
  background: var(--btn-hover-bg, var(--btn-bg, rgba(255,255,255,.06)));
  color: var(--btn-hover-ink, var(--btn-ink, currentColor));
}
.gallery{ display: grid; gap: 14px; }
.gallery-item img{ width: 100%; height: auto; display: block; border-radius: 0; }
.gallery-item figcaption{ margin-top: 6px; color: var(--muted); font-size: 13px; }

.faq-item{ border-top: 1px solid var(--line); }
.faq-item:first-child{ border-top: none; }
.faq-q{
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.faq-plus{ width: 1.2em; }
.faq-a{ padding: 0 16px 14px; }

/* simple themes */
.theme-slate{ background: rgba(255,255,255,.04); }
.theme-rose{ background: rgba(255, 0, 128, .10); }
.theme-teal{ background: rgba(0, 255, 214, .10); }

/* =========================================================
   BENMI blocks extension
   - per-block style vars
   - center layout
   - hover color
   - toc block
   - hero veil: default 0 (do not darken key visual)
   ========================================================= */

.block{
  /* block.style から入る */
  background: var(--block-bg, transparent);
  color: var(--block-ink, inherit);

  /* 内側余白: 0が基本。必要なら block.style.padX/padY で足す */
  padding: var(--block-pad-y, 0) var(--block-pad-x, 0);

  /* 高さ（任意） */
  min-height: var(--block-min-h, auto);

  /* hoverで色を変える */
  transition: background-color 0ms, color 0ms;
}
.block:hover{
  background: var(--block-hover-bg, var(--block-bg, transparent));
  color: var(--block-hover-ink, var(--block-ink, inherit));
}

.block-title{
  color: var(--block-title-ink, currentColor);
  font-family: "Guanine", "MOBO", system-ui, sans-serif;
  font-weight: 700; /* ← 追加（好みで 700〜900） */
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(24px, 4.0vw, 32px);
    /* SP: center / PC: left */
  text-align: center;
}

@media (min-width: 768px){
  .block-title{ text-align: left; }
}

.block-body{
  /* 中央揃えが基本。左寄せしたい場合は中のHTMLで .u-left を使う */
  display: flex;
  align-items: var(--block-align, center);
  justify-content: var(--block-justify, center);
  text-align: var(--block-text-align, center);

  color: var(--block-body-ink, currentColor);
  font-size: var(--block-body-size, inherit);
  font-family: var(--block-body-font, inherit);
}

.block-inner{
  width: 100%;
  max-width: 100%;
}

/* HTML側で任意に揃えを変える用 */
.u-left{ text-align:left; }
.u-center{ text-align:center; }
.u-right{ text-align:right; }

/* SPは中央のまま、PCだけ左寄せ */
.u-left-pc{ text-align: center; }
@media (min-width: 768px){
  .u-left-pc{ text-align: left; }
}

/* 文字のベース（textブロック） */
.block .rich p{ margin: .6em 0; }
.block .rich ul{ margin: .6em 0; padding-left: 1.2em; }

/* textブロック内：画像＋キャプション（figure） */
.block .rich figure.rich-figure{
  width: min(var(--fig-max, 980px), 100%);
  margin: 18px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em; /* 好みで */
}
.block .rich figure.rich-figure img{
  display: block;
  width: 100%;
  height: auto;
}
.block .rich figure.rich-figure figcaption{
  margin-top: .55em;
  text-align: center;
  font-size: .92em;
  opacity: .78;
}


/* -------------------------
   HERO veil control
   ------------------------- */
.block-hero .hero-veil{
  background: rgba(0,0,0,var(--hero-veil, 0)) !important;
}

/* -------------------------
   TOC block
   ------------------------- */
.toc-box{
  width: min(920px, 100%);
  background: rgba(255,255,255,.92);
  color: #1a1a1a;
  padding: 18px 20px;
  position: relative;              /* 左上基準を toc-box にする */
}

/* TOC: PCは日付を左上固定、目次リストは中央のまま */
.toc-dates{
  position: absolute;
  top: clamp(10px, 2.8vw, 16px);
  left: clamp(12px, 3.2vw, 18px);

  margin: 0;
  display: grid;
  gap: 4px;

  text-align: left;                /* 親の中央寄せを無効化 */
  color: #d60000;
  font-weight: 800;
  font-size: clamp(12px, 3.4vw, 14px);
  line-height: 1.2;
}

.toc-date{ /* 追加で装飾したい時用 */ }

.toc-list{
  list-style: none;
  /* absolute配置の日付2行ぶんの逃がし。前のmargin-topが後段で上書きされていたので統合 */
  margin: clamp(40px, 10vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.toc-item a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.toc-indent-1{ padding-left: 18px; }
.toc-indent-2{ padding-left: 36px; }

/* 狭い画面では日付を通常フローに戻して重なりを根本回避 */
@media (max-width: 640px){
  .toc-dates{
    position: static;
    margin: 0 0 10px 0;
  }

  .toc-list{
    margin-top: 0;
  }
}

/* -------------------------
   KV helper (DATE/PLACEみたいな大文字レイアウト用)
   ------------------------- */
.kv-grid{
  width: min(920px, 100%);
  display: grid;
  gap: 34px;
}
.kv-row{ display: grid; gap: 10px; }
.kv-label{
  font-family: "Guanine", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(24px, 4.0vw, 32px);
}
.kv-value{
  font-family: "Guanine", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(32px, 4.0vw, 72px);
  line-height: 1.02;
}
.kv-link{
  display: inline-block;
  margin-left: .35em;
  font-size: .55em;
  vertical-align: baseline;
}