/* ==================================================
   1. 字型與全域 header 設定 (含 Header 背景圖穩定)
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');

.company-name {
    font-family: 'Crimson Pro', serif !important;
    text-transform: none !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

.btn-bar,
.btn-bar *,
.btn-bar .btn,
.btn-bar button,
.btn-bar a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* 上方留白與位移控制 */
.container-fluid.column .wrapper,
header .wrapper {
    padding-top: 180px !important;
    margin-top: 0 !important;
}

/* 精準鎖定 Header 背景圖 */
header.container-fluid.column,
div.container-fluid.column.header-bg,
.theme-header {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}


/* ==================================================
   2. 隱藏卡片無用元素 (含隱藏 Attached Service 標題)
   ================================================== */
.membership-option__footer,
.membership-footer,
.start-date-btn.wrapper,
a.sb_start_date,
i.fal.icon.fa-server,
i.fa-concierge-bell,
.membership-service__total-count,
.membership-service__caption,
div[aria-label*="Attached service"],
div[class*="attached-service"] {
    display: none !important;
}

/* 僅隱藏 Membership 卡片內沒內容的 Read more */
.item.membership-item.v1 .item__description.short,
.item.membership-item.v1 .item__description {
    display: none !important;
}


/* ==================================================
   3. Provider 照片完整顯示 & 置中修復
   ================================================== */
.picture-wrapper,
.card-image,
.provider-image,
div[class*="provider"] .image-wrapper {
    text-align: center !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

div[class*="provider"] img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}


/* ==================================================
   4. 桌機版 vs 手機版 Service / Membership 圖片控制
   ================================================== */

/* 【桌機電腦版】 (螢幕 > 768px) */
@media screen and (min-width: 769px) {
    .membership-option .image-wrapper,
    .package-card .card-image,
    .membership-card img,
    .membership-item img,
    .service-item img,
    .service-card img,
    div[class*="service"] img,
    div[class*="service"] .image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* 【手機行動版】 (螢幕 <= 768px) */
@media screen and (max-width: 768px) {
    .container-fluid.column .wrapper,
    header .wrapper {
        padding-top: 150px !important;
    }
    .company-name {
        font-size: 28px !important;
        margin-top: 20px !important;
    }
    
    /* 手機版 Service / Membership 圖片再放大至 270px 且完整顯示 */
    .membership-option .image-wrapper,
    .package-card .card-image,
    .membership-card img,
    .membership-item img,
    .service-item img,
    .service-card img,
    div[class*="service"] img,
    div[class*="service"] .image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 270px !important;    /* 稍微調大手機版高度 */
        object-fit: contain !important;  /* 完整呈現不裁切 */
        margin: 0 auto !important;
        display: block !important;
    }
}


/* ==================================================
   5. Provider 頁面：4 行截斷與點擊 Read more 展開
   ================================================== */
.provider-details.short,
.provider-description.short,
.provider__description.short,
div[class*="provider"] [class*="description"].short,
div[class*="provider"] [class*="description"]:not(.full):not(.expanded):not(.open) {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: none !important;
}

.provider-details.full,
.provider-details.expanded,
.provider-details.open,
.provider-description.full,
.provider-description.expanded,
.provider-description.open,
div[class*="provider"] [class*="description"].full,
div[class*="provider"] [class*="description"].expanded,
div[class*="provider"] [class*="description"].open,
div[class*="provider"] [class*="description"]:not(.short) {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}


/* ==================================================
   6. Membership 卡片專屬排版
   ================================================== */
.item.membership-item.v1 {
    padding: 20px 24px !important;
    height: auto !important;
    min-height: 0 !important;
}

.item.membership-item.v1 .title.title--h4.short,
.item.membership-item.v1 h3,
.item.membership-item.v1 h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
}

.item.membership-item.v1 .item__connected-services,
.item.membership-item.v1 .item__details,
.item.membership-item.v1 .membership-service,
.item.membership-item.v1 .membership-services-list {
    display: none !important;
}

.item.membership-item.v1 .item__info-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    gap: 4px !important;
    width: 100% !important;
}

.item.membership-item.v1 .item__footer,
.item.membership-item.v1 .item__footer--v2,
.item.membership-item.v1 button,
.item.membership-item.v1 a[class*="button"] {
    margin-top: 8px !important;
    width: 100% !important;
}