/* Team — classes/widgets/Team/team.php
   vw on the 1440 canvas like hero.css; px from 1024 down.
   The Columns control writes --tm-cols-set, never --tm-cols: Elementor's
   selector carries two classes and would outrank the breakpoints below. */

.tm {
    --tm-bg: #ffffff;
    --tm-ink: #16293a;
    --tm-body: #5a6880;
    --tm-card: #ffffff;
    --tm-card-border: #e6e8ee;
    --tm-card-border-w: 1px;
    --tm-name: #16293a;
    --tm-role: #C9A961;
    --tm-bio: #5a6880;
    --tm-btn-bg: #e8b64a;
    --tm-btn-ink: #16293a;
    --tm-cols: var(--tm-cols-set, 3);
    --tm-ratio: 1 / 1;
    --tm-pos: center top;
    --tm-zoom: 1.04;
    --tm-lift: 4px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 5.56vw 80px;
    background: var(--tm-bg);
}

.tm *,
.tm *::before,
.tm *::after {
    box-sizing: border-box;
}

/* the wash over a background photo; transparent until the Overlay control
   gives it a colour, so it costs nothing when no image is set */
.tm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--tm-overlay, transparent);
    pointer-events: none;
}

.tm__head,
.tm__grid,
.tm__actions {
    position: relative;
    z-index: 1;
}

.tm__head {
    margin: 0 auto 3.9vw;
    text-align: center;
}

.tm__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    margin: 0 0 1.1vw;
}

.tm__eyebrow-dash {
    flex: 0 0 auto;
    width: 1.75vw;
    height: max(2px, .14vw);
    background: var(--tm-ink);
}

.tm__eyebrow-text {
    font-size: max(12px, .97vw);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-ink);
}

.tm__title {
    max-width: 66vw;
    margin: 0 auto;
    font-size: max(32px, 3.5vw);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.tm__lead {
    max-width: 42vw;
    margin: 1.2vw auto 0;
    font-size: max(15px, 1.25vw);
    line-height: 1.55;
    color: var(--tm-body);
}

.tm__lead p {
    margin: 0 0 1em;
}

.tm__lead p:last-child {
    margin-bottom: 0;
}

.tm--head-left .tm__head {
    text-align: left;
}

.tm--head-left .tm__eyebrow {
    justify-content: flex-start;
}

.tm--head-left .tm__title,
.tm--head-left .tm__lead {
    margin-inline: 0;
}

.tm__grid {
    display: grid;
    grid-template-columns: repeat(var(--tm-cols), minmax(0, 1fr));
    align-items: var(--tm-align, stretch);
    gap: 1.95vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm__member {
    display: flex;
}

.tm__card {
    /* the stretched name link is positioned against this */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1.3vw;
    border: var(--tm-card-border-w) solid var(--tm-card-border);
    border-radius: 1.25vw;
    background: var(--tm-card);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

.tm__card:hover {
    transform: translateY(calc(var(--tm-lift) * -1));
}

.tm__photo {
    /* Natural sets this to auto, and the img's own height then decides the box */
    aspect-ratio: var(--tm-ratio);
    overflow: hidden;
    /* !important to clear the theme's own figure margins; the gap therefore has
       to come through a variable, or it would also outrank the Spacing Below
       control and the breakpoints below */
    margin: 0 0 var(--tm-photo-gap, 1.5vw) !important;
    border-radius: .55vw;
}

.tm__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tm-pos);
    transition: transform .45s ease, filter .45s ease;
}

.tm__card:hover .tm__photo img {
    transform: scale(var(--tm-zoom));
}

.tm--gray .tm__photo img {
    filter: grayscale(1);
}

.tm--gray .tm__card:hover .tm__photo img {
    filter: grayscale(0);
}

.tm__name {
    margin: 0 0 .35vw;
    font-size: max(18px, 1.74vw);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tm-name);
}

.tm__name a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

/* the name stays the only link; here it is stretched over the whole card */
.tm--cover .tm__name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tm__role {
    margin: 0 0 .7vw;
    font-size: max(11px, .94vw);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tm-role);
}

.tm__bio {
    margin: 0;
    font-size: max(13px, 1.15vw);
    line-height: 1.55;
    color: var(--tm-bio);
}

.tm--text-center .tm__card {
    text-align: center;
}

.tm__actions {
    display: flex;
    justify-content: center;
    margin-top: 3vw;
}

.tm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7vw;
    padding: 1.15vw 2.2vw;
    border: 0;
    border-radius: .5vw;
    background: var(--tm-btn-bg);
    font-size: max(15px, 1.35vw);
    font-weight: 600;
    line-height: 1;
    color: var(--tm-btn-ink);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.tm__btn:hover,
.tm__btn:focus {
    background: #16293a;
    color: #fff;
    transform: translateY(-2px);
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .tm--animated .tm__eyebrow,
    .tm--animated .tm__title,
    .tm--animated .tm__lead,
    .tm--animated .tm__member {
        animation: tm-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .tm--animated .tm__eyebrow { animation-delay: .08s; }
    .tm--animated .tm__title { animation-delay: .16s; }
    .tm--animated .tm__lead { animation-delay: .24s; }
    .tm--animated .tm__member:nth-child(1) { animation-delay: .32s; }
    .tm--animated .tm__member:nth-child(2) { animation-delay: .40s; }
    .tm--animated .tm__member:nth-child(3) { animation-delay: .48s; }
    .tm--animated .tm__member:nth-child(4) { animation-delay: .56s; }
    .tm--animated .tm__member:nth-child(n+5) { animation-delay: .64s; }
}

@keyframes tm-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

    .tm {
        --tm-cols: var(--tm-cols-tab, 2);
        --tm-photo-gap: 18px;
        padding: 56px 32px;
    }

    .tm__head {
        margin-bottom: 40px;
    }

    .tm__eyebrow {
        gap: 10px;
        margin-bottom: 12px;
    }

    .tm__eyebrow-dash {
        width: 24px;
    }

    .tm__eyebrow-text {
        font-size: 13px;
    }

    .tm__title {
        max-width: none;
        font-size: 38px;
    }

    .tm__lead {
        max-width: 52ch;
        margin-top: 14px;
        font-size: 17px;
    }

    .tm__grid {
        gap: 22px;
    }

    .tm__card {
        padding: 16px;
        border-radius: 16px;
    }

    .tm__photo {
        border-radius: 8px;
    }

    .tm__name {
        margin-bottom: 5px;
        font-size: 22px;
    }

    .tm__role {
        margin-bottom: 9px;
        font-size: 12px;
    }

    .tm__bio {
        font-size: 15px;
    }

    .tm__actions {
        margin-top: 32px;
    }

    .tm__btn {
        gap: 8px;
        padding: 16px 26px;
        border-radius: 8px;
        font-size: 17px;
    }
}

@media (max-width: 600px) {

    .tm {
        --tm-cols: var(--tm-cols-mob, 1);
        --tm-photo-gap: 16px;
        padding: 40px 20px;
    }

    .tm__head {
        margin-bottom: 30px;
    }

    .tm__title {
        font-size: 30px;
    }

    .tm__lead {
        font-size: 16px;
    }

    .tm__grid {
        gap: 18px;
    }

    .tm__card {
        padding: 14px;
    }

    .tm__name {
        font-size: 20px;
    }

    .tm__bio {
        font-size: 15px;
    }

    .tm__actions {
        display: block;
    }

    .tm__btn {
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
    }
}