/*
 * Zuuks - the phone layout, as cards.
 *
 * The desktop design is built around one large orange scene, and on a phone
 * that scene collapsed into overlapping pieces: the trucks over the ring over
 * the blob, four pulsing circles stacked down the page. This file replaces
 * that - on phones only - with the language small screens actually use now:
 * a soft grey page, white rounded cards, one idea per card.
 *
 * A separate file rather than more rules in main.css, for two reasons. The
 * site is uploaded by FTP, and if this one file does not arrive the pages
 * simply keep their old look - nothing breaks. And main.css is compiled from
 * a scss file we do not have, so hand edits there live dangerously.
 *
 * 990px is the theme's own idea of "mobile" - the width where the hamburger
 * replaces the menu - so this takes over at exactly the same moment.
 */

@keyframes zk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes zk-drive-in {
    from { transform: translateX(46px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #wecreate .icon,
    .slidePhoto::before { animation: none !important; }
}

@media (max-width: 990px) {

    /* ------------------------------------------------------------ */
    /* The page itself                                               */
    /* ------------------------------------------------------------ */

    body,
    body.bg-home {
        background: #eef1f6;
    }

    /* The smoke background behind the middle of the home page fights
       the flat grey; the cards carry the depth now. */
    .xum:before {
        display: none;
    }

    /* ------------------------------------------------------------ */
    /* Header: a floating white bar with the logo and the menu       */
    /* ------------------------------------------------------------ */

    .home-header {
        height: auto;
        line-height: normal;
        padding: 10px 12px 0;
    }

    .home-header .container,
    header.fixed .container {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(23, 32, 63, .07);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8px 8px 18px;
        min-height: 64px;
    }

    /* The subpage header is fixed to the top; inset it so it reads as
       the same floating card instead of an edge-to-edge strip. */
    header.fixed {
        left: 12px;
        right: 12px;
        top: 10px;
        width: auto;
        background: none;
        padding: 0 !important;
        box-shadow: none;
    }

    .home-header .logo,
    header.fixed .logo {
        float: none;
        display: flex;
        align-items: center;
    }

    .home-header .logo img,
    header.fixed .logo img {
        width: 104px;
    }

    .zk-mnav {
        float: none;
    }

    /* The header is in the flow now and 66px tall, not 150. */
    .ie {
        padding-top: 26px;
    }

    /* While the page is scrolled the header is fixed and the content
       stands in for it - but the stand-in is sized for the 150px desktop
       bar. The phone header is 76px including its offset. */
    .content.padding {
        padding-top: 90px;
    }

    /* ------------------------------------------------------------ */
    /* Hero: one clean card instead of three overlapping layers      */
    /* ------------------------------------------------------------ */

    /* The 169px of padding here parked the heading next to a desktop
       scene that no longer exists on phones - it was the whole of the
       empty band under the header. And between 768 and 990px bootstrap
       still split the hero into columns; it stacks now at every phone
       and tablet width, like the rest of the page. */
    #showcase .row {
        display: flex;
        flex-direction: column;
    }

    #showcase .row [class*="col-"] {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    #showcase {
        margin-bottom: 34px;
    }

    #showcase .text {
        padding-top: 0;
    }

    #showcase .text h1 {
        color: #1c2340;
        font-size: 34px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }

    #showcase .text p {
        color: #6b7280;
        font-weight: 500;
        font-size: 15.5px;
        line-height: 1.65;
        letter-spacing: 0;
        margin-top: 14px;
    }

    /* The trucks, standing on a white card rather than shut inside one.
       The card is the stage: the image is drawn on a layer that starts
       above the card's top edge, so the roofline breaks out of the box
       and the orange road stays on the stage. The card clips nothing -
       that is the point. */
    .slidePhoto {
        position: relative;
        background-color: #ffffff;
        background-image: none !important;
        border-radius: 24px;
        box-shadow: 0 14px 34px rgba(23, 32, 63, .07);
        height: 196px;
        /* Headroom for the overflow, so the roofs never touch the text. */
        margin-top: 74px;
        overflow: visible;
    }

    .slidePhoto::before {
        content: '';
        position: absolute;
        left: 2%;
        right: 2%;
        top: -58px;
        bottom: 10px;
        background-image: url(../img/slider.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom center;
        /* Rolls in from the right once, then settles into a slow sway -
           the same pulse the stat badges keep, so the page breathes in
           one rhythm. */
        animation: zk-drive-in .9s cubic-bezier(.2,.8,.3,1) both,
                   zk-float 4.2s ease-in-out .9s infinite;
    }

    .slideAnimate {
        display: none;
    }

    /* ------------------------------------------------------------ */
    /* The four figures: a card each, icon tile on the left          */
    /* ------------------------------------------------------------ */

    #wecreate h3 {
        color: #1c2340;
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 18px;
        letter-spacing: -0.3px;
    }

    #wecreate .row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #wecreate .side,
    #wecreate .col-md-5.side,
    #wecreate .col-md-6.side {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 10px 26px rgba(23, 32, 63, .06);
        padding: 16px 18px;
        margin: 0;
        max-width: 100%;
        flex: none;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* The badge the desktop uses - the glossy circle with its white ring
       - only smaller. The first cut replaced it with a flat tile, and the
       flat tile was worse than the thing it replaced. */
    #wecreate .icon {
        flex: 0 0 66px;
        width: 66px;
        height: 66px;
        margin: 0;
        float: none;
        display: block;
        position: relative;
        animation: zk-float 3.4s ease-in-out infinite;
    }

    #wecreate .ico-animate {
        display: block;
        position: relative;
    }

    #wecreate .ico-animate img {
        width: 66px;
        height: 66px;
        margin: 0;
        display: block;
    }

    /* The hover-spin ring needs a hover, which a thumb does not have. */
    #wecreate .icoEffect {
        display: none !important;
    }

    #wecreate .icon .ico-animate + img {
        width: 34px;
        height: 34px;
    }

    /* The badges breathe - a slow rise and fall, each card a beat behind
       the one before, so the column reads as alive rather than as four
       copies of one animation. */
    #wecreate .side:nth-of-type(2) .icon { animation-delay: .45s; }
    #wecreate .side:nth-of-type(3) .icon { animation-delay: .9s; }
    #wecreate .side:nth-of-type(4) .icon { animation-delay: 1.35s; }

    #wecreate .text {
        float: none;
        margin: 0;
        text-align: left;
        color: #1c2340;
        line-height: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The figure owns the card: as large as the longest one
       (850.000.000) allows on a 320px-wide phone. */
    #wecreate .text .numscroller {
        font-size: 31px;
        font-weight: 800;
        letter-spacing: -0.8px;
        line-height: 1.05;
        white-space: nowrap;
    }

    #wecreate .text .plus {
        display: inline-block;
    }

    #wecreate .text span {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        color: #98a0ae;
        line-height: 1.35;
        top: auto;
        margin-top: 7px;
    }

    #wecreate .full-text {
        color: #6b7280;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.65;
        margin-top: 26px;
    }

    /* ------------------------------------------------------------ */
    /* Section heads: bold ink title, the link as a quiet pill       */
    /* ------------------------------------------------------------ */

    .head-orange,
    .head-blue {
        color: #1c2340;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.4px;
        /* The hard white drop shadow was a trick against the old white
           page; on grey it reads as a printing error. */
        text-shadow: none;
    }

    #showcase .text h1,
    #wecreate h3 {
        text-shadow: none;
    }

    #featured .head,
    #position .head {
        margin: 34px 0 26px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #featured .head h2,
    #position .head h2 {
        float: none;
        width: auto;
        margin: 0;
    }

    /* "See Our Games" / "See All Openings" spelled out is a desktop
       luxury. On a phone the link becomes a round arrow button beside
       the heading - the words stay in the markup, at zero size, so a
       screen reader still hears where the arrow goes. */
    #featured .button-line,
    #position .button-line {
        float: none;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 44px;
        border-radius: 50%;
        background: #ffffff;
        border-width: 0 !important;
        box-shadow: 0 8px 20px rgba(23, 32, 63, .10);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The arrow is drawn, not typed. A font glyph sits on a baseline, so
       it never quite centred in the circle and its weight was the font's
       choice, not ours. Two shapes - a bar and a chevron - are placed by
       arithmetic instead: dead centre, and as bold as the buttons. */
    #featured .button-line,
    #position .button-line {
        position: relative;
    }

    #featured .button-line::before,
    #position .button-line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 3px;
        border-radius: 2px;
        background: #ff8400;
        transform: translate(calc(-50% - 1px), -50%);
    }

    #featured .button-line::after,
    #position .button-line::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 9px;
        height: 9px;
        border-top: 3px solid #ff8400;
        border-right: 3px solid #ff8400;
        border-radius: 1px 3px 1px 1px;
        transform: translate(calc(-50% + 3px), -50%) rotate(45deg);
    }

    /* The positions section keeps its own blue, as its heading does. */
    #position .button-line2::before {
        background: #4182e4;
    }

    #position .button-line2::after {
        border-color: #4182e4;
    }

    /* ------------------------------------------------------------ */
    /* Game cards                                                    */
    /* ------------------------------------------------------------ */

    #featured .side-box {
        border-radius: 24px;
        box-shadow: 0 14px 34px rgba(23, 32, 63, .07);
        margin-bottom: 60px;
        padding-bottom: 24px;
    }

    #featured .side-box .name {
        color: #1c2340;
        font-weight: 800;
    }

    #featured .count {
        color: #98a0ae;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .09em;
    }

    /* ------------------------------------------------------------ */
    /* Job cards                                                     */
    /* ------------------------------------------------------------ */

    #position .zk-jc,
    .zk-jc {
        border-radius: 24px;
        box-shadow: 0 14px 34px rgba(23, 32, 63, .07);
        /* The card's 176px top margin is headroom for the disc that
           floats 104px above it - tuned for a desktop grid. On one
           column, 130px leaves the same disc 26px of air instead of a
           small field of it. */
        margin-top: 130px;
    }

    /* The heading sits just above the first card's disc; the card's own
       margin is the spacing now, not the heading's. */
    #position .head {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------ */
    /* The job list's filter row                                     */
    /* ------------------------------------------------------------ */

    /* The banner that carries the filter grows with it instead of
       clipping at the desktop's fixed height. */
    .heading-filter {
        height: auto;
        padding-bottom: 16px;
    }

    /* On the desktop the filter is a strip: a label and two 107px
       dropdowns side by side. At phone widths the dropdowns truncated
       to "Job A" and "Locat" and sat half off their strip. It is a card
       now, like everything else: label on top, the two selects sharing
       the row below it. */
    .heading .filter {
        height: auto;
        margin: 10px 12px 0;
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(23, 32, 63, .08);
        padding: 14px 16px 16px;
        overflow: hidden;
    }

    .heading .filter .container {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .heading .filter span {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 2px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #98a0ae;
    }

    .heading .filter .side {
        float: none;
        border-left: 0;
        margin: 0;
        padding: 0;
        height: auto;
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    /* The live control is bootstrap-select's button; the bare <select>
       is what the page shows while that script is still loading. Both
       get the same box, so the row never jumps. */
    .heading .filter .side .bootstrap-select {
        width: 100% !important;
        float: none;
    }

    .heading .filter .side .bootstrap-select > .dropdown-toggle,
    .heading .filter .side select {
        float: none;
        width: 100%;
        height: 46px;
        line-height: 46px;
        border: 0;
        border-radius: 12px;
        background-color: #f3f6fa;
        padding: 0 34px 0 14px;
        font-size: 15px;
        font-weight: 600;
        color: #3c4453;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-image: url(../img/icon/arrow.svg);
        background-repeat: no-repeat;
        background-size: 14px;
        background-position: right 14px center;
    }

    /* bootstrap-select floats the label inside its button, and a float
       ignores the line height that centres everything else - which left
       "Job Area" and "Location" pinned to the top of their boxes. */
    .heading .filter .dropdown-toggle .filter-option {
        float: none;
        display: block;
        height: 46px;
        line-height: 46px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Its own caret too - the box already draws the arrow. */
    .heading .filter .dropdown-toggle .caret,
    .heading .filter .dropdown-toggle .bs-caret {
        display: none;
    }

    /* ------------------------------------------------------------ */
    /* The games banner: the download figure back in the flow        */
    /* ------------------------------------------------------------ */

    /* On a phone the figure was absolutely positioned 47px from the
       top - which is exactly where the floating header now lives, so
       "850 Million Downloads" sat underneath the menu. It joins the
       flow instead: pill, description, then the figure. The banner's
       own overflow:hidden contains the floats, so height can be auto. */
    .heading-stats {
        height: auto;
        padding-bottom: 18px;
    }

    .heading-stats .left {
        float: none;
        width: 100%;
    }

    .heading-stats .right {
        float: none;
    }

    .heading-stats .big {
        position: static;
        width: auto;
        margin-top: 16px;
    }

    .heading-stats .big h2 {
        float: none;
        margin: 0;
        font-size: 30px;
        text-shadow: none;
    }

    .heading-stats .big h2 span {
        float: none;
        display: inline;
        margin-right: 10px;
        font-size: 30px !important;
    }

    .heading-stats .big i {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #98a0ae;
        text-shadow: none;
        margin-top: 2px;
    }

    /* The spinning confetti behind the figure - a decoration sized for
       a desktop, twice as wide as the phone. */
    .heading-stats .confi {
        display: none;
    }

    /* ------------------------------------------------------------ */
    /* Footer: the wave was drawn against white, so on grey it       */
    /* becomes a stain. Rounded shoulders do the same job here.      */
    /* ------------------------------------------------------------ */

    footer:before {
        display: none;
    }

    footer {
        border-radius: 28px 28px 0 0;
        margin-top: 18px;
    }

    /* ------------------------------------------------------------ */
    /* The hole before the footer                                    */
    /* ------------------------------------------------------------ */

    /* Most subpages pull their content 148px up over the banner with
       relative positioning - and a relatively positioned box keeps its
       original slot, so every one of those pages carried a 148px hole
       between its last card and the footer. The same pull as a margin
       moves the layout itself: identical position, no hole. */
    .small-top {
        top: 0 !important;
    }

    /* And the padding under the last card was sized against the old
       footer wave, which phones no longer draw. The per-page classes are
       spelled out because each page restates the padding with three
       classes of its own, and a general rule loses to all of them. */
    /* !important, reluctantly: each page restates this padding in its
       own inline <style>, which sits after this file in the document and
       so wins every equal-specificity tie. This is the one place where
       out-shouting them is cheaper than out-ranking eight variants. */
    .content.pages {
        padding-bottom: 36px !important;
    }

    /* The banner's trailing margin, folded into the pull-up above so the
       banner pages keep their exact position - and pages without the
       pull-up stop paying 70px for nothing. */
    .heading {
        margin-bottom: 0;
    }

    /* Three pages carry a banner with nothing in it - a 214px spacer
       from the desktop layout. Enough to clear the floating header is
       enough. */
    .heading:empty {
        /* Tuned by measurement, not by feel: 26px of spacer puts the
           white box 16px under the header card - the same breath the
           banner pages give their pill. 90px looked safe and read as a
           dead band; the second screenshot from the phone proved it. */
        height: 26px;
        background: none;
    }

    /* The theme's second pull-up: every white content box is dragged
       217px over the banner the same way, and leaves the same hole
       before the footer. On one column the box simply follows the
       banner - the pages that overlap a pill band do it through
       .small-top above, which already carries the phone value. */
    .content-box {
        top: 0 !important;
        margin-top: 0;
    }

    /* A box that is BOTH content-box and small-top: the reset above and
       the pull-up were written as two single-class rules of equal
       weight, and whichever came later in this file silently won - the
       pull-up lost, and every banner page opened with 137px of empty
       band under its pill. One element, one rule, said explicitly. */
    .content-box.small-top {
        margin-top: -104px;
    }

    /* The game page gives itself just enough padding that its dark card
       slid 4px under the header. Measured, like the rest. */
    .gd-page .content-box {
        margin-top: 20px;
    }
}