/* ===========================================================================
   slab-angled.css — angled 3D treatment for the graded-slab card. Companion to
   slab.css. Add the class `slab-angled` to a slab's WRAPPER element; the
   `.cover-wrap.slab` inside it gets a perspective tilt + a layered box-shadow
   "case thickness", so the slab reads as a real graded case standing on a shelf.

   Robust by design: self-contained perspective() + box-shadow (which transforms
   WITH the card) — no transform-style: preserve-3d, which Safari flattens.

   The two shadows do different jobs, so only one of them follows the theme:

     --slab-edge  the acrylic case thickness. A property of the SLAB, so it is
                  identical in every theme — a case does not change colour
                  because the page behind it did. It used to be blue-tinted on
                  dark and grey on light, which made the same slab look like two
                  different objects side by side.
     --slab-drop  the ambient shadow grounding the slab on the page. This one
                  MUST follow the theme: its job is to separate the card from the
                  background, so it has to contrast with the background.
   =========================================================================== */

/* Opt in EITHER way:
     .slab-angled      on the slab, or on any ancestor of it — explicit and per element. Used by
                       the home strip and /slabtest, which are designed surfaces, not user choices.
     body.slab-shelf   page-wide, set from the COVER STYLE user setting. Scoped to .cover-tile so
                       it is the COVERS GRID that tilts; details-mode thumbnails are small enough
                       that a 20deg rotation just makes the art hard to read.
   Both routes land on the same declarations below, so there is one definition of the treatment. */
.slab-angled,
body.slab-shelf .cover-tile .cover-wrap {
    transform: perspective(820px) rotateY(-20deg);
    -webkit-transform: perspective(820px) rotateY(-20deg);
}

/* Shelf mode gets its own grid. Flat stays at 4 columns untouched -- widening it would change
   every existing collection page, and everyone is on flat.
   FIVE columns rather than four: the tilt compresses each card horizontally, so at 4 the cards
   render wide enough that a 20deg rotation reads as distortion rather than depth. Narrower cards
   make the same angle look like perspective.
   Both gaps grow. Column: the tilt throws 12px of edge plus the rotation to the RIGHT of every
   card, so neighbours clip without it. Row: the cards no longer sit flat against the row below,
   and a tight row gap makes the shelf look stacked instead of spaced.
   Desktop only -- mobile stays 2 wide. This selector (0,2,1) outranks slab.css's plain
   .covers-grid (0,1,0), so without the breakpoint it would win inside the mobile query too. */
@media (min-width: 769px) {
    body.slab-shelf .covers-grid {
        grid-template-columns: repeat(5, 1fr);
        column-gap: 30px;
        row-gap: 46px;
    }
    /* 5% off the grade and the seal in shelf mode only. The rotation foreshortens the label, so
       type that is correctly weighted head-on comes out looking crowded against the label border
       once tilted. Percentages of slab.css's own values (1em and .7rem) rather than new numbers,
       so if those move these follow. */
    body.slab-shelf .cover-tile .cover-wrap.slab .slab-num  { font-size: .95em; }
    body.slab-shelf .cover-tile .cover-wrap.slab .slab-seal { font-size: .665rem; }
}
@media (max-width: 768px) {
    /* Phones stay 2 wide in BOTH modes -- a third column leaves each card too narrow for the art
       to be legible, which is the point of the grid. Only the gaps grow, for the edge and so the
       rows do not read as stacked. */
    body.slab-shelf .covers-grid { column-gap: 18px; row-gap: 30px; }
    /* same 5% trim as desktop, off the mobile values (1em / .44rem) */
    body.slab-shelf .cover-tile .cover-wrap.slab .slab-num  { font-size: .95em; }
    body.slab-shelf .cover-tile .cover-wrap.slab .slab-seal { font-size: .418rem; }
}

.slab-angled .cover-wrap.slab,
body.slab-shelf .cover-tile .cover-wrap {
    /* opaque-ish (.85) rather than translucent: a see-through edge vanishes against a light
       background, and the edge has to read as solid plastic on both. */
    --slab-edge:
        1px 0 0 rgba(196,204,216,.85),  2px 0 0 rgba(188,196,209,.85),  3px 0 0 rgba(180,189,203,.85),
        4px 0 0 rgba(172,182,197,.85),  5px 0 0 rgba(165,175,191,.85),  6px 0 0 rgba(158,168,185,.85),
        7px 0 0 rgba(151,161,179,.85),  8px 0 0 rgba(144,155,173,.85),  9px 0 0 rgba(138,149,168,.85),
        10px 0 0 rgba(132,143,162,.85), 11px 0 0 rgba(126,137,157,.85), 12px 0 0 rgba(120,131,151,.85);
    --slab-drop: 15px 10px 26px rgba(0,0,0,.55);
    box-shadow: var(--slab-edge), var(--slab-drop);
}

/* light theme — a black ambient shadow reads as dirt on white, so it goes navy-tinted, softer and
   tighter. Only the drop is redefined; the edge above re-resolves through the same var(). */
body.work-mode .slab-angled .cover-wrap.slab,
body.work-mode.slab-shelf .cover-tile .cover-wrap {
    --slab-drop: 14px 9px 20px rgba(15,23,42,.28);
    /* box-shadow is RE-DECLARED, not just the var, and that is load-bearing. index.html carries
       body.work-mode .ss-item .cover-wrap.slab (0,3,1), which outranks the .slab-angled rule above
       (0,3,0) -- so with only the var set here, that old flat shadow won in light mode and the
       whole 3D edge disappeared. Restating box-shadow at matching specificity takes it back. The
       VALUES still live in the two vars, so this is not a second copy of them. */
    box-shadow: var(--slab-edge), var(--slab-drop);
}