/* SEKUREX — home-page features inside the CATALOGUE: the FIRST OVERALL cards door
   and the Yoda BO-YO single-card band (owner, 6 Oct 2026), shown as a sold record
   since 10 Oct 2026. Renamed from features.css on 10 Oct 2026 for the same cache reason
   given below: the live-ask comparison rules came out and the sold plate went in.

   Its own file rather than more of shop.css: the zone rewrites /css/* to a 4-hour
   browser cache (see public/_headers), so a returning visitor could pair the new
   markup with a stale shop.css. A new URL is always fetched fresh. Every rule here
   is scoped to .band--fo or .band--spot, so nothing else on the site changes. */

/* ---------- FIRST OVERALL door ----------
   The heading is the pack label itself: a bone plate with the black title bar,
   SEKUREX BASKETBALL / SERIES 01 over it and the set line under it, so the label a
   buyer holds is the label they clicked. The violet glow stands in for the
   rose-chrome pouch without filling an area with it. */
.fo-title{
  display:block;max-width:480px;margin:0 0 20px;padding:11px 12px 10px;
  background:var(--bone);color:#0b0b10;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14),0 24px 54px rgba(0,0,0,0.55),0 0 46px var(--violet-glow);
}
.fo-title-top{
  display:flex;justify-content:space-between;gap:12px;padding:0 4px 8px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.24em;
  text-transform:uppercase;color:#2b2a33;
}
.fo-title-main{
  display:block;padding:14px 16px 13px;border-radius:2px;
  background:#0b0b10;color:var(--bone);
  font-family:var(--font-display);font-weight:800;font-size:clamp(24px,7vw,46px);
  line-height:1;letter-spacing:0.01em;text-transform:uppercase;white-space:nowrap;
}
.fo-title-sub{
  display:block;padding:9px 4px 0;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.24em;
  text-transform:uppercase;color:#2b2a33;
}

/* Pack mosaic: the eight-pack shot runs full width on top, the pack label and the
   set cover sit under it. The house stagger moves to the right-hand tile, because
   a drop under the wide tile would read as a gap. Every tile is the listing link. */
.band-mosaic--fo .band-mosaic-wide{grid-column:1 / -1;}
.band-mosaic--fo .band-mosaic-wide img{aspect-ratio:800 / 366;}
.band-mosaic--fo a:nth-child(even){margin-top:0;}
.band-mosaic--fo a:nth-child(3){margin-top:22px;}
/* The sealed packs are the product, so on wide screens they take the wider column.
   Not below 1200px: the label plate's title needs about 444px on one line. */
@media (min-width:1200px){.band--fo{grid-template-columns:1.12fr 0.88fr;}}
/* On one column the sealed packs lead, as the Yoda card does in its band below. */
@media (max-width:899.98px){.band--fo .band-visual-cards{order:-1;}}

/* ---------- Yoda BO-YO single-card band ----------
   Its own framed plate so it reads as a separate spot, not a third category door.
   Compact bands carry no bottom margin, so this one restores the band spacing
   before the next single lot. */
.band--spot{
  margin-bottom:56px;padding:26px 16px;
  border:1px solid var(--hair);border-radius:4px;background:var(--plate);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 30px 80px rgba(0,0,0,0.45);
}
@media (min-width:520px){.band--spot{padding:32px 26px;}}
@media (min-width:900px){.band--spot{margin-bottom:68px;padding:46px 48px;}}
/* On one column the card leads, so the numbers in the copy have something to point at. */
@media (max-width:899.98px){.band--spot .spot-visual{order:-1;}}

/* The hook: the two numbers Topps printed, set as plates you can compare to the photos. */
.spot-numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:6px 0 20px;}
@media (max-width:419.98px){.spot-numbers{grid-template-columns:1fr;}}
.spot-numbers > div{padding:14px 14px 12px;border:1px solid var(--hair-strong);border-radius:3px;background:rgba(5,5,11,0.55);}
.spot-numbers dt{
  margin-bottom:8px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-400);
}
.spot-numbers dd{
  margin:0 0 6px;font-family:var(--font-mono);font-weight:500;
  font-size:clamp(17px,2.3vw,22px);letter-spacing:0.04em;color:var(--bone);white-space:nowrap;
}
.spot-numbers dd.spot-num-note{
  margin:0;font-family:var(--font-sans);font-weight:400;font-size:11.5px;
  letter-spacing:0;line-height:1.5;color:var(--ash);white-space:normal;
}

/* The card and its two proof close-ups. The front keeps the band-visual edge mask;
   the close-ups are framed tiles instead, since a soft edge would blur the very
   numbers they exist to show. */
