/* ==========================================================
 * Sidebar Posts Pro Ultimate — Frontend Styles
 * v7.2.0  (Image CSS Conflict Isolation Fix)
 *
 * KEY CHANGES (v7.2.0):
 *  - All image styles are now FULLY SCOPED under .sppu-container
 *  - Removed reliance on generic classes like wp-post-image / attachment-*
 *  - Used `all: unset` + targeted resets to isolate from theme CSS
 *  - High-specificity selectors prevent theme/plugin overrides
 *  - Plugin images will NOT conflict with WordPress core image classes
 * ========================================================== */

/* ============================================================
 * 1) BASE CONTAINER (scoped reset)
 * ============================================================ */
.sppu-container {
    padding: 10px 5px;
    box-sizing: border-box;
}
.sppu-container *,
.sppu-container *::before,
.sppu-container *::after {
    box-sizing: border-box;
}

/* ============================================================
 * 2) IMAGE ISOLATION RESET
 * Prevents theme styles (e.g. .wp-post-image, img, figure img,
 * .attachment-*, .size-*) from leaking into our plugin images.
 * ============================================================ */
.sppu-container .sppu-thumb-wrapper,
.sppu-container .sppu-thumb,
.sppu-container .sppu-thumb a,
.sppu-container .sppu-thumb img.sppu-thumb-img,
.sppu-container img.sppu-thumb-img {
    /* Reset inherited theme rules */
    margin: 0;
    padding: 0;
    border: 0 none;
    background: transparent;
    box-shadow: none;
    float: none;
    clear: none;
    vertical-align: middle;
    text-align: left;
    line-height: normal;
    font-style: normal;
    -webkit-filter: none;
    filter: none;
    transform: none;
    animation: none;
    outline: none;
}

/* ============================================================
 * 3) THUMB WRAPPER + ASPECT RATIO BOX (scoped)
 * ============================================================ */
.sppu-container .sppu-thumb-wrapper {
    display: block;
    position: relative;
    margin: 0;
}

.sppu-container .sppu-thumb {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f5;
    margin: 0;
    padding: 0;
    display: block;
}

/* ============================================================
 * 4) ANCHOR + IMAGE INSIDE THUMB (HIGH SPECIFICITY, ISOLATED)
 * Use plugin-specific class .sppu-thumb-img INSTEAD of relying
 * on global classes like .wp-post-image / .attachment-medium
 * ============================================================ */
.sppu-container .sppu-thumb > a,
.sppu-container .sppu-thumb > a:link,
.sppu-container .sppu-thumb > a:visited {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    text-decoration: none !important;
    border: 0 none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: opacity .25s ease;
    overflow: hidden;
}

/* THUMB IMAGE (uses ONLY plugin's own class .sppu-thumb-img) */
.sppu-container .sppu-thumb img.sppu-thumb-img,
.sppu-container .sppu-thumb a img.sppu-thumb-img,
.sppu-container img.sppu-thumb-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    float: none !important;
    clear: none !important;
    vertical-align: middle !important;
    /* CRITICAL: force visibility even if external lazy-load plugins try to hide */
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform .35s ease;
    /* Prevent theme filters/animations */
    -webkit-filter: none !important;
    filter: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    animation: none !important;
}

/* Hover effect — only inside our container */
.sppu-container .sppu-thumb a:hover img.sppu-thumb-img {
    transform: scale(1.06) !important;
}

/* Fallback "No Image" placeholder */
.sppu-container .sppu-thumb .sppu-no-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #888;
    font-size: 11px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Hide noscript fallbacks visually if browser already loaded JS */
.sppu-container .sppu-thumb noscript { display: none !important; }

/* Loaded / error states (set by frontend.js) */
.sppu-container .sppu-thumb img.sppu-thumb-img.sppu-loaded { opacity: 1 !important; }
.sppu-container .sppu-thumb img.sppu-thumb-img.sppu-error  { opacity: .35 !important; }

/* ============================================================
 * 5) ASPECT RATIOS (scoped)
 * ============================================================ */
