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

    polo.gr about page (inc/functions/polo-about.php): key facts, story,
    black band, logos through the years, links. Header, links and page
    frame: css/polo.page.css.

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



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

    .polo-about-page .polo-about__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;
    }



    /* Key facts */

    .polo-about-page .polo-about__facts {
        display: grid;
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
        margin: 0;
        padding: 0;
        border-top: 1px solid var( --polo-black );
        list-style: none;
    }

    .polo-about__fact {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 28px 28px 8px 0;
    }

    .polo-about__fact + .polo-about__fact {
        padding-left: 28px;
        border-left: 1px solid var( --polo-line );
    }

    .polo-about__fact-big {
        color: var( --polo-red );
        font-family: var( --polo-font-zona );
        font-size: clamp( 36px, 4.2vw, 60px );
        font-weight: 800;
        line-height: 1;
        text-transform: uppercase;
    }

    .polo-about__fact-text {
        max-width: 320px;
        color: #45494d;
        font-size: 15px;
        line-height: 1.5;
    }



    /* Story */

    .polo-about__story {
        margin-top: var( --polo-about-gap );
    }

    .polo-about__columns {
        display: grid;
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        gap: clamp( 24px, 4vw, 64px );
    }

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

    .polo-about-page .polo-about__columns a {
        color: var( --polo-black );
        text-decoration: underline;
        text-decoration-color: var( --polo-red );
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .polo-about-page .polo-about__columns a:hover,
    .polo-about-page .polo-about__columns a:focus-visible {
        color: var( --polo-red );
    }



    /* Black band */

    .polo-about__band {
        margin-top: var( --polo-about-gap );
        padding: clamp( 40px, 6vw, 88px ) clamp( 24px, 6vw, 96px );
        border-radius: 8px;
        background-color: var( --polo-black );
        color: var( --polo-white );
        text-align: center;
    }

    .polo-about-page .polo-about__band-kicker {
        margin: 0 0 14px;
        color: var( --polo-gold );
        font-family: var( --polo-font-gotham );
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .polo-about-page .polo-about__band-text {
        max-width: 760px;
        margin: 0 auto;
        color: #d6d8da;
        font-size: 17px;
        line-height: 1.7;
    }

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

    .polo-about-page .polo-about__band-title {
        margin: clamp( 24px, 3vw, 40px ) 0 0;
        color: var( --polo-white );
        font-family: var( --polo-font-zona );
        font-size: clamp( 32px, 5.4vw, 78px );
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.02;
        text-align: center;
        text-transform: uppercase;
    }



    /* Logos */

    .polo-about__logos {
        margin-top: var( --polo-about-gap );
    }

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

    .polo-about__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 140px;
        margin: 0;
        padding: 20px;
        border: 1px solid var( --polo-line );
        border-radius: 8px;
        background-color: var( --polo-white );
    }

    .polo-about-page .polo-about__logo img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 80px;
        margin: 0;
        border-radius: 0;
    }



    /* Links */

    .polo-about__more {
        margin-top: var( --polo-about-gap );
    }

    .polo-about-page .polo-about__more .polo-page-links {
        margin-top: 0;
    }



    /* Tablet */

    @media ( max-width: 1024px ) {

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

    }



    /* Phones: one column */

    @media ( max-width: 767px ) {

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

        .polo-about__fact,
        .polo-about__fact + .polo-about__fact {
            padding: 20px 0;
            border-left: 0;
        }

        .polo-about__fact + .polo-about__fact {
            border-top: 1px solid var( --polo-line );
        }

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

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

        .polo-about__logo {
            min-height: 112px;
            padding: 16px;
        }

    }