/*
 * Partners — a global section, shown on any page that calls the partial.
 * Loaded on every page (see functions.php enqueue()).
 *
 * Reference: prod `elementor-element-2ac763a9` at 1920px.
 *
 * Geometry at 1920px:
 *   section 667 tall over a full-bleed photo, 100px padding
 *   a 900px column centred in the 1524 one
 *   heading → logos → flourish → call to action, 50px apart
 */

.partners {
    position: relative;
    padding:  100px 20px;
    overflow: hidden;
}

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.partners__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.partners__bg-image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Column ────────────────────────────────────────────────────────────── */
.partners__inner {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}

/* The content sits in a narrower column than the page's, centred. */
.partners__head,
.partners__carousel,
.partners__cta {
    width:     900px;
    max-width: 100%;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.partners__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.partners__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.partners__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.partners__deco {
    flex-shrink: 0;
    width:       20.34px;
    height:      21.29px;
}

.partners__deco--left {
    transform: scaleX(-1);
}

.partners__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Logos ─────────────────────────────────────────────────────────────── */
.carousel__track--logos {
    align-items: center;
    gap:         0;
}

.carousel__item--logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-basis:      225px;
    height:          86px;
    padding:         0 10px;
}

/* The link takes the box the logo had, so a linked logo sits exactly where a
   plain one would. */
.partners__link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
}

/* `contain`, not prod's `fill`: the five logos have five different aspect
   ratios and stretching each into the same box distorts them. */
.partners__logo {
    max-width:  100%;
    max-height: 100%;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* The backdrop is a photo, so the arrows need their own ground to sit on. */
.partners__carousel .carousel__arrow {
    background-color: rgba(15, 17, 20, .75);
}

/* ── Flourish ──────────────────────────────────────────────────────────── */
.partners__flourish {
    flex-shrink: 0;
    height:      40px;
}

/* ── Call to action ────────────────────────────────────────────────────── */
.partners__cta {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
    text-align:     center;
}

.partners__cta-title {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    500;
    font-size:      20px;
    line-height:    1.2;
    text-transform: uppercase;
    color:          var(--color-text);
}

/* The call-to-action button is the global one — see css/global/button.css.
   Nothing here needs to change it. */

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .partners {
        padding: 60px 20px;
    }

    .partners__inner {
        gap: 36px;
    }

    .partners__title {
        font-size: 32px;
    }

    .partners__cta-title {
        font-size: 18px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .partners {
        padding: 40px 16px;
    }

    .partners__inner {
        gap: 28px;
    }

    .partners__title {
        gap:       10px;
        font-size: 24px;
    }

    .partners__deco {
        width:  14px;
        height: 14.66px;
    }

    .carousel__item--logo {
        flex-basis: 160px;
        height:     64px;
    }

    /* Both axes, or the width attribute the icon helper wrote keeps its
       desktop value and the flourish comes out squashed. */
    .partners__flourish {
        width:  79.5px;
        height: 30px;
    }

    .partners__cta-title {
        font-size: 16px;
    }
}