/* The approved blog search design lives in lp.css (shared design system,
   ported from design-ux). This file only bridges the extra wrapper divs
   that BlogSearchController's server-rendered partial injects at runtime -
   lp.css styles .blog-search-panel's children directly. */
.blog-search-results-container,
.blog-search-results {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Fade card images in once they've actually finished loading instead of
   letting the CMS image pop in abruptly as it downloads. */
.blog-search-card-image img {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.blog-search-card-image img.is-loaded {
    opacity: 1;
}

/* Skeleton placeholder shown in the results container while a search
   request is in flight, so results don't appear to pop in from nothing. */
.blog-search-skeleton-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.blog-search-skeleton-card {
    flex: 1 1 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-search-skeleton-card .blank {
    background-color: rgba(33, 33, 33, 0.08);
    border-radius: 8px;
    animation: blogSearchSkeletonPulse 1s ease-in-out infinite alternate;
}

.blog-search-skeleton-image {
    width: 100%;
    height: 220px;
}

.blog-search-skeleton-title {
    height: 20px;
    margin: 0 8px;
}

@keyframes blogSearchSkeletonPulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .blog-search-skeleton-card {
        flex: 1 1 45%;
        min-width: 150px;
    }
}