/* ============================================================
   TEAM PAGE — team.css
   Page-specific styles. Uses global CSS variables.
   All new classes prefixed .tm-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.tm-page {
    max-width: 1280px;
    margin:    0 auto;
    padding:   calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
}

/* ── Hero ─────────────────────────────────────────────────── */
.tm-hero {
    margin-bottom: var(--sp-20);
}

.tm-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 7vw, 6.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    0.95;
    color:          #fff;
    margin-top:     var(--sp-5);
    margin-bottom:  var(--sp-8);
}

.tm-h1 em {
    font-style: normal;
    color:      var(--clr-green);
}

.tm-hero-sub {
    font-family: var(--font-body);
    font-size:   1.0625rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width:   680px;
    font-weight: 300;
}

/* ── Team grid ────────────────────────────────────────────── */
.tm-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-16) var(--sp-8);
}

@media (min-width: 700px) {
    .tm-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .tm-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Middle card stagger offset — matches reference */
@media (min-width: 1024px) {
    .tm-member--offset { margin-top: 3rem; }
}

/* ── Member card ──────────────────────────────────────────── */
.tm-member {
    cursor: default;
}

/* Image wrapper — 4:5 portrait */
.tm-img-wrap {
    position:      relative;
    aspect-ratio:  4/5;
    overflow:      hidden;
    margin-bottom: var(--sp-6);
    background:    linear-gradient(160deg, #141614 0%, #0e0e0e 60%, #111311 100%);
    border-radius: var(--r-lg);
}

/* Subtle diagonal texture on image bg */
.tm-img-wrap::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 24px,
        rgba(202,255,111,0.018) 24px,
        rgba(202,255,111,0.018) 25px
    );
    z-index: 0;
}

/* Lime green duotone overlay — appears on hover */
.tm-img-wrap::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(202,255,111,0.07);
    opacity:    0;
    z-index:    2;
    transition: opacity 0.5s var(--ease-out);
}

.tm-member:hover .tm-img-wrap::after { opacity: 1; }

/* Actual photo */
.tm-img-wrap img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: contain;   /* contain so transparent-bg images aren't cropped */
    object-position: center bottom;
    z-index:    1;
    opacity:    0.85;
    transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

.tm-member:hover .tm-img-wrap img {
    transform: scale(1.04);
    opacity:   1;
}

/* Placeholder (no image yet) */
.tm-img-placeholder {
    position:        absolute;
    inset:           0;
    z-index:         1;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    padding-bottom:  0;
}

.tm-img-placeholder svg {
    width:   65%;
    height:  auto;
    opacity: 0.12;
    transition: opacity 0.5s var(--ease-out);
}

.tm-member:hover .tm-img-placeholder svg { opacity: 0.18; }

/* Bottom gradient fade — makes text readable over photo */
.tm-img-fade {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     40%;
    background: linear-gradient(to top, rgba(14,14,14,0.7), transparent);
    z-index:    3;
}

/* ── Member info ──────────────────────────────────────────── */
.tm-member-info {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             var(--sp-4);
}

.tm-member-name {
    font-family:    var(--font-display);
    font-size:      clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          #fff;
    margin-bottom:  var(--sp-1);
    line-height:    1.2;
    transition:     color 0.3s;
}

.tm-member:hover .tm-member-name { color: var(--clr-green); }

.tm-member-role {
    font-family:    var(--font-display);
    font-size:      0.8125rem;
    font-weight:    600;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-3);
    display:        block;
}

.tm-member-bio {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.65;
    font-weight: 300;
}

/* Arrow icon */
.tm-member-arrow {
    flex-shrink: 0;
    width:       20px;
    height:      20px;
    color:       rgba(255,255,255,0.2);
    transition:  color 0.3s, transform 0.3s;
    margin-top:  2px;
}

.tm-member:hover .tm-member-arrow {
    color:     var(--clr-green);
    transform: translate(2px, -2px);
}

/* ── Partnership section ──────────────────────────────────── */
.tm-partner {
    margin-top: calc(var(--sp-20) * 2);
}

.tm-partner-card {
    background:    #111311;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-12) var(--sp-12);
    position:      relative;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    gap:           var(--sp-12);
}

@media (min-width: 768px) {
    .tm-partner-card {
        flex-direction: row;
        align-items:    center;
        justify-content: space-between;
        padding:        var(--sp-16) var(--sp-16);
    }
}

/* Decorative glow blob */
.tm-partner-card::before {
    content:       '';
    position:      absolute;
    right:         -80px;
    bottom:        -80px;
    width:         360px;
    height:        360px;
    background:    radial-gradient(circle, rgba(202,255,111,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tm-partner-body { max-width: 560px; position: relative; z-index: 1; }

.tm-partner-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 4vw, 3.5rem);
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          #fff;
    line-height:    1.05;
    margin-bottom:  var(--sp-5);
}

.tm-partner-h2 em {
    font-style: italic;
    color:      var(--clr-green);
}

.tm-partner-sub {
    font-family:   var(--font-body);
    font-size:     1rem;
    color:         rgba(255,255,255,0.42);
    line-height:   1.7;
    font-weight:   300;
    margin-bottom: var(--sp-8);
}

.tm-partner-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-3);
    background:      var(--clr-green);
    color:           #0e0e0e;
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     700;
    text-decoration: none;
    padding:         0.875rem 2rem;
    border-radius:   var(--r-pill);
    transition:      opacity 0.2s, box-shadow 0.2s;
    box-shadow:      0 6px 24px -4px rgba(202,255,111,0.25);
}

.tm-partner-cta:hover {
    opacity:    0.88;
    box-shadow: 0 10px 32px -4px rgba(202,255,111,0.35);
}

.tm-partner-cta svg {
    width:      18px;
    height:     18px;
    stroke:     #0e0e0e;
    transition: transform 0.3s var(--ease-out);
}

.tm-partner-cta:hover svg { transform: translateX(3px); }

/* Partnership perks list */
.tm-partner-perks {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-5);
    position:       relative;
    z-index:        1;
    flex-shrink:    0;
}

.tm-partner-perks li {
    display:        flex;
    align-items:    center;
    gap:            var(--sp-3);
    font-family:    var(--font-display);
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
}

.tm-partner-perks li::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--clr-green);
    flex-shrink:   0;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .tm-page         { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .tm-partner-card { padding: var(--sp-8) var(--sp-6); }
}