/*
 * Layout (mobile first):
 * - below 768px: every part stacked, full width
 * - 768-991px:   intro on its own row, the other parts side by side
 * - 992px+:      all parts side by side in four columns
 */
section.p2p-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;

    background-color: var(--p2p-darkgrey);

    color: white;

    >section {
        grid-column: span 1;
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        >section.p2p-hero__content:first-child,
        >section:nth-child(2):last-child {
            grid-column: span 2;
        }
    }

    @media (min-width: 992px) {
        /* The account box (always the last part) never gets narrower than 20rem. */
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(20rem, 1fr);
        grid-template-rows: 1fr;
        height: max(65vh, 20rem);

        >section:nth-child(2):last-child {
            grid-column: span 1;
        }

        >section.p2p-hero__content:first-child:last-child {
            grid-column: span 4;
        }

        >section.p2p-hero__content:first-child:nth-last-child(2) {
            grid-column: span 3;
        }

        >section.p2p-hero__content:first-child:nth-last-child(3) {
            grid-column: span 2;
        }
    }

    >section {
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: inherit;
    }

    >section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #000000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 36%, rgba(255, 255, 255, 0) 100%);
    }

    >section>div {
        position: relative;

        height: stretch;
        width: stretch;
        display: flex;
        flex-flow: column nowrap;
        margin: 3rem;
    }


    /* Content */
    .p2p-hero__content-inner {

        .p2p-hero__subtitle,
        .p2p-hero__title,
        .p2p-hero__blurb {
            margin: 0;
            padding: 0;
            font-family: var(--font-opensans);
        }

        .p2p-hero__title {
            font-size: 4rem;
        }

        .p2p-hero__subtitle {
            font-size: 2rem;
            font-family: var(--font-opensans);
            font-weight: 300;
        }

        .p2p-product-search {
            margin-block: 2rem;
            position: relative;
            width: min(80%, 25rem);
        }

        .p2p-hero-content__subcategory-navigation {
            display: grid;
            grid-template-columns: repeat(auto-fit, 10rem);
            grid-template-rows: repeat(2, 1fr);
            grid-auto-flow: row;
            gap: 0.2rem;

            .p2p-hero-content__subcategory-link {
                display: flex;
                flex-flow: row nowrap;
                gap: 0.5rem;
                grid-column: span 1;
                text-decoration: none;
                padding: 1rem 1.5rem;
                justify-content: center;
                align-items: center;

                .p2p-hero-content__subcategory-thumbnail {
                    width: auto;
                    height: 50px;
                }
            }
        }
    }


    /* Subcategories */
    .p2p-hero__subcategories-inner {

        display: block;
        margin: 0;
    
        .p2p-hero-subcategories__categories {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(0, 1fr);
            width: 100%;
            height: 100%;
            gap: 0.2rem;
            background-color: #515151;
    
            
            /*
             * Odd number of categories:
             * Make the final category span both columns.
             */
            &:not(:has(> :only-child)) {
    
                > :last-child:nth-child(odd) {
                    grid-column: 1 / -1;
                }
            }
    
            .p2p-hero-subcategories__link {
                display: flex;
                width: 100%;
                height: 100%;
                text-align: center;
                background-size:cover;
                background-color: rgba(0, 0, 0, 0.733);
                background-blend-mode: overlay;

                flex-direction: column;
                justify-content: center;
                align-items: center;
    
                text-decoration: none;

                transition: 0.2s ease;
                

                .p2p-hero-subcategories__thumbnail.p2p-white-icon--masked,
                .p2p-hero-subcategories__thumbnail.p2p-icon {
                    --icon-size: 4rem;
                    height: var(--icon-size);
                    width: var(--icon-size);

                    transition: inherit;
                }

                &:hover {
                    background-color:#00000000;
                    color: #ffffff00;

                    .p2p-hero-subcategories__thumbnail.p2p-white-icon--masked,
                    .p2p-hero-subcategories__thumbnail.p2p-icon {
                        opacity: 0;
                    }
                }
            }
        }
    }


    /* Featured */
    .p2p-hero__featured {
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* Create a separate stacking context for the overlay. */
        isolation: isolate;
    }

    .p2p-hero__featured::before {
        content: "";
        position: absolute;
        inset: 0;

        background: #000000;
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);

        z-index: 0;
        pointer-events: none;
    }

    .p2p-hero__featured-inner {
        position: relative;
        z-index: 1;

        justify-content: flex-end;
        align-items: center;

        h2, a {
            text-align: center;
        }

        h2 {
            margin: 0;
            padding: 0;
        }

        /* a {
            display: block;
            background-color: var(--p2p-linkColor);
            padding: 1rem 2rem;
            border-radius: 5px;
            text-decoration: none;
            width: fit-content;

            &:hover {
                background-color: var(--p2p-linkColorHover);
            }
        } */
    }

    .p2p-hero__account::before {
        background: #000000;
        background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.57) 0%, rgba(255, 255, 255, 0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#FFFFFF", GradientType=0);
    }
    .p2p-hero__account-inner {
        .p2p-hero__account-title {
            margin: 0;
        }

        .p2p-hero__account-intro {
            margin: 0;
        }

        .woocommerce-form-login {
            background-color: #00000042;
            margin-top: 1em;
        }
    }
}

/* =========================================================
   Hero responsive sizing (stacked layouts below 992px)
   ========================================================= */

@media (max-width: 991.98px) {

    section.p2p-hero {

        >section>div {
            margin: 2rem;
        }

        /* Each part gets enough height for its background image. */
        .p2p-hero__content {
            min-height: 22rem;
        }

        .p2p-hero__subcategories,
        .p2p-hero__featured {
            min-height: 20rem;
        }

        /* Featured: content centred in its section. */
        .p2p-hero__featured {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .p2p-hero__featured > .p2p-hero__featured-inner {
            width: auto;
            height: auto;
            max-width: 36rem;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .p2p-hero__subcategories-inner {
            height: 100%;
            min-height: 20rem;
        }

        .p2p-hero__content-inner {
            .p2p-hero__title {
                font-size: 3rem;
                line-height: 1.1;
            }

            .p2p-hero__subtitle {
                font-size: 1.5rem;
            }
        }
    }
}

@media (max-width: 767.98px) {

    section.p2p-hero {

        .p2p-hero__content {
            min-height: 0;
        }

        .p2p-hero__content-inner .p2p-product-search {
            width: 100%;
        }
    }
}

@media (max-width: 575.98px) {

    section.p2p-hero {

        >section>div {
            margin: 1.5rem 1rem;
        }

        .p2p-hero__content-inner {
            .p2p-hero__title {
                font-size: 2.25rem;
            }

            .p2p-hero__subtitle {
                font-size: 1.25rem;
            }

            .p2p-hero-content__subcategory-navigation {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: none;

                .p2p-hero-content__subcategory-link {
                    padding: 0.75rem;
                }
            }
        }

        .p2p-hero__subcategories-inner .p2p-hero-subcategories__categories .p2p-hero-subcategories__link {
            min-height: 8rem;
        }
    }
}