/**
 * 追思頁版面（layout）—— 主題之外的第二個外觀維度
 * =========================================================================
 * 清單在 core/LayoutCatalog.php，body 上的 class 由 view.php 印出：
 *   layout-single   單頁（預設，等同這支載入前的樣子，本檔對它不做任何事）
 *   layout-two-col  2 欄
 *   layout-feature  特刊
 *
 * 能純 CSS 換版面，是因為每個模組都是
 *   <section class="memorial-section" data-module="X">
 * 掛在同一個 .memorial-container 底下、而且各自用 data-module 自報身分。
 * 所以本檔一支都不用動 modules/*.php。
 *
 * ⚠️ 這支必須載入在 memorial-view.css **之後**、themes/*.css **之前**：
 *    要蓋得過通用樣式，但不能蓋掉主題的配色（版面只管排列，不管顏色）。
 *
 * ⚠️⚠️ 特異度陷阱（2026-09-20 實機踩到）：
 *    memorial-view.css 有一條 `.memorial-container.has-hero .memorial-header`
 *    （0,3,0），比 `.layout-two-col .memorial-header`（0,2,0）**高**。
 *    第一版就是這樣把側欄的 padding-top 被歸零，頭像整個貼死在卡片上緣。
 *    ⇒ 只要是覆寫 .memorial-header / .memorial-section 這種通用元件的規則，
 *      一律把 .memorial-container 也寫進選擇器把特異度墊到 (0,3,0) 以上。
 *      同一個坑在 includes/modal-styles.php 對 .theme-option 也有一份。
 */

/* =========================================================================
   2 欄
   ========================================================================= */

/* 手機放不下 340px 的側欄，所以 900px 以下完全不套用 —— 長得就是「單頁」。
   後台的版型卡片有標「手機自動轉為單頁」，不標的話使用者在手機選了會以為壞掉。 */
@media (min-width: 901px) {

    .layout-two-col .memorial-container {
        max-width: 1280px;
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    /* ⚠️ 選擇器帶 .memorial-container 是為了墊高特異度，見檔頭。 */
    .layout-two-col .memorial-container .memorial-header {
        grid-column: 1;
        /* ⚠️ 側欄要能一路黏到頁尾，它的 grid area 就必須跨滿所有的列。
           這裡不能寫 `grid-row: 1 / -1` —— -1 指的是**明確格線**的結尾，
           而這個 grid 的列全是自動產生的（只宣告了 columns），
           所以 -1 會被解讀成第 1 列，sticky 只在第一個區塊的高度內有效。
           用 span 一個夠大的數字才會跨到底；多出來的空列沒有內容，高度是 0。 */
        grid-row: 1 / span 99;
        align-self: start;
        position: -webkit-sticky;
        position: sticky;
        top: 24px;

        /* 單頁版的 header 沒有卡片外框（它是在封面下方的一段），
           變成側欄之後需要自己的容器感，沿用 .memorial-section 的視覺語彙。 */
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        /* padding 要寫成四個長度值，不能只寫 shorthand ——
           .memorial-container.has-hero .memorial-header 的 `padding-top: 0`
           會把 shorthand 的上方那一格吃掉（就是第一版的災情）。 */
        padding-top: 28px;
        padding-right: 24px;
        padding-bottom: 28px;
        padding-left: 24px;
    }

    /* 所有區塊與頁尾都排到右欄。沒有明寫的話，grid 會自動左右交錯放。 */
    .layout-two-col .memorial-section,
    .layout-two-col .memorial-footer {
        grid-column: 2;
    }

    /* 180px 的頭像在 292px 的內容寬度裡太搶戲 */
    .layout-two-col .memorial-container .pet-avatar,
    .layout-two-col .memorial-container .pet-avatar-placeholder {
        width: 132px;
        height: 132px;
        margin-bottom: 16px;
    }

    .layout-two-col .memorial-container .pet-name {
        font-size: 1.9rem;
    }

    .layout-two-col .memorial-container .pet-epitaph {
        font-size: 1.02rem;
        max-width: none;
        padding: 0 18px;
    }

    /* 側欄的按鈕改成整排，窄欄裡並排會被擠爛 */
    .layout-two-col .memorial-container .subscription-trigger {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .layout-two-col .memorial-container .subscription-trigger > * {
        width: 100%;
        justify-content: center;
    }

    /* ── 章節導覽 ──
       內容由 view.php 的 JS 掃描**實際渲染出來的** section 產生。
       ⚠️ 不要改成用 PHP 的 $sortedModules 印 —— 那份只知道模組「有沒有開」，
          不知道「有沒有內容」。生命歷程模組開著但 0 筆事件時，
          section 根本不會輸出，照 $sortedModules 印就會生出點了沒反應的死連結。 */
    .layout-two-col .memorial-rail-nav {
        display: block;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left;
    }

    .memorial-rail-nav-label {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 6px;
    }

    .memorial-rail-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 44px; /* 觸控目標 */
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease;
    }

    /* 全域規範：hover 不改文字顏色只改背景 —— 但這裡是純文字清單、沒有底色可加深，
       所以改成提高既有文字的不透明度（同一個色相，不是換色）。 */
    .memorial-rail-nav a:hover {
        color: #fff;
    }

    .memorial-rail-nav a:focus,
    .memorial-rail-nav a:focus-visible {
        outline: none;
    }

    .memorial-rail-nav .rail-nav-count {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.45);
    }
}

