/*
 Theme Name:   Blogsy Child
 Theme URI:    https://peregrine-themes.com/blogsy/
 Description:  Blogsy Child Theme for Customization
 Author:       Admin
 Author URI:   https://peregrine-themes.com/
 Template:     blogsy
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  blogsy-child
*/

/* ----------------------------------------------------------------------------
 * 自定义幻灯片 CSS
 * ------------------------------------------------------------------------- */
.blogsy-custom-hero-outer-wrapper {
    background-color: #e2e8f0; /* 稍微加深的高级青灰色，让边缘轮廓更鲜明可视 */
    width: 100%;
    padding: 2px 0; /* 上下留白缩小到2px，呈现极细边框效果 */
    margin-bottom: 30px;
}

.blogsy-custom-hero-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.blogsy-custom-swiper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blogsy-custom-swiper .slide-inner {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 改为向左对齐 */
}

.blogsy-custom-swiper .slide-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.blogsy-custom-swiper .slide-content {
    position: relative;
    z-index: 2;
    text-align: left; /* 改为左对齐 */
    color: #ffffff;
    padding-left: clamp(20px, 8vw, 100px); /* 桌面端左侧距离100px，移动端自适应缩小避免溢出 */
    padding-right: 20px;
    width: 100%;
    max-width: 1200px; /* 增大最大宽度以容纳超大号文字 */
}

