.workshop_list_area{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    column-gap: clamp(1.452rem, 2.34vw, 2.813rem);
    gap: 1.5rem;
}


/* 整體列表 ------------------------------ */
.workshop_list{
    border-radius: 1rem;
    background-color: var(--dark_color);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.workshop_list:before {
    pointer-events: none; /* 防止遮罩干擾點擊 */
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:var(--primary_color);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.workshop_list:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    z-index: 0;
}
.workshop_list:hover .left_area .workshop-date,
.workshop_list:hover .right_area .info_top .views,
.workshop_list:hover .right_area .workshop-title,
.workshop_list:hover .right_area .workshop-brief,
.workshop_list:hover .right_area .views{
    color: var(--dark_color);
}

/* 連結 ------------------------------ */
.workshop_list a{
    color: #fff;
    padding: 1.5rem;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    row-gap: 0.25rem;
    column-gap: 1.5rem;
    text-decoration: none;

    position: relative;
    z-index: 2;
}

/* 左側區塊（日期）-------------------- */
.workshop_list .left_area{

}

/* 日期 */
.workshop_list .workshop-date{
    font-size: clamp(0.875rem, 0.742rem + 0.22vw, 1rem);
    /* font-family: var(--foreign_font); */
}

/* 右側區塊---------------------------- */
.workshop_list .right_area{
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    gap: clamp(0.625rem, 0.492rem + 0.22vw, 0.75rem);
}

/* 上方資訊列 */
.workshop_list .info_top{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
}

.news_tag{
    box-sizing: border-box;
    font-size: .8125rem;
    border-radius: 25px;
    padding: 3px 15px;
    display: flex;
    justify-content: center;
}

/* 置頂--- */
.top_tag {
    border: 0.5px solid var(--primary_color);
    background-color: var(--black_color);
    color: var(--primary_color);
}

/* 熱門--- */
.hot_tag {
    border: 0.5px solid var(--black_color);
    background-color: var(--primary_color);
    color: var(--black_color);
}

/* 觀看數 */
.workshop_list .views{
    font-size: clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem);
    font-family: var(--foreign_font);
}

/* icon（Bootstrap icon） */
.workshop_list .views i{

}

/* 標題 */
.workshop_list .workshop-title{
    font-size: clamp(1rem, 0.867rem + 0.22vw, 1.125rem);
    line-height: 1.4;
    color: inherit;
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* 簡述 */
.workshop_list .workshop-brief{
    text-decoration: none;
    color: rgba(255 255 255 / 0.4);
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem);
    /* line-height: 1rem; */
    line-height: normal;
}



@media (max-width: 760px) {
    .workshop_list a{
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
}