/* Team Grid – BW default, COLOR on hover (grow), FUN on 3D page-turn (rotateY) */
.team-grid {width: 100%; }
.tg-row { align-items: stretch; }

/* Remove all gutters/gaps, even if Bootstrap utilities are missing */
.tg-row { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.team-grid .tg-row > [class^="col"],
.team-grid .tg-row > [class*=" col"] { padding-left: 0 !important; padding-right: 0 !important; }

/* Square tiles */
.tg-item .tg-box{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;               /* perfect square */
    background: #000;                   /* dark for text tiles */
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    cursor: pointer;

    /* 3D context for page-turn effect */
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* The flipping inner wrapper */
.tg-flip{
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

/* FRONT/BACK faces */
.tg-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tg-face--back{ transform: rotateY(180deg); }

/* Images */
.tg-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease, transform .35s ease;
}
.tg-img--color,
.tg-img--fun { opacity: 0; }

/* Hover (not flipped): fade to COLOR + grow a touch */
.tg-person:hover:not(.is-flipped) .tg-face--front .tg-img--color { opacity: 1; }
.tg-person:hover:not(.is-flipped) .tg-face--front .tg-img--bw    { opacity: 0; }
.tg-person:hover:not(.is-flipped) .tg-face--front .tg-img        { transform: scale(1.06); }

/* Clicked (flipped): rotate Y like page turning + show FUN */
.tg-person.is-flipped .tg-flip          { transform: rotateY(180deg); }
.tg-person.is-flipped .tg-face--back .tg-img--fun { opacity: 1; }
.tg-person.is-flipped .tg-face--front .tg-img--bw,
.tg-person.is-flipped .tg-face--front .tg-img--color { opacity: 0; }

/* Person overlay (names/roles) — does not rotate */
.tg-meta{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    color: #fff;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
}
.tg-name{ font-weight: 600; letter-spacing: .04em; font-size: 1.1rem; margin-bottom:-5px; }
.tg-role{ opacity: .9; font-size: 1rem; }

/* Content tiles (text / CTA) – centered */
.tg-content .tg-box{ background: #0e0e10; color: #fff; }
.tg-content .tg-content-inner{
    margin: 0; padding: 20px;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100%;
    text-align: center;
}
.tg-content .tg-heading{
    margin: 0 0 .5rem; font-size:20px;font-weight: 800; line-height: 1.15; color:#fff; text-align:center;
}
.tg-copy{
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: .95rem;
    line-height: 1.5;
    max-width: 28ch;
}
.tg-content--cta .tg-copy{ margin: .5rem 0 1rem; }

/* Inverted CTA button */
.tg-btn{
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: none;
    text-decoration: none;
}
.tg-btn:hover,
.tg-btn:focus{
    background: transparent;
    color: #fff;
    border-color: #fff;
    outline: none;
}

/* Small screens */
@media (max-width: 575.98px){
    .team-grid { padding: 16px 0; }
}