@import url("style_archives.css");

.pageContent {
    padding-top: unset;
}

/* 副標題--- */
.subtitle {
    border-bottom: 1px solid #777;
    color: var(--primary_color);
    font-size: clamp(1rem, 0.733rem + 0.43vw, 1.25rem);
    margin-bottom: 2.5rem;
    padding-bottom: .625rem;
}

.subtitle2{
    border: unset;
}

/* 主持人banner區塊------------------------------ */

.host_img_banner{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* aspect-ratio: 26 / 6; */
    padding-top: 20%;
    display: flex;
    align-items: end;

    position: relative;
}
.host_img_banner::after{
    width: 100%;
    height: 50%;
    content: "";
    position: absolute;
    bottom: 0;
    /* inset: 0; */
    background: linear-gradient(
        to top,
        rgb(50, 50, 50) 0%,
        rgb(50 50 50 / 0%) 100%
    );
    mix-blend-mode: multiply
}

.img_banner_info{
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding-bottom: clamp(0.625rem, -2.042rem + 4.31vw, 3.125rem);
    position: relative;
    z-index: 2;
}

.real_name{
    /* font-size: clamp(0.75rem, 0.617rem + 0.22vw, 0.875rem); */
    font-size: clamp(1.5rem, 0.967rem + 0.86vw, 2rem);
    font-weight: bold;
    letter-spacing: 5px;
    color: #dadada;
}

.stage_name{
    font-size: clamp(2.375rem, -0.159rem + 4.09vw, 4.75rem); /* 38 76 */
}




/* 社群媒體區塊----------------------------- */

.social_links_area{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1.25rem;

    border-top: 1px solid rgb(90, 90, 90);
}

.social_links_tit{
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--second_dark_color);
}

.social_links_content{
    display: flex;
    gap: .625rem;
}

.social_links a{
    padding: .3125rem;
    font-size: 1.5625rem;
    color: var(--second_dark_color);
    transition: transform 0.4s ease;
}

.social_links a:hover{
    color: var(--primary_color);
    transition: color 0.3s ease;
}





/* 輪播區塊-------------------------------- */
.hosted_programs_area{
    /* margin-bottom: 2.5rem; */
    margin: 2.5rem 0;
    position: relative;
}

/* 本檔節目藝名-------- */
.host-program_alias{
    display: flex;
    font-size: .75rem;
    font-weight: bold;
    color: var(--dark_color);
}
/* 藝名tit */
.title_text{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* 輪播--------------- */
.swiper {
    width: 100%;
    max-width: 1150px; /* 改成你卡片區的寬 */
    margin: 0 auto;   /* 置中 */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
}

.archives_card{
    width: 100%;
}

/* 箭頭 */
.main .swiper-button-prev {
    transform: translateX(-30px);
}

.main .swiper-button-next {
    transform: translateX(30px);
}





.about_hosts_area{
    margin-bottom: 2.5rem; /* 40 */
}