/**
 * Algolia Custom PLP — frontend styles
 *
 * Scoped to body.algolia-plp so nothing bleeds into other templates.
 *
 * Layout of the product grid and filter sidebar is handled entirely by
 * BfGridList.css — this file only provides the PLP-specific shell:
 * hero image, title, and page container spacing.
 *
 */

/* =============================================================================
   Page container
   ============================================================================= */

body.algolia-plp #algolia_search_results {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    body.algolia-plp #algolia_search_results {
        padding: 0 32px 60px;
    }
}

/* =============================================================================
   Hero image (featured image of the post)
   ============================================================================= */

body.algolia-plp .algolia-plp__hero {
    width: 100%;
    max-height: 340px;
    overflow: hidden;
    display: block;
    margin-bottom: 24px;
}

body.algolia-plp .algolia-plp__hero-image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 767px) {
    body.algolia-plp .algolia-plp__hero-image {
        height: 200px;
    }
}

/* =============================================================================
   Page title
   ============================================================================= */

body.algolia-plp #algolia_search_results__container h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin: 16px 0 24px;
}

@media (min-width: 1024px) {
    body.algolia-plp #algolia_search_results__container h1 {
        font-size: 33px;
        margin-bottom: 32px;
    }
}