/*
 * Boxed Theme Shortcodes Styles
 * Grid and List post display styles
 */

/* ==========================================================================
   Post Grid Shortcode
   ========================================================================== */
.boxedtheme-post-grid {
    margin-bottom: 40px;
}

.boxedtheme-post-grid .grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boxedtheme-post-grid .grid-item:hover {
opacity: 0.9;
}

.boxedtheme-post-grid .grid-item-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.boxedtheme-post-grid .grid-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}


.boxedtheme-post-grid .grid-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 2;
}

.boxedtheme-post-grid .grid-item-overlay::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    transition: opacity 0.2s;
    backface-visibility: hidden;
}

.boxedtheme-post-grid .grid-item-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    width: 100%;
}

.boxedtheme-post-grid .grid-item-category {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.boxedtheme-post-grid .grid-item-title {
    margin: 0 0 8px 0;
    font-weight: 700;
    line-height: 1.3;
}

.boxedtheme-post-grid .grid-item-meta {
    font-weight: 400;
    opacity: 0.9;
}

.boxedtheme-post-grid .grid-item-date {
    display: inline-block;
}

/* Dark Mode Adjustments for Grid */
body.dark-mode .boxedtheme-post-grid .grid-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .boxedtheme-post-grid .grid-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Post List Shortcode
   ========================================================================== */
.boxedtheme-post-list {
    margin-bottom: 40px;
}

.boxedtheme-post-list .list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.boxedtheme-post-list .list-item:not(:last-child) {
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
}

.boxedtheme-post-list .list-item-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    max-width: 300px;
    overflow: hidden;
}

.boxedtheme-post-list .list-item-thumbnail img {
    width: 100%;
    height: 110px;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.boxedtheme-post-list .list-item-thumbnail a:hover img {
    opacity: 0.85;
}

.boxedtheme-post-list .list-item-content {
    flex: 1;
    min-width: 0;
}

/* Category badge — inline (fallback when no thumbnail) */
.boxedtheme-post-list .list-item-category {
    display: inline-block;
    margin-bottom: 8px;
}

.boxedtheme-post-list .list-item-category a {
    display: inline-block;
    padding: 3px 9px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.boxedtheme-post-list .list-item-category a:hover {
    background-color: var(--secondary-color);
}

/* Category badge — overlay (sits bottom-left on the thumbnail) */
.boxedtheme-post-list .list-item-category--overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: 0;
    z-index: 5;
}

.boxedtheme-post-list .list-item-title {
    margin: 0 0 6px 0;
    font-weight: 700;
    line-height: 1.3;
}

.boxedtheme-post-list .list-item-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.boxedtheme-post-list .list-item-title a:hover {
    color: var(--primary-color);
}

.boxedtheme-post-list .list-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color-light);
    font-size: 13px;
    margin-bottom: 10px;
}

.boxedtheme-post-list .list-item-meta-sep {
    opacity: 0.4;
}

.boxedtheme-post-list .list-item-excerpt {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 12px;
}

.boxedtheme-post-list .list-item-readmore {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.boxedtheme-post-list .list-item-readmore:hover {
    background-color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Post Compact Shortcode
   ========================================================================== */

/* Grid container — CSS grid handles columns; each card is always a flex row */
.boxedtheme-post-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 40px;
}

.boxedtheme-post-compact.columns-2 { grid-template-columns: repeat(2, 1fr); }
.boxedtheme-post-compact.columns-3 { grid-template-columns: repeat(3, 1fr); }

/* Individual card — always image-left, text-right */
.boxedtheme-post-compact .compact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 0;
    border: none;
}