.spot-visual > a img{max-height:none;}
.spot-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.spot-proof a{
  position:relative;display:block;overflow:hidden;border:1px solid var(--hair);border-radius:2px;background:#06060c;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.spot-proof a:hover{
  filter:none;border-color:var(--gold-400);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.55),0 0 24px rgba(217,164,65,0.14);
}
@media (prefers-reduced-motion:reduce){.spot-proof a:hover{transform:none;}}
.spot-proof img{
  display:block;width:100%;max-height:none;height:auto;aspect-ratio:16 / 7;object-fit:cover;
  -webkit-mask-image:none;mask-image:none;
}
.spot-proof span{
  position:absolute;left:8px;bottom:7px;padding:3px 7px;border:1px solid var(--hair-strong);border-radius:2px;
  background:rgba(5,5,11,0.8);font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;color:var(--bone);
}

/* ---------- Sold record (Yoda, 10 Oct 2026) ----------
   Authority by restraint: one engraved SOLD plate with its date, and the Authenticity
   Guarantee seal beside it. Gold stays in hairlines and small caps; nothing is filled. */
.spot-sold{
  display:flex;flex-wrap:wrap;align-items:stretch;max-width:540px;margin:4px 0 22px;
  border:1px solid var(--hair-strong);border-radius:3px;background:rgba(5,5,11,0.6);
  box-shadow:inset 0 0 0 3px rgba(5,5,11,0.6),inset 0 0 0 4px var(--hair),0 18px 44px rgba(0,0,0,0.4);
}
.spot-sold-stamp{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:16px 22px 14px;border-right:1px solid var(--hair);
}
.spot-sold-word{
  font-family:var(--font-display);font-weight:800;font-size:clamp(26px,6vw,34px);line-height:0.9;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-300);
  text-shadow:0 0 22px rgba(217,164,65,0.28);
}
.spot-sold-date{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--silver);
}
.spot-sold-ag{display:flex;align-items:center;gap:14px;flex:1 1 220px;padding:14px 18px;}
.spot-sold-seal{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hair-strong);background:radial-gradient(circle at 50% 35%,rgba(217,164,65,0.14),rgba(5,5,11,0) 70%);
}
.spot-sold-seal svg{width:24px;height:24px;fill:none;stroke:var(--gold-300);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.spot-sold-ag-text{display:flex;flex-direction:column;gap:4px;}
.spot-sold-ag-text strong{
  font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--bone);
}
.spot-sold-ag-text span{font-size:12px;line-height:1.45;color:var(--ash);}
@media (max-width:419.98px){
  .spot-sold-stamp{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--hair);flex-direction:row;align-items:baseline;justify-content:space-between;}
}

/* The card keeps its colour; a small engraved plate on the photo says it has gone. */
.band--spot.is-sold .spot-visual{position:relative;}
.spot-sold-tag{
  position:absolute;z-index:2;top:14px;left:14px;padding:6px 12px 5px;
  border:1px solid var(--hair-strong);border-radius:2px;background:rgba(5,5,11,0.82);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-300);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}

/* FIRST OVERALL proof row (owner, 10 Oct 2026): the Flagg front runs the full height
   on the left, the serial and autograph close-ups stack on the right. Framed tiles with
   no edge mask, as on the Yoda close-ups, so the numbers and ink stay sharp. */
.fo-proof-label{margin-top:22px;}
.fo-proof{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;}
.fo-proof a{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);border-radius:2px;background:#06060c;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.fo-proof a:hover{
  filter:none;border-color:var(--gold-400);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.55),0 0 24px rgba(217,164,65,0.14);
}
@media (prefers-reduced-motion:reduce){.fo-proof a:hover{transform:none;}}
.fo-proof .fo-proof-tall{grid-row:1 / span 2;}
/* The image fills what the caption leaves, so the tall tile ends level with the stack. */
.fo-proof img{
  display:block;flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:none;object-fit:cover;
  -webkit-mask-image:none;mask-image:none;
}
/* Captions sit under the photo, never on it: the digits and the ink are the evidence. */
.fo-proof span{
  flex:0 0 auto;padding:7px 9px 6px;border-top:1px solid var(--hair);background:rgba(5,5,11,0.9);
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;line-height:1.3;color:var(--bone);
}
/* The close-ups set the row heights at their own 5:3; the Flagg front fills the span. */
.fo-proof a:not(.fo-proof-tall) img{aspect-ratio:5 / 3;height:auto;}
.fo-proof .fo-proof-tall img{flex:1 1 0;height:0;object-position:50% 30%;}