/* ================================================================
   RESPONSIVE CSS
   Breakpoints: tablet ≤ 1024px, mobile ≤ 768px
   ================================================================ */

/* ----------------------------------------------------------------
   1. 全域：移除 1920px 固定寬度限制（所有裝置皆適用）
   ---------------------------------------------------------------- */

.screen,
.screen-wrapper,
.div-wrapper,
.screen-4,
.screen-screen {
    min-width: 100% !important;
    overflow-x: hidden;
}

/* Header 改為流體寬度 */
.screen .header {
    width: 100% !important;
    left: 0 !important;
    padding: 0 60px !important;
    box-sizing: border-box;
}

/* Footer 寬度流體化（位置在 RWD 斷點內才改為相對定位） */
.screen .frame-13 {
    width: 100% !important;
    left: 0 !important;
}

/* ----------------------------------------------------------------
   2. Banner 包裝容器（內頁 banner 文字定位用）
   ---------------------------------------------------------------- */

.page-banner-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* frame-49/70/28/99 是各內頁 banner 標題，現在定位相對於 wrapper */
.page-banner-wrapper .frame-49,
.page-banner-wrapper .frame-70,
.page-banner-wrapper .frame-28,
.page-banner-wrapper .frame-99 {
    position: absolute;
}

/* ----------------------------------------------------------------
   3. 平板斷點（≤ 1024px）
   ---------------------------------------------------------------- */

@media (max-width: 1024px) {

    /* ---- 頁面 min-height 取消（平板以下皆使用流體高度） ---- */
    .screen,
    .screen.home,
    .screen.service,
    .screen.works,
    .screen.technology,
    .screen.contact,
    .screen-wrapper,
    .screen-screen,
    .div-wrapper,
    .screen-4 {
        min-height: 0 !important;
    }

    /* ---- Carousel 輪播高度（平板） ---- */
    .el-carousel {
        height: 50vw !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }

    .el-carousel__container {
        height: 100% !important;
    }

    /* Header：漢堡選單出現時縮為 70px 高度 */
    .screen .header {
        padding: 0 30px !important;
        height: 70px !important;
    }

    /* ---- 首頁：服務項目區塊 ---- */
    .service-section {
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        padding: 60px 40px !important;
        box-sizing: border-box !important;
    }

    .service-header {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 精選作品 grid：從固定定位改為流體 2 欄 */
    .screen .frame-23 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        max-width: 1200px;
        margin: 40px auto !important;
        height: auto !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 60px 30px !important;
    }

    .screen .group-8 {
        width: 100% !important;
        height: auto !important;
    }

    .screen .image-3 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
        aspect-ratio: 2 / 1;
        object-fit: cover;
    }

    /* 精選作品標題 */
    .screen .frame-11 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 60px auto 0 !important;
    }

    /* 更多作品按鈕 */
    .screen .bottom-4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        margin: 40px auto 80px !important;
        width: fit-content !important;
    }

    /* Works 頁 grid */
    .screen-wrapper .frame-50 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        max-width: 1000px;
        margin: 40px auto !important;
        grid-template-columns: repeat(2, 1fr) !important;
        height: auto !important;
        gap: 60px 24px !important;
    }

    .screen-wrapper .group-18 {
        width: 100% !important;
        height: 200px !important;
        overflow: hidden !important;
    }

    .screen-wrapper .image-15 {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Service 頁卡片 grid */
    .srv-frame-13 {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
        padding: 0 40px !important;
        box-sizing: border-box !important;
    }

    .srv-frame-wrapper {
        width: 100% !important;
    }

    /* 首頁裝飾背景圖（1920px 寬，平板以下隱藏） */
    .screen .group-4 {
        display: none !important;
    }

    /* 服務諮詢區塊：移除 relative top 偏移 */
    .srv-group-4 {
        top: 0 !important;
    }

    /* 聯絡頁背景圖案（平板以下隱藏） */
    .screen-screen .group-11 {
        display: none !important;
    }

    /* Works 頁 grid：移除固定 min-height */
    .screen-wrapper .frame-50 {
        min-height: 0 !important;
    }

    /* Footer: 取消絕對定位，讓它隨內容流排版 */
    .screen .frame-13 {
        position: relative !important;
        bottom: auto !important;
    }

    /* Footer gap 縮小 */
    .screen .frame-14 {
        gap: 80px !important;
        padding: 50px 60px 0 !important;
    }

    /* 技術論壇頁 - 平板：改為流體定位 */
    .screen-4 .line-7 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto !important;
    }

    .screen-4 .plone {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 20px auto 0 !important;
    }

    .screen-4 .plone-CMS-python-CMS {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto !important;
    }

    .screen-4 .text-wrapper-102 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto 0 !important;
    }

    .screen-4 .frame-100 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto !important;
    }

    .screen-4 .text-wrapper-103 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto 0 !important;
    }

    .screen-4 .frame-102 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto 60px !important;
    }

    /* 聯絡頁面 - 平板：改為流體定位 */
    .screen-screen .frame-29 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        gap: 20px !important;
        padding: 30px 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .screen-screen .frame-33 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-direction: row !important;
        gap: 40px !important;
        padding: 30px 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .screen-screen .frame-34 {
        width: 280px !important;
        flex-shrink: 0 !important;
    }

    .screen-screen .frame-35 {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .screen-screen .image-9,
    .map-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 300px !important;
        aspect-ratio: unset !important;
    }
}

