/* ==========================================================
   Hanna Ried – Engineering Insight Article Styles
========================================================== */

/* =========================
   Layout Container
========================= */

.insight-container{
max-width:900px;
margin:100px auto 120px auto;
padding:0 24px;
}
.insight-content a {
    color: #e1111a;
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

.insight-content a:hover {
    text-decoration: underline;
}
/* =========================
   Article Title
========================= */

.insight-container h1{
font-weight:700;
line-height:1.25;
margin-bottom:30px;
letter-spacing:-0.5px;
}

/* =========================
   Section Titles
========================= */

.insight-container h2{
font-size:28px;
font-weight:600;
margin-top:60px;
margin-bottom:20px;
border-left:4px solid #e1111a;
padding-left:14px;
}

.insight-container h3{
font-size:22px;
font-weight:600;
margin-top:40px;
margin-bottom:16px;
}

/* =========================
   Article Body
========================= */

.insight-content{
font-size:18px;
line-height:1.4;
color:#e6e6e6;
}

.insight-content p{
margin-bottom:22px;
text-align:justify;
}

/* =========================
   Article Cover Image (Hero)
========================= */

.insight-cover{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
}

/* 圖片 */
.insight-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* 黑色漸層（只留一個版本） */
.cover-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.0) 20%,
        rgba(0,0,0,0.5) 60%,
        rgba(0,0,0,0.9) 100%
    );
}

/* 🔥 標題區（Hero Text） */
.cover-text{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:40px;
    box-sizing:border-box;
}

/* 🔥 標題樣式 */
.cover-text h1{
    font-size:40px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff;
    margin:0;
    max-width:800px;

    /* 提升可讀性 */
    text-shadow:0 2px 20px rgba(0,0,0,0.6);
}

.cover-text h1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* 最多3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    line-height: 1.4;
    max-height: calc(1.4em * 3);
    word-break: break-word;
}
/* 手機版 */
@media (max-width:768px){

    .insight-cover{
        aspect-ratio:auto;
    }

    .insight-cover img{
        width:100%;
        height:auto;
    }

    .cover-text{
        padding:20px;
    }

    .cover-text h1{
        font-size:20px;
    }
}

/* =========================
   舊文章圖片（保留）
========================= */

.article-cover{
    max-width:900px;
    margin:40px auto;
}

.article-cover img{
    width:100%;
    height:auto;
    border-radius:6px;
    display:block;
}
/* =========================
   Floating Product Images
========================= */

.article-tool{
width:320px;
margin:10px 0 20px 0;
}

.article-tool img{
width:100%;
height:auto;
display:block;
}

.article-tool figcaption{
font-size:14px;
margin-top:6px;
text-align:center;
color:#bbbbbb;
}

.article-tool.right{
float:right;
margin-left:30px;
}

.article-tool.left{
float:left;
margin-right:30px;
}

.insight-content::after{
content:"";
display:block;
clear:both;
}

/* =========================
   Lists
========================= */

.insight-content ul{
margin:24px 0 32px 28px;
padding-left:10px;
}

.insight-content li{
margin-bottom:12px;
}

/* =========================
   Emphasis
========================= */

.insight-content strong{
color:#ffffff;
font-weight:600;
}

/* =========================
   Divider
========================= */

.insight-content hr{
margin:50px 0;
border:none;
border-top:1px solid #333;
}

/* ==========================================================
   Recommended Tools
========================================================== */

.recommended-tools{
margin-top:0;
padding-top:0;
border-top:1px solid #333;
}

.recommended-tools h2{
font-size:28px;
margin-bottom:30px;
font-weight:600;
}

/* grid */

.tools-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* card */

.tool-card{
background:#151515;
border:1px solid #2a2a2a;
border-radius:12px;
padding:28px;
display:flex;
flex-direction:column;
align-items:flex-start;
transition:all .25s ease;
}

.tool-card:hover{
border-color:#e1111a;
box-shadow:0 0 20px rgba(225,17,26,0.25);
transform:translateY(-3px);
}

/* image */

.tool-image-stage{
    width:100%;
    aspect-ratio:16/9;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding: 5px;
}

.tool-image{
    max-width:100%;
    max-height:100%;
    object-fit:cover;
}

.tool-image-box{
width:100%;
height:140px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
}

/* title */

.tool-title{
font-size:16px;
font-weight:600;
margin-bottom:8px;
color:#ffffff;
}

/* description */

