/* Hover treatment for a tile that can be clicked. Loaded on every page from
 * layouts/_siteStyles.blade.php.
 *
 * The lift and shadow PROMISE that the surface is a target, so the class goes
 * only where a left click does something — a whole-tile link, or a tile bound to
 * a click handler. A tile that merely CONTAINS a button does not get it.
 *
 * The landing pages' modal tiles DO carry it: they used to host a button and do
 * nothing themselves, but the whole tile is now the target (role="button" +
 * data-tile-trigger, forwarded by tileTrigger.js), so the promise holds.
 *
 *   1. The clickable element IS the tile — class on it:
 *          <a class="card rfInteractiveTile"> … </a>
 *
 *   2. A link WRAPS the tile — class on the TILE, not the link, because the
 *      wrapper carries padding of its own (.rowFlexLayout has 10px) and a shadow
 *      round it would float clear of the tile's edge. Focus still lands on the
 *      link, hence the :focus-visible descendant selectors below.
 *          <a><div class="rowFlexLayout"><div class="VertAligner rfInteractiveTile">
 */

.rfInteractiveTile {
    cursor: pointer;
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.rfInteractiveTile:hover,
.rfInteractiveTile:focus,
a:focus-visible .rfInteractiveTile,
button:focus-visible .rfInteractiveTile {
    transform: translateY(-2px);
    /* The transform makes the lifted tile a stacking context, so anything it
       pops out of itself (a case picture's hover preview, its own shadow) is
       trapped at its level and a later sibling paints over it. Raising the tile
       above its siblings while lifted lets those escape. No host is absolutely
       positioned, so relative costs nothing. */
    position: relative;
    z-index: 1;
    /* !important: .VertAlignerShadowless drops the resting shadow with an
       !important of its own, and those tiles must still shadow on hover. */
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
    color: inherit;
    text-decoration: none;
}

/* Keyboard focus must stay obvious. Where a link wraps the tile the outline goes
   on the TILE, so it frames the thing that moved rather than the padding round it. */
.rfInteractiveTile:focus-visible,
a:focus-visible .rfInteractiveTile,
button:focus-visible .rfInteractiveTile {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Movement is the decorative half; the shadow still says "target" without it. */
@media (prefers-reduced-motion: reduce) {
    .rfInteractiveTile {
        transition: box-shadow .15s ease-in-out;
    }

    .rfInteractiveTile:hover,
    .rfInteractiveTile:focus,
    a:focus-visible .rfInteractiveTile,
    button:focus-visible .rfInteractiveTile {
        transform: none;
    }
}


/* ---------------------------------------------------------------------------
   Per-surface adjustments
   Kept here rather than in each page's stylesheet so the whole hover treatment
   reads in one place.
   --------------------------------------------------------------------------- */

/* The case-hierarchy tiles (.VertAligner: sub-claims on the top-level-claim,
   category and level-1 pages) carry a resting shadow already. The hover shadow
   is LAYERED over it rather than replacing it — swapping the big diffuse
   resting shadow for the tighter hover one reads as the shadow shrinking, which
   is the opposite of what the lift is saying. */
.VertAligner.rfInteractiveTile:hover,
.VertAligner.rfInteractiveTile:focus,
a:focus-visible .VertAligner.rfInteractiveTile {
    box-shadow: -3px 3px 15px 5px #ccccccbc, 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
}

/* …except where the resting shadow was deliberately removed (tiles nested
   inside a category box), which are back to the plain treatment. Must follow
   the rule above: same specificity, so source order decides. */
.VertAlignerShadowless.rfInteractiveTile:hover,
.VertAlignerShadowless.rfInteractiveTile:focus,
a:focus-visible .VertAlignerShadowless.rfInteractiveTile {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15) !important;
}