/* ===== ARCHIVE/HOME/SEARCH STYLES ===== */
/* Only loaded on regular archive pages (home/archive/search) for performance optimization */
/* Excludes image gallery mode styles which are in image-mode.css */

/* ===== FULL-WIDTH LAYOUT ===== */

/* Hide sidebar on archive pages */
.home #secondary,
.archive #secondary,
.search #secondary {
    display: none;
}

/* Full-width primary content */
.home #primary,
.archive #primary,
.search #primary {
    width: 100%;
    max-width: 100%;
    float: none;
}

/* ===== POST GRID SYSTEM ===== */

/* Post grid container */
.home .post-grid,
.archive .post-grid,
.search .post-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    margin: 15px 0;
}

/* Grid article styling */
.home .post-grid article,
.archive .post-grid article,
.search .post-grid article {
    flex: 1 1 calc(23% - 10px);
    max-width: calc(23% - 10px);
    margin: 0;
}

/* ===== ARCHIVE ENTRY TITLES ===== */

/* Different title styling for grid vs single */
.home .entry-title,
.archive .entry-title {
    font-size: 1.1em;
    line-height: 1.3;
    margin: 10px 0;
}

/* ===== ARCHIVE BREADCRUMBS ===== */

/* Archive breadcrumb navigation */
.archive-breadcrumbs {
    font-size: 0.8em;
    color: var(--color-text-light);
    margin: 10px 0 15px 0;
    padding: 0;
}

.archive-breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.archive-breadcrumbs a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ===== LOAD MORE FUNCTIONALITY ===== */

/* Load more container */
.load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    clear: both;
    margin: 2rem auto 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    column-span: all;
}

.load-more-container #load-more {
    margin-left: auto;
    margin-right: auto;
}

/* ===== CONTENT WRAP OVERRIDES ===== */

/* Full-width content wrap overrides */
.home .content-wrap,
.archive .content-wrap,
.search .content-wrap {
    max-width: 95%;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile First - Base responsive styles */
@media only screen and (min-width : 320px) {
    .post-badge-breadcrumbs, .archive-breadcrumbs {
        width: 92%;
    }
}

/* Medium Devices, Desktops - Enhanced grid layout */
@media only screen and (min-width : 992px) {
    #primary {
        float: left;
        width: 66%;
    }

    .related-items {
        display: flex;
        justify-content: space-between;
        flex: 1 1 30%;
    }

    .related-item {
        width: 30%;
    }

    .home .content-wrap,
    .archive .content-wrap,
    .search .content-wrap {
        max-width: 89%;
    }

    .related-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 15px 0;
    }

    .related-items {
        display: flex;
        justify-content: space-between;
        flex: 1 1 30%;
    }

    .related-item {
        width: 30%;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 1199px) {
    .home .post-grid article,
    .archive .post-grid article,
    .search .post-grid article {
        flex-basis: calc(30% - 10px);
        max-width: calc(30% - 10px);
    }
}

@media (max-width: 991px) {
    .home .post-grid article,
    .archive .post-grid article,
    .search .post-grid article {
        flex-basis: calc(47% - 10px);
        max-width: calc(47% - 10px);
    }
}

@media (max-width: 768px) {
    .home .post-grid,
    .archive .post-grid,
    .search .post-grid {
        flex-direction: column;
        gap: 20px;
    }

    .home .post-grid article,
    .archive .post-grid article,
    .search .post-grid article {
        flex: 1 1 100%;
        max-width: 100%;
        position: relative;
        margin-bottom: 20px;
    }

    .home .entry-title,
    .archive .entry-title {
        font-size: 1em;
        margin: 12px 0;
    }

    #load-more {
        width: 100%;
        max-width: 300px;
        margin: 20px auto;
        padding: 15px;
        font-size: 16px;
    }

    .load-more-container {
        text-align: center;
    }

    .home .content-wrap,
    .archive .content-wrap,
    .search .content-wrap {
        max-width: 100%;
    }

    .home .entry-title,
    .archive .entry-title {
        font-size: 1em;
        margin: 12px 0;
    }

    .post-badge-breadcrumbs {
        margin: 10px auto 8px;
        gap: 6px;
    }

    .badge-breadcrumb {
        padding: 5px 10px;
        font-size: 0.7em;
    }

    .archive-breadcrumbs {
        font-size: 0.75em;
        margin: 8px auto 12px;
    }
}