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

/* ── CSS 變數（定義在根節點，所有子元素可用）─────────────── */
.glthai-work-card {
    --gl-pink:        #e05a84;
    --gl-pink-light:  #fff0f5;
    --gl-pink-border: #f7b8ce;
    --gl-blue:        #4a6cf7;
    --gl-blue-light:  #f0f4ff;
    --gl-amber:       #c07000;
    --gl-amber-light: #fffbf0;
    --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: 32px;
}

/* ── 整體卡片 ─────────────────────────────────────────────── */
.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);
}

/* ── 區塊標題 ─────────────────────────────────────────────── */
.glthai-work-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gl-pink);
    border-left: 4px solid var(--gl-pink);
    padding-left: 12px;
    margin: 0 0 18px;
    line-height: 1.4;
}

.glthai-work-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--gl-text);
}

/* ── 通用 section 樣式 ──────────────────────────────────────── */
.glthai-work-synopsis,
.glthai-work-video,
.glthai-work-cp-section,
.glthai-work-ost,
.glthai-work-links {
    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: 5px;
}

.glthai-title-zh {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gl-text);
}

.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: 7px;
}

.glthai-meta-row {
    display: flex;
    gap: 12px;
    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-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}

.glthai-status--播出中 {
    background: var(--gl-pink-light);
    color: var(--gl-pink);
    border: 1px solid var(--gl-pink-border);
}

.glthai-status--播畢,
.glthai-status--完結 {
    background: var(--gl-blue-light);
    color: var(--gl-blue);
    border: 1px solid #b8c8f7;
}

.glthai-status--待播 {
    background: var(--gl-amber-light);
    color: var(--gl-amber);
    border: 1px solid #f7dcb8;
}

/* ── 平台標籤 ─────────────────────────────────────────────── */
.glthai-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.glthai-platform-link {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--gl-bg);
    border: 1px solid var(--gl-border);
    color: #333 !important;
    font-size: 0.82rem;
    text-decoration: none;
}

.glthai-platform-link:hover {
    border-color: var(--gl-pink);
    color: var(--gl-pink) !important;
}

/* ══ 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. 影片 iframe ════════════════════════════════════════ */
.glthai-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    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;
}

/* ══ 4–5. CP 區塊 ════════════════════════════════════════ */
.glthai-work-cp-card {
    margin-bottom: 28px;
    padding-bottom: 28px;
    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 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.glthai-work-cp-photo {
    flex-shrink: 0;
    width: 90px;
}

.glthai-work-cp-photo img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gl-pink-border);
}

.glthai-work-cp-info {
    flex: 1;
}

.glthai-cp-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gl-pink);
    margin: 0 0 5px;
}

.glthai-cp-fan,
.glthai-cp-mascot {
    margin: 0 0 3px;
    font-size: 0.83rem;
    color: var(--gl-muted);
}

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

.glthai-work-artist-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--gl-bg);
    border-radius: 8px;
    padding: 14px;
}

.glthai-work-artist-photo {
    flex-shrink: 0;
    width: 72px;
}

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

.glthai-artist-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glthai-artist-nickname {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gl-text);
}

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

.glthai-artist-role {
    margin: 2px 0 5px;
    font-size: 0.78rem;
    color: var(--gl-pink);
    font-weight: 500;
}

.glthai-artist-socials {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.glthai-social-btn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.73rem;
    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;
}

/* ══ 6. OST ═════════════════════════════════════════════ */
.glthai-ost-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

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

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

.glthai-ost-meta {
    margin-bottom: 10px;
    font-size: 0.88rem;
}

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

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

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

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

/* ══ 7. 延伸連結 ════════════════════════════════════════ */
.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;
    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;
}

/* ── 錯誤訊息（管理員限定）──────────────────────────────── */
.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-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;
    }

    .glthai-work-synopsis,
    .glthai-work-video,
    .glthai-work-cp-section,
    .glthai-work-ost,
    .glthai-work-links {
        padding: 20px;
    }

    .glthai-work-cast-grid {
        grid-template-columns: 1fr;
    }

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

    .glthai-work-cp-photo {
        width: 70px;
    }

    .glthai-work-cp-photo img {
        width: 70px;
        height: 70px;
    }

    .glthai-work-artist-photo {
        width: 60px;
    }

    .glthai-work-artist-photo img {
        width: 60px;
        height: 60px;
    }
}