/*******************************************************

    polo.gr "Why a POLO bag" post (inc/functions/polo-why.php): the six
    values as cards, the collections. Header and page frame:
    css/polo.page.css.

 *******************************************************/



    /* Values */

    .polo-why-page .polo-why__values {
        display: grid;
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .polo-why__value {
        position: relative;
        margin: 0;
        padding: 32px 28px 30px;
        border-radius: 8px;
        background-color: var( --polo-page-soft );
    }

    .polo-why__number {
        position: absolute;
        top: 24px;
        right: 26px;
        color: #b9bcbf;
        font-family: var( --polo-font-zona );
        font-size: 15px;
        font-weight: 800;
    }

    .polo-why-page .polo-why__value img {
        display: block;
        width: 72px;
        height: 72px;
        margin: 0 0 22px;
        object-fit: contain;
        mix-blend-mode: multiply; /* the icons have a white background */
    }

    .polo-why-page .polo-why__value h2 {
        margin: 0 0 10px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 19px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.25;
        text-align: left;
        text-transform: none;
    }

    .polo-why-page .polo-why__value p {
        margin: 0;
        color: #45494d;
        font-size: 15px;
        line-height: 1.65;
    }



    /* Collections */

    .polo-why__collections {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: clamp( 40px, 5vw, 72px );
        padding: clamp( 28px, 4vw, 48px );
        border-radius: 8px;
        background-color: var( --polo-black );
        color: var( --polo-white );
    }

    .polo-why-page .polo-why__heading {
        margin: 0 0 8px;
        color: var( --polo-white );
        font-family: var( --polo-font-zona );
        font-size: clamp( 24px, 2.6vw, 36px );
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.1;
        text-align: left;
        text-transform: uppercase;
    }

    .polo-why-page .polo-why__collections p {
        max-width: 520px;
        margin: 0;
        color: #d6d8da;
        font-size: 15px;
        line-height: 1.6;
    }

    .polo-why-page .polo-why__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .polo-why__buttons li {
        margin: 0;
    }

    /* .polo-frame in the selector: beats Storefront's link styles (.hentry .entry-content a) where the post column is used. */
    .polo-why-page .polo-frame .polo-why__buttons a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 22px;
        border-radius: 999px;
        background-color: var( --polo-white );
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: background-color 0.2s var( --polo-ease ), color 0.2s var( --polo-ease );
    }

    .polo-why-page .polo-frame .polo-why__buttons a:hover,
    .polo-why-page .polo-frame .polo-why__buttons a:focus-visible {
        background-color: var( --polo-red );
        color: var( --polo-white );
    }

    .polo-why__buttons .polo-page-icon {
        width: 16px;
        height: 16px;
    }



    @media ( max-width: 1024px ) {

        .polo-why-page .polo-why__values {
            grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        }

    }

    @media ( max-width: 600px ) {

        .polo-why-page .polo-why__values {
            grid-template-columns: minmax( 0, 1fr );
            gap: 10px;
        }

        .polo-why__value {
            padding: 24px 20px;
        }

        .polo-why-page .polo-why__value img {
            width: 56px;
            height: 56px;
            margin-bottom: 16px;
        }

    }