/* ============================================
   CSS 变量
   ============================================ */

:root {
    /* 颜色 */
    --clr-main: #309898;
    --clr-main-rgb: 48, 152, 152;
    --clr-accent: #ff8000;
    --clr-accent-rgb: 255, 128, 0;
    --clr-white: #ffffff;
    --clr-white-rgb: 255, 255, 255;
    --clr-dark: #1d1035;
    --clr-dark-rgb: 29, 16, 53;

    /* 语义别名 */
    --clr-body-fg: var(--clr-dark);
    --clr-body-fg-rgb: var(--clr-dark-rgb);
    --clr-body-bg: var(--clr-white);
    --clr-body-bg-rgb: var(--clr-white-rgb);
}


/* ============================================
   通用按钮（.butn）
   ============================================ */

.butn {
    /* 局部变量 */
    --butn-fs: 1rem;
    --butn-padding: 0.75em 1.5em;
    --butn-clr: var(--clr-white);
    --butn-bg-clr: var(--clr-main);
    --butn-border-clr: var(--clr-main);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    appearance: none;
    outline: none;
    color: var(--butn-clr);
    background-color: var(--butn-bg-clr);
    border: 2px solid var(--butn-border-clr);
    border-radius: 0.25rem;
    font-size: var(--butn-fs);
    font-weight: 600;
    /* padding: var(--butn-padding); */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 0;
    transition: all 0.3s ease-in-out;
}

.butn-full-circle {
    aspect-ratio: 1;
    --butn-padding: 1em;
    border-radius: 50%;
}

/* 图标 */
.butn .icon,
.butn svg {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1em;
    width: 1em;
    height: 1em;
    color: currentColor;
    fill: currentColor;
    transition: transform 0.3s ease-in-out;
}

.icon-rotate-up-45.butn .icon,
.icon-rotate-up-45.butn svg {
    rotate: -45deg;
}

.butn:where(:hover, :focus-visible) .icon.icon-move-forward,
.butn:where(:hover, :focus-visible) svg.icon-move-forward {
    transform: translate(0.25rem, -0.25rem);
}


/* ============================================
   通用区块（.mega-section）
   ============================================ */

.mega-section {
    padding-block: 5rem;
    position: relative;
    z-index: 0;
}

@media (max-width: 767px) {
    .mega-section {
        padding-block: 3rem;
    }
}


/* ============================================
   前置标题（.pre-title-wrapper）
   ============================================ */

.pre-title-wrapper {
    --_clr: var(--clr-main);
    --_fs: 1rem;
    --_bg: transparent;
    --_padding-block: 0;
    --_padding-inline: 0;
    --_spacer: 0rem;
    --_dot-size: 6px;

    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: fit-content;
    font-size: var(--_fs);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    color: var(--_clr);
    background-color: var(--_bg);
    z-index: 5;
}

/* 两端圆点修饰 */
.pre-title-wrapper.dots {
    --_padding-inline: 1rem;
}

.pre-title-wrapper.dots::before,
.pre-title-wrapper.dots::after {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: inline-block;
    width: var(--_dot-size);
    height: var(--_dot-size);
    border-radius: 50%;
    background-color: currentColor;
}

.pre-title-wrapper.dots::before {
    inset-inline-start: var(--_spacer);
}

.pre-title-wrapper.dots::after {
    inset-inline-end: var(--_spacer);
}


/* ============================================
   标题（.title）
   ============================================ */

.title {
    --title-fs: 3rem;

    position: relative;
    display: inline-block;
    margin-bottom: 0;
    font-size: var(--title-fs);
    font-weight: 700;
    line-height: 1.3;
    z-index: 0;
}

@media (max-width: 767px) {
    .title {
        --title-fs: 2rem;
        font-weight: 600;
    }
}

.hollow-text {
    -webkit-text-stroke-color: inherit;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-fill-color: transparent;
}

.text-main-color {
    color: var(--clr-main) !important;
}


/* ============================================
   标题组（.heading-group）
   ============================================ */

.heading-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

