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

    polo.gr "Choose & Use" article (inc/functions/polo-cnu.php): intro,
    the 15% rule, the tips as numbered cards, the closing note. Header,
    links and page frame: css/polo.page.css.

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



    .polo-cnu {
        --polo-cnu-gap: clamp( 40px, 5vw, 72px );
    }

    .polo-cnu-page .polo-cnu__heading {
        margin: 0 0 20px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: clamp( 22px, 2vw, 28px );
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: left;
        text-transform: none;
    }

    /* .polo-frame in the selector: beats Storefront's link styles (.hentry .entry-content a). */
    .polo-cnu-page .polo-frame .polo-cnu__intro a,
    .polo-cnu-page .polo-frame .polo-cnu__rule a,
    .polo-cnu-page .polo-frame .polo-cnu__tips a {
        color: var( --polo-black );
        text-decoration: underline;
        text-decoration-color: var( --polo-red );
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .polo-cnu-page .polo-frame .polo-cnu__rule a:hover,
    .polo-cnu-page .polo-frame .polo-cnu__tips a:hover {
        color: var( --polo-red );
    }



    /* Intro */

    .polo-cnu__intro {
        display: grid;
        grid-template-columns: minmax( 0, 7fr ) minmax( 0, 4fr );
        gap: clamp( 24px, 4vw, 64px );
        align-items: center;
    }

    .polo-cnu-page .polo-cnu__intro p {
        margin: 0 0 14px;
        color: #2b2f33;
        font-size: 17px;
        line-height: 1.7;
    }

    .polo-cnu-page .polo-cnu__intro p:last-child {
        margin-bottom: 0;
    }

    .polo-cnu-page .polo-cnu__intro-image {
        display: block;
        width: 100%;
        max-width: 360px;
        height: auto;
        margin: 0 auto;
    }



    /* Numbers */

    .polo-cnu__number {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var( --polo-black );
        color: var( --polo-white );
        font-family: var( --polo-font-zona );
        font-size: 20px;
        font-weight: 800;
    }



    /* Tip 1: the 15% rule */

    .polo-cnu__rule {
        display: grid;
        grid-template-columns: auto minmax( 0, 1fr ) auto;
        gap: clamp( 16px, 3vw, 40px );
        align-items: center;
        margin-top: var( --polo-cnu-gap );
        padding: clamp( 24px, 4vw, 48px );
        border-radius: 8px;
        background-color: var( --polo-page-soft );
    }

    .polo-cnu__rule .polo-cnu__number {
        align-self: start;
        background-color: var( --polo-red );
    }

    .polo-cnu-page .polo-cnu__rule-big {
        margin: 0 0 10px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: clamp( 18px, 2vw, 24px );
        font-weight: 700;
        line-height: 1.2;
    }

    .polo-cnu__rule-big span {
        display: block;
        color: var( --polo-red );
        font-family: var( --polo-font-zona );
        font-size: clamp( 56px, 8vw, 104px );
        font-weight: 800;
        line-height: 0.95;
    }

    .polo-cnu-page .polo-cnu__rule p:not( .polo-cnu__rule-big ) {
        max-width: 560px;
        margin: 0;
        color: #2b2f33;
        font-size: 17px;
        line-height: 1.65;
    }

    .polo-cnu-page .polo-cnu__rule-image {
        display: block;
        width: clamp( 160px, 22vw, 260px );
        height: auto;
        margin: 0;
        mix-blend-mode: multiply; /* the drawings have a white background */
    }



    /* Tips 2–7 */

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

    .polo-cnu__tip {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0;
        padding: 24px;
        border: 1px solid var( --polo-line );
        border-radius: 8px;
    }

    .polo-cnu-page .polo-cnu__tip p {
        margin: 0;
        color: #2b2f33;
        font-size: 16px;
        line-height: 1.65;
    }

    .polo-cnu-page .polo-cnu__tip img {
        display: block;
        width: 100%;
        max-width: 225px;
        height: auto;
        margin: auto auto 0; /* drawings sit at the bottom of the card */
    }



    /* Closing note */

    .polo-cnu__close {
        margin-top: var( --polo-cnu-gap );
        padding: clamp( 24px, 4vw, 48px );
        border-radius: 8px;
        background-color: var( --polo-black );
        color: #d6d8da;
    }

    .polo-cnu-page .polo-cnu__close p {
        max-width: 860px;
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
    }

    .polo-cnu__close strong {
        color: var( --polo-white );
    }

    .polo-cnu-page .polo-cnu__close .polo-cnu__close-polo {
        margin-top: 16px;
        color: var( --polo-white );
        font-family: var( --polo-font-gotham );
        font-size: 17px;
        font-weight: 700;
        line-height: 1.5;
    }

    .polo-cnu__more {
        margin-top: var( --polo-cnu-gap );
    }

    .polo-cnu-page .polo-cnu__more .polo-page-links {
        margin-top: 0;
    }



    @media ( max-width: 1024px ) {

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

    }

    @media ( max-width: 767px ) {

        .polo-cnu__intro {
            grid-template-columns: minmax( 0, 1fr );
        }

        .polo-cnu-page .polo-cnu__intro-image {
            max-width: 220px;
        }

        .polo-cnu__rule {
            grid-template-columns: auto minmax( 0, 1fr );
        }

        .polo-cnu-page .polo-cnu__rule-image {
            grid-column: 1 / -1;
            margin: 0 auto;
        }

        .polo-cnu-page .polo-cnu__tips {
            grid-template-columns: minmax( 0, 1fr );
        }

    }