/* ============================================================
 * イベントカレンダー（templates/partials/oripa-event-calendar.php）
 *
 * 記事本文の `:::eventcal` / pillar の `%%EVENTCAL%%` を置いたページにだけ
 * layout.php が配る（chusen-embed.css と同じ隔離方式）。
 *
 * 当たり先が2種類あるので、**`.article__body` と `.area-body` の両方**に
 * 効くセレクタで書く（`.article__body` 限定にして柱ページで当たらなかった
 * chusen-embed.css と同じ穴を作らない）。素のセレクタ（.oripa-evcal 起点）で
 * 書き、親側の reset に負けるところだけ明示的に戻している。
 *
 * 値はすべて --ds-* トークン経由（生hex / 生px 禁止）。
 * ============================================================ */

.oripa-evcal {
  margin: var(--ds-space-stack-md) 0;
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-lh);
  color: var(--ds-color-text);
}

.oripa-evcal__month + .oripa-evcal__month {
  margin-top: var(--ds-space-stack-md);
}

/* 月見出し。記事の h3 装飾（左バー）は継がせたくないので独自クラスで出す。 */
.oripa-evcal .oripa-evcal__title {
  margin: 0 0 var(--ds-space-stack-xs);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-h3-lh);
  color: var(--ds-color-text);
}
.oripa-evcal .oripa-evcal__title::before { content: none; }

.oripa-evcal__title-note {
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-caption-weight);
  color: var(--ds-color-text-muted);
}

.oripa-evcal__empty {
  margin: 0;
  padding: var(--ds-space-inline-md);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-paper);
  color: var(--ds-color-text-muted);
}

/* 7列は狭い端末で潰れるので、最小幅を持たせて横スクロールに逃がす
   （CLAUDE.md: 幅広コンテンツは自前の overflow-x コンテナに入れる）。 */
.oripa-evcal__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 横スクロールは気づかれないので、実際にあふれる幅（= SP）でだけ文言を出す。
   JS で「あふれているか」を測らずメディアクエリで済ませる（グリッドの最小幅は固定なので
   ビューポート幅から一意に決まる）。7列 + セクション左右余白でおよそ 580px。 */
.oripa-evcal__scroll-hint { display: none; }
@media (max-width: 580px) {
  .oripa-evcal__scroll-hint {
    display: block;
    margin: 0 0 var(--ds-space-inline-xs);
    font-size: var(--ds-text-caption-size);
    line-height: var(--ds-text-caption-lh);
    color: var(--ds-color-text-muted);
  }
}

.oripa-evcal__grid {
  min-width: calc(var(--ds-container-evcal-col) * 7);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-elevated);
  overflow: hidden;
}

.oripa-evcal__dows,
.oripa-evcal__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.oripa-evcal__dows {
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-bg-paper);
}

.oripa-evcal__dow {
  padding: var(--ds-space-inline-xs) 0;
  text-align: center;
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-body-sm-weight);
  color: var(--ds-color-text-muted);
}
.oripa-evcal__dow--0 { color: var(--ds-color-danger); }
.oripa-evcal__dow--6 { color: var(--ds-color-text-link); }

.oripa-evcal__cell {
  min-height: calc(var(--ds-container-evcal-col) * 1.1);
  padding: var(--ds-space-inline-xs);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
  border-left: var(--ds-border-width) solid var(--ds-color-border);
}
/* 1行目の上罫線と左端の縦罫線は外枠と二重になるので消す。 */
.oripa-evcal__days > .oripa-evcal__cell:nth-child(-n + 7) { border-top: 0; }
.oripa-evcal__days > .oripa-evcal__cell:nth-child(7n + 1) { border-left: 0; }

.oripa-evcal__cell--pad { background: var(--ds-color-bg-paper); }
.oripa-evcal__cell--quiet { background: var(--ds-color-bg); }

.oripa-evcal__cell.is-today {
  background: var(--ds-color-state-info-bg);
  box-shadow: inset 0 0 0 var(--ds-border-width-heading-accent) var(--ds-color-state-info-border);
}

.oripa-evcal__date {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-body-sm-weight);
  color: var(--ds-color-text-muted);
}
.oripa-evcal__date--0 { color: var(--ds-color-danger); }
.oripa-evcal__date--6 { color: var(--ds-color-text-link); }

.oripa-evcal__today {
  padding: 0 var(--ds-space-inline-xs);
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-state-info-text);
  color: var(--ds-color-text-inverse);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-micro-weight);
}

/* マスの中のイベント。reset で消えた list-style は戻さず、アイコン＋名称の行で並べる。 */
.oripa-evcal .oripa-evcal__events {
  display: grid;
  gap: var(--ds-space-inline-xs);
  margin: var(--ds-space-inline-xs) 0 0;
  padding: 0;
  list-style: none;
}
.oripa-evcal .oripa-evcal__event { margin: 0; padding: 0; }
.oripa-evcal .oripa-evcal__event::before { content: none; }