.blogsy-custom-swiper .slide-content h2 {
    font-size: clamp(4rem, 12vw, 9rem); /* 原本最高 3.5rem，现增大到约 3 倍的 9rem */
    font-weight: 800;
    margin-bottom: 5px; /* 将物理间距极度缩短 */
    line-height: 1; /* 取消浏览器默认的文字框上下留白空隙 */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.blogsy-custom-swiper .slide-content p {
    font-size: clamp(1.8rem, 4.5vw, 3.3rem); /* 原本 1.1rem，现增大到了 3.3rem 完美3倍 */
    font-weight: 500;
    margin: 0;
    opacity: 0.95;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.custom-swiper-next::after, .custom-swiper-prev::after {
    font-size: 24px !important;
}

.custom-swiper-next, .custom-swiper-prev {
    color: #ffffff !important;
    background: rgba(0,0,0,0.2);
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.custom-swiper-next:hover, .custom-swiper-prev:hover {
    background: rgba(0,0,0,0.5);
}

.custom-swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.custom-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 5px;
}

/* ==========================================================================
   Editor's Choice Magazine Grid
   ========================================================================== */
.blogsy-editors-choice-wrapper {
    margin-bottom: 50px;
    font-family: inherit;
}

/* Header Section */
.ec-title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.ec-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.ec-line {
    flex-grow: 1;
    height: 1px;
    background-color: #e5e5e5;
    min-width: 50px;
}

.ec-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ec-filter-btn {
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ec-filter-btn:hover {
    border-color: #da2b2b;
    color: #da2b2b;
}

.ec-filter-btn.active {
    background-color: #da2b2b; 
    border-color: #da2b2b;
    color: #fff;
}

/* Layout Grid */
.ec-tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.ec-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ec-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 900px) {
    .ec-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* Left Large Column */
.ec-large-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ec-large-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.ec-large-card:hover .ec-large-img {
    transform: scale(1.05);
}

.ec-large-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
}

.ec-large-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: #fff;
}

.ec-large-title {
    margin: 10px 0 15px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.ec-large-title a {
    color: #fff;
    text-decoration: none;
}

.ec-large-title a:hover {
    color: #f0f0f0;
}

.ec-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.ec-meta-bottom {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.ec-cat {
    color: #da2b2b; 
    font-weight: 600;
}

/* Right Small Column */
.ec-right-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ec-small-card {
    display: flex;
    gap: 24px;
    align-items: center;
}

.ec-small-card:not(:last-child) {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.ec-small-img-link {
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    width: 200px;
    height: 130px;
}

@media (max-width: 500px) {
    .ec-small-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .ec-small-img-link {
        width: 100%;
        height: 200px;
    }
}

.ec-small-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.ec-small-img-link:hover .ec-small-img {
    transform: scale(1.05);
}

.ec-small-content {
    flex-grow: 1;
}

.ec-small-content .ec-meta {
    color: #888;
}

.ec-small-content .ec-meta-bottom {
    color: #888;
}

.ec-small-title {
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0;
    line-height: 1.35;
}

.ec-small-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ec-small-title a:hover {
    color: #da2b2b;
}

/* ==========================================================================
   Archive & Blog Listing Fixes
   ========================================================================== */
/* 隐藏列表/文章卡片摘要中自动嵌入的视频或 iframe，避免撑乱版式，仅让其在单页或指定光箱播放 */
article.post-wrapper iframe,
article.post-wrapper video,
article.post-wrapper object,
article.post-wrapper embed,
article.post-wrapper .fluid-width-video-wrapper,
article.post-wrapper .wp-block-embed,
article.post-wrapper .wp-video {
    display: none !important;
}

/* ==========================================================================
   Featured Videos Section (Lightbox Included)
   ========================================================================== */
.blogsy-video-section-outer {
    background-color: #e2e8f0; /* 全宽灰色背景 */
    width: 100%;
    padding: 60px 0 80px;
    margin-top: 30px;
    font-family: inherit;
}

/* Header */
.vid-header {
    margin-bottom: 40px;
}

.vid-title-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.vid-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    color: #1a1a1a; 
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.vid-line {
    flex-grow: 1;
    height: 1px;
    background-color: rgba(0,0,0,0.1);
    min-width: 50px;
}

.vid-view-all {
    background-color: #fff;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 28px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.vid-view-all:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    color: #da2b2b;
}

/* Cards */
.vid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0; 
}

.vid-grid > .pt-col-12 {
    padding-left: 15px;
    padding-right: 15px;
}

.vid-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Align heights if titles differ */
    display: flex;
    flex-direction: column;
}

.vid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.vid-img-wrap {
    position: relative;
    width: 100%;
    padding-top: calc(60% - 5px); /* Aspect ratio slightly reduced by exactly 5px */
    cursor: pointer;
    overflow: hidden;
}

.vid-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.vid-img-wrap:hover .vid-img {
    transform: scale(1.05);
}

/* Play Button Overlay */
.vid-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 2;
}

.vid-img-wrap:hover .vid-play-btn {
    background-color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.vid-play-btn svg {
    margin-left: 4px; /* Visually center the play triangle */
}

/* Card Content */
.vid-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vid-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.vid-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 16px 0;
}

.vid-card-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.vid-card-title a:hover {
    color: #da2b2b;
}

.vid-meta-bottom {
    margin-top: auto;
    font-size: 13px;
    color: #888;
}

.vid-cat {
    color: #da2b2b;
    font-weight: 600;
}

/* Lightbox Modal */
.blogsy-lightbox-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.blogsy-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* 16:9 Aspect Ratio hack for absolute iframe */
.blogsy-lightbox-content::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.blogsy-lightbox-content iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.blogsy-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.blogsy-lightbox-close:hover {
    color: #da2b2b;
}

/* ==========================================================================
   Mobile 2-Column Archive Grid Override (Force standard list into 2 columns on mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .default-archive-wrap, 
    .pt-row.page-content-wrapper > .content-container.archive-content-container > .default-archive-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* 修复原主题可能使用的 Flexbox 遗留宽度 */
    .default-archive-wrap > article,
    .default-archive-wrap > .post-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 缩小卡片内部的内衬，以防在手机小屏被挤爆 */
    .default-archive-wrap .content-container,
    .default-archive-wrap .content-wrapper,
    .default-archive-wrap .post-wrapper-inner {
        padding: 12px !important;
    }

    /* 适度调小排版与字体，不然两列放不下 */
    .default-archive-wrap .title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .default-archive-wrap .excerpt {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; /* 手机上两列时，摘要截断到只显示两行 */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
    }

    .default-archive-wrap .meta-details,
    .default-archive-wrap .meta-wrapper,
    .default-archive-wrap .footer-wrap {
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .default-archive-wrap .meta-details *,
    .default-archive-wrap .meta-wrapper *,
    .default-archive-wrap .footer-wrap * {
        font-size: 11px !important;
    }
    
    /* 作者头像也必须调小 */
    .default-archive-wrap .author-image img,
    .default-archive-wrap .author-name img,
    .default-archive-wrap .avatar {
        width: 20px !important;
        height: 20px !important;
    }

    /* ==========================================================================
       修复手机端视频版块 View All 按钮撑破屏幕宽度的 Bug
       ========================================================================== */
    .vid-title-wrap {
        gap: 10px !important;
    }
    .vid-title {
        font-size: 22px !important; /* 缩小标题 */
    }
    .vid-line {
        min-width: 15px !important; /* 原本至少50px，手机上容易把右边顶出去，现缩短缓冲 */
    }
    .vid-view-all {
        padding: 6px 16px !important; /* 缩小按钮边距 */
        font-size: 12px !important; /* 缩小按钮文字 */
    }
}