/* =============================================
STORACAGE News & Blog Page CSS
============================================= */
.section-padding {
    padding: 70px 0;
}
.bg-light {
    background-color: #f7f8fa;
}

/* Page Hero */
.storacage-page-hero {
    position: relative;
    height: 320px;
    display: flex;
    align-items: center;
    color: #ffffff;
}
.storacage-page-hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.storacage-page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.storacage-page-hero-bg::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,30,75,0.48);
    position: absolute;
    top: 0;
    left: 0;
}
.storacage-page-hero-content h1 {
    font-size: 38px;
    text-transform: uppercase;
    margin-bottom:12px;
}
.storacage-breadcrumb {
    font-size: 14px;
}
.storacage-breadcrumb a {
    color:#fff;
    opacity:0.9;
}

/* Blog Layout Grid Main + Sidebar */
.storacage-blog-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap:45px;
}

/* Blog Top Bar */
.storacage-blog-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:30px;
}
.result-text {
    font-size:14px;
    color:#333;
}
.storacage-sort-select {
    padding:8px 12px;
    border:1px solid #ddd;
    border-radius:2px;
    font-size:14px;
}

/* Blog Post Grid 3列布局 */
.storacage-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:28px;
    margin-bottom:40px;
}
.storacage-blog-card {
    background:#fff;
    border:1px solid #e8ebf0;
    overflow:hidden;
}
.blog-card-img img {
    width:100%;
    height:180px;
    object-fit:cover;
}
.blog-card-body {
    padding:18px;
}
.blog-date {
    font-size:12px;
    color:#666;
    display:block;
    margin-bottom:8px;
}
.blog-card-title {
    font-size:16px;
    line-height:1.4;
    margin:0 0 10px;
}
.blog-card-title a {
    color:#111;
    text-decoration:none;
}
.blog-card-excerpt {
    font-size:13px;
    color:#555;
    line-height:1.6;
    margin-bottom:14px;
}
.blog-readmore {
    font-size:13px;
    color:#0057CC;
    text-decoration:none;
    font-weight:500;
    display:inline-flex;
    gap:6px;
}

/* Pagination */
.storacage-pagination {
    display:flex;
    align-items:center;
    gap:6px;
}
.page-link {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid #ddd;
    color:#222;
    text-decoration:none;
    font-size:14px;
}
.page-link.current {
    background:#0057CC;
    border-color:#0057CC;
    color:#fff;
}

/* Sidebar Widget */
.sidebar-widget {
    background:#f7f8fa;
    padding:24px;
    margin-bottom:30px;
}
.widget-title {
    font-size:16px;
    text-transform:uppercase;
    padding-bottom:8px;
    border-bottom:2px solid #0057CC;
    margin-bottom:18px;
    display:inline-block;
}
/* Search */
.sidebar-search-form {
    display:flex;
}
.sidebar-search-form input {
    flex:1;
    padding:10px 12px;
    border:1px solid #ddd;
    border-right:none;
    outline:none;
}
.sidebar-search-form button {
    background:#0057CC;
    color:#fff;
    border:none;
    padding:0 14px;
    cursor:pointer;
}
/* Category List */
.sidebar-cat-list {
    list-style:none;
    padding:0;
    margin:0;
}
.sidebar-cat-list li {
    margin-bottom:10px;
}
.sidebar-cat-list a {
    display:flex;
    justify-content:space-between;
    color:#333;
    text-decoration:none;
    font-size:14px;
}
/* Latest Posts */
.latest-post-item {
    display:flex;
    gap:12px;
    margin-bottom:16px;
}
.latest-post-thumb img {
    max-width:unset;
    width:60px;
    height:60px;
    object-fit:cover;
}
.latest-post-text a {
    font-size:13px;
    color:#222;
    text-decoration:none;
    line-height:1.4;
}
.latest-post-date {
    display:block;
    font-size:11px;
    color:#666;
    margin-top:4px;
}
.sidebar-viewall {
    width:100%;
    display:block;
    text-align:center;
    margin-top:16px;
}
.btn.btn-primary {
    background:#0057CC;
    color:#fff;
    border:none;
    padding:12px 22px;
    font-weight:500;
    text-decoration:none;
    transition:background 0.25s ease;
}
.btn.btn-primary:hover {
    background:#0046a6;
}

/* 底部4大优势区块 */
.storacage-features-grid {
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:30px;
    padding:40px 0;
}
.storacage-feature-block {
    text-align:center;
}
.storacage-feature-block i {
    font-size:32px;
    color:#0057CC;
    margin-bottom:14px;
}
.storacage-feature-block h4 {
    font-size:17px;
    margin-bottom:6px;
}
.storacage-feature-block p {
    font-size:13px;
    color:#555;
}

/* ===================== RESPONSIVE 自适应 ===================== */
@media(max-width:1024px){
    .storacage-blog-grid {
        grid-template-columns:1fr;
    }
    .storacage-posts-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .storacage-features-grid {
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width:768px){
    .storacage-page-hero {
        height:260px;
    }
    .storacage-page-hero-content h1 {
        font-size:28px;
    }
    .storacage-posts-grid {
        grid-template-columns: 1fr;
    }
    .storacage-blog-top-bar {
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .storacage-features-grid {
        grid-template-columns: 1fr;
    }
}