/* Link previews.
 *
 * Hand-written, like _ours.css and _square.css. Not generated: no design file
 * draws this, and the mock it comes from is the sheet at
 * /design-2026/link-previews.html, built by build-link-previews.py.
 *
 * Hovering a link to another listing brings that listing's photograph up above
 * the word. The idea is Noé Chagué's; every choice in it is Jack's, made on
 * 8 September against the sheet:
 *
 *   · square edges, not rounded
 *   · one photograph, not a fan of two
 *   · the card 6:7
 *   · the mount one of our darker colours
 *   · the link text bold and black
 *
 * Moss is the dark, at 3px, chosen by Jack on 9 September against the sheet.
 * Softer and greener than forest, which at this size read closer to black.
 *
 * The two degrees of tilt are the one thing not on the reference. With two
 * cards the fan gives the movement; with one there is nothing to fan, so
 * without the tilt it is a plain fade and the effect loses its reason.
 */

.pv {
    position: relative;
    display: inline-block;

    /* Width leads, height follows it at 6:7. */
    --pv-w: 112px;
    --pv-h: calc(var(--pv-w) * 7 / 6);
    --pv-lift: 14px;
    --pv-pad: 3px;
    --pv-ms: 240ms;
    --pv-mount: var(--moss, #414042);
    --pv-curve: cubic-bezier(.22, .8, .24, 1);
}

/* Bold and black. The word is already as dark and as heavy as it goes, so
   hover thickens the rule under it rather than changing the colour: there is
   nothing left to darken. */
.pv > a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28);
    transition: box-shadow var(--pv-ms) var(--pv-curve);
}

.pv:hover > a,
.pv:focus-within > a {
    box-shadow: inset 0 -2px 0 #000;
}

.pv-set {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: var(--pv-lift);
    width: calc(var(--pv-w) + 2 * var(--pv-pad));
    height: calc(var(--pv-h) + 2 * var(--pv-pad));
    transform: translateX(-50%);
    /* The photograph must never eat the click, and it sits over the line
       above, which may itself hold links. */
    pointer-events: none;
    z-index: 20;
    display: block;
}

.pv-card {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    background: var(--pv-mount);
    padding: var(--pv-pad);
    /* Sized, not shrink-to-fit, so the mount is the same on every side. */
    width: calc(var(--pv-w) + 2 * var(--pv-pad));
    height: calc(var(--pv-h) + 2 * var(--pv-pad));
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(65, 64, 66, .18), 0 1px 2px rgba(65, 64, 66, .1);
    opacity: 0;
    transform: translateX(-50%) translateY(4px) scale(.95);
    transition: opacity var(--pv-ms) var(--pv-curve), transform var(--pv-ms) var(--pv-curve);
}

.pv-card img {
    display: block;
    width: var(--pv-w);
    height: var(--pv-h);
    object-fit: cover;
    border-radius: 0;

    /* Every design sheet carries `img { max-width: 100% }`, which caps this
       at the width of a card that is itself shrink-to-fit around the image.
       The two then collapse into each other: 132px asked for, 63px drawn. */
    max-width: none;
}

.pv:hover .pv-card,
.pv:focus-within .pv-card {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
}

/* Nothing moves for anyone who asked for that, and the photograph simply
   never appears rather than appearing without warning. */
@media (prefers-reduced-motion: reduce) {
    .pv > a { transition-duration: 1ms }
    .pv-card { transition: opacity 1ms linear }
    .pv:hover .pv-card,
    .pv:focus-within .pv-card { transform: translateX(-50%) }
}

/* A phone has no hover, and a tap should follow the link rather than show a
   picture the finger is already covering. */
@media (hover: none) {
    .pv-set { display: none }
}