/* =========================================================
   EVENT + 予定一覧 共通（max-width 900px / 1カラム）
   - 月見出し sticky 無し
   - カード背景：黒半透明
   - 角丸無し
   ========================================================= */

/* 共通スケルトン（page-hero / page-section）に寄せるため、main側で幅を絞らない */
.event-page,
.event-archive-page {
  padding: 0 30px;
}

/* EVENTのコンテンツ枠（page-section + is-xxxxx） */
.event-page .page-section.is-event,
.event-archive-page .page-section.is-event-archive {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 120px;
}

.event-page__header {
  margin-bottom: 24px;
}

.event-page__title {
  margin: 0;
  font-size: 48px;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.event-page__subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.event-page__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 12px;
}

.event-page__section-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.22em;
}

.event-page__archive-btn {
  display: inline-block;
  padding: 1em 2em;
  margin: 0 auto;
  background: #9377d1;
  color: #fff;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.is-event-archive .event-page__archive-btn {
  margin: 0;
}

/* visitedの紫を無効化（通常リンクと同じ見え方にする） */
a:visited {
  color: inherit;
}

.event-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  /*margin: 0 40px;*/
} 

/* 月見出し（sticky無し） */
.event-month-heading{
  display: grid;
  text-align: center;
  align-items: baseline;
  gap: 5px;
  margin: 34px 0 16px;
  /*background: rgba(0,0,0,0.75);*/
  padding: 0 20px;
  border-radius: 0;
  filter: drop-shadow(3px 3px 6px black);
}

.event-month-ja{
  font-size: 24px;
  letter-spacing: 0.05em;
}

.event-month-en{
  font-size: 15px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

/* Card */
.event-card {
  /*border: 1px solid rgba(255,255,255,0.18);*/
  border-radius: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.58);
}

.event-card__link {
  display: block;
  padding: 16px 16px 18px;
  color: inherit;
  text-decoration: none;
}

.event-card__date {
  display: inline-block;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 8px;
}

.event-card__title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
}

.event-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  margin: 10px 0 12px;
}

.event-card__excerpt {
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.92;
}

/* 全文表示 */
.event-card--full {
  padding: 0;
}

/* ===== 2-column layout (thumb left / content right) ===== */

.event-card__grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile default: 1 column */
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* media */
.event-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* 角丸なし */
}

/* desktop ~ tablet: 2 columns (only when has-thumb) */
@media (min-width: 768px) {
  .event-card.has-thumb .event-card__grid {
    grid-template-columns: 320px 1fr; /* 左画像幅は好みで調整 */
    align-items: start;
  }
}

/* 画像なしは常に1カラム */
.event-card.no-thumb .event-card__grid {
  grid-template-columns: 1fr;
}

.event-card__inner {
  padding: 40px;
}

/* =========================================================
   TODAY'S EVENT（最新=先頭カード）
   レイヤー順：SVG(4) → マスク(3) → 二重線(2) → 中身(1)
   ========================================================= */

.event-list > article.event-card:first-of-type {
  /* 枠色 */
  --todays-frame-color: #9377d1;

  /* 外枠 inset（上 右 下 左） */
  --todays-outer-top: 35px;
  --todays-outer-right: 27px;
  --todays-outer-bottom: 32px;
  --todays-outer-left: 27px;

  /* 内枠 inset（上 右 下 左） */
  --todays-inner-top: 42px;
  --todays-inner-right: 34px;
  --todays-inner-bottom: 39px;
  --todays-inner-left: 34px;

  /* 角丸（外枠 / 内枠） */
  --todays-outer-radius: 34px;
  --todays-inner-radius: 28px;

  /* タイトル位置・サイズ（SVG） */
  --todays-title-top: 18px;
  --todays-title-width: 30%;
  --todays-title-height: 44px;

  /* マスク（pill） */
  --todays-title-mask-w: 32%;
  --todays-title-mask-h: 56px;
  --todays-title-mask-radius: 0;
  --todays-title-mask-bg: rgba(0, 0, 0, 0.90);

  /* 中身の上余白（啓さんOKの値） */
  --todays-content-pad-top: 80px;
  --todays-content-pad-left: 60px;
  --todays-content-pad-right: 60px;
  --todays-content-pad-bottom: 80px;
  
  position: relative;
  z-index: 0;

  /* デフォ枠は消す（線はinner側で描く） */
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* ===== マスク（z=3）：article側 ===== */
.event-list > article.event-card:first-of-type::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--todays-title-top);
  transform: translateX(-50%);

  width: min(920px, var(--todays-title-mask-w));
  height: var(--todays-title-mask-h);

  border-radius: var(--todays-title-mask-radius);
  background-color: var(--todays-title-mask-bg);

  pointer-events: none;
  z-index: 3;
}

