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

    polo.gr Base Free page (inc/functions/polo-basefree.php): hero, steps,
    video, features. Header, links and page frame: css/polo.page.css.

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



    .polo-basefree {
        --polo-basefree-gap: clamp( 48px, 6vw, 96px );
    }

    .polo-basefree-page .polo-basefree__heading {
        margin: 0 0 24px;
        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;
    }

    /* Hero */

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

    .polo-basefree-page .polo-basefree__logo {
        display: block;
        width: 220px;
        height: auto;
        margin: 0 0 20px;
    }

    .polo-basefree-page .polo-basefree__lead {
        max-width: 480px;
        margin: 0;
        color: #2b2f33;
        font-size: 18px;
        line-height: 1.6;
    }

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

    .polo-basefree__specs li {
        margin: 0;
        padding: 10px 16px;
        border-radius: 999px;
        background-color: var( --polo-page-soft );
        color: #45494d;
        font-size: 14px;
    }

    .polo-basefree__specs strong {
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
    }

    .polo-basefree__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
    }

    /* .entry-content in the selector: Storefront underlines every link of a post (.hentry .entry-content a). */
    .polo-basefree-page .entry-content .polo-basefree__button {
        display: inline-flex;
        align-items: center;
        padding: 14px 26px;
        border: 2px solid var( --polo-black );
        border-radius: 999px;
        background-color: var( --polo-black );
        color: var( --polo-white );
        font-family: var( --polo-font-gotham );
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: background-color 0.2s var( --polo-ease ), border-color 0.2s var( --polo-ease ), color 0.2s var( --polo-ease );
    }

    .polo-basefree-page .entry-content .polo-basefree__button:hover,
    .polo-basefree-page .entry-content .polo-basefree__button:focus-visible {
        border-color: var( --polo-red );
        background-color: var( --polo-red );
        color: var( --polo-white );
    }

    .polo-basefree-page .entry-content .polo-basefree__button--ghost {
        background-color: transparent;
        color: var( --polo-black );
    }

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

    .polo-basefree__views li {
        margin: 0;
        overflow: hidden;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: inset 0 0 0 1px var( --polo-line );
    }

    .polo-basefree-page .polo-basefree__views img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin: 0;
        object-fit: contain;
    }



    /* Steps */

    .polo-basefree__steps {
        margin-top: var( --polo-basefree-gap );
        padding: clamp( 28px, 4vw, 56px );
        border-radius: 8px;
        background-color: var( --polo-page-soft );
    }

    .polo-basefree-page .polo-basefree__step-list {
        display: grid;
        grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: polo-step;
    }

    .polo-basefree__step {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 16px;
        border-radius: 8px;
        background-color: var( --polo-white );
        counter-increment: polo-step;
    }

    .polo-basefree-page .polo-basefree__step img {
        display: block;
        width: 100%;
        max-width: 200px;
        height: auto;
        margin: 0 auto 12px;
    }

    .polo-basefree-page .polo-basefree__step p {
        margin: 0;
        color: #2b2f33;
        font-size: 14px;
        line-height: 1.55;
    }

    .polo-basefree__step p::before {
        content: counter( polo-step ) ". ";
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-weight: 700;
    }



    /* Video */

    .polo-basefree__video {
        display: grid;
        grid-template-columns: minmax( 0, 4fr ) minmax( 0, 8fr );
        gap: clamp( 24px, 4vw, 64px );
        align-items: center;
        margin-top: var( --polo-basefree-gap );
    }

    .polo-basefree-page .polo-basefree__video-text p {
        margin: 0;
        color: #45494d;
        font-size: 16px;
        line-height: 1.6;
    }

    /* Features */

    .polo-basefree__features {
        margin-top: var( --polo-basefree-gap );
    }

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

    .polo-basefree__feature {
        margin: 0;
        padding: 24px;
        border: 1px solid var( --polo-line );
        border-radius: 8px;
        text-align: center;
    }

    .polo-basefree-page .polo-basefree__feature img {
        display: block;
        width: 120px;
        height: 120px;
        margin: 0 auto 16px;
        border-radius: 50%;
        object-fit: cover;
    }

    .polo-basefree-page .polo-basefree__feature h3 {
        margin: 0 0 8px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.3;
        text-align: center;
        text-transform: none;
    }

    .polo-basefree-page .polo-basefree__feature p {
        margin: 0;
        color: #45494d;
        font-size: 14px;
        line-height: 1.55;
    }



    /* Links */

    .polo-basefree__more {
        margin-top: var( --polo-basefree-gap );
    }

    .polo-basefree-page .polo-basefree__more .polo-page-links {
        margin-top: 0;
    }



    /* Tablet */

    @media ( max-width: 1024px ) {

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

        .polo-basefree-page .polo-basefree__step-list {
            grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
        }

        .polo-basefree-page .polo-basefree__feature-grid {
            grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
        }

    }



    /* Phones */

    @media ( max-width: 767px ) {

        .polo-basefree-page .polo-basefree__step-list {
            grid-template-columns: minmax( 0, 1fr );
        }

        .polo-basefree__step {
            flex-direction: row;
            align-items: center;
            gap: 14px;
        }

        .polo-basefree-page .polo-basefree__step img {
            flex: 0 0 96px;
            width: 96px;
            margin: 0;
        }

        .polo-basefree-page .polo-basefree__feature-grid {
            grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
            gap: 10px;
        }

        .polo-basefree__feature {
            padding: 16px 12px;
        }

        .polo-basefree-page .polo-basefree__feature img {
            width: 88px;
            height: 88px;
        }

        .polo-basefree-page .polo-basefree__feature h3 {
            font-size: 14px;
        }

        .polo-basefree-page .polo-basefree__feature p {
            font-size: 13px;
        }

    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-basefree *,
        .polo-basefree *::before {
            transition: none !important;
        }

    }