/* =====================================================================
   STUDENTS INDEX — Patina system (loads after ../css/main.css)
   Same dark style as home / Works. Its only signature is a quiet
   verdigris-green accent (the patina side of the palette) in place of
   rust, so the section feels its own without leaving the system.
   ===================================================================== */

body.theme-students{
  --rust:   #6fa891;   /* accent → verdigris (was rust) */
  --rust-2: #83bda6;
}

/* masonry of student projects (natural image heights) — grid, fills row-wise */
.scards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(1rem,2.2vw,2rem);
  row-gap:clamp(1.6rem,2.6vw,2.4rem);          /* no-JS fallback spacing */
  align-items:start;
  padding:clamp(2rem,5vh,4rem) var(--pad) clamp(5rem,12vh,9rem);
}
.js .scards{ row-gap:0; grid-auto-rows:8px; }  /* JS sets each card's row-span (gap baked in) */
@media (max-width:1080px){ .scards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){
  .scards{ grid-template-columns:1fr; }
  /* Single column: drop the row-span masonry so cards stack instead of
     collapsing into 8px rows (overlap + too-short, scroll-snapping page). */
  .js .scards{ grid-auto-rows:auto; row-gap:clamp(1.6rem,5vw,2.4rem); }
  .js .scard{ grid-row-end:auto !important; }
}
@media (min-width:1500px){ .scards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1920px){ .scards{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

.scard{
  margin:0;
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.scard.in{ opacity:1; transform:none; }
.scard.is-hidden{ display:none; }

.scard__media{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:3px; background:var(--bg-2);
}
.scard__media img{
  width:100%; height:auto; display:block;
  filter:grayscale(1) contrast(1.15) brightness(.85);
  transform:scale(1.02);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.scard:hover .scard__media img{ filter:grayscale(.35) contrast(1.05) brightness(1); transform:scale(1.05); }
.scard__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.24) 2px 3px);
  mix-blend-mode:multiply; opacity:.5;
}
.scard__media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(140deg, rgba(111,168,145,.5), rgba(200,85,31,.28));
  mix-blend-mode:screen; opacity:0; transition:opacity .6s var(--ease);
}
.scard:hover .scard__media::after{ opacity:.55; }
.scard__k{
  position:absolute; top:8px; left:9px; z-index:4;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--fg); mix-blend-mode:difference;
}

.scard__meta{ padding-top:.9rem; }
.scard__title{
  font-size:clamp(1.2rem,1.9vw,1.6rem); font-weight:600; letter-spacing:-.01em;
  line-height:1.1; transition:color .4s var(--ease);
}
.scard:hover .scard__title{ color:var(--rust); }
.scard__student{
  display:block; font-family:var(--serif); font-style:italic;
  color:var(--muted); font-size:1.02rem; margin-top:.2rem;
}
.scard__links{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.85rem; }
.scard__links a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--fg); border:1px solid var(--line); border-radius:100px; padding:.3rem .7rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.scard__links a:hover{ color:var(--rust); border-color:var(--rust); }