/* =====================================================================
   Deal.

   The seven service cards stop being a three-column grid and become a
   run down the page: one left, the next right and lower, the next left
   and lower again. Consecutive cards overlap slightly, so the column
   reads as a stack being dealt out rather than a list.

   The entrance reuses the reveal that site.js already runs. It adds
   .reveal to every card, observes them, adds .is-in when each arrives
   and staggers them with an inline delay. There is no second system
   here and no new JavaScript: this file only changes where a card
   starts from.

   Like the existing reveal, this animates the standalone `translate`,
   `rotate` and `scale` properties rather than `transform`, because the
   Pop hover owns `transform`. On separate properties they compose
   instead of overwriting each other.
   ===================================================================== */

@media (min-width: 1000px) {

    /* The grid hairlines belong to a grid. Off.

       position:relative matters and is not cosmetic. stack.js positions
       the pile using each card's offsetLeft and offsetTop, and those are
       measured from the nearest positioned ancestor. Without this, the
       browser measures from the top of the page instead of from this
       block, and the cards get thrown thousands of pixels up the page. */
    .caps {
        display: block;
        position: relative;
        border-left: 0;
        border-top: 0;

        /* The lede above carries a 56px bottom margin, but the first card
           is a bordered box that starts right at its own edge, so the two
           read as almost touching. This opens a real gap between the
           section's introduction and the run of cards. */
        margin-top: 40px;
    }

    /* A column, so the link can be aligned to the right-hand edge with
       align-self. No min-height and no auto push: the link sits one line
       under the paragraph, and the card is only as tall as its content. */
    .caps .cap {
        width: 54%;
        border: 1px solid var(--line);
        min-height: 0;
        padding: 44px 40px 40px;
    }

    /* The title is the first thing in the card now. The chip is lifted
       out of the flow and parked in the top corner beside it. */
    .caps .cap .cap__n {
        position: absolute;
        top: 46px;
        right: 40px;
        margin: 0;
    }

    .caps .cap h3 {
        margin-top: 0;
        /* Room for the chip, so a long title never runs under it. */
        padding-right: 76px;
    }

    /* Opaque, because cards overlap each other. No resting shadow: a
       card only lifts when it is the one being looked at. */
    .surf-light .caps .cap { background: var(--l-bg, #F4F2EE); }
    .surf-dark  .caps .cap { background: var(--d-bg, #0A0C0F); }

    /* Left, right, left. The even ones push over to the right. */
    .caps .cap:nth-child(even) { margin-left: auto; }

    /* Just enough overlap to tie the run together. It was 52px, which
       buried the bottom of every card's text under the next one. */
    .caps .cap + .cap { margin-top: -14px; }

    /* Later cards paint over earlier ones, so the overlap has a
       consistent direction. */
    .caps .cap { position: relative; z-index: 1; }
    .caps .cap:nth-child(2)  { z-index: 2; }
    .caps .cap:nth-child(3)  { z-index: 3; }
    .caps .cap:nth-child(4)  { z-index: 4; }
    .caps .cap:nth-child(5)  { z-index: 5; }
    .caps .cap:nth-child(6)  { z-index: 6; }
    .caps .cap:nth-child(7)  { z-index: 7; }

    /* The case-study link was absolutely positioned against the bottom
       of the card, which put it at a different distance from the text in
       every card, since the paragraphs are different lengths. Put it back
       in the flow so the gap above it is always the same, and give it the
       accent colour it should have had. */
    /* display:flex, not inline-flex. Vertical margins do not affect the
       height of a line box, so margin-top on an inline-level element
       moves nothing: the link stayed jammed under the paragraph. A
       block-level box takes the margin properly.

       margin-left:auto then pushes it to the right-hand edge of the
       card, and fit-content keeps the box to the words so the whole
       card is not clickable. */
    /* Both selectors, and the first one deliberately carries the `a`.

       site.css has `.cap.cap--link .cap__link { position:absolute;
       left:32px; bottom:28px }` — an element plus three classes, which
       outranks a plain three-class selector. These cards are anchors, so
       that rule was winning and pinning the link 8px inside the card's
       40px padding. That was the ragged left edge, and it is why setting
       position and margin here had no effect at all until now. */
    .caps .cap.cap--link .cap__link,
    .caps .cap .cap__link {
        position: static;
        display: block;
        width: fit-content;
        /* Flush left, so it lines up with the title and the paragraph
           above it. site.css positions this absolutely at left:32px while
           the card pads to 40px, which is what put it eight pixels adrift
           of everything else. Static and block-level fixes both the
           alignment and the spacing.

           One line of air above it, no more. */
        margin: 24px 0 0 0;
        color: var(--accent, #A43818);
    }

    .caps .cap:hover .cap__link,
    .caps .cap.is-near .cap__link { color: var(--accent, #A43818); }

    /* No longer holding space for an absolutely positioned link. */
    .caps .cap { padding-bottom: 40px; }

    /* ---- the pile ---------------------------------------------------- */

    /* include/stack.js measures where each card belongs and writes the
       offset that pulls it back onto the first one. The layout is not
       touched, so the section holds its full height from the start and
       nothing on the page moves as the cards come down. */
    /* No transition while piled: stack.js repins the pile on every
       scroll frame, and a transition would leave it lagging behind. */
    .caps--stack .cap {
        translate: var(--sx, 0) var(--sy, 0);
        rotate: var(--sr, 0deg);
        scale: var(--ss, 1);

        /* Promote the piled cards to their own compositor layers. Without
           this the browser repaints the card and its text on every scroll
           frame as the pile moves, which reads as jitter. */
        will-change: translate, scale, transform;
        backface-visibility: hidden;
        transition: transform 140ms cubic-bezier(0.2, 0, 0, 1),
                    box-shadow 200ms ease-out,
                    background var(--e-fast);
    }

    /* Dealt: the transition switches on for the one move out of the
       pile, so the card glides to its place instead of snapping. */
    .caps--stack .cap.is-dealt {
        translate: none;
        rotate: none;
        scale: none;
        /* Landed, so it no longer needs its own layer. */
        will-change: transform;
        transition: translate .82s cubic-bezier(.2, .72, .28, 1),
                    rotate .82s cubic-bezier(.2, .72, .28, 1),
                    scale .82s cubic-bezier(.2, .72, .28, 1),
                    transform 140ms cubic-bezier(0.2, 0, 0, 1),
                    box-shadow 200ms ease-out,
                    background var(--e-fast);
    }

    /* The lift has to read against a card it may be sitting on top of,
       so it goes a little deeper than the grid version. Applies to the
       card the reader is currently on as well as the hovered one. */
    .surf-light .caps .cap:hover,
    .surf-light .caps .cap.is-near {
        box-shadow: 0 18px 44px rgba(10, 12, 15, 0.13),
                    0 3px 8px rgba(10, 12, 15, 0.07);
    }
}

/* Below this the cards are a single full-width column and none of the
   above applies: no offsets, no overlap, no rotation. */
@media (max-width: 999px) {
    .caps .cap { width: auto; }
}