/*!
 * B2 Team Members — Elementor widget "Team Members"
 * Figma: B2 STRUCTURAL → node 5313:1930
 *
 * A rule-separated listing of people: square portrait on the left, and on the
 * right a column that pins the name/role/link and bio to the top and the
 * qualifications to the bottom. The portrait sets the row height, so the
 * bottom block lands level with the foot of the photo the way the frame shows
 * — until a long bio outgrows it, at which point the row simply gets taller
 * and the photo stays square rather than stretching.
 */

.b2tm {
    /* Layout */
    --b2tm-media-w:      406px;
    --b2tm-media-ratio:  1 / 1;
    --b2tm-column-gap:   var(--cp-l, 32px);
    --b2tm-row-padding:  var(--cp-2xl, 64px);
    --b2tm-block-gap:    var(--cp-xl, 48px);
    --b2tm-name-gap:     var(--cp-3xs, 4px);
    --b2tm-name-w:       292px;

    /* Rule */
    --b2tm-rule-width:   1px;
    --b2tm-rule-color:   var(--navy-n75, #96a5b2);

    /* Colour */
    --b2tm-name-color:   var(--navy-n300, #002343);
    --b2tm-role-color:   var(--navy-n100, #6b7f92);
    --b2tm-bio-color:    var(--navy-n300, #002343);
    --b2tm-meta-color:   var(--navy-n100, #6b7f92);
    --b2tm-link-color:   var(--navy-n100, #6b7f92);
    --b2tm-link-hover:   var(--orange-o300, #ee4c01);

    --b2tm-speed:        260ms;

    width: 100%;
}

/* The frame rules *between* members; the leading and trailing rules are
   controls because a section that opens with one reads differently. */
.b2tm__row {
    display:               grid;
    grid-template-columns: var(--b2tm-media-w) minmax(0, 1fr);
    column-gap:            var(--b2tm-column-gap);
    row-gap:               var(--b2tm-block-gap);
    padding:               var(--b2tm-row-padding) 0;
    border-top:            var(--b2tm-rule-width) solid var(--b2tm-rule-color);
}

.b2tm__row:first-child { border-top: 0; }
.b2tm--open  .b2tm__row:first-child { border-top: var(--b2tm-rule-width) solid var(--b2tm-rule-color); }
.b2tm--close .b2tm__row:last-child  { border-bottom: var(--b2tm-rule-width) solid var(--b2tm-rule-color); }


/* Portrait
--------------------------------------------- */
.b2tm__media {
    align-self:   start;
    width:        100%;
    aspect-ratio: var(--b2tm-media-ratio);
    overflow:     hidden;
    background:   var(--concrete-c300, #ececec);
}

.b2tm__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}


/* Body — top block pinned up, qualifications pinned down
--------------------------------------------- */
.b2tm__body {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    gap:             var(--b2tm-block-gap);
    min-width:       0;
}

.b2tm__top {
    display:        flex;
    flex-direction: column;
    gap:            var(--b2tm-block-gap);
}

.b2tm__head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             var(--b2tm-column-gap);
}

.b2tm__ident {
    display:        flex;
    flex-direction: column;
    gap:            var(--b2tm-name-gap);
    max-width:      var(--b2tm-name-w);
    min-width:      0;
}

.b2tm .b2tm__name {
    margin:         0;
    color:          var(--b2tm-name-color);
    font-family:    var(--titleFont);
    font-size:      var(--heading-h4, 1.5rem);
    font-weight:    400;
    line-height:    var(--line-h4, 1.4);
    letter-spacing: var(--tracking-heading, 0.02em);
}

.b2tm__role {
    margin:         0;
    color:          var(--b2tm-role-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-md, 1.5);
    letter-spacing: var(--tracking-body, 0.02em);
}


/* LinkedIn — label plus the frame's arrow-up-right glyph
--------------------------------------------- */
.b2tm__link {
    display:         inline-flex;
    align-items:     center;
    flex:            0 0 auto;
    gap:             var(--cp-2xs, 8px);
    color:           var(--b2tm-link-color);
    font-family:     var(--bodyFont);
    font-size:       var(--body-body-md, 1.125rem);
    font-weight:     400;
    line-height:     var(--line-body-md, 1.5);
    letter-spacing:  var(--tracking-body, 0.02em);
    text-decoration: none;
    transition:      color var(--b2tm-speed) ease;
}

.b2tm__link:hover,
.b2tm__link:focus-visible { color: var(--b2tm-link-hover); }

.b2tm__link:focus-visible {
    outline:        2px solid var(--b2tm-link-hover);
    outline-offset: 4px;
}

/* Sized in em so the arrow tracks the label's font size wherever it is set. */
.b2tm__link svg {
    display: block;
    width:   0.72em;
    height:  0.72em;
    flex:    0 0 auto;
}


/* Bio and qualifications
--------------------------------------------- */
.b2tm__bio {
    color:          var(--b2tm-bio-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-md, 1.5);
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2tm__bio p { margin: 0 0 0.75em; }
.b2tm__bio p:last-child { margin-bottom: 0; }

.b2tm__quals {
    margin:         0;
    color:          var(--b2tm-meta-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-sm, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-sm, 1.4);
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2tm__quals dt,
.b2tm__quals dd { margin: 0; }


/* Responsive — the portrait column narrows, then the row folds
--------------------------------------------- */
@media all and (max-width: 1200px) {
    .b2tm { --b2tm-media-w: 300px; }
}

@media all and (max-width: 767px) {
    .b2tm {
        --b2tm-block-gap:   var(--cp-m, 20px);
        --b2tm-row-padding: var(--cp-xl, 48px);
    }

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

    .b2tm__media { max-width: 100%; }

    /* The label and the arrow keep company under a wrapped name. */
    .b2tm__head {
        flex-direction: column;
        gap:            var(--cp-s, 16px);
    }

    .b2tm__ident { max-width: none; }
}