/* ===== 愛思伯部落格｜文章頁「相關訊息」：左圖箭頭列表 =====
   需載入在 blog.css 之後，並搭配封面圖結構
   此區塊不初始化 slick 輪播 */

/* 區塊 */
.sideDataArea.blog{margin:72px 0;padding:48px 0 0;border-top:1.5px solid #1f1f1f}

/* 標題：沿用網站「英文小標＋中文大標」 */
.sideDataArea.blog .sectionTitle{margin:0 0 12px;padding:0;border:0;color:#1f1f1f;font-size:36px;font-weight:700;line-height:1.35}
.sideDataArea.blog .sectionTitle::before{content:"Related Articles";display:block;margin-bottom:8px;color:#ff5c00;font:500 15px/1.2 Poppins,sans-serif}

/* 取消輪播排列，改為直向列表 */
.sideDataArea.blog .sideDataList{margin:0}
.sideDataArea.blog .slick-list{padding:0;height:auto!important;overflow:visible}
.sideDataArea.blog .slick-track{display:grid;grid-template-columns:minmax(0,1fr);width:auto!important;transform:none!important}
.sideDataArea.blog .slick-track::before,
.sideDataArea.blog .slick-track::after{display:none}
.sideDataArea.blog .slick-slide{float:none;width:auto!important;height:auto;min-width:0}
.sideDataArea.blog .slick-cloned{display:none!important}
.sideDataArea.blog .sideDataItem{height:100%;padding:0}

/* 列：整列可點 */
.sideDataArea.blog .item{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:28px;align-items:center;height:100%;padding:18px 0;border-bottom:1px solid #d4d4d4}

/* 封面圖：建議原圖 1200 × 630px */
.sideDataArea.blog .itemCover{overflow:hidden;aspect-ratio:1.91/1;border-radius:12px;background:#eee}
.sideDataArea.blog .itemCover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}

/* 文字區 */
.sideDataArea.blog .Txt{display:grid;grid-template-columns:minmax(0,1fr) 64px;column-gap:24px;align-items:center;padding:0}
.sideDataArea.blog .blogInfoBox{grid-column:1;justify-content:flex-start;align-items:center;gap:12px;padding:0 0 10px}
.sideDataArea.blog .date{color:#767676;font:500 13px/1 Poppins,sans-serif}
.sideDataArea.blog .classTitle{padding:5px 10px;border-radius:6px;background:#fff4ec;color:#b84300;font-size:13px;font-weight:500}
.sideDataArea.blog .Txt .title{grid-column:1;display:-webkit-box;max-height:none;margin:0 0 8px;overflow:hidden;font-size:20px;font-weight:700;line-height:1.55;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;transition:transform .3s}
.sideDataArea.blog .Txt .title a{color:#1f1f1f;text-decoration:none}
.sideDataArea.blog .Txt .title a::after{content:"";position:absolute;inset:0}
.sideDataArea.blog .Txt .text{grid-column:1;display:-webkit-box;padding:0;overflow:hidden;color:#555;font-size:15px;line-height:1.75;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1}

/* 箭頭：與「立即諮詢」相同的橢圓框與箭頭 */
.sideDataArea.blog .Txt::after{content:"";grid-column:2;grid-row:1/4;width:64px;height:42px;border:1px solid #000;border-radius:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 38' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M39.1 19.3L21.9 36.5M39.1 19.2L22 2M39.1 19.3H2'/%3E%3C/svg%3E") center/22px 20px no-repeat;transition:border-color .2s,background-color .2s}

/* hover：橘色底線掃過、標題右移、圖片微放大、箭頭框填橘 */
.sideDataArea.blog .item::before{content:"";position:absolute;left:0;bottom:-1px;z-index:1;width:0;height:3px;background:#ff5c00;transition:width .4s cubic-bezier(.65,0,.35,1)}
.sideDataArea.blog .item:hover::before{width:100%}
.sideDataArea.blog .item:hover .itemCover img{transform:scale(1.05)}
.sideDataArea.blog .item:hover .Txt .title{transform:translateX(10px)}
.sideDataArea.blog .item:hover .Txt::after{border-color:#ff5c00;background-color:#ff5c00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 38' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M39.1 19.3L21.9 36.5M39.1 19.2L22 2M39.1 19.3H2'/%3E%3C/svg%3E");animation:ixRelArrow 1s ease-in-out infinite}
@keyframes ixRelArrow{50%{background-position:calc(50% + 5px) center}}

/* 平板 */
@media (max-width:1023px){
  .sideDataArea.blog .item{grid-template-columns:180px minmax(0,1fr);column-gap:20px}
  .sideDataArea.blog .Txt .text{display:none}
}

/* 手機：左方圖、右標題，隱藏箭頭 */
@media (max-width:767px){
  .sideDataArea.blog{margin:48px 0;padding-top:36px}
  .sideDataArea.blog .sectionTitle{margin-bottom:4px;font-size:28px}
  .sideDataArea.blog .item{grid-template-columns:120px minmax(0,1fr);column-gap:14px;padding:16px 0}
  .sideDataArea.blog .itemCover{aspect-ratio:1/1;border-radius:10px}
  .sideDataArea.blog .Txt{display:block}
  .sideDataArea.blog .Txt::after{display:none}
  .sideDataArea.blog .blogInfoBox{justify-content:space-between;padding-bottom:6px}
  .sideDataArea.blog .Txt .title{margin:0;font-size:16px;line-height:1.5}
}

/* 動態偏好：減少動畫時關閉持續移動 */
@media (prefers-reduced-motion:reduce){
  .sideDataArea.blog .item:hover .Txt::after{animation:none}
}