@charset "UTF-8";

/* =========================================================
   PAGE
========================================================= */

.player-page {
    min-height: 100vh;
    padding: clamp(50px, 3.47vw + 23.33px, 90px) 0 30px; color: var(--navy-2);
}

.player-wrap {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
}
.player-page section {margin: clamp(20px, 0.87vw + 13.33px, 30px) 0; }

/* =========================================================
   TITLE
========================================================= */

.player-title {
    position: relative;
    overflow: hidden; margin-bottom: clamp(20px, 1.74vw + 6.67px, 40px) !important;
}

.player-title__bg {
    position: absolute;
    inset: 0;
    background:
        url("/img/games/bg_neme.png")
        right center / auto 100% no-repeat;
}

.player-title__content {
    position: relative;
    display: flex;
    align-items: center; gap: 1rem;
}

.player-title__heading {
    position: relative;
    z-index: 2;
}

.player-title__heading > p {font-size: .75rem;letter-spacing: .25em;}

.player-title h1 {font-size: clamp(1.5rem, 2.778vw + .1667rem, 3.5rem); font-weight: 800;}

.player-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: clamp(20px, 1.74vw + 6.67px, 40px);;
}

.player-tags span {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    color: #fff;
    border-radius: 999px;
    background: #3730A3; font-weight: 600;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}

.player-tags span + span {
    color: #3730A3;
    background: #fff;
    border: 2px solid #3730A3;
}

.player-title__signature {max-width: 120px;position: absolute;left:250px;top:0}

.player-title__target {margin-left: auto;}


/* =========================================================
   PLAYER INFO
========================================================= */

.player-info {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    min-height: 255px;box-shadow: var(--shadow); border: 1px solid #F1F5F9; border-radius: 1.25rem; background-color: #fff; overflow: hidden;;
}

.player-info__photo {
    min-height: 255px;
    overflow: hidden;
    background: #f3f4f5;
}

.player-info__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top; aspect-ratio: 400/365;
}

.player-info__table {color: #62748E; display: flex; flex-direction: column;}

.player-info__table dl {
    display: flex;
    align-items: center;
    margin: 0;
    border-bottom: 1px solid #EFF0F4;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px); align-items: stretch; flex-grow: 1;
}

.player-info__table dl:last-child {
    border-bottom: 0;;
}

.player-info__table dt {background-color: #F8FAFC80; padding: 1rem 1.5rem; width: 120px; display: flex; align-items: center;}

.player-info__table dd {
    margin: 0;  padding: 1rem 1.5rem;  display: flex; align-items: center;
}

.player-info__table dd a {
    margin-right: 1rem;
    color: #3A5DDA;
    font-weight: 600;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.player-section {
    padding: 30px;
    border-radius: 10px;
    background: #fff;box-shadow: var(--shadow); border: 1px solid #F1F5F9; border-radius: 1.25rem; background-color: #fff; overflow: hidden;;
}

.player-section__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 30px;
}

.player-section__head h2 {
    color: #171B63; margin-bottom: 5px;
    font-size: clamp(18px, 0.17vw + 16.67px, 20px);
    font-weight: 600;
}

.player-section__head p {
    color: #62748E;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}

.section-icon {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}


/* =========================================================
   DATA / PDF
========================================================= */

.player-section--data {
    background: #F0F0FA;
}

.file-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem;
    border-radius: 9px;
    background: #fff; box-shadow: var(--shadow);
}

.file-box__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #52596A;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}

.file-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 0.87vw + 23.33px, 40px);;
    height: clamp(30px, 0.87vw + 23.33px, 40px);;
    color: #F44355;
    background: #FFF0F1;
    border-radius: .5rem;
    font-weight: 800;
}

