/* =========================================================
   Block 2: Hero Carousel (主視覺) #yl-hero-carousel
   ========================================================= */
#yl-hero-carousel {
    /* 
       PC 計算公式：
       Logo (50px) + Padding上下 (20px) + Border (10px) = 80px
       設定 79px 讓它微幅向上重疊 1px，確保無縫隙
    */
    margin-top: 79px; 
}

@media (max-width: 991px) {
    #yl-hero-carousel {
        /* 
           手機 計算公式：
           Logo (40px) + Padding上下 (20px) + Border (10px) = 70px
           設定 69px 確保無縫隙
        */
        margin-top: 69px; 
    }
}

.yl-hero-img {
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* RWD 比例控制 */
@media (min-width: 992px) { .yl-hero-img { aspect-ratio: 16 / 9; } }
@media (max-width: 991px) { .yl-hero-img { aspect-ratio: 4 / 5; } }

.yl-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 50, 100, 0.3);
    color: white; padding: 20px;
}

/* ★★★ yl-hero-title RWD 字體大小修正區 ★★★ */
.yl-hero-title { 
    font-family: var(--yl-serif-font);
    font-weight: 900; 
    margin-bottom: 1rem;
    
    /* 1. 預設手機版 (< 576px) */
    font-size: 1.8rem; 
    line-height: 1.4; 
}

/* 2. 大手機與平板直向 (min-width: 576px) */
@media (min-width: 576px) {
    .yl-hero-title {
        font-size: 2.2rem;
        line-height: 1.3;
    }
}

/* 3. 平板橫向 (min-width: 768px) */
@media (min-width: 768px) {
    .yl-hero-title {
        font-size: 3rem;
        line-height: 1.2;
    }
}

/* 4. 電腦版 (min-width: 992px) */
@media (min-width: 992px) {
    .yl-hero-title { 
        font-size: 4rem; 
        line-height: 1.2;
    } 
}

/* 5. 大螢幕電腦 (min-width: 1400px) */
@media (min-width: 1400px) {
    .yl-hero-title { 
        font-size: 4.5rem; 
    } 
}
/* ★★★ 修正結束 ★★★ */

.yl-hero-subtitle { 
    font-family: var(--yl-main-font);
    font-size: 1.2rem; 
    letter-spacing: 2px; 
    margin-bottom: 1rem; 
    font-weight: 300; 
}

.yl-hero-tagline { 
    font-family: var(--yl-serif-font);
    font-size: 1.2rem; 
    background: linear-gradient(90deg, var(--yl-border-orange), transparent); 
    display: inline-block; padding: 5px 15px; margin-top: 10px; 
}

@media (min-width: 992px) {
    .yl-hero-subtitle { font-size: 1.5rem; }
}

/* =========================================================
   Block 3: Intro Section (簡介) #yl-intro-section
   ========================================================= */

#yl-intro-section {
    padding: 80px 0;
    background-color: #fff;
}

.yl-section-title {
    font-family: var(--yl-serif-font);
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.yl-title-bar {
    width: 80px;
    height: 6px;
    background-color: var(--yl-border-orange);
    margin-bottom: 20px;
}

.yl-section-desc {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

/* --- 新增：圖示超連結樣式 --- */
.yl-icon-link {
    text-decoration: none; /* 去除底線 */
    display: block;        /* 填滿欄位 */
    color: inherit;        /* 跟隨內部顏色 */
}

.yl-icon-box {
    padding: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #555; /* 預設顏色 */
    cursor: pointer;
}

.yl-icon-box h4 {
    font-family: var(--yl-serif-font);
    font-weight: 700;
    margin-top: 10px;
}

/* --- 修改：滑鼠移入效果 (變為橘色 #ff6c39) --- */
.yl-icon-link:hover .yl-icon-box {
    transform: translateY(-10px); /* 上浮效果 */
    color: #ff6c39; /* ★改為橘色 */
}
/* =========================================================
   Block 4: Service Grid (服務詳細) #yl-service-grid
   ========================================================= */
#yl-service-grid { 
    width: 100%; 
    overflow: hidden; 
}

.yl-service-text-box {
    background-color: var(--yl-service-blue); 
    color: var(--yl-text-white);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    min-height: 350px;
}

.yl-service-text-box h3 {
    font-family: var(--yl-serif-font);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.yl-service-text-box p {
    font-size: 1.05rem;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 0;
}

.yl-service-img-box {
    width: 100%; height: 100%; min-height: 350px;
    background-size: cover; background-position: center;
    transition: transform 0.5s ease;
}
.yl-img-wrapper { overflow: hidden; height: 100%; }
.yl-img-wrapper:hover .yl-service-img-box { transform: scale(1.1); }