/* ============================================================
   GLthai Works v0.2.2 — 前台樣式
   主色：#e84a8a   文字：#1a1a2e / #444   背景：#fff / #fafafa
   ============================================================ */

/* ── CSS 變數 ─────────────────────────────────────────────── */
:root {
    --gl-pink:        #e84a8a;
    --gl-pink-light:  #fff0f5;
    --gl-pink-border: #f7b8ce;
    --gl-text:        #1a1a2e;
    --gl-muted:       #666;
    --gl-label:       #999;
    --gl-bg:          #fafafa;
    --gl-border:      #efefef;
    --gl-radius:      10px;
    --gl-shadow:      0 2px 16px rgba(0,0,0,0.06);
    --gl-section-gap: 28px;
}

/* ══ 共用區塊標題（shortcode 內外均適用）════════════════════
   在 shortcode 外手動加 <h2 class="glthai-section-title">
   也會套用相同樣式。
   ════════════════════════════════════════════════════════ */
.glthai-section-title,
.glthai-work-section-title,
.glthai-work-synopsis h2,
.glthai-work-video h2,
.glthai-work-cp-section h2,
.glthai-work-ost h2,
.glthai-work-links h2,
.glthai-work-related h2 {
    margin: 36px 0 18px;
    padding-left: 14px;
    border-left: 5px solid var(--gl-pink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gl-text);
}

/* 作品主卡的 H2（劇名）不套全站標題樣式 */
.glthai-title-zh {
    margin: 0;
    border-left: none;
    padding-left: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gl-text);
}

/* ── 整體卡片 ─────────────────────────────────────────────── */
.glthai-work-card {
    font-family: inherit;
    color: var(--gl-text);
    max-width: 960px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: var(--gl-section-gap);
}

/* ── 通用 section 白底卡片 ──────────────────────────────── */
.glthai-work-synopsis,
.glthai-work-cp-section,
.glthai-work-ost,
.glthai-work-links,
.glthai-work-related {
    background: #fff;
    border-radius: var(--gl-radius);
    padding: 28px 32px;
    box-shadow: var(--gl-shadow);
}

/* ══ 1. 作品主卡 ════════════════════════════════════════════ */
.glthai-work-main {
    display: grid;
    grid-template-columns: minmax(280px, 40%) 1fr;
    gap: 32px;
    background: #fff;
    border-radius: var(--gl-radius);
    box-shadow: var(--gl-shadow);
    overflow: hidden;
}

/* 海報：保留完整比例，不裁切 */
.glthai-work-poster {
    align-self: start;
}

.glthai-work-poster img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 右側資料 */
.glthai-work-body {
    padding: 28px 28px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 標題群 */
.glthai-work-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.glthai-title-en {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gl-muted);
}

.glthai-title-th,
.glthai-title-other {
    margin: 0;
    font-size: 0.88rem;
    color: var(--gl-muted);
}

/* Meta 列表 */
.glthai-work-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.glthai-meta-row {
    display: flex;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.55;
}

.glthai-meta-row dt {
    flex-shrink: 0;
    width: 80px;
    color: var(--gl-label);
    font-weight: 500;
}

.glthai-meta-row dd {
    margin: 0;
    color: #333;
}

.glthai-meta-row a {
    color: var(--gl-pink);
    text-decoration: none;
}

.glthai-meta-row a:hover {
    text-decoration: underline;
}

/* 備註列：多行文字 */
.glthai-meta-row--note dd {
    white-space: pre-line;
}

/* 觀看平台（醒目按鈕樣式）*/
.glthai-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.glthai-platform-link {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 5px;
    background: var(--gl-pink-light);
    border: 1px solid var(--gl-pink-border);
    color: var(--gl-pink) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.glthai-platform-link:hover {
    background: var(--gl-pink);
    color: #fff !important;
    text-decoration: none;
}

/* ══ 2. 劇情簡介 ════════════════════════════════════════════ */
.glthai-synopsis-text p {
    margin: 0 0 1em;
    font-size: 0.93rem;
    line-height: 1.9;
    color: #444;
}

.glthai-synopsis-text p:last-child { margin-bottom: 0; }

/* ══ 3–4. CP 區塊 ════════════════════════════════════════ */
.glthai-work-cp-card {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gl-border);
}

.glthai-work-cp-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* CP 頭部 */
.glthai-work-cp-header {
    margin-bottom: 16px;
}

.glthai-cp-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gl-pink);
    margin: 0 0 4px;
    border-left: none;
    padding-left: 0;
}

.glthai-cp-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.glthai-cp-fan,
.glthai-cp-mascot {
    font-size: 0.82rem;
    color: var(--gl-muted);
}

/* 藝人格線：桌機兩欄 */
.glthai-work-cast-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* 藝人卡片 */
.glthai-work-artist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--gl-bg);
    border-radius: 10px;
    padding: 20px 16px 16px;
    gap: 6px;
}

