/* ==========================================================================
   The team page: a card for every member, a picture or a placeholder until
   one is added, and each department's name set vertically down its side.
   To add a photo, see assets/js/team.js.
   ========================================================================== */

.tm h2 { font: clamp(36px, 4vw, 54px)/1.12 var(--serif); color: var(--navy); margin-bottom: 30px; }

/* Head */
.tm-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 70px); align-items: end; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(24px, 4vw, 48px); }
.tm-hero h1 { font: clamp(64px, 8vw, 120px)/.95 var(--serif); letter-spacing: -2px; color: var(--navy); }
.tm-hero p { margin-top: 24px; font-size: 18px; line-height: 1.7; max-width: 26em; }
.tm-hero__pics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: end; }
.tm-photo { margin: 0; overflow: hidden; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; }
.tm-photo--a { aspect-ratio: 4 / 3; }
.tm-photo--b { aspect-ratio: 3 / 4; }

/* Cards */
.tm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; }
.tm-grid--core { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.tm-grid > li:not(.tm-card) { display: contents; }
.tm-card { position: relative; display: block; color: inherit; }
.tm-pic { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #e8ecf2; }
.tm-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-init { position: relative; z-index: 1; font: clamp(28px, 2.4vw, 40px)/1 var(--serif); color: rgb(23 42 66 / .55); }
/* Placeholders take the logo's bars, faintly, behind the initials. */
.tm-pic:not(:has(img))::before {
  content: ""; position: absolute; inset: auto 14% 9% 14%; height: 40%;
  background: currentColor;
  clip-path: polygon(0 45%, 18% 30%, 18% 100%, 0 100%, 0 45%, 27% 22%, 45% 12%, 45% 100%, 27% 100%, 27% 22%, 55% 36%, 73% 26%, 73% 100%, 55% 100%, 55% 36%, 82% 14%, 100% 0, 100% 100%, 82% 100%, 82% 14%);
  opacity: .1; color: var(--navy); transition: opacity 400ms, transform 500ms cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 100%;
}
.tm-tone-0 { background: #e6ebf4; }
.tm-tone-1 { background: #eeeae3; }
.tm-tone-2 { background: #e3e8ef; }
.tm-tone-3 { background: #f1e7e8; }
.tm-name { display: block; margin-top: 12px; font: 19px/1.2 var(--serif); color: var(--navy); transition: color 250ms; }
.tm-card--big .tm-name { font-size: clamp(22px, 1.8vw, 28px); }
.tm-role { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.tm-card--head .tm-role { color: var(--maroon); font-weight: 600; }
.tm-card--big .tm-role { font-size: 15px; }
a.tm-card:hover .tm-name, li.tm-card:hover .tm-name { color: var(--bold-red, #D7263D); }
@media (prefers-reduced-motion: no-preference) {
  .tm-card:hover .tm-pic:not(:has(img))::before { opacity: .22; transform: scaleY(1.12); }
}

/* Departments: the name set vertically down the side, reading upwards. */
.tm-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tm-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); font-size: 15px; color: var(--navy); transition: background-color 200ms, border-color 200ms, color 200ms, transform 200ms; }
.tm-nav a:hover { border-color: var(--navy); }
.tm-nav a:active { transform: scale(.97); }
.tm-dept { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); padding-top: clamp(40px, 5vw, 64px); margin-top: clamp(16px, 2vw, 28px); border-top: 1px solid var(--line); }
.tm-dept--core { border-top: 0; margin-top: 0; }
.tm .tm-rail {
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: start; position: sticky; top: 130px;
  margin: 0; font: clamp(36px, 3.6vw, 58px)/1 var(--serif); letter-spacing: -.5px; color: var(--navy); white-space: nowrap;
}
.tm-dept:hover .tm-rail { color: var(--bold-blue, #2F4FA8); }
.tm .tm-rail { transition: color 300ms; }
.tm-dept__desc { margin-bottom: 22px; font-size: 16px; line-height: 1.6; max-width: 40em; }
.tm-dept__desc span { display: block; margin-top: 6px; color: var(--navy); font-weight: 600; }

@media (max-width: 1100px) { .tm-grid, .tm-grid--core { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tm-hero { grid-template-columns: 1fr; } .tm-grid, .tm-grid--core { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tm-grid, .tm-grid--core { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .tm .tm-rail { font-size: 30px; top: 110px; }
  .tm-dept { column-gap: 14px; }
  .tm-name { font-size: 17px; }
  .tm-card--big .tm-name { font-size: 20px; }
  .tm-hero h1 { font-size: 64px; }
}

/* Give the department index comfortable separation and wrapping. */
.tm #departments-title{margin-bottom:32px}
.tm .tm-nav{gap:14px 16px;margin:0 0 40px;padding:0;line-height:1.5}
.tm .tm-nav a{padding:12px 20px;min-height:48px;line-height:1.5;white-space:normal}
@media(max-width:600px){.tm .tm-nav{gap:12px;margin-bottom:32px}.tm .tm-nav a{padding:10px 14px}}

/* A full-width department directory instead of uneven wrapped chips. */
.tm .tm-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--line)}
.tm .tm-nav a{display:flex;justify-content:space-between;gap:16px;min-height:64px;padding:18px 4px;border:0;border-bottom:1px solid var(--line);font-size:17px;background:transparent}
.tm .tm-nav a::after{content:"↓";color:var(--maroon);flex-shrink:0}
.tm .tm-nav a:last-child:nth-child(odd){grid-column:1/-1}
.tm .tm-nav a:hover{color:var(--maroon);background:var(--cream)}
.tm .tm-nav a:focus-visible{outline:2px solid var(--maroon);outline-offset:3px}
@media(max-width:600px){.tm .tm-nav{grid-template-columns:1fr;gap:0}.tm .tm-nav a{font-size:16px;min-height:56px;padding:14px 4px}}

/* Alumni logo cluster uses the same organisation assets as the homepage. */
.tm .alumni-achievement{border-top:1px solid var(--line);background:#f6f8fb;padding-block:70px 80px}
.tm .alumni-achievement h2{text-align:center;margin-bottom:45px;font-size:clamp(36px,4vw,54px)}
.alumni-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 32px;list-style:none;margin:0;padding:0}
.alumni-logos li{display:grid;place-items:center;min-width:0;min-height:110px}
.alumni-logo{display:block;width:100%;max-width:160px;height:75px;background:#123052;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
@media(min-width:1001px){.alumni-logos{grid-template-columns:repeat(12,minmax(0,1fr))}.alumni-logos li{grid-column:span 2}.alumni-logos li:nth-child(13){grid-column:2/span 2}}
@media(max-width:1000px){.alumni-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media(max-width:600px){.tm .alumni-achievement{padding-block:45px}.alumni-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}.alumni-logos li{min-height:90px}.alumni-logo{height:60px}.alumni-logos li:last-child{grid-column:1/-1}.tm .alumni-achievement h2{margin-bottom:30px}}

/* No initials or decorations in cards awaiting a photograph. */
.tm-pic:not(:has(img))::before{content:none}

/* Core portrait framing from the approved reference. */
.tm-grid--core > li:not(.tm-card){display:contents}
#core .tm-pic img{object-position:var(--focus,50% 30%);transform:scale(var(--zoom,1));transform-origin:var(--focus,50% 30%)}
#core .tm-pic[data-photo="annika-khara"]{--focus:100% 0%}
#core .tm-pic[data-photo="aagastya-jaipuria"]{--focus:45.5% 59.6%;--zoom:2.1}
#core .tm-pic[data-photo="ushnish-bhattacharya"]{--focus:0% 46.9%;--zoom:1.8}
#core .tm-pic[data-photo="keshav-jalan"]{--focus:70.3% 99.5%;--zoom:1.43}
#core .tm-pic[data-photo="sanath-sharda"]{--focus:38.6% 54%;--zoom:1.2}