/* WearSlabs premade binders page (wearslabs.com/binders): a short hero, then a grid of every premade binder
   (app/ws/binders/page.tsx builds it from binders.json) and a "Make your own" tile. Builds on ws.css + home.css. */
.bl-hero { position: relative; margin-top: -60px; padding: 116px 0 24px; overflow: hidden; }
.bl-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 0%, rgba(143,180,255,.14) 0, transparent 60%); }
.bl-hero h1 { font-size: clamp(44px, 11vw, 112px); margin: 12px 0 0; }
.bl-hero .lede { color: var(--bone); max-width: 600px; font-size: 18px; }
.bl-sec { padding: 24px 0 80px; }
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .bl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 8px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transition: border-color .2s, transform .2s; }
.bl-card:hover { border-color: transparent; background: linear-gradient(rgba(14,14,19,.92), rgba(14,14,19,.92)) padding-box, var(--holo) border-box; transform: translateY(-2px); }
/* the Vault look (home.css .case): the binder cut-out floats over a glow in its design's accent (--a) and dark (--d) */
.bl-card { --a: #8fb4ff; --d: #101018; }
.bl-card__pic { display: block; aspect-ratio: 4 / 5; border-radius: calc(var(--radius) - 6px); overflow: hidden; margin-bottom: 8px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--a) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--d) 70%, #000), #0b0b10); }
/* the cut-out photo leaves the binder ~57% wide in its frame: scale it up to fill the card */
.bl-card__pic img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.24); filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); transition: transform .5s; }
.bl-card:hover .bl-card__pic img { transform: scale(1.29); }
.bl-card--own .bl-card__pic img, .bl-card--own:hover .bl-card__pic img { transform: none; }
.bl-card__name { font: 700 16px/1.25 var(--body); padding: 0 6px; overflow-wrap: anywhere; }
.bl-card__price { color: var(--muted); font-size: 14px; padding: 0 6px; }
.bl-card--own .bl-card__pic { display: grid; place-items: center; background: linear-gradient(rgba(14,14,19,.9), rgba(14,14,19,.9)) padding-box, var(--holo) border-box; border: 1px solid transparent; }
.bl-card--own .bl-card__pic img { width: 78%; height: auto; padding: 0; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
@media (min-width: 720px) { .bl-card__name { font-size: 18px; } }

/* Binder Vault cards (Oct 20 2026): the hoodie Vault's .case (home.css), card in its slab first, the binder on hover.
   The cut-out binder photo has wide empty margins, so it is scaled up to fill the case like a hoodie does. */
.case--binder .case__hoodie { inset: 2% 0 18%; width: 100%; height: 80%; transform: scale(1.05) translateY(10px); }
@media (hover: hover) { .case--binder:hover .case__hoodie { transform: scale(1.22); } }
@media (hover: none) { .case--binder .case__hoodie { inset: 2% 0 22%; width: 100%; height: 76%; transform: scale(1.12); } }
.case--binder .case__hoodie { filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); }
/* "Make your own": no slab to swap, its cover always shows, framed in the holo border */
.case--own { border: 1px solid transparent; background: linear-gradient(rgba(14,14,19,.92), rgba(14,14,19,.92)) padding-box, var(--holo) border-box; }
.case--own .case__hoodie { opacity: 1; inset: 2% 0 18%; width: 100%; height: 80%; transform: scale(1.12) translateY(6px); filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); z-index: 1; }
/* on hover the real family photo fills the picture area (Eric, Oct 21 2026) */
.own__photo { position: absolute; inset: 0 0 22% 0; width: 100%; height: 78%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
@media (hover: hover) {
  .case--own:hover .case__hoodie { opacity: 0; transform: scale(1.06); }
  .case--own:hover .own__photo { opacity: 1; transform: none; }
}

/* Binder Vault search + sort row (vault-tools.js, styles in home.css) */
.bl-sec .vtools { margin: 0 0 18px; }