/* 藝人照片：桌機 120px，圓形 */
.glthai-work-artist-photo {
    margin-bottom: 6px;
}

.glthai-work-artist-photo img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--gl-pink-border);
}

/* 藝人資訊 */
.glthai-artist-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

/* nickname：桃紅色強調 */
.glthai-artist-nickname {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gl-pink);
}

.glthai-artist-fullname {
    margin: 0;
    font-size: 0.78rem;
    color: var(--gl-muted);
}

/* 飾演角色：一般文字色 */
.glthai-artist-role {
    margin: 2px 0 4px;
    font-size: 0.82rem;
    color: #444;
}

.glthai-artist-socials {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.glthai-social-btn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--gl-border);
    color: #555 !important;
    background: #fff;
    transition: border-color 0.15s, color 0.15s;
}

.glthai-social-btn:hover {
    border-color: var(--gl-pink);
    color: var(--gl-pink) !important;
    text-decoration: none;
}

/* ══ 3. 預告片 ══════════════════════════════════════════════ */
.glthai-work-video {
    background: #fff;
    border-radius: var(--gl-radius);
    padding: 28px 32px;
    box-shadow: var(--gl-shadow);
}

/* 16:9 responsive iframe box */
.glthai-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

.glthai-video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

.glthai-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.glthai-btn:hover { opacity: 0.85; text-decoration: none; }

.glthai-btn--trailer {
    background: var(--gl-pink);
    color: #fff !important;
}

/* ══ 6. OST ════════════════════════════════════════════════ */
.glthai-work-ost {
    background: #fff;
    border-radius: var(--gl-radius);
    padding: 28px 32px;
    box-shadow: var(--gl-shadow);
}

.glthai-work-ost-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.glthai-work-ost-item {
    border-bottom: 1px solid var(--gl-border);
    padding-bottom: 24px;
}

.glthai-work-ost-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.glthai-ost-meta {
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.glthai-ost-title {
    font-weight: 600;
    color: var(--gl-text);
}

.glthai-ost-link {
    font-weight: 600;
    color: var(--gl-pink);
    text-decoration: none;
}

.glthai-ost-link:hover { text-decoration: underline; }

.glthai-ost-artist {
    color: var(--gl-muted);
}

/* ══ 5. 延伸連結 ════════════════════════════════════════════ */
.glthai-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.glthai-ext-link {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 6px;
    background: var(--gl-bg);
    border: 1px solid var(--gl-border);
    color: #333 !important;
    font-size: 0.87rem;
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
    transition: border-color 0.15s, color 0.15s;
}

.glthai-ext-link:hover {
    border-color: var(--gl-pink);
    color: var(--gl-pink) !important;
    text-decoration: none;
}

/* ══ 6. 相關作品 ════════════════════════════════════════════ */
.glthai-work-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.glthai-work-related-item {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff5f9;
    font-weight: 600;
    font-size: 0.93rem;
}

.glthai-work-related-item a {
    color: inherit;
    text-decoration: none;
}

.glthai-work-related-item a:hover {
    color: var(--gl-pink);
}

/* ── 錯誤訊息 ─────────────────────────────────────────────── */
.glthai-error {
    border-left: 4px solid var(--gl-pink);
    padding: 10px 16px;
    background: var(--gl-pink-light);
    color: #c0245a;
    font-size: 0.9rem;
    border-radius: 0 6px 6px 0;
}

/* ══ 手機版 ════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 共用標題：手機略小 */
    .glthai-section-title,
    .glthai-work-section-title,
    .glthai-work-synopsis h2,
    .glthai-work-video h2,
    .glthai-work-cp-section h2,
    .glthai-work-ost h2,
    .glthai-work-links h2,
    .glthai-work-related h2 {
        font-size: 1.2rem;
        margin: 30px 0 16px;
    }

    /* 主卡單欄 */
    .glthai-work-main {
        grid-template-columns: 1fr;
        box-shadow: none;
        background: transparent;
        gap: 0;
    }

    /* 海報：保留完整比例，不裁切 */
    .glthai-work-poster img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: var(--gl-radius);
    }

    .glthai-work-body {
        padding: 20px 0 0;
    }

    /* section padding 縮小 */
    .glthai-work-synopsis,
    .glthai-work-video,
    .glthai-work-cp-section,
    .glthai-work-ost,
    .glthai-work-links,
    .glthai-work-related {
        padding: 20px;
    }

    .glthai-title-zh { font-size: 1.25rem; }

    /* 藝人格線：手機單欄 */
    .glthai-work-cast-grid {
        grid-template-columns: 1fr;
    }

    /* 手機版藝人照片：responsive 尺寸，不固定死 */
    .glthai-work-artist-photo img {
        width: min(220px, 65vw);
        height: min(220px, 65vw);
    }
}