/* イベントのカード。/events の一覧とトップの「次のイベント」の欄で同じものを使う(どちらも scripts/build-events.mjs が作る)。
   読み込む側で --black --panel --fg --green --line --mute --display --body が決まっている前提。足りない色はここで決める */
:root { --panel-2: #13231A; --yellow: #FFD66B; --mono: "JetBrains Mono", ui-monospace, monospace; }

/* ラベル(開催予定・申し込みの状態)。一覧と詳細で同じ色を使う */
.labels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lbl { display: inline-block; font: 700 12px/1 var(--body); padding: 6px 9px; border-radius: 2px; border: 1px solid transparent; white-space: nowrap; }
.lbl-upcoming, .lbl-open { background: var(--green); color: var(--black); border-color: var(--green); }
.lbl-before { color: var(--fg); border-color: var(--mute); }
.lbl-few { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.lbl-full { color: var(--fg); border-color: var(--fg); }
.lbl-ended { color: var(--mute); border-color: var(--line); }
.countdown { font: 500 13px/1 var(--mono); color: var(--green); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); }
.cards:empty { display: none; }
.card { position: relative; display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: border-color .15s; }
.card:hover { border-color: var(--green); }
.card-img { display: block; flex: 1 1 420px; min-width: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 30px); }
.card h3 { margin: 0; font: 700 clamp(20px, 1.8vw, 24px)/1.5 var(--body); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }  /* カード全体を押せるようにする */
.card.is-past { opacity: .85; }
.meta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; font-size: 15px; line-height: 1.7; }
.meta dt { color: var(--mute); }
.meta dd { margin: 0; }
.card-links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; }
.more { color: var(--green); }
.more::after { content: " →"; }
/* カレンダーに追加(カード全体のリンクより上に置いて押せるようにする) */
.cal-menu { position: relative; z-index: 2; }
.cal-menu summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: .25em; }
.cal-menu summary::-webkit-details-marker { display: none; }
.cal-menu summary::after { content: " ▾"; font-size: .8em; }
.cal-pop { position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; min-width: 230px; background: var(--black); border: 1px solid var(--line); border-radius: 4px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.cal-pop a { padding: 10px 12px; text-decoration: none; border-radius: 3px; font-size: 14px; }
.cal-pop a:hover { background: var(--panel-2); color: var(--green); }