.oripa-evcal__link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  color: var(--ds-color-text);
  text-decoration: none;
}
.oripa-evcal__link:hover .oripa-evcal__event-name { text-decoration: underline; }
.oripa-evcal__link--plain { cursor: default; }

.oripa-evcal__icon {
  flex: 0 0 auto;
  width: var(--ds-container-evcal-icon);
  height: var(--ds-container-evcal-icon);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-bg-paper);
  object-fit: cover;
}

/* アイコン画像が無いサイトの代替（サービス名の頭文字）。 */
.oripa-evcal__icon--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-bg-inverse);
  color: var(--ds-color-text-inverse);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-micro-weight);
  line-height: 1;
}

.oripa-evcal__event-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--ds-text-micro-size);
  line-height: var(--ds-text-micro-lh);
  word-break: break-word;
}

.oripa-evcal__hint {
  margin: var(--ds-space-stack-xs) 0 0;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
  color: var(--ds-color-text-muted);
}

/* ---------- 毎日やっているもの ---------- */

.oripa-evcal__daily { margin-top: var(--ds-space-stack-md); }

.oripa-evcal__daily-lead {
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
  color: var(--ds-color-text-muted);
}

.oripa-evcal .oripa-evcal__daily-list {
  display: grid;
  gap: var(--ds-space-inline-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.oripa-evcal .oripa-evcal__daily-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-inline-xs) var(--ds-space-inline-sm);
  margin: 0;
  padding: var(--ds-space-inline-sm) var(--ds-space-inline-md);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-paper);
}
.oripa-evcal .oripa-evcal__daily-item::before { content: none; }

.oripa-evcal__daily-link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  color: var(--ds-color-text);
  text-decoration: none;
}
.oripa-evcal__daily-link:hover .oripa-evcal__daily-service { text-decoration: underline; }

.oripa-evcal__daily-service { font-weight: var(--ds-text-h3-weight); }
.oripa-evcal__daily-name { font-size: var(--ds-text-body-sm-size); }
.oripa-evcal__daily-recur {
  margin-left: auto;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
}

/* ---------- 出典 ---------- */

.oripa-evcal__sources {
  margin-top: var(--ds-space-stack-md);
  padding: var(--ds-space-inline-sm) var(--ds-space-inline-md);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-paper);
}

.oripa-evcal__sources > summary {
  cursor: pointer;
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-text-h3-weight);
  color: var(--ds-color-text);
}

.oripa-evcal .oripa-evcal__source-table {
  width: 100%;
  margin: var(--ds-space-stack-xs) 0 0;
  border-collapse: collapse;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
}
.oripa-evcal .oripa-evcal__source-table th,
.oripa-evcal .oripa-evcal__source-table td {
  padding: var(--ds-space-table-cell-y) var(--ds-space-inline-xs);
  border-bottom: var(--ds-border-width-divider) solid var(--ds-color-border);
  background: none;
  text-align: left;
  vertical-align: top;
  color: var(--ds-color-text);
  font-size: var(--ds-text-caption-size);
}
.oripa-evcal .oripa-evcal__source-table th {
  font-weight: var(--ds-text-body-sm-weight);
  color: var(--ds-color-text-muted);
}
.oripa-evcal .oripa-evcal__source-table a {
  color: var(--ds-color-text-link);
  text-decoration: underline;
  text-underline-offset: var(--ds-space-inline-xs);
}

.oripa-evcal__badge {
  display: inline-block;
  margin-left: var(--ds-space-inline-xs);
  padding: 0 var(--ds-space-inline-xs);
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-state-warning-bg);
  color: var(--ds-color-state-warning-text);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-micro-weight);
  white-space: nowrap;
}

.oripa-evcal__note {
  margin: var(--ds-space-stack-xs) 0 0;
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
  color: var(--ds-color-text-muted);
}

/* ============================================================
 * 月別一覧表（templates/partials/oripa-event-table.php）
 *
 * カレンダーと同じデータを日付順に並べる。**狭い端末で横スクロールが要らない**のが
 * この表の存在理由なので、4列とも固定幅を持たせず縮む設計にする。
 * ============================================================ */

.oripa-evtable {
  margin: var(--ds-space-stack-md) 0;
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-lh);
  color: var(--ds-color-text);
}

.oripa-evtable__month + .oripa-evtable__month {
  margin-top: var(--ds-space-stack-md);
}

.oripa-evtable .oripa-evtable__title {
  margin: 0 0 var(--ds-space-stack-xs);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: var(--ds-text-h3-lh);
  color: var(--ds-color-text);
}
.oripa-evtable .oripa-evtable__title::before { content: none; }

.oripa-evtable__title-note {
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-caption-weight);
  color: var(--ds-color-text-muted);
}

