/* Mentor cards, record sleeves, directory grid. */
/* mentor cards: equal height per row, meta line and price row pinned to the bottom, badge line always reserved */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:24px;border-left:0;border-top:0;padding:1px 0 0 1px}
.mcard{border-right:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);background:var(--paper);display:grid;grid-template-rows:auto 1fr auto;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;border:1px solid var(--hair-strong)}
.mcard .portrait{aspect-ratio:16/10;background:var(--accent);position:relative;overflow:hidden;isolation:isolate}
.mcard .badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:var(--fs-micro);background:var(--on-accent);color:var(--accent);padding:3px 8px;z-index:3}
.fav{position:absolute;background:transparent;border:0;color:var(--on-accent);line-height:1;z-index:3;width:44px;height:44px;right:4px;top:2px;padding:0;display:grid;place-items:center;font-size:var(--fs-h4);cursor:pointer}
.mcard .body{padding:18px;align-content:start;display:flex;flex-direction:column;gap:9px}
.mcard h3{font-size:var(--fs-h3)}
.mcard .foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.mcard .foot div{padding:10px 12px;border-right:1px solid var(--hair);font-size:var(--fs-micro);font-family:var(--mono);text-transform:uppercase;display:flex;flex-direction:column;justify-content:space-between;gap:4px;line-height:1.3}
.mcard .foot div:last-child{border-right:0}
.mcard .foot b{display:block;font-weight:500;text-transform:none;margin-top:auto;font-size:var(--fs-body)}
@media (hover:hover){
  .mcard:hover{transform:translateY(-4px);box-shadow:8px 10px 0 var(--on-accent);position:relative;z-index:2}
  .mcard:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
}
/* record sleeves */
.sleeve-wrap{position:absolute;inset:0;display:grid;place-items:center}
.sleeve{position:relative;z-index:2;height:78%;aspect-ratio:1;background:var(--paper);border:1px solid var(--on-accent);display:grid;align-content:space-between;padding:6% 7%;color:var(--ink);transform:translateX(-18%);box-shadow:4px 4px 0 rgba(21,20,14,.15)}
.sleeve b{font-size:clamp(18px,1.8vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1}
.sleeve .mono{letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-micro)}
.sleeve .sl-city{opacity:.6}
.record{position:absolute;z-index:1;height:74%;aspect-ratio:1;border-radius:var(--r-round);background:repeating-radial-gradient(circle,#1b1a14 0 2px,#26251d 2px 3px);display:grid;place-items:center;transform:translateX(12%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rlabel{width:36%;aspect-ratio:1;border-radius:var(--r-round);background:var(--accent);border:1px solid var(--on-accent);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--on-accent);position:relative}
.rlabel::after{content:"";position:absolute;width:6px;height:6px;border-radius:var(--r-round);background:var(--ground);border:1px solid var(--on-accent)}
.rlabel span{transform:translateY(-10px)}
.sleeve-hero{position:relative;aspect-ratio:16/9;width:100%}
.sleeve-hero .sleeve{height:88%}
.sleeve-hero .record{height:84%;inset:0;margin:auto}
/* sleeve with an artist photo as the cover */
.sleeve.photo{padding:0;overflow:hidden;background:var(--on-accent);display:block;position:relative}
.sleeve.photo img{object-fit:cover;display:block;filter:grayscale(.15) contrast(1.05);position:absolute;inset:0;width:100%;height:100%}
.sleeve.photo .sl-tag{position:absolute;left:0;right:0;bottom:0;background:var(--accent);color:var(--on-accent);padding:4px 8px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-micro)}
/* mentor card: the save button sits beside the link, not inside it (valid HTML, one tab stop each) */
/* lead: every card fills its grid row, so the pinned meta (badges, answers line, prices) lines up across the row */
.mcard-wrap{position:relative;margin:-1px 0 0 -1px;display:flex}
.mcard-wrap > .mcard{height:100%;flex:1;display:flex;flex-direction:column}
@media (max-width:600px){
  .mgrid{grid-template-columns:1fr}
}
@media (hover:hover){
  .mcard:hover .record{transform:translateX(38%) rotate(200deg);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
}
.mgrid > .empty{border:1px solid var(--hair-strong);margin:-1px 0 0 -1px;display:grid;gap:12px;justify-items:start;padding:24px}
.mcard .mc-meta{margin-top:auto;display:grid;gap:9px}
.mcard .mc-badges{align-items:center;height:24px;min-height:24px;overflow:hidden;flex-wrap:nowrap}
@media (max-width:600px){
  /* phone: a single card per row, so no reserved badge space */
  .mcard .mc-badges:empty{display:none}
  .mcard .mc-track{min-height:0}
}
.mcard .mc-track{min-height:2.6em;display:flex;align-items:flex-end;flex-wrap:wrap;align-content:flex-end;column-gap:.3em}
.mcard-wrap > .mcard > .body{flex:1}
/* M-25: mentor card. Name once (not on the sleeve), readable sleeve text, 44px save button */
.mcard .sleeve b{display:none}
.mcard .sleeve{align-content:space-between}
/* M-17: directory result count */
.m-count{font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:400;margin-top:18px;line-height:1.3}
.m-count + .mgrid{margin-top:10px}
@media (max-width:600px){
  /* M-19: shorter home on phones. Mentors scroll sideways; format cards show name, price and one line */
  .mgrid.mgrid-home{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px var(--gutter-r) 8px 1px;margin-right:calc(-1 * var(--gutter-r));overscroll-behavior-x:contain;scrollbar-width:none}
  .mgrid.mgrid-home::-webkit-scrollbar{display:none}
  .mgrid.mgrid-home > .mcard-wrap{scroll-snap-align:start;margin:0}
  .mgrid.mgrid-home > .empty{grid-column:auto}
}
.profile .sleeve-hero{max-width:360px}
@media (max-width:960px){
  .profile .sleeve-hero{max-width:260px}
}