.tool-desc{
font-size:14px;
line-height:1.4;
color:#bfbfbf;
margin-bottom:10px;
}

/* link */

.tool-more{
color:#e1111a;
font-weight:600;
text-decoration:none;
}

.tool-more:hover{
text-decoration:underline;
}

/* ==========================================================
   Insights List Page
========================================================== */

.insights-wrapper{
max-width:1100px;
margin:120px auto 100px auto;
padding:0 40px;
}

/* header */

.insights-header h1{
font-size:32px;
letter-spacing:1px;
margin-bottom:40px;
}

/* list */

.insights-list{
display:flex;
flex-direction:column;
gap:18px;
}

/* card */

.insight-card{
display:flex;
align-items:center;
gap:20px;
padding:5px 24px;
border:1px solid #2a2a2a;
background:#151515;
text-decoration:none;
transition:all 0.2s ease;
}

.insight-card:hover{
border-color:#e1111a;
transform:translateY(-2px);
box-shadow:0 0 14px rgba(225,17,26,0.2);
}

/* thumbnail */

.insight-thumb{
flex:0 0 120px;
height:80px;
overflow:hidden;
border-radius:6px;
background:#111;
}

.insight-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* title */

.insight-title{
flex:1;
font-size:15px;
color:#ffffff;
letter-spacing:0.4px;
line-height:1.4;
}

/* arrow */

.insight-arrow{
color:#e1111a;
font-size:20px;
margin-left:10px;
}

/* empty */

.no-articles{
color:#666;
padding:40px 0;
font-size:14px;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:900px){

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

.article-tool{
float:none !important;
width:100%;
margin:40px 0;
}

}

@media (max-width:400px){
    .insight-container h1{
    font-size:16px;
    padding-top:35px;
    overflow:visible;
    text-align:center;
    }
    .insight-container h2{
    font-size:14px;
    }
    .insight-content{
    font-size:14px;
    }
}


@media (max-width:468px){
    .insight-container h1{
    font-size:18px;
    padding-top:35px;
    overflow:visible;
    text-align:center;
    }
    .insight-container h2{
    font-size:16px;
    }
    .insight-content{
    font-size:15px;
    }
}

@media (max-width:768px){

.insight-container{
margin:160px auto;
}

.insight-container h1{
font-size:20px;
padding-top:35px;
overflow:visible;
text-align:center;
}


.insight-container h2{
font-size:18px;
}

.insight-content{
font-size:16px;
}

.insights-wrapper{
padding:0 20px;
margin-top:130px;
}

/* smaller cards */

.insight-card{
padding:16px 20px;
gap:16px;
}

/* smaller thumbnail */

.insight-thumb{
width:90px;
height:60px;
}

.insight-title{
font-size:15px;
}

}

/* ==========================================================
   FAQ Interaction
========================================================== */

.faq-icon{
transition:transform 0.25s ease;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
}

@media (max-width:768px){

.insight-card{
flex-direction:column;
align-items:flex-start;
}

.insight-thumb{
width:100%;
height:auto;
}

.insight-title{
width:100%;
flex:none;        /* ⭐ 關鍵 */
}

.insight-arrow{
align-self:flex-end;
margin-top:10px;
}

}
.pagination{
    margin-top:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.page-btn{
    padding:5px 10px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    font-size:12px;
}

.page-btn:hover{
    border-color:#e1111a;
}

.page-current{
    color:#aaa;
    font-size:12px;
}
.related-articles{
    margin-top:80px;
}

.related-articles h2{
    font-size:28px;
    margin-bottom:30px;
}

/* 🔥 改成自動欄數（解決空格問題） */
.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);   /* 🔥 固定三欄 */
    gap:30px;                              /* 🔥 跟上面 tools 一樣 */
}

.related-card{
    text-decoration:none;
    color:#fff;
}

/* 🔥 修正：拿掉 height:100%（關鍵） */
.related-card.tool-card{
    display:flex;
    flex-direction:column;
}

/* 圖片統一比例 */
.related-card .tool-image{
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
}

/* 文字區 */


.related-card .tool-title{
    font-size:16px;          /* ✅ 跟上面一致 */
    font-weight:600;
    line-height:1.4;
}

/* hover（沿用 tool-card） */
.related-card.tool-card:hover{
    border-color:#e1111a;
    box-shadow:0 0 20px rgba(225,17,26,0.25);
    transform:translateY(-3px);
}

/* 手機版 */
@media (max-width:768px){
    .related-grid{
        grid-template-columns:1fr;
    }
}