@media (max-width: 991px) {
    .heading-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

.heading-group .titles-area:has(+ *),
.heading-group .title:has(+ *) {
    margin-bottom: 1rem;
}


/* ============================================
   箭头容器（.slider-arrows）
   ============================================ */

.slider-arrows {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1rem;
}


/* ============================================
   Portfolio 区块
   ============================================ */

.portfolio {
    overflow: hidden;
    position: relative;
    padding-top: 80px;

    padding-bottom: 0;
}


/* ============================================
   Portfolio Group
   ============================================ */

.portfolio-group {
    overflow: hidden;
    margin-bottom: 3rem;
}

.portfolio-group-wrapper {
    padding: 0 15px;
    position: relative;
}

.slider-arrows {
    position: absolute;
    top: 50%;
    left: 0px;
    /* 左边按钮在外侧 */
    right: 0px;
    /* 右边按钮在外侧 */
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 99;
}

.slider-arrows button {
    pointer-events: auto;
}

.slider-arrows .butn span {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.slider-arrows .butn::after {
    content: ''
}

.slider-arrows,
.slider-arrows .swiper-button-prev,
.slider-arrows .swiper-button-next {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-group-wrapper:hover .slider-arrows,
.portfolio-group-wrapper:hover .swiper-button-prev,
.portfolio-group-wrapper:hover .swiper-button-next {
    opacity: 1;
}

/* 卡片 */
.portfolio-group .item {
    position: relative;
    border-radius: 0.5rem;
    z-index: 0;

    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

/* 图片链接 */
.portfolio-group .portfolio-img-link {
    position: relative;
    display: block;
    overflow: hidden;
    outline: none;
    z-index: 1;
    transition: all 0.5s ease-in-out;
}

/* 图片 */
.portfolio-group .item .portfolio-img {
    display: block;
    min-width: 100%;
    height: 450px;
    object-fit: cover;
    transition: scale 0.5s ease-in-out;
}

/* 悬停图片缩放 */
.portfolio-group .item:hover .portfolio-img {
    scale: 1.1;
}

/* 卡片信息层 */
.portfolio-group .item .item-info {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0px;
    z-index: 5;
    width: 100% !important;
    padding: 10px;
    background-color: rgba(var(--clr-body-bg-rgb), 1);
    border-radius: 0 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease-in-out;
}

/* 标签 */
.portfolio-group .item .item-info .item-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 5px;
    padding: 0.25rem 0.75rem;
    border-radius: 5rem;
    background-color: var(--clr-accent);
    color: var(--clr-white);
    font-size: 0.5rem;
    line-height: 1;
}

/* 标题行 */
.portfolio-group .item .item-info .item-title {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    color: var(--clr-body-fg);
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;

    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.portfolio-group .item .item-info .item-title a:hover {
    background: #fff;
    color: #309898;
}

.portfolio-group .item .item-info p {
    min-height: calc((0.8rem * 1.3) * 3);
    font-size: 0.8rem;
    line-height: 1.3;
    color: #616161;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 限制3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   Portfolio Style 2 变体
   ============================================ */

.portfolio-group.portfolio-style-2 .item {
    padding-bottom: 5.5rem;

}

.portfolio-group.portfolio-style-2 .item .item-info {
    width: 90%;
    inset-inline-start: 50%;
    translate: -50% 0;
    border: 1px solid var(--clr-main);
    border-bottom-width: 4px;
}

/* .portfolio-group.portfolio-style-2 .item:hover .item-info {
  transform: translateY(-1rem);
} */


/* ============================================
   Portfolio Slider
   ============================================ */

.portfolio-slider .item .portfolio-bg-img {
    height: 500px;
}

@media (max-width: 767px) {
    .portfolio-slider .item .portfolio-bg-img {
        height: 400px;
    }
}

/* 缩略图圆角 */
.portfolio-slider .swiper-container .swiper-wrapper .item .portfolio-img-link img {
    height: 160px;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* 上/下一张按钮位置 */
.portfolio-slider .swiper-button-prev {
    inset-inline-start: 1rem;
    inset-inline-end: auto;
}

.portfolio-slider .swiper-button-next {
    inset-inline-end: 1rem;
    inset-inline-start: auto;
}

@media (max-width: 991px) {
    .portfolio-slider .swiper-button-prev {
        inset-inline-start: 10px;
    }

    .portfolio-slider .swiper-button-next {
        inset-inline-end: 10px;
    }
}


/* ============================================
   Swiper 轮播箭头
   ============================================ */

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    margin-top: 0;
}

/* 隐藏默认箭头图标 */
.swiper-container .swiper-button-prev::before,
.swiper-container .swiper-button-prev::after,
.swiper-container .swiper-button-next::before,
.swiper-container .swiper-button-next::after {
    display: none;
}

/* 使用 .butn 样式时重置尺寸并设定颜色 */
.swiper-container .swiper-button-prev.butn,
.swiper-container .swiper-button-next.butn {
    width: unset;
    height: unset;
    --butn-clr: var(--clr-white);
    --butn-bg-clr: rgba(var(--clr-main-rgb), 1);
    --butn-border-clr: var(--clr-main);
    --butn-padding: 0.5rem;
}

.swiper-container .swiper-button-prev {
    left: 0;
}

.swiper-container .swiper-button-next {
    right: 0;
}

/* .swiper-container .swiper-button-prev.butn:where(:hover, :focus-visible),
.swiper-container .swiper-button-next.butn:where(:hover, :focus-visible) {
  --butn-bg-clr: rgba(var(--clr-main-rgb), 0.5);
  --butn-border-clr: transparent;
} */