/* Border below every card by default */
.boxedtheme-post-compact .compact-item {
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* Strip border from the last row — last N items where N = column count */
.boxedtheme-post-compact.columns-1 .compact-item:last-child,
.boxedtheme-post-compact.columns-2 .compact-item:nth-last-child(-n+2),
.boxedtheme-post-compact.columns-3 .compact-item:nth-last-child(-n+3) {
    border-bottom: none;
}

/* In 2- or 3-column grids, also draw a right border to separate column pairs */
.boxedtheme-post-compact.columns-2 .compact-item:nth-child(odd),
.boxedtheme-post-compact.columns-3 .compact-item:nth-child(3n+1),
.boxedtheme-post-compact.columns-3 .compact-item:nth-child(3n+2) {
    border-right: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* Thumbnail — fixed width, never bigger than 300×200 */
.boxedtheme-post-compact .compact-item-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    overflow: hidden;
}

/* Scale thumbnail down in multi-column layouts to keep cards compact */
.boxedtheme-post-compact.columns-2 .compact-item-thumbnail { width: 120px; }
.boxedtheme-post-compact.columns-3 .compact-item-thumbnail { width: 90px; }

.boxedtheme-post-compact .compact-item-thumbnail img {
    width: 100%;
    height: 100px;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.boxedtheme-post-compact.columns-2 .compact-item-thumbnail img { height: 82px; }
.boxedtheme-post-compact.columns-3 .compact-item-thumbnail img { height: 65px; }

.boxedtheme-post-compact .compact-item-thumbnail a:hover img {
    opacity: 0.85;
}

/* Category — overlay badge, bottom-left of the thumbnail */
.boxedtheme-post-compact .compact-item-category {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    font-size: 10px;
}

.boxedtheme-post-compact .compact-item-category a {
    display: inline-block;
    padding: 2px 7px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.boxedtheme-post-compact .compact-item-category a:hover {
    background-color: var(--secondary-color);
}

/* Trending badge — top-left of thumbnail */
.boxedtheme-post-compact .compact-item-trending-wrapper {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
}

/* Content column */
.boxedtheme-post-compact .compact-item-content {
    flex: 1;
    min-width: 0;
}

.boxedtheme-post-compact .compact-item-title {
    margin: 0 0 5px 0;
    font-weight: 700;
    line-height: 1.3;
}

.boxedtheme-post-compact .compact-item-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.boxedtheme-post-compact .compact-item-title a:hover {
    color: var(--primary-color);
}

.boxedtheme-post-compact .compact-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color-light);
    font-size: 12px;
}

.boxedtheme-post-compact .compact-item-meta-sep {
    opacity: 0.35;
}

/* ==========================================================================
   Post Compact — Load More button
   ========================================================================== */
.boxedtheme-post-compact-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 40px;
}

.boxedtheme-post-compact-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .boxedtheme-post-compact-load-more-btn:hover:not(:disabled) {
        background-color: var(--secondary-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.boxedtheme-post-compact-load-more-btn:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.boxedtheme-post-compact-load-more-btn:disabled { cursor: default; }
.boxedtheme-post-compact-load-more-btn.is-done  { opacity: 0.6; }

.boxedtheme-post-compact-load-more-btn .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: boxedtheme-load-more-spin 0.7s linear infinite;
}

.boxedtheme-post-compact-load-more-btn.is-loading .btn-spinner {
    display: inline-block;
}

/* ==========================================================================
   Post List — Load More button
   ========================================================================== */
.boxedtheme-post-list-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 40px;
}

.boxedtheme-post-list-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .boxedtheme-post-list-load-more-btn:hover:not(:disabled) {
        background-color: var(--secondary-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

.boxedtheme-post-list-load-more-btn:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.boxedtheme-post-list-load-more-btn:disabled {
    cursor: default;
}

.boxedtheme-post-list-load-more-btn.is-done {
    opacity: 0.6;
}

.boxedtheme-post-list-load-more-btn .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: boxedtheme-load-more-spin 0.7s linear infinite;
}

.boxedtheme-post-list-load-more-btn.is-loading .btn-spinner {
    display: inline-block;
}

@keyframes boxedtheme-load-more-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Compact grid: collapse multi-column to single column on tablets, then
   shrink the thumbnail further on small phones but KEEP image-left layout */
@media screen and (max-width: 700px) {
    .boxedtheme-post-compact.columns-2,
    .boxedtheme-post-compact.columns-3 {
        grid-template-columns: 1fr;
    }

    /* Remove the column-divider right border once we're in a single column */
    .boxedtheme-post-compact.columns-2 .compact-item,
    .boxedtheme-post-compact.columns-3 .compact-item {
        border-right: none !important;
    }

    /* Re-apply bottom border to all items, then remove only the last one —
       the nth-last-child(-n+2/3) rules no longer apply in a single column */
    .boxedtheme-post-compact.columns-2 .compact-item,
    .boxedtheme-post-compact.columns-3 .compact-item {
        border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    }

    .boxedtheme-post-compact.columns-2 .compact-item:last-child,
    .boxedtheme-post-compact.columns-3 .compact-item:last-child {
        border-bottom: none;
    }

    /* Restore full-width thumbnail sizes */
    .boxedtheme-post-compact.columns-2 .compact-item-thumbnail,
    .boxedtheme-post-compact.columns-3 .compact-item-thumbnail { width: 150px; }

    .boxedtheme-post-compact.columns-2 .compact-item-thumbnail img,
    .boxedtheme-post-compact.columns-3 .compact-item-thumbnail img { height: 100px; }
}

@media screen and (max-width: 400px) {
    /* On very narrow phones shrink the image further — still image-left */
    .boxedtheme-post-compact .compact-item-thumbnail { width: 90px; }
    .boxedtheme-post-compact .compact-item-thumbnail img { height: 65px; }
}

@media screen and (max-width: 480px) {
    /* Post list: stack only on narrow phones */
    .boxedtheme-post-list .list-item {
        flex-direction: column;
        gap: 12px;
    }

    .boxedtheme-post-list .list-item-thumbnail {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .boxedtheme-post-grid .grid-item-content {
        padding: 15px;
    }
    
    .boxedtheme-post-grid .grid-item-category {
        font-size: 11px;
        padding: 3px 8px;
    }
}