.sppu-container.sppu-ratio-square      .sppu-thumb { padding-bottom: 100%; }
.sppu-container.sppu-ratio-wide        .sppu-thumb { padding-bottom: 56.25%; }
.sppu-container.sppu-ratio-current     .sppu-thumb { padding-bottom: 177.77%; }
.sppu-container.sppu-ratio-four-three  .sppu-thumb { padding-bottom: 75%; }
.sppu-container.sppu-ratio-three-four  .sppu-thumb { padding-bottom: 133.33%; }

/* ============================================================
 * 6) MOBILE LAYOUT (< 768px)
 * ============================================================ */
@media (max-width: 767px) {
    .sppu-container.sppu-layout-list .sppu-item,
    .sppu-container.sppu-layout-compact .sppu-item,
    .sppu-container.sppu-layout-card .sppu-item,
    .sppu-container.sppu-layout-overlay .sppu-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
    .sppu-container .sppu-thumb-wrapper {
        width: 100%;
        margin: 0 auto 12px auto;
    }
    .sppu-container .sppu-title { font-size: 14px; }
}

/* ============================================================
 * 7) DESKTOP LAYOUT (>= 768px)
 * ============================================================ */
@media (min-width: 768px) {
    .sppu-container.sppu-layout-list .sppu-item,
    .sppu-container.sppu-layout-compact .sppu-item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    .sppu-container.sppu-layout-list .sppu-item:last-child,
    .sppu-container.sppu-layout-compact .sppu-item:last-child {
        padding-bottom: 5px;
        border-bottom: none;
    }
    .sppu-container.sppu-layout-compact .sppu-item { gap: 10px; margin-bottom: 8px; padding-bottom: 8px; }
    .sppu-container.sppu-layout-compact .sppu-title { font-size: 13px; margin-bottom: 4px; }

    /* Default thumb widths */
    .sppu-container.sppu-ratio-square     .sppu-thumb-wrapper { width: 90px;  flex-shrink: 0; }
    .sppu-container.sppu-ratio-wide       .sppu-thumb-wrapper { width: 120px; flex-shrink: 0; }
    .sppu-container.sppu-ratio-current    .sppu-thumb-wrapper { width: 80px;  flex-shrink: 0; }
    .sppu-container.sppu-ratio-four-three .sppu-thumb-wrapper { width: 110px; flex-shrink: 0; }
    .sppu-container.sppu-ratio-three-four .sppu-thumb-wrapper { width: 90px;  flex-shrink: 0; }
}

/* ============================================================
 * 8) GRID LAYOUTS
 * ============================================================ */
.sppu-container.sppu-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.sppu-container.sppu-layout-grid .sppu-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    transition: box-shadow .25s ease, transform .25s ease;
}
.sppu-container.sppu-layout-grid .sppu-item:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.sppu-container.sppu-layout-grid .sppu-thumb-wrapper { width: 100%; margin-bottom: 8px; }

.sppu-container.sppu-layout-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sppu-container.sppu-layout-grid3 .sppu-item {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
}
.sppu-container.sppu-layout-grid3 .sppu-thumb-wrapper { width: 100%; margin-bottom: 6px; }
.sppu-container.sppu-layout-grid3 .sppu-title { font-size: 12px; }

@media (max-width: 767px) {
    .sppu-container.sppu-layout-grid,
    .sppu-container.sppu-layout-grid3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * 9) CARD LAYOUT
 * ============================================================ */
.sppu-container.sppu-layout-card .sppu-item {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
    transition: box-shadow .25s ease;
}
.sppu-container.sppu-layout-card .sppu-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.sppu-container.sppu-layout-card .sppu-thumb-wrapper { width: 100%; }
.sppu-container.sppu-layout-card .sppu-thumb { border-radius: 0; }
.sppu-container.sppu-layout-card .sppu-content { padding: 12px; }

/* ============================================================
 * 10) OVERLAY LAYOUT
 * ============================================================ */
