/* ============================================
   SECTION: Community Advisory Board — Members
   A directory of member cards: full-width cards (photo +
   name on the left, bio on the right) alternating with pair
   rows (a tall member card + a decorative pink filler).
   ============================================ */

.cab-board {
    padding: 80px var(--section-side-padding) 100px;
    background: var(--color-white);
}

.cab-board__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

.cab-board__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: #484336;
    margin: 0 0 40px;
}

.cab-board__heading .accent-script {
    color: var(--color-primary);   /* pink */
}

/* ----- Rows ----- */
.cab-board__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cab-board__pair {
    display: flex;
    gap: 20px;
}
.cab-board__pair > * {
    flex: 1 1 0;
    min-width: 0;
}

/* ----- Shared card ----- */
.cab-card {
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    padding: 40px;
}

/* Tan frame behind the round-cornered photo */
.cab-card__frame {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.cab-card__frame::before {
    content: "";
    position: absolute;
    left: -15px;
    top: -11px;
    width: 144px;
    height: 140px;
    border: 5px solid #f3ead2;
    border-radius: 12px;
    z-index: 0;
}
.cab-card__frame img {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

.cab-card__name {
    font-family: var(--font-accent);   /* Borel */
    font-size: 32px;
    font-weight: var(--font-weight-normal);
    line-height: 40px;
    color: var(--color-primary);       /* pink #ea627e-ish */
    margin: 0;
}

.cab-card__cred {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    color: #3e2e2d;
}
.cab-card__cred--stacked {
    margin: 4px 0 0;
}

.cab-card__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cab-card__intro {
    font-size: 21px;
    font-weight: var(--font-weight-medium);
    line-height: 34px;
    color: var(--color-text-heading);
    margin: 0;
}

.cab-card__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cab-card__text p {
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Wide card (photo + name left, bio right) ----- */
.cab-card--wide {
    display: flex;
    gap: 56px;
}

.cab-card__aside {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 78px;
}

.cab-card--wide .cab-card__body {
    flex: 1 1 0;
    min-width: 0;
}

/* ----- Tall card (photo + name on top, bio below) ----- */
.cab-card--tall {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cab-card__head {
    display: flex;
    align-items: center;
    gap: 40px;
}

.cab-card__name-block {
    display: flex;
    flex-direction: column;
}

/* ----- Decorative pink filler ----- */
.cab-filler {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* White swirl bleeding across the box (behind the icon) */
.cab-filler__swirl {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../../../images/decorative/vector-282.8c2fbfcd08ab.png") no-repeat center / cover;
    pointer-events: none;
}

.cab-filler__icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 130px;
    height: auto;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .cab-board__pair {
        flex-direction: column;
    }
    /* Fillers are purely decorative — drop them when stacked */
    .cab-filler {
        display: none;
    }
    .cab-card--wide {
        flex-direction: column;
        gap: 28px;
    }
    .cab-card__aside {
        flex: initial;
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cab-board {
        padding: 56px var(--section-side-padding) 60px;
    }
    .cab-board__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .cab-card {
        padding: 28px;
    }
    .cab-card__head {
        gap: 24px;
    }
}

/* ----- Phones -----
   Matched to the 360px frame: the decorative panels stay (they are part of
   the mobile design, not just the desktop pair rows), and the portrait and
   type step down — the desktop sizes leave the cards very tall on a phone. */
@media (max-width: 600px) {
    /* Full-width decorative bands between the member cards. The height goes
       through flex-basis, not `height`: the pair sets `flex: 1 1 0` on its
       children, which is the main size once the row stacks into a column. */
    .cab-filler {
        display: flex;
        flex: 0 0 180px;
        min-height: 0;
    }

    .cab-card {
        padding: 24px;
    }

    /* Portrait: 80px in a 104-wide tan frame */
    .cab-card__frame,
    .cab-card__frame img {
        width: 80px;
        height: 80px;
    }

    .cab-card__frame::before {
        left: -12px;
        top: -10px;
        width: 104px;
        height: 101px;
        border-width: 4px;
    }

    .cab-card__head,
    .cab-card__aside {
        gap: 20px;
    }

    .cab-card__name {
        font-size: 24px;
        line-height: 28px;
    }

    .cab-card__intro {
        font-size: 18px;
        line-height: 28px;
    }

    .cab-card__text p {
        line-height: 24px;
    }
}