/* mobile overrides for the fixed 960px grid — loaded last, active below 960px only */

@media only screen and (max-width: 959px) {

    body {
        min-width: 0;
    }

    /* linearize the 960 grid: full-width container, stacked cells */
    .container_12 {
        width: 100%;
    }

    .container_12 .grid_1,
    .container_12 .grid_2,
    .container_12 .grid_3,
    .container_12 .grid_4,
    .container_12 .grid_5,
    .container_12 .grid_6,
    .container_12 .grid_7,
    .container_12 .grid_8,
    .container_12 .grid_9,
    .container_12 .grid_10,
    .container_12 .grid_11,
    .container_12 .grid_12 {
        display: block;
        width: auto;
        float: none;
        margin-left: 16px;
        margin-right: 16px;
    }

    /* images scale down and lose their desktop-only negative offsets;
       !important because the per-image desktop rules use id selectors */
    .container_12 img {
        max-width: 100%;
        height: auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    h1 {
        font-size: 22px;
    }

    /* animated actions banner and placeholders keep their aspect ratio */
    div#actions_medlee {
        width: 100%;
        max-width: 460px;
        height: auto;
        aspect-ratio: 460 / 280;
    }

    .grid_4_image_placeholder,
    .grid_5_image_placeholder,
    .grid_6_image_placeholder {
        width: 100%;
    }

    /* header: the 1000px hero layer scales with the viewport instead of cropping */
    div#app_icon {
        height: 50vw;
    }

    div#header_container {
        height: calc(50vw + 30px);
        background-size: 100% 40px, 100% auto, cover;
        background-position: center bottom, center top, center top;
    }

    div#app_icon_on_minor_pages {
        height: 33vw;
    }

    div#header_container_on_minor_pages {
        height: calc(33vw + 30px);
        background-size: 100% 40px, 100% auto, cover;
        background-position: center bottom, center top, center top;
    }

    div#minor_pages_spacer {
        height: 40px;
    }

    /* buy/download row spans the viewport, buttons at opposite ends */
    div#button_row {
        width: 100%;
    }

    div#button_spacer {
        display: none;
    }

    div#buy_button,
    div#download_button {
        width: 46%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    div#buy_button {
        margin-left: 2%;
    }

    div#download_button {
        float: right;
        margin-right: 2%;
    }

    /* rating block gets breathing room when its column stacks */
    div#current_rating {
        margin: 16px 0;
    }

    /* footer height is content-driven once the columns stack */
    div#footer_container {
        height: auto;
        padding-bottom: 24px;
    }

    /* background-attachment: fixed renders unreliably on ios safari */
    div#content_container {
        background-attachment: scroll, scroll;
    }
}