/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    background: url('../assets/img/faces-hero-bg.png') center / cover no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100px;
    rotate: 180deg;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.hero__bottom {
    bottom: 40px;
}

/* Right-side darkening for the side-nav readability (real element — pseudos are taken) */
.hero__overlay {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 500px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.hero-faces__title {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    font-size: 150px;
    line-height: 80%;
    letter-spacing: -0.03em;
    color: #fff;
}

/* 100px gap between "Faces" and "of" */
.hero-faces__title-faces {
    margin-right: 100px;
}

/* small [ 100 ] badge, vertically centered against the title */
.hero-faces__badge {
    align-self: center;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    color: #fff;
}

.hero-faces__slogan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-weight: 500;
    font-size: 55px;
    line-height: 87%;
    letter-spacing: -0.03em;
    color: #fff;
}

/* "becomes" indented 105px from the right edge */
.hero-faces__slogan-text--offset {
    padding-right: 105px;
}

/* ==========================================================================
   Shared section building blocks (tweak once, adapt everywhere)
   ========================================================================== */

/* Gradient heading. Default: left-aligned, 60px.
   Add .section-title--center for the 65px centered variant. */
.section-title {
    font-weight: 500;
    font-size: 60px;
    line-height: 112%;
    letter-spacing: -0.03em;
    background: linear-gradient(123deg, #002944 0%, #4482a9 96.54%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title--center {
    text-align: center;
    font-size: 65px;
}

/* Standard section vertical padding (voices & cinema set their own) */
.section {
    padding: 130px 0;
}

/* ==========================================================================
   Voices
   ========================================================================== */
.voices {
    padding-top: 200px;
    padding-bottom: 130px;
}

.voices__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.voices__title {
    max-width: 750px;
    line-height: 110%;
}

/* Scattered wrapper — pulled up to overlap the top row */
.voices__bottom {
    display: flex;
    align-items: flex-start;
    margin-top: -150px;
    margin-bottom: 230px;
}

.voices__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.voices__col--left {
    gap: 87px;
}

.voices__col--right {
    gap: 37px;
}

/* --- card --- */
.voices-card__image {
    height: auto;
    margin-bottom: 30px;
    border-radius: 5px;
}

.voices-card__name,
.voices-card__desc {
    /* fill the image width without ever widening the card past it */
    width: 0;
    min-width: 100%;
}

.voices-card__name {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.03em;
    color: #17415e;
}

.voices-card__desc {
    font-weight: 300;
    font-size: 18px;
    line-height: 136%;
    letter-spacing: -0.03em;
    color: #17415e;
}

.voices-card--karipbek {
    margin-left: 158px;
}

.voices-card--marek {
    margin-left: 484px;
}

/* --- slider --- */
.voices-slider {
    position: relative;
}

.voices-slide img {
    display: block;
    width: 100%;
    height: auto;
    /* force one ratio for every slide so heights match regardless of the
       actual file size (some sources are full-size, some are 1×1 placeholders) */
    aspect-ratio: 904 / 608;
    object-fit: cover;
    border-radius: 5px;
}

.voices-slider__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s ease;
}

.voices-slider__button--prev {
    left: 15px;
}

.voices-slider__button--next {
    right: 15px;
}

.voices-slider__button--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.voices-slider__button--next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* ==========================================================================
   Artists
   ========================================================================== */
.artists__title {
    max-width: 750px;
    margin-left: 105px;
    margin-bottom: 100px;
    line-height: 110%;
}

/* Group 1: two left cards + one right, space-between */
.artists__trio {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 150px;
}

.artists__pair {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    margin-top: 130px;
}

/* Group 2: four cards in a row */
.artists__quad {
    display: flex;
    align-items: flex-start;
    gap: 35px;
    margin-bottom: 150px;
}

/* Enigma → gap before the next grid */
.artists-card--full {
    margin-bottom: 145px;
}

/* Group 3: grid of three, then the scattered block */
.artists__grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 125px;
}

.artists__scatter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 140px;
}

/* Roza + Baigali */
.artists__duo {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    margin-left: 205px;
}

/* Abdu + Renat in one row, pinned to the right edge */
.artists__right-row {
    position: relative;
    top: -110px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: stretch;
    gap: 70px;
}

/* Abdu Rozik — the left card, dropped down */
.artists__abdu {
    margin-top: 230px;
}

/* ==========================================================================
   Champions
   ========================================================================== */
.champions__title {
    max-width: 1100px;
    margin: 0 auto 150px;
}

/* Row of four (gap 20) */
.champions__row-1 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 200px;
}

/* Full-width feature card */
.champions__big {
    margin-bottom: 150px;
}

/* Row of four (gap 40) */
.champions__row-2 {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 150px;
}

/* Row spread edge-to-edge */
.champions__row-3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 250px;
}

/* ==========================================================================
   Queens
   ========================================================================== */
.queens__title {
    max-width: 1100px;
    margin: 0 auto 130px;
}

/* Slider of three cards */
.queens-slider {
    position: relative;
    margin-bottom: 225px;
}

/* Nav buttons centered on the image — `top` is set by JS to the real image
   centre (stays correct while the image scales / the text re-wraps). */
.queens-slider__button--prev {
    left: 15px;
}

.queens-slider__button--next {
    right: 15px;
}

.queens-slider__button--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.queens-slider__button--next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* ==========================================================================
   Borders
   ========================================================================== */
.borders__title {
    max-width: 630px;
    margin-bottom: 100px;
}

/* Two cards (gap 40) */
.borders__row-1 {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 115px;
}

/* Full-width feature card */
.borders__big {
    margin-bottom: 100px;
}

/* Two cards pinned to the right (gap 45) */
.borders__row-2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 45px;
    margin-bottom: 250px;
}

.borders__row-2 {
    margin-bottom: 100px;
}

.borders__row-2--left {
    justify-content: flex-start;
    margin-bottom: 250px;
}

/* ==========================================================================
   Cinema
   ========================================================================== */
.cinema {
    padding-top: 130px;
    padding-bottom: 200px;
}

.cinema__title {
    max-width: 700px;
    margin-bottom: 210px;
}

/* Three cards (gap 44) */
.cinema__row-1 {
    display: flex;
    align-items: flex-start;
    gap: 44px;
    margin-bottom: 125px;
}

/* Full-width feature card */
.cinema__big {
    margin-bottom: 100px;
}

/* Three cards spread edge-to-edge */
.cinema__row-2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}