.lab-wrap{max-width:960px;margin:0 auto;padding:16px}
.lab-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:720px){.lab-grid{grid-template-columns:repeat(2,1fr)}}
.lab-card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.lab-card-link{display:block;text-decoration:none;color:#111}
.lab-thumb{position:relative;background:#000;background-size:cover;background-position:center;aspect-ratio:16/9}
.lab-thumb::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent, rgba(0,0,0,.25))}
.lab-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.lab-play::after{content:'';display:block;border-left:16px solid #111;border-top:10px solid transparent;border-bottom:10px solid transparent;margin:22px 0 0 24px}
.lab-info{padding:14px 14px 16px 14px}
.lab-info h2{margin:0 0 8px 0;font-size:1.15rem}
.lab-excerpt{margin:.25rem 0 .5rem 0;opacity:.85;line-height:1.5}
.lab-meta{margin:0;opacity:.6;font-size:.9rem}


/* === Consistent card sizing === */
:root{
  --lab-card-w: 520px;   /* desktop target width */
  --lab-card-min: 300px; /* minimum column width */
}
.lab-wrap{max-width:1120px;margin:0 auto;padding:16px}
.lab-grid{
  display:grid;gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(var(--lab-card-min), 1fr));
  justify-content:center;
}
.lab-card{max-width:var(--lab-card-w); margin:0 auto}
.lab-thumb{aspect-ratio:16/9}
.lab-info{min-height:120px; display:flex; flex-direction:column; justify-content:space-between}
@media (max-width:640px){
  :root{ --lab-card-min: 260px; --lab-card-w: 100%; }
  .lab-info{min-height:unset}
}


/* --- LAB LIST: tile grid layout v2 --- */
:root{
  --lab-grid-max: 1200px;
  --lab-card-min: 320px;
}
/* hide global top header on Lab list */
.site-header{ display:none !important; }

/* allow full-width wrapper; center grid container ourselves */
.container{ max-width:none; padding:0; }

.lab-wrap{ max-width:var(--lab-grid-max); margin:24px auto; padding:0 16px; }
.lab-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lab-card-min), 1fr));
  gap:20px;
  align-items:start;
}

/* card */
.lab-card{ border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; background:#fff;
           box-shadow:0 8px 28px rgba(0,0,0,.06); transition:transform .18s ease, box-shadow .18s ease; width:100%; }
.lab-card:hover{ transform:translateY(-4px); box-shadow:0 12px 34px rgba(0,0,0,.10); }
.lab-card-link{ display:block; text-decoration:none; color:#111; }

.lab-thumb{ position:relative; background:#000; background-size:cover; background-position:center; aspect-ratio:16/9; }
.lab-thumb::before{ content:''; position:absolute; inset:0; background:linear-gradient(transparent, rgba(0,0,0,.25)); }
.lab-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%;
           background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.lab-play::after{ content:''; position:absolute; left:26px; top:22px; border-left:16px solid #111; border-top:10px solid transparent; border-bottom:10px solid transparent; }

.lab-info{ padding:14px 14px 16px 14px; display:flex; flex-direction:column; gap:8px; }
.lab-info h2{ margin:0; font-size:1.05rem; line-height:1.25; }
.lab-excerpt{ margin:0; opacity:.85; line-height:1.5; }
.lab-meta{ margin:0; opacity:.6; font-size:.9rem; }

@media (max-width:640px){
  :root{ --lab-card-min: 260px; }
  .lab-wrap{ margin:12px auto; padding:0 12px; }
}
/* --- end tile grid v2 --- */



/* Lab index: remove white panel and constraints on <main> */
.lab-list-page main{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; max-width:none !important; }



/* --- Equal-height Lab cards + line clamps --- */
:root{
  --lab-lines-title: 2;
  --lab-lines-excerpt: 3;
  --lab-title-lh: 1.25;
  --lab-excerpt-lh: 1.5;
}

.lab-grid{ align-items: stretch; }

.lab-card{ display:flex; flex-direction:column; height:100%; }

.lab-thumb{ flex: 0 0 auto; border-top-left-radius: 18px; border-top-right-radius: 18px; overflow:hidden; }

.lab-info{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }

.lab-info h2{
  line-height: var(--lab-title-lh);
  display: -webkit-box;
  -webkit-line-clamp: var(--lab-lines-title);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--lab-lines-title) * 1em * var(--lab-title-lh));
}

.lab-excerpt{
  line-height: var(--lab-excerpt-lh);
  display: -webkit-box;
  -webkit-line-clamp: var(--lab-lines-excerpt);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* non-webkit fallback keeps heights close */
  min-height: calc(var(--lab-lines-excerpt) * 1em * var(--lab-excerpt-lh));
}

.lab-meta{ margin-top: auto; }

/* Mobile: one-column list, keep same clamps (can tweak if needed) */
@media (max-width: 640px){
  .lab-grid{ grid-template-columns: 1fr; }
}
/* --- end equal-height block --- */


/* Lab disclaimer box */
.lab-disclaimer{
  background:#f7f8fa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  margin:10px 0 16px 0;
  color:#374151;
  font-size:.95rem;
  line-height:1.5;
}
.lab-disclaimer strong{font-weight:600}


/* Branded overlay: subtle grid + fade */
.lab-thumb{position:relative}
.lab-thumb::after{content:'';position:absolute;inset:0;background-image:url('/assets/lab-card-overlay.svg');background-size:cover;background-position:center;pointer-events:none;}

/* Highlight card targeted by script or hash — vivid blue */
.lab-card.is-target{
  border-color:#0b61d8;
  outline:2px solid #0b61d8;
  outline-offset:0;
  box-shadow:0 0 0 4px rgba(11,97,216,.18);
  border-radius:16px;
}