/* Container */
.sns-wrapper {
    display: grid;
    gap: 30px;
    margin: 20px 0 40px 0; /* Adjusted margin */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* --- Layouts --- */

/* Grid Layout (Strict 3 columns) */
.sns-layout-grid {
    grid-template-columns: repeat(3, 1fr);
}

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

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

/* --- Filters --- */
.sns-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
}

.sns-filter-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    background: #f0f2f5;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.sns-filter-btn:hover {
    background: #e1e4e8;
    color: #333;
}

.sns-filter-btn.active {
    background: #3498db;
    color: #fff;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

/* --- Pagination --- */
.sns-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sns-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.sns-pagination .page-numbers:hover {
    border-color: #3498db;
    color: #3498db;
}

.sns-pagination .page-numbers.current {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.sns-pagination .page-numbers.dots {
    border: none;
    background: transparent;
}

/* --- Card Styles --- */
.sns-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    border: 1px solid #eee;
}

.sns-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Image Area */
.sns-card-image {
    height: 200px; /* Standard height */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.sns-card:hover .sns-card-image {
    /* Zoom effect handled possibly by child if background wasn't on div itself. 
       Since it is on bg, we can animate size? No, perf heavy.
       Let's stick to overlay light up.
    */
}

.sns-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    opacity: 0.6;
    transition: opacity 0.3s;
}

.sns-card:hover .sns-overlay {
    opacity: 0.4;
}

/* Category Badge */
.sns-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #3498db;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Content Area */
.sns-card-content {
    padding: 20px;
    flex: 1; /* Fill remaining height */
    display: flex;
    flex-direction: column;
}

.sns-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.sns-meta .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

.sns-title {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
    color: #2c3e50;
    transition: color 0.2s;
}

.sns-card:hover .sns-title {
    color: #3498db;
}

.sns-excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Push footer down */
}

.sns-footer {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.sns-read-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3498db;
    transition: transform 0.2s;
    text-decoration: none;
}

.sns-card:hover .sns-read-more {
    transform: translateX(5px);
}

/* Tags */
.sns-tags {
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: #3498db;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sns-tag {
    background: #eef7fc;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}


/* Footer Refinements for Tags */
.sns-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.sns-tags {
    margin-bottom: 0; /* Reset previous margin */
    flex-wrap: wrap; 
    max-width: 65%; /* Prevent tags from eating button space */
}

/* Ensure Read More stays right */
.sns-read-more {
    white-space: nowrap;
    margin-left: auto;
}


/* Reset Tag Styles for upper position */
.sns-footer .sns-tags { display: none; } /* just in case */

.sns-tags {
    margin-bottom: 10px;
    margin-top: -5px; /* Pull tighter to title */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%; /* Reset override */
}

.sns-tag {
    background: #eef7fc;
    color: #3498db;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.sns-tag:hover {
    background: #dbeffa;
    color: #2980b9;
}

/* Reset Footer layout */
.sns-footer {
    display: flex;
    justify-content: flex-end; /* Align button to right */
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    margin-top: auto;
}
.sns-read-more {
    margin-left: 0; 
}



/* --- Visual Effects & Image Fixes --- */

/* 1. New Image Structure */
.sns-img-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.sns-card-image-wrap {
    height: 260px; /* Modestly increased from 220px to help vertical images, but kept rectangular */
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blurred Background Layer */
.sns-img-bg {
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.9);
    z-index: 1;
    transition: transform 0.6s ease;
}

/* Main Image (Smart Fit) */
.sns-img-front {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures full image is seen */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Hover Effects */
.sns-card:hover .sns-img-bg {
    transform: scale(1.1); /* Subtle zoom of background */
}

.sns-card:hover .sns-img-front {
    transform: scale(1.03); /* Pop effect for main image */
}

.sns-card {
    /* Smooth entrance */
    animation: snsFadeInUp 0.6s ease backwards;
}

/* Stagger animation for children (nth-child loop via CSS is hard without preprocessor, 
   but we can set a default delay via simple selectors or JS. 
   For now, simple animation is fine) */

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

/* Badge fix for new structure */
.sns-category {
    z-index: 3;
    left: 10px;
    top: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.sns-overlay {
    z-index: 2; /* Between bg and text but below badge? 
                 Actually overlay usually goes ABOVE image to darken it. 
                 But here we have 'contain' image. Darkening it might look muddy.
                 Let's make overlay subtle gradient from bottom. */
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%);
    pointer-events: none;
}


/* Align SVG icon in button */
.sns-read-more {
    display: inline-flex;
    align-items: center;
}
.sns-read-more svg {
    transition: transform 0.3s ease;
}
.sns-card:hover .sns-read-more svg {
    transform: translateX(5px);
}