/* =====================================================================
   Graded-slab frame for card images.

   Geometry is taken from a 385x600 reference: every offset below is a
   percentage of the slab box, so one stylesheet covers a 54px row
   thumbnail and a 260px detail view alike. The partial sets width,
   height and font-size inline; nothing here is size-specific.
   ===================================================================== */

.card-slab {
    position: relative;
    display: inline-block;
    border-radius: 4.5%/2.9%;
    /* the shell: light top edge, shadowed bottom, like moulded acrylic */
    background: linear-gradient(160deg, #d9dadd 0%, #c2c4c7 38%, #aeb0b4 68%, #c6c8cb 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35),
                inset 0 1px 0 rgba(255, 255, 255, .75),
                inset 0 -1px 0 rgba(0, 0, 0, .18);
    line-height: 1.15;
    vertical-align: top;
}

/* the recessed inner panel the label and window sit in */
.card-slab-inner {
    position: absolute;
    left: 4.7%;
    right: 4.7%;
    top: 3%;
    bottom: 3%;
    border-radius: 3.5%/2.2%;
    background: linear-gradient(160deg, #cfd1d4 0%, #bdbfc3 50%, #c9cbce 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
}

/* ---------- the red label ---------- */

.card-slab-label {
    position: absolute;
    left: 6.6%;
    right: 6.6%;
    top: 3.4%;
    height: 16.7%;
    background: #fff;
    border: 0.35em solid #e2001a;
    border-radius: 0.25em;
    box-sizing: border-box;
    padding: 0.45em 0.6em;
    overflow: hidden;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    /* one rule for the whole label rather than per column, so nothing added
       later can slip through in mixed case */
    text-transform: uppercase;
    /* every word on the label is the same size; the columns below only set
       alignment, never scale */
    font-size: 1em;
}

.card-slab-label .csl-left {
    float: left;
    width: 68%;
    text-align: left;
    font-weight: 700;
    letter-spacing: .01em;
}

.card-slab-label .csl-right {
    float: right;
    width: 30%;
    text-align: right;
    font-weight: 700;
}

/* Each label line stays on one line and is clipped rather than wrapped, so
   a long card name can never push the layout out of the label box. Two
   lines now instead of three, so they can breathe. */
.card-slab-label .csl-line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .34em;
}

.card-slab-label .csl-num {
    margin-bottom: .1em;
}

/* the PSA wording, e.g. GEM MINT. Allowed to wrap onto a second line so a
   longer name is not cut down to "VERY..." in the narrow right column. */
.card-slab-label .csl-grade {
    line-height: 1.05;
    word-break: break-word;
}

.card-slab-label .csl-score {
    line-height: 1.15;
    margin-top: .05em;
}

.card-slab-label .csl-ungraded {
    color: #8a8a8a;
    letter-spacing: .04em;
}

.card-slab-label .csl-icon {
    max-width: 1.9em;
    max-height: 1.9em;
    vertical-align: middle;
}

/* ---------- the black window the card sits in ---------- */

.card-slab-window {
    position: absolute;
    left: 6.6%;
    right: 6.6%;
    top: 23.2%;
    /* bottom, not height: this mirrors the label's own 3.4% top margin, so
       the window is framed by the same gap top and bottom. With a fixed
       height it ended at 91.7% and sat 2.4x lower than it should. */
    bottom: 3.4%;
    background: #0b0b0c;
    /* the window is a card-shaped cutout, so it carries the card's corner */
    border-radius: 0.8em;
    box-shadow: inset 0 0 1.2em rgba(0, 0, 0, .9);
    overflow: hidden;
    text-align: center;
}

/* The card itself: contained, never cropped, never stretched.
   Held just inside the window so a rim of black always shows around it -
   at 100% the card butts against the frame and the seated look is lost.
   Percentages rather than padding, because an absolutely positioned box
   resolves both against the containing block's padding box anyway. */
/* :not(.csl-seal) matters - the window holds two images now, and without
   it the seal inherits this centring and fills the window. */
.card-slab-window img:not(.csl-seal) {
    max-width: 93%;
    max-height: 95%;
    width: auto;
    height: auto;
    border-radius: 0.6em;
    /* centring that does not rely on flexbox, for older engines */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* The rank icon sits in the bottom-right corner of the window rather than
   in the label, where it competed with the grade text. The shadow keeps it
   legible over light and dark card art alike. top/left/transform are reset
   explicitly so nothing above can re-centre it. */
.card-slab-window .csl-seal {
    position: absolute;
    top: auto;
    left: auto;
    right: 0%;
    bottom: 0%;
    transform: none;
    /* 30% of the 22% it started at - a corner mark, not a watermark */
    width: 15%;
    height: auto;
    max-width: 15%;
    max-height: none;
    object-fit: contain;
    opacity: .95;
    filter: drop-shadow(0 0 0.12em rgba(0, 0, 0, .95));
    z-index: 2;
}

/* at row-thumbnail size the seal would be a smudge */
.card-slab--compact .csl-seal {
    display: none;
}

.card-slab-window .csl-empty {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    color: #55565a;
    font-size: .9em;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0 .5em;
}

.card-slab-link {
    display: inline-block;
    text-decoration: none;
}

.card-slab-link:hover .card-slab,
.card-slab-link:focus .card-slab {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* ---------- compact: row thumbnails ----------
   At this size label text would be a couple of unreadable pixels, so the
   label collapses to a red bar carrying just the rank. */

.card-slab--compact .card-slab-label {
    border-width: 0.25em;
    padding: 0;
    text-align: center;
}

.card-slab--compact .csl-left {
    display: none;
}

.card-slab--compact .csl-right {
    float: none;
    width: 100%;
}

.card-slab--compact .csl-num,
.card-slab--compact .csl-grade,
.card-slab--compact .csl-icon {
    display: none;
}

/* the one exception to the uniform size: compact shows the score alone in
   an 11px bar, where 1em would render at roughly two pixels */
.card-slab--compact .csl-score {
    font-size: 1.5em;
    text-align: center;
    margin-top: .05em;
}

.card-slab--compact .csl-ungraded {
    font-size: 1.1em;
    text-align: center;
}