/* ----------------------------------------------------------------
   4. service_content 頁（平板 + 手機）
      說明：v-html 後端內容使用 position:relative + top:大值 的 Figma export 模式
      此處重置 top 值，避免產生過多空白。內容本身的 RWD 需另行處理。
   ---------------------------------------------------------------- */

@media (max-width: 1024px) {
    .sc1-srv-group-4, .sc2-srv-group-4, .sc3-srv-group-4, .sc4-srv-group-4,
    .sc5-srv-group-4, .sc6-srv-group-4, .sc7-srv-group-4, .sc8-srv-group-4 {
        top: 0 !important;
        width: 90% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ----------------------------------------------------------------
   5. 手機斷點（≤ 768px）
   ---------------------------------------------------------------- */

@media (max-width: 768px) {

    /* ---- 移除頁面固定高度 ---- */
    .screen,
    .screen.home,
    .screen.service,
    .screen.works,
    .screen.technology,
    .screen.contact,
    .screen-wrapper,
    .screen-screen,
    .div-wrapper,
    .screen-4 {
        min-height: 0 !important;
    }

    /* ---- Carousel 輪播高度 ---- */
    .el-carousel {
        height: 52vw !important;
        min-height: 180px !important;
        max-height: 500px !important;
    }

    .el-carousel__container {
        height: 100% !important;
    }

    /* ---- Header ---- */
    .screen .header {
        padding: 0 20px !important;
        height: 70px !important;
    }

    /* ---- 內頁 Banner：手機版加高讓標題有空間顯示於 header 下方 ---- */
    .page-banner-wrapper {
        min-height: 180px !important;
    }

    /* 讓 banner 圖片填滿加高後的容器（裁切置中） */
    .page-banner-wrapper > img {
        height: 180px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* 標題定位在 header 底部下方（header 高度 70px + 15px 間距） */
    .page-banner-wrapper .frame-49,
    .page-banner-wrapper .frame-70,
    .page-banner-wrapper .frame-28,
    .page-banner-wrapper .frame-99 {
        top: 85px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        text-align: center !important;
    }

    .page-banner-wrapper .text-wrapper-46,
    .page-banner-wrapper .text-wrapper-64,
    .page-banner-wrapper .text-wrapper-26,
    .page-banner-wrapper .text-wrapper-94 {
        font-size: 30px !important;
        letter-spacing: 4px !important;
        margin-top: 0 !important;
    }

    /* 副標題在手機隱藏 */
    .page-banner-wrapper .text-wrapper-48,
    .page-banner-wrapper .text-wrapper-65,
    .page-banner-wrapper .text-wrapper-28,
    .page-banner-wrapper .text-wrapper-95 {
        display: none !important;
    }

    /* ---- 首頁：服務項目區塊 ---- */
    .service-section {
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        padding: 60px 20px !important;
        box-sizing: border-box !important;
        gap: 40px !important;
    }

    .service-header {
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-title {
        font-size: 22px !important;
        letter-spacing: 2px !important;
    }

    .service-desc {
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
    }

    .service-list {
        gap: 24px !important;
    }

    .service-row {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
    }

    .service-divider {
        display: none !important;
    }

    .service-text {
        font-size: 18px !important;
    }

    /* 首頁背景裝飾圖 */
    .screen .group-4 {
        display: none !important;
    }

    /* 精選作品標題 */
    .screen .frame-11 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 40px auto 0 !important;
    }

    .screen .text-wrapper-11 {
        font-size: 26px !important;
        letter-spacing: 3px !important;
    }

    /* 500+ 統計區：改為直排，避免 500+ 與文字橫向重疊 */
    .screen .frame-12 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .screen .text-wrapper-14 {
        font-size: 14px !important;
        white-space: normal !important;
        line-height: 24px !important;
        width: 100% !important;
    }

    /* 作品 Grid 2×2 → 1 欄 */
    .screen .frame-23 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 40px !important;
    }

    /* 重置各作品 item 的明確 grid 定位，讓它們在單欄中自動排列 */
    .screen .frame-24,
    .screen .frame-25,
    .screen .frame-26,
    .screen .frame-27 {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }

    .screen .group-8 {
        width: 100% !important;
        height: 200px !important;
        overflow: hidden !important;
    }

    .screen .image-3 {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* 更多作品按鈕 */
    .screen .bottom-4 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        margin: 30px auto 60px !important;
        width: fit-content !important;
    }

    /* ---- Works 頁 ---- */
    .screen-wrapper .group-17 {
        display: none !important;
    }

    .screen-wrapper .frame-50 {
        min-height: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 40px !important;
    }

    .screen-wrapper .group-18 {
        width: 100% !important;
        height: 200px !important;
        overflow: hidden !important;
    }

    .screen-wrapper .image-15 {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* ---- Service 頁 ---- */
    .div-wrapper .group-24 {
        display: none !important;
    }

    .srv-frame-13 {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .srv-frame-wrapper {
        width: 100% !important;
        min-height: 300px !important;
    }

    /* 服務諮詢區塊 */
    .srv-group-4 {
        width: 90% !important;
        height: auto !important;
        margin: 60px auto !important;
        position: relative !important;
        top: 0 !important;
    }

    .srv-group-5 {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    .srv-frame-11 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        gap: 40px !important;
    }

    .srv-text-wrapper-9 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 16px 20px !important;
    }

    .srv-text-wrapper-10 {
        font-size: 32px !important;
        letter-spacing: 4px !important;
    }

    .srv-text-wrapper-11 {
        font-size: 16px !important;
    }

    /* ---- 聯絡我們頁 ---- */
    .screen-screen .group-11 {
        display: none !important;
    }

    /* 聯絡資訊列 */
    .screen-screen .frame-29 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 30px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .screen-screen .line-3 {
        display: none !important;
    }

    /* 聯絡表單區塊 */
    .screen-screen .frame-33 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 30px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .screen-screen .frame-34 {
        width: 100% !important;
    }

    .screen-screen .frame-35 {
        width: 100% !important;
    }

    .screen-screen .frame-36 {
        flex-direction: column !important;
    }

    /* Google 地圖 */
    .screen-screen .image-9,
    .map-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 250px !important;
        aspect-ratio: unset !important;
    }

    /* ---- 技術論壇頁 ---- */
    .screen-4 .group-50 {
        display: none !important;
    }

    .screen-4 .rectangle-5 {
        display: none !important;
    }

    /* 分隔線 */
    .screen-4 .line-7 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto !important;
    }

    /* Plone 簡介標題 */
    .screen-4 .plone {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 20px auto 0 !important;
        font-size: 24px !important;
        white-space: normal !important;
    }

    /* Plone 內文 */
    .screen-4 .plone-CMS-python-CMS {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto !important;
        font-size: 15px !important;
    }

    /* 熱門文章標題 */
    .screen-4 .text-wrapper-102 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto 0 !important;
    }

    /* 熱門文章列表 */
    .screen-4 .frame-100 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto !important;
    }

    /* 更多文章標題 */
    .screen-4 .text-wrapper-103 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 30px auto 0 !important;
        font-size: 28px !important;
        white-space: normal !important;
    }

    /* 更多文章列表 */
    .screen-4 .frame-102 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important;
        margin: 16px auto 60px !important;
    }

    .screen-4 .frame-103,
    .screen-4 .frame-104 {
        padding: 20px !important;
    }

    /* ---- Footer ---- */
    .screen .frame-13 {
        position: relative !important;
        bottom: auto !important;
    }

    .screen .frame-14 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        padding: 40px 20px 0 !important;
        height: auto !important;
    }

    .screen .frame-15 {
        width: 100% !important;
        align-items: center !important;
    }

    .screen .group-6 {
        width: 180px !important;
        height: auto !important;
    }

    .screen .frame-19 {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .screen .text-wrapper-20 {
        width: auto !important;
    }

    .screen .frame-21 {
        margin-bottom: 10px !important;
    }

    .screen .p {
        white-space: normal !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    /* ---- Dialog 彈窗：手機縮小 ---- */
    .el-dialog {
        width: 90% !important;
        max-width: 400px !important;
    }
}