/* 章節導覽平常不存在於畫面上（單頁／特刊都用不到，手機的 2 欄也用不到）。
   放在 media query 外面，才不會在窄螢幕漏出來。 */
.memorial-rail-nav {
    display: none;
}

/* =========================================================================
   特刊
   =========================================================================
   刻意打破「每個區塊同寬同卡片」的節奏：靠寬度、字級與留白的落差製造層次，
   而不是靠顏色。所以本區塊只動排版屬性，配色一律留給 themes/*.css。

   ⚠️⚠️ 不要用 `width: 100vw; margin-left: calc(50% - 50vw)` 把個別區塊
   「撐出」容器（第一版是這樣做的，線上實測整片偏掉、右邊溢位）。
   那一招要靠精準抵銷容器的置中與 padding，任何一個環節對不上就會歪，
   而且它跟 .section-with-action 那顆 position:absolute 的按鈕會互相打架。

   改成**讓容器自己變成滿版**，再由各區塊自己收窄置中：
     容器 max-width: none  →  文字區塊 max-width: 1000px 置中
                           →  相簿／點燈 max-width: none（天生就是滿版）
   完全不需要任何抵銷計算，也就沒有可以算錯的地方。 */

.layout-feature .memorial-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 文字類區塊自己收窄。⚠️ 帶 .memorial-container 墊特異度，見檔頭。 */
.layout-feature .memorial-container .memorial-header,
.layout-feature .memorial-container .memorial-section,
.layout-feature .memorial-container .memorial-footer {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    /* 卡片外框整組拿掉，改用留白分隔。單頁是 40px padding + 30px margin，
       這裡拉到 72px，捲起來的呼吸感差距才看得出來。 */
    background: transparent;
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-top: 72px;
    padding-right: 24px;
    padding-bottom: 72px;
    padding-left: 24px;
    margin-bottom: 0;
}