.file-box__download {
    padding: .3rem .65rem;
    color: #fff !important;
    border-radius: 999px;
    background: #3323A7;display: flex; gap: 5px; align-items: center; font-size:12px
}
.file-box__download:hover {color:#fff}


/* =========================================================
   INTERVIEW
========================================================= */

.interview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.iframe-wrap {border-radius: 1.5rem; overflow: hidden;font-size: 0;}
.interview iframe {aspect-ratio: 530/600;width: 100%;height: 100%;}
.interview__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 530/300;
    background: #ddd; max-width: 530px;
}

.interview__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; object-position: center 30%
}

.video-play {
    position: absolute;
    left: 0; top: 0;width: 100%;height: 100%; background: url(/img/games/play.png) no-repeat 50% 50% / cover;
}


.interview__copy h3 {
    margin: 0 0 10px;
    color: #1D287C;
    font-size: clamp(20px, 1.39vw + 9.33px, 36px);
    font-weight: 600;
}

.interview__copy p {
    color: #7A8190;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}

.btn-interview {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    color: #fff !important;
    border-radius: .5rem;
    background: #3426A9;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}
.btn-interview:hover {color:#fff}
.btn-interview span {
    font-size: .8rem;
}


/* =========================================================
   PHOTOS
========================================================= */

.player-section--photos {
    padding: 30px 0 0;
}

.player-section--photos .player-section__head {
    padding: 0 30px;
}

.photo-list {
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

.photo-list figure {
    padding: 0;
    line-height: 0;
}
.photo-list figure~figure {margin-top: 1rem;}

.photo-list img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================================
   BACK
========================================================= */

.player-back {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
}

.player-back a {
    display: inline-flex;
    align-items: center; gap: 5px;;
    padding: .5rem 1rem;
    color: #38404D;
    border-radius: 999px; border: 1px solid #CAD5E2;
    background: #fff;
    font-size: clamp(13px, 0.09vw + 12.33px, 14px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .player-title,
    .player-info,
    .player-section {
        border-radius: 9px;
    }

    .player-info {
        grid-template-columns: 260px minmax(0, 1fr);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .player-page {
        padding: 0 0 3rem;
    }

    .player-title__heading {flex-grow: 1;}

    .player-title__content {
        /* min-height: 190px; */
        /* padding: 1.5rem 20px; */
        /* align-items: flex-end; */
    }

    .player-title__bg {
        background-position: 100% center;
        background-size: auto 100%;
        opacity: .9;
    }

    .player-title h1 {
        font-size: 2.4rem;
    }

    .player-title__signature {
        right: 0;
        top: 0;
        position: absolute;
    }

    .player-title__target {
        right: 0;
        bottom: 0; display: none;
        width: 20%; position: absolute;
    }

    .player-title__target:before {
        inset: 11px;
    }

    .player-title__target:after {
        inset: 22px;
    }

    .player-info {
        grid-template-columns: 40% 60%;
    }

    .player-info__photo {
        min-height: 210px;
    }

    .player-info__table dt {width: 100px;}

    .player-info__table dd a {
        margin-right: .5rem;
    }

    .player-section {
        margin-top: .5rem;
        /* padding: 1rem 20px; */
        /* border-radius: 0; */
    }

    .player-section__head {
        margin-bottom: 20px;
    }

    .player-section__head h2 {
        margin-bottom: 0;
    }

    .player-section__head p {
        /* font-size: .58rem; */
    }

    .file-box {
        /* padding: 0 .6rem; */
    }

    .interview {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .interview__copy {
        margin: 1rem 0 0;
    }

    .interview__copy h3 {
        /* font-size: 1.5rem; */
    }

    .interview__copy p {
        /* font-size: .68rem; */
    }

    .player-section--photos {
        padding-left: 0;
        padding-right: 0;
    }

    .player-section--photos .player-section__head {
        padding: 0 20px;
    }

    .player-back {
        padding: 0 20px;
    }
}


@media (max-width: 375px) {
    .player-info {grid-template-columns: 1fr;}
    .player-info__photo {height: 220px;}
    .player-info__photo img {object-fit: contain; object-position: center;}
}