/* =========================================================
   home.css
   首頁專用版型

   目錄
   01. Hero 品牌標誌
   02. 公司介紹雙欄
   03. 響應式

   說明
   - 首頁原本引用了 .intro / .intro-card / .hero-logo-box 等
     class，但這些從來沒有對應樣式，實際上只有容器寬度在撐版面。
     這支補上它們的版型。
   - .why-grid / .why-card / .cta-section 等共用元件仍走 product.css，
     首頁需一併引入該檔。
========================================================= */


/* =========================================================
   01. Hero 品牌標誌
========================================================= */

.hero-logo-box{
    display:grid;
    place-items:center;

    padding:48px;

    background:rgba(255,255,255,.94);
    border-radius:var(--r-md);
}

.hero-logo-box img{
    width:100%;
    max-width:340px;
    height:auto;

    object-fit:contain;
}


/* =========================================================
   02. 公司介紹雙欄
========================================================= */

.intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    border-top:1px solid var(--line);
}

.section-dark .intro-grid{
    border-top-color:var(--line-d);
}

.intro-card{
    padding:36px 44px 36px 0;

    border-bottom:1px solid var(--line);

    transition:background .3s ease;
}

.section-dark .intro-card{
    border-bottom-color:var(--line-d);
}

.intro-card:nth-child(even){
    padding-left:44px;
    border-left:1px solid var(--line);
}

.section-dark .intro-card:nth-child(even){
    border-left-color:var(--line-d);
}

.intro-card:hover{
    background:rgba(14,28,38,.025);
}

.section-dark .intro-card:hover{
    background:rgba(255,255,255,.025);
}

.intro-card h3{
    margin-bottom:16px;
    font-size:22px;
}

.intro-card p{
    margin-bottom:14px;

    color:var(--muted);

    font-size:16px;
    line-height:1.8;
}

.section-dark .intro-card p{
    color:var(--muted-d);
}

.intro-card p:last-child{
    margin-bottom:0;
}


/* =========================================================
   03. 響應式
========================================================= */

@media(max-width:860px){

    .intro-grid{
        grid-template-columns:1fr;
    }

    .intro-card,
    .intro-card:nth-child(even){
        padding:28px 0;
        border-left:none;
    }

    .hero-logo-box{
        padding:32px;
    }
}