.sppu-container.sppu-layout-overlay .sppu-item {
    position: relative;
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}
.sppu-container.sppu-layout-overlay .sppu-thumb-wrapper { width: 100%; }
.sppu-container.sppu-layout-overlay .sppu-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    color: #fff;
}
.sppu-container.sppu-layout-overlay .sppu-title a { color: #fff !important; }
.sppu-container.sppu-layout-overlay .sppu-meta,
.sppu-container.sppu-layout-overlay .sppu-excerpt { color: #f0f0f0; }

/* ============================================================
 * 11) TEXT
 * ============================================================ */
.sppu-container .sppu-content { flex: 1; min-width: 0; }
.sppu-container .sppu-title {
    margin: 0 0 6px 0;
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
    hyphens: auto;
    font-size: 15px;
}
.sppu-container .sppu-title a {
    color: #151f28;
    text-decoration: none;
    transition: color .3s ease;
    display: block;
}
.sppu-container .sppu-title a:hover { color: #0066cc; }

.sppu-container .sppu-meta {
    font-size: 11px;
    color: #777;
    margin: 0 0 6px 0;
    line-height: 1.4;
}
.sppu-container .sppu-meta .sppu-sep { color: #ccc; }

.sppu-container .sppu-excerpt {
    font-size: 12px;
    color: #555;
    margin: 6px 0 0 0;
    line-height: 1.5;
}

/* ============================================================
 * 12) TAGS
 * ============================================================ */
.sppu-container .sppu-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.sppu-container .sppu-tag {
    background: #f0f0f0;
    color: #333;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
    line-height: 1.4;
    display: inline-block;
}
.sppu-container .sppu-tag:hover {
    background: #151f28;
    color: #fff !important;
    text-decoration: none;
}

/* ============================================================
 * 13) WIDGET BOX
 * ============================================================ */
.sidebar .widget.widget_sppu_widget,
.widget.widget_sppu_widget {
    box-shadow: rgba(23,43,99,.18) 0 6px 18px;
    border-radius: 6px;
    padding: 1px;
    background: #fff;
}
.widget.widget_sppu_widget .widget-title,
.sppu-block-heading {
    border-radius: 8px;
    color: #fff !important;
    box-shadow: rgba(23,43,99,.25) 0 5px 18px;
    background: linear-gradient(to right, #151f28 0%, #2c3e50 100%);
    padding: 12px;
    font-weight: 700;
    font-size: 18px !important;
    text-align: center;
    margin: 0 0 12px 0;
}

/* ============================================================
 * 14) EMPTY STATE
 * ============================================================ */
.sppu-empty {
    padding: 15px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* ============================================================
 * 15) ACCESSIBILITY
 * ============================================================ */
.sppu-container .sppu-thumb a:focus-visible,
.sppu-container .sppu-title a:focus-visible,
.sppu-container .sppu-tag:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================
 * 16) RTL SUPPORT
 * ============================================================ */
[dir="rtl"] .sppu-container.sppu-layout-list .sppu-item,
[dir="rtl"] .sppu-container.sppu-layout-compact .sppu-item {
    flex-direction: row-reverse;
}

/* ============================================================
 * 17) REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sppu-container .sppu-thumb img.sppu-thumb-img,
    .sppu-container .sppu-tag,
    .sppu-container .sppu-title a,
    .sppu-container .sppu-item { transition: none !important; }
    .sppu-container .sppu-thumb a:hover img.sppu-thumb-img { transform: none !important; }
}

/* ============================================================
 * 18) DEFENSIVE OVERRIDES
 * Some themes apply ".widget img { width:auto; height:auto; }"
 * or "figure img { ... }". The following high-specificity rules
 * neutralise those for our plugin only.
 * ============================================================ */
.widget .sppu-container .sppu-thumb img.sppu-thumb-img,
.sidebar .sppu-container .sppu-thumb img.sppu-thumb-img,
body .sppu-container .sppu-thumb img.sppu-thumb-img,
html body .sppu-container .sppu-thumb img.sppu-thumb-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    float: none !important;
}