.oripa-evtable__empty {
  margin: 0;
  padding: var(--ds-space-inline-md);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-bg-paper);
  color: var(--ds-color-text-muted);
}

.oripa-evtable .oripa-evtable__table {
  width: 100%;
  margin: 0;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  table-layout: auto;
}

.oripa-evtable .oripa-evtable__table thead th {
  padding: var(--ds-space-table-cell-y) var(--ds-space-inline-sm);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-bg-paper);
  color: var(--ds-color-text-muted);
  text-align: left;
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-body-sm-weight);
  white-space: nowrap;
}

.oripa-evtable .oripa-evtable__table tbody th,
.oripa-evtable .oripa-evtable__table tbody td {
  padding: var(--ds-space-table-cell-y) var(--ds-space-inline-sm);
  background: none;
  color: var(--ds-color-text);
  text-align: left;
  vertical-align: middle;
  font-size: var(--ds-text-body-sm-size);
}

/* 日ごとの区切りだけ罫線を引く（同じ日のイベント同士は線で切らない）。 */
.oripa-evtable .oripa-evtable__row--daystart > th,
.oripa-evtable .oripa-evtable__row--daystart > td {
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}
.oripa-evtable .oripa-evtable__table tbody tr:first-child > th,
.oripa-evtable .oripa-evtable__table tbody tr:first-child > td {
  border-top: 0;
}

.oripa-evtable .oripa-evtable__date {
  width: 1%;
  white-space: nowrap;
  font-weight: var(--ds-text-h3-weight);
}
.oripa-evtable .oripa-evtable__dow {
  width: 1%;
  white-space: nowrap;
  color: var(--ds-color-text-muted);
}
.oripa-evtable .oripa-evtable__dow--0 { color: var(--ds-color-danger); }
.oripa-evtable .oripa-evtable__dow--6 { color: var(--ds-color-text-link); }

.oripa-evtable .oripa-evtable__row.is-today > th,
.oripa-evtable .oripa-evtable__row.is-today > td {
  background: var(--ds-color-state-info-bg);
}

/* 当月に残した「直前3日」の終了済みの行。消さずにグレーアウトで区別する
   （「昨日やっていたか」を確認したい読者のために残している）。
   アイコンの彩度まで落とすと何のサイトか読めなくなるので、文字色だけ弱める。 */
.oripa-evtable .oripa-evtable__row.is-past > th,
.oripa-evtable .oripa-evtable__row.is-past > td {
  background: var(--ds-color-bg-paper);
  color: var(--ds-color-text-subtle);
}
.oripa-evtable .oripa-evtable__row.is-past .oripa-evtable__link,
.oripa-evtable .oripa-evtable__row.is-past .oripa-evtable__dow {
  color: var(--ds-color-text-subtle);
}
.oripa-evtable .oripa-evtable__row.is-past .oripa-evcal__badge {
  background: var(--ds-color-bg-subtle);
  color: var(--ds-color-text-subtle);
}

.oripa-evtable__range {
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-caption-size);
  line-height: var(--ds-text-caption-lh);
  color: var(--ds-color-text-muted);
}

.oripa-evtable__link {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  color: var(--ds-color-text);
  text-decoration: none;
}
.oripa-evtable__link:hover .oripa-evtable__service { text-decoration: underline; }

/* サイト列は中身の幅まで縮め、余った横幅はイベント名列に持たせる
   （auto レイアウトのままだとサイト列が伸びてイベント名が遠くに離れる）。 */
.oripa-evtable .oripa-evtable__site,
.oripa-evtable .oripa-evtable__th-icon {
  width: 1%;
  white-space: nowrap;
}

.oripa-evtable__service {
  font-weight: var(--ds-text-body-sm-weight);
  word-break: break-word;
}

.oripa-evtable__name { word-break: break-word; }

/* SP では「サイト」列のサービス名を隠してアイコンだけにする（4列を横スクロールなしで
   収めるため。名称は aria-label とイベント名の並びで伝わる）。 */
@media (max-width: 480px) {
  .oripa-evtable__service {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .oripa-evtable .oripa-evtable__table thead th,
  .oripa-evtable .oripa-evtable__table tbody th,
  .oripa-evtable .oripa-evtable__table tbody td {
    padding-inline: var(--ds-space-inline-xs);
  }
}

/* ---------- 狭い端末（列が細くなる幅） ---------- */
/* 2行 clamp の打ち消しなので、**必ず基本定義より後ろ**に置く
   （ファイル前半の @media に書くと後続の .oripa-evcal__event-name に負ける）。 */
@media (max-width: 580px) {
  /* 列が細くイベント名が2行に収まらない。行数を切って「…」で隠すより、マスを縦に
     伸ばして全文を出すほうが読者の損が小さい。 */
  .oripa-evcal__event-name {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }
}