/* Ko je ko u Academiji - reuses Home's tokens/hero (wrapper carries both
   "home-page" and "tim-page" classes), this file adds the card grid + bio
   modal. */

.tim-page .tim-section{padding-block:64px;}

.tim-page .tim-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:1000px){.tim-page .tim-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.tim-page .tim-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.tim-page .tim-grid{grid-template-columns:1fr;}}

.tim-page .tim-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  background:var(--card-bg); border:1px solid var(--line); border-radius:16px;
  padding:24px 18px 20px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tim-page .tim-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(19,42,58,.35); border-color:var(--sky);}
.tim-page .tim-photo{
  width:96px; height:96px; border-radius:50%; background-size:cover; background-position:center 15%;
  margin-bottom:14px; flex:none; box-shadow:0 0 0 4px var(--ground);
}
.tim-page .tim-photo.tim-fallback{
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:var(--font-display, 'Fraunces', serif); font-weight:600; font-size:1.84rem;
}
.tim-page .tim-name{font-family:var(--font-display, 'Fraunces', serif); font-weight:600; font-size:1.17rem; color:var(--ink);}
.tim-page .tim-role{font-size:0.943rem; color:var(--ink-soft); line-height:1.4; margin-top:2px;}
.tim-page .tim-more{margin-top:12px; font-size:0.92rem; font-weight:600; color:var(--teal-deep);}

/* BIO MODAL */
.tim-page .tim-modal{position:fixed; inset:0; z-index:1000; display:none;}
.tim-page .tim-modal.is-open{display:block;}
.tim-page .tim-modal-backdrop{position:absolute; inset:0; background:rgba(7,15,23,.6); backdrop-filter:blur(2px);}
.tim-page .tim-modal-box{
  position:relative; z-index:1; max-width:640px; width:calc(100% - 40px); margin:6vh auto 0; background:var(--card-bg);
  border-radius:18px; padding:32px 30px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  max-height:86vh; overflow-y:auto;
}
.tim-page .tim-modal-close{position:absolute; top:16px; right:16px; width:34px; height:34px; min-width:34px; max-width:34px; aspect-ratio:1; border-radius:50%; border:1px solid var(--line); background:var(--ground); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.tim-page .tim-modal-close svg{width:16px; height:16px; flex:none;}
.tim-page .tim-modal-close:hover{border-color:var(--teal); color:var(--teal);}
.tim-page .tim-modal-head{display:flex; align-items:center; gap:18px; margin-bottom:22px; padding-right:30px;}
.tim-page .tim-modal-photo{width:76px; height:76px; border-radius:50%; background-size:cover; background-position:center 15%; flex:none; box-shadow:0 0 0 4px var(--ground);}
.tim-page .tim-modal-head h3{font-size:1.49rem;}
.tim-page .tim-modal-head p{color:var(--ink-soft); margin-top:4px; font-size:1.058rem;}
.tim-page .tim-modal-bio p{margin:0 0 14px; color:var(--ink-soft); line-height:1.65; font-size:1.127rem;}
.tim-page .tim-modal-bio p:last-child{margin-bottom:0;}
.tim-page .tim-modal-bio em, .tim-page .tim-modal-bio i{color:var(--teal-deep); font-style:italic;}
.tim-page .tim-modal-bio strong{color:var(--ink);}
.tim-page .tim-modal-bio a{color:var(--teal-deep); font-weight:600;}
@media (max-width:600px){
  .tim-page .tim-modal-box{padding:26px 20px; margin-top:4vh;}
  .tim-page .tim-modal-head{gap:14px;}
  .tim-page .tim-modal-photo{width:60px; height:60px;}
}