/* 相簿與點燈不收窄：容器已經是滿版，它們只要把左右 padding 拿掉就是整片鋪滿 */
.layout-feature .memorial-container [data-module="photos"],
.layout-feature .memorial-container [data-module="tributes"] {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 區塊標題從「置中大標＋兩側裝飾線」改成「靠左小標籤」 */
.layout-feature .section-title {
    justify-content: flex-start;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    margin-bottom: 30px;
    /* ⚠️ memorial-view.css 的 .section-title 帶 `color: #fff !important`，
       不用 !important 蓋不掉。 */
    color: rgba(255, 255, 255, 0.5) !important;
}

.layout-feature .section-title::before,
.layout-feature .section-title::after {
    display: none;
}

/* 滿版區塊的標題要自己對齊回內容欄，不然會貼在螢幕最左邊 */
.layout-feature .memorial-container [data-module="photos"] > .section-title,
.layout-feature .memorial-container [data-module="tributes"] > .section-title {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* .section-action-btn 是 position:absolute 貼在 section 右上角的。
   相簿變滿版之後它會跑到螢幕最右邊，拉回內容欄的邊界。 */
.layout-feature .memorial-container [data-module="photos"].section-with-action > .section-action-btn {
    right: max(24px, calc(50% - 500px + 24px));
}

/* ── 墓誌銘：整頁最大的一句話 ── */
.layout-feature .memorial-container .pet-epitaph {
    max-width: none;
    margin-top: 40px;
    padding: 64px 0 8px;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-style: normal;
    line-height: 1.55;
}

/* 原本的大引號在 1.2rem 字級旁邊剛好，字放大之後會變成兩塊色斑 */
.layout-feature .pet-epitaph::before,
.layout-feature .pet-epitaph::after {
    display: none;
}

/* ── 生平故事：反而收窄。跟滿版相簿的落差，就是「特刊感」的來源 ── */
.layout-feature .memorial-container [data-module="biography"] .story-content,
.layout-feature .memorial-container [data-module="biography"] .letter-content {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.14rem;
    line-height: 2.1;
}

.layout-feature .memorial-container [data-module="biography"] > .section-title {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* 首字放大。::first-letter 會穿透到第一個行內文字，所以生平是純文字或
   包在 <p> 裡都適用。 */
.layout-feature [data-module="biography"] .story-content::first-letter {
    float: left;
    font-size: 4.1em;
    line-height: 0.82;
    margin: 0.06em 0.1em 0 0;
    font-weight: 600;
    color: var(--theme-accent, #d4a056);
}

/* ── 相簿：滿版橫向輪播（UIkit uk-slider）──
   結構由 view.php 的 JS 在執行時包出來（不動 modules/gallery.php）：
     <div class="feature-strip" uk-slider>   ← UIkit 自動加上 .uk-slider-container
       <div class="photo-gallery uk-slider-items"> …原本的 <a class="photo-item"> … </div>
       <a uk-slidenav-previous uk-slider-item="previous">
       <a uk-slidenav-next     uk-slider-item="next">
     </div>

   ⚠️ 為什麼改用 uk-slider 而不是自己做 overflow-x 捲動（2026-09-20 第二版）：
      自製捲動一定會留下一條系統捲軸，在追思頁上很突兀；而且滑鼠使用者要另外寫拖曳。
      `.uk-slider-container` 是 `overflow: hidden/clip`，沒有捲軸；
      拖曳、鍵盤、觸控 swipe 都是元件內建。

   ⚠️ uk-slider 在拖曳期間會對 list 下 `pointer-events: none`，所以
      **不需要自己攔截 click 來避免誤觸 uk-lightbox** —— 第一版寫的那段攔截已移除。
      （驗證方式：uikit.min.js 的 drag end 會 `c(this.list,{userSelect:"",pointerEvents:""})`
        把兩者還原，代表拖曳中是被關掉的。）

   ⚠️ 版本：本頁載入的是 **3.16.26**（不是共用 header 那支 3.24.2）。
      `.uk-slider-items` 在 3.16 的 CSS **沒有** display:flex（官方範例靠 .uk-grid 提供），
      所以 flex 要自己寫。

   ⚠️ 投影片一律**固定寬度**，不要用 `width: auto` 讓圖片比例決定 ——
      照片帶 loading="lazy"，還沒載入時寬度是 0，uk-slider 在初始化當下量到的
      就是一排 0 寬的項目，整個輪播會算錯。固定寬度則與圖片載入完全無關。 */

.layout-feature .feature-strip {
    position: relative;
}

.layout-feature .photo-gallery {
    display: flex;
    gap: 10px;
}

/* 全部塞得下時置中，不然 2 張照片會孤零零擠在左邊、右半邊一片空 */
.layout-feature .photo-gallery.strip-fits {
    justify-content: center;
}

.layout-feature .photo-item {
    flex: 0 0 auto;
    display: block;
    width: clamp(280px, 38vw, 580px);
    height: 420px;
    aspect-ratio: auto;
    border-radius: 4px;
}

.layout-feature .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* 左右箭頭。UIkit 預設是 rgba(255,255,255,.7) 的裸圖示，壓在照片上常常看不清楚，
   所以加深色圓底。⚠️ 觸控目標 48px（全域規範 ≥44px）。 */
.layout-feature .feature-strip-nav {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

/* 全域規範：hover 只加深背景，不改文字（圖示）顏色 */
.layout-feature .feature-strip-nav:hover {
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
}

.layout-feature .feature-strip-nav:focus,
.layout-feature .feature-strip-nav:focus-visible {
    outline: none;
}

/* 箭頭是內嵌 SVG —— 改色要用 stroke，不是 color（uikit-custom skill 的通則） */
.layout-feature .feature-strip-nav svg {
    stroke: #fff;
}

.layout-feature .feature-strip-nav[hidden] {
    display: none;
}

/* ── 點燈：滿版深底收尾 ── */
.layout-feature .memorial-container [data-module="tributes"] {
    background: rgba(0, 0, 0, 0.26);
}

.layout-feature [data-module="tributes"] .section-title {
    justify-content: center;
}

/* ⚠️ 彩虹橋是目前唯一的淺色主題，上面那層黑色會變成一塊髒污。
   淺色主題改用白色薄底。新增淺色主題時這裡要一起加。 */
.theme-rainbow.layout-feature .memorial-container [data-module="tributes"] {
    background: rgba(255, 255, 255, 0.4);
}

.theme-rainbow.layout-feature .section-title {
    color: rgba(0, 0, 0, 0.55) !important;
}

/* 手機：留白收斂，相簿回到兩欄 */
@media (max-width: 767px) {
    .layout-feature .memorial-container .memorial-header,
    .layout-feature .memorial-container .memorial-section,
    .layout-feature .memorial-container .memorial-footer {
        padding-top: 44px;
        padding-bottom: 44px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .layout-feature .memorial-container [data-module="photos"],
    .layout-feature .memorial-container [data-module="tributes"] {
        padding-left: 0;
        padding-right: 0;
    }

    .layout-feature .memorial-container [data-module="photos"] > .section-title,
    .layout-feature .memorial-container [data-module="tributes"] > .section-title {
        padding-left: 20px;
        padding-right: 20px;
    }

    .layout-feature .memorial-container [data-module="photos"].section-with-action > .section-action-btn {
        right: 20px;
    }

    .layout-feature .memorial-container .pet-epitaph {
        padding: 40px 0 8px;
    }

    /* 手機：輪播照樣是輪播（手指直接 swipe），只是矮一點、一次露出一張多一些 */
    .layout-feature .photo-gallery {
        gap: 8px;
    }

    .layout-feature .photo-item {
        width: min(78vw, 340px);
        height: 260px;
    }

    /* 箭頭在手機上不必要（手指可以直接滑），留著只會壓住照片 */
    .layout-feature .feature-strip-nav {
        display: none;
    }
}

/* 減少動態：本檔沒有動畫，但 sticky 在部分輔助設定下會造成暈眩，一併停掉 */
@media (prefers-reduced-motion: reduce) {
    .layout-two-col .memorial-container .memorial-header {
        position: static;
    }
}