/* ===== SVG（z=4）：article側 ===== */
.event-list > article.event-card:first-of-type::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--todays-title-top);
  transform: translateX(-50%);

  width: min(920px, var(--todays-title-width));
  height: var(--todays-title-height);

  background: url("http://filtshibuya.com/wpcms/wp-content/uploads/2026/01/title_todays-event.svg")
              center / contain no-repeat;

  pointer-events: none;
  z-index: 4;
}

/* ===== inner（角丸なし） + タイトル分の上余白 ===== */
.event-list > article.event-card:first-of-type .event-card__inner {
  position: relative;
  border-radius: 0;
  overflow: visible;
  padding-top: var(--todays-content-pad-top);
  padding-left: var(--todays-content-pad-left);
  padding-right: var(--todays-content-pad-right);
  padding-bottom: var(--todays-content-pad-bottom);
}

/* ===== 二重線（z=2）：inner側 ===== */
.event-list > article.event-card:first-of-type .event-card__inner::before {
  content: "";
  position: absolute;
  top: var(--todays-outer-top);
  right: var(--todays-outer-right);
  bottom: var(--todays-outer-bottom);
  left: var(--todays-outer-left);

  border: 2px solid var(--todays-frame-color);
  border-radius: var(--todays-outer-radius);

  pointer-events: none;
  z-index: 2;
}

.event-list > article.event-card:first-of-type .event-card__inner::after {
  content: "";
  position: absolute;
  top: var(--todays-inner-top);
  right: var(--todays-inner-right);
  bottom: var(--todays-inner-bottom);
  left: var(--todays-inner-left);

  border: 2px solid color-mix(in srgb, var(--todays-frame-color) 70%, transparent);
  border-radius: var(--todays-inner-radius);

  pointer-events: none;
  z-index: 2;
}

/* ===== 中身（z=1）：二重線の奥 ===== */
.event-list > article.event-card:first-of-type .event-card__grid {
  position: relative;
  z-index: 1;
}




.event-card__content {
  font-size: 15px;
  line-height: 1.9;
}

.event-card__content p {
  margin: 0 0 1.2em;
}

.event-card__content img {
  max-width: 100%;
  height: auto;
}

.event-card__content h2,
.event-card__content h3{
  margin: 1.4em 0 0.7em;
  line-height: 1.3;
}

.event-card__content ul,
.event-card__content ol{
  margin: 0.8em 0 1.2em 1.2em;
}

/* 年リンク */
.event-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.event-years__link {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  background: #fff;
  color: #000 !important;
}

.event-years__link.is-current {
  opacity: 0.6;
}

.event-page__empty {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.85;
}

/* backdrop-filter 対応環境だけ質感を上げる（黒系） */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .event-card,
  .event-list > article.event-card:first-of-type .event-card__inner {
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 420px) {
  .event-page__section-head {
    flex-direction: column;
    align-items: anchor-center;
  }
  
  .event-list > article.event-card:first-of-type {
    /* 枠色 */
    --todays-frame-color: #9377d1;

    /* 外枠 inset（上 右 下 左） */
    --todays-outer-top: 25px;
    --todays-outer-right: 17px;
    --todays-outer-bottom: 22px;
    --todays-outer-left: 17px;

    /* 内枠 inset（上 右 下 左） */
    --todays-inner-top: 32px;
    --todays-inner-right: 24px;
    --todays-inner-bottom: 29px;
    --todays-inner-left: 24px;

    /* 角丸（外枠 / 内枠） */
    --todays-outer-radius: 24px;
    --todays-inner-radius: 18px;

    /* タイトル位置・サイズ（SVG） */
    --todays-title-top: 18px;
    --todays-title-width: 50%;
    --todays-title-height: 24px;

    /* マスク（pill） */
    --todays-title-mask-w: 52%;
    --todays-title-mask-h: 18px;
    --todays-title-mask-radius: 0;
    --todays-title-mask-bg: rgba(0, 0, 0, 0.90);

    /* 中身の上余白（啓さんOKの値） */
    --todays-content-pad-top: 60px;
    --todays-content-pad-left: 40px;
    --todays-content-pad-right: 40px;
    --todays-content-pad-bottom: 60px;
  }
}

/* =========================================
   背景：通常 0.55 / 最新（先頭）だけ 1.0
   ※HTMLに is-latest を付けなくてもOK
========================================= */

/* 最新（TODAYS EVENT = 先頭カード）だけ */
.event-list > article.event-card:first-of-type .event-card__inner{
  background: rgba(0, 0, 0, 1);
}