/* 行事曆頁（R6-5）：模板/calendar.js 的 inline 樣式集中管理＋readability。
   owner 回饋月曆字偏小 → 日期數字/事件文字加大一級（桌機 +1px、行動版 +2px）。
   色值一律既有 token（theme.css 單一真相，維持 color/radius ratchet 零硬編）。
   事件色徽底色依 type 動態決定 → 仍由 calendar.js inline background 帶入。 */

/* 面板外觀＝components.css .page-panel 共用配方；本頁只給差異值（寬＋內距，零外觀變更）。 */
.calendar-page {
    --page-panel-max: 960px;
    --page-panel-pad: 48px 32px 64px;
}

.calendar-page h1 {
    color: var(--gold-rich);
    margin: 0 0 8px;
    text-align: center;
}

.calendar-intro {
    margin: 0 auto 24px;
    color: var(--ink-site);
    line-height: 1.8;
    text-align: center;
}

.cal-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 14px 0 20px;
}

.cal-month-label {
    flex: 1;
    text-align: center;
    color: var(--ink-site);
    font-size: 1.15rem;
}

.cal-toggle {
    font-size: 0.8125rem;
}

/* 月曆檢視 */
.cal-grid {
    display: grid;
    /* 七欄恆等寬：minmax(0,1fr)——`1fr`＝minmax(auto,1fr)，auto 最小軌道會被長活動
       標題撐寬把整欄擠歪（owner 2026-07-17 觀察）。minmax(0,..) 允許軌道縮到內容以下。 */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-weekday {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ink-site);
    padding: 8px 0;
    font-weight: 700;
}

.cal-day {
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-6);
    min-height: 88px;
    padding: 7px;
    background: var(--cream);
    /* grid item 預設 min-width:auto → 不縮到內容以下；長標題會撐寬該欄破壞七欄等寬。
       min-width:0＋overflow:hidden 讓格子恆守自己那一欄的寬度。 */
    min-width: 0;
    overflow: hidden;
}

/* 有活動的日期格可點：進入該日活動清單（沿用列表檢視，不另建頁面）。 */
.cal-day[data-date] {
    cursor: pointer;
}

.cal-day[data-date]:hover {
    border-color: var(--gold-rich);
}

.cal-day[data-date]:focus-visible {
    outline: 2px solid var(--gold-rich);
    outline-offset: 1px;
}

.cal-day-num {
    font-size: 0.9375rem;
    color: var(--ink-site);
    font-weight: 700;
}

.cal-event {
    /* 長標題最多兩行截斷（契約 7：ellipsis 或最多兩行）。-webkit-box + line-clamp
       需允許換行 → 不能 white-space:nowrap（nowrap 逼單行才是把欄位撐寬的元凶）。 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.8125rem;
    border-radius: var(--radius-4);
    padding: 2px 4px;
    margin-top: 2px;
    color: var(--ink-site);
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* 同日多活動的「另 N 件」收合鍵——只畫第一件，其餘收成這顆（不把格子撐高/撐歪）。 */
.cal-day-more {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 1px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: left;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    border-radius: var(--radius-4);
    cursor: pointer;
}

/* 當日檢視的返回鍵（點日期格 → 只看當日 → 返回本月全部）。 */
.cal-day-back {
    display: inline-block;
    margin: 4px 0 12px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gold-rich);
    background: transparent;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-6);
    cursor: pointer;
}

/* 列表檢視 */
.cal-list-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gold-border);
}

.cal-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-right: 6px;
    vertical-align: middle;
}

.cal-list-row a {
    color: var(--gold-rich);
    text-decoration: none;
}

.cal-event-title {
    color: var(--ink-site);
}

.cal-list-date {
    color: var(--ink-site);
    font-weight: 700;
}

/* 行動版：此斷點下 calendar.js 預設走列表檢視（MOBILE_MAX_WIDTH=600，兩邊要一起改）。
   月曆格子仍可手動切回，故格子樣式保留：格子更小、字再加一級才看得清。 */
@media (max-width: 600px) {
    .calendar-page { margin: 12px; --page-panel-pad: 32px 12px 48px; }
    .cal-toolbar { flex-wrap: wrap; }
    .cal-toggle { width: 100%; }
    .cal-grid { gap: 2px; }
    .cal-day { min-height: 62px; padding: 4px; }
    .cal-weekday { font-size: 0.875rem; }
    .cal-day-num { font-size: 0.875rem; }
    .cal-event { font-size: 0.8125rem; }
    /* 窄螢幕：標題長時別把日期擠到換行 */
    .cal-list-row { gap: 10px; }
    .cal-list-date { white-space: nowrap; }
}

/* 廟方在後台寫的事件說明（2026-07-15：先前完全沒被顯示）。 */
.cal-list-note {
    margin: 0 0 10px 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

/* 法會地點（fahui 投影的 venue）。與 .cal-list-note 是不同語意的兩件事（L13）：
   說明是廟方寫的散文，地點是結構化欄位 → 次一階的字級/色，排在說明之前。 */
.cal-list-venue {
    margin: 0 0 4px 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-gray);
}

/* 載入中／載入失敗（盤點 P1-6）：以前這兩種都畫成空月曆，跟「本月沒有活動」
   長得一模一樣。色值一律 token——本檔在 color ratchet 的硬編色額度是 0。 */
.cal-status {
    padding: 40px 0;
    text-align: center;
}

.cal-status-msg {
    margin: 0 0 14px;
    color: var(--ink-soft);
    line-height: 1.8;
}

.cal-status-error {
    color: var(--ink-site);
    font-weight: 700;
}