/* 辦公室介紹頁 Office.php
 * 注意：此頁會依內容高度自動調整外層 iframe 高度，請勿使用 vh 單位（會造成高度不斷增加）。
 * --accent 為該中心的座標顏色，由 Office.php 設定。
 */
:root {
    --accent: #00a89d;
    --ink: #2d3748;
    --muted: #718096;
    --line: #e2e8f0;
    --c104: #ff7800;
}

html, body { background: #fff; }
body {
    margin: 0;
    color: var(--ink);
    font-family: 'Noto Sans TC', system-ui, -apple-system, 'Microsoft JhengHei', sans-serif;
    line-height: 1.7;
}

/* 1. 頂部滿版輪播 */
.op-banner .carousel-item {
    aspect-ratio: 12 / 5;
    min-height: 200px;
    max-height: 640px;
    background: #1a202c;
}
.op-banner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 輪播圖說 */
.carousel-caption { bottom: 2rem; padding: 0; }
.carousel-caption span {
    display: inline-block;
    padding: .25rem .9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    font-size: .95rem;
}

.op-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* 2. 中心名稱、辦公室名稱 */
.op-title {
    text-align: center;
    padding: 36px 0 8px;
}
.op-center {
    display: inline-block;
    padding: .2rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    color: color-mix(in srgb, var(--accent) 75%, #000);
    font-weight: 500;
    font-size: .95rem;
}
.op-office {
    margin: .6rem 0 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: .04em;
}
.op-office::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin: .8rem auto 0;
    border-radius: 2px;
    background: var(--accent);
}

.op-section { padding: 32px 0 0; }
.op-h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-left: .75rem;
    border-left: 5px solid var(--accent);
}
.op-h2 small {
    margin-left: .6rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
}
.op-empty { color: var(--muted); text-align: center; padding: 1rem 0; }

/* 3. 職缺 */
.op-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}
.op-job {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.op-job-body { flex: 1; min-width: 0; }
.op-job-cls {
    display: inline-block;
    font-size: .75rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 .4rem;
    margin-bottom: .2rem;
}
.op-job-title { font-size: 1.1rem; font-weight: 700; }
.op-job-intro { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.op-job-side { text-align: center; flex-shrink: 0; }
.op-job-num { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.op-job-num b { font-size: 1.5rem; color: var(--accent); margin: 0 .1rem; }

.op-btn-104 {
    display: inline-block;
    margin-top: .3rem;
    padding: .3rem .9rem;
    border-radius: 999px;
    background: var(--c104);
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s;
}
.op-btn-104:hover, .op-btn-104:focus { color: #fff; filter: brightness(.92); }
.op-btn-104-lg { padding: .55rem 1.6rem; font-size: 1rem; }

/* 4. YouTube */
.op-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.op-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 5. 照片輪播 */
.op-gallery { border-radius: 12px; overflow: hidden; }
.op-gallery .carousel-item {
    aspect-ratio: 16 / 9;
    background: #1a202c;
}
.op-gallery .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 6. 介紹 */
.op-intro { font-size: 1.02rem; text-align: justify; }

/* 7. 社群網站 */
.op-social {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding-top: 40px;
}
.op-social a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.op-social a:hover, .op-social a:focus { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.op-social svg { width: 28px; height: 28px; }
.op-social-facebook { background: #1877f2; }
.op-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.op-social-youtube { background: #ff0000; }

@media (max-width: 575px) {
    .op-title { padding-top: 24px; }
    .op-job { flex-direction: column; align-items: stretch; }
    .op-job-side { display: flex; justify-content: space-between; align-items: center; }
    .op-job-side .op-btn-104 { margin-top: 0; }
    .carousel-caption { bottom: 1.6rem; }
    .carousel-caption span { font-size: .8rem; }
}