/****************************************************************************************************
* MOBILE / NARROW VIEWPORT (<= 999px) - additive overrides on top of style.css.
* Desktop (>= 1000px, the only width the fixed layout fits) never evaluates anything in this file.
* Rules mirror style.css selectors; !important appears only where a template carries an inline style="".
* Hidden on mobile: sidebar column (.left, except the newsletter trigger cell), desktop ad units (.right2, .list-adv).
****************************************************************************************************/

@media (max-width: 999px) {

    :root {
        --m-blue: #0289D1;        /* brand blue: footer border / menutop.png bar */
        --m-border: #DFDFDF;      /* box border, same as .box-2 / .articles */
        --m-row-border: #F0F0F0;  /* list row separators */
        --m-input-border: #CCC;
        --m-gutter: 8px;          /* page side padding */
        --m-gap: 8px;             /* vertical rhythm between blocks */
        --m-radius: 4px;
        --m-font: 15px;           /* body copy */
        --m-font-input: 16px;     /* >= 16px so iOS Safari does not zoom on focus */
        --m-dropdown-max-height: 260px;
    }

    /* ---------------------------------------------------------------- global */

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: var(--m-font);
        line-height: 1.45;
    }

    table {
        font-size: inherit;
    }

    .container {
        width: auto;
    }

    .content {
        padding: 0 var(--m-gutter);
    }

    h1 {
        width: auto;
        line-height: 1.3;
        padding: 6px 0;
    }

    .right {
        float: none;
        width: auto;
    }

    /* desktop-only blocks (the dziubek.jpg arrows, the dead newsletter_city input and its #where-sugest2 wrapper included) */
    .left:not(.newsletter-trigger),
    .right2,
    .list-adv,
    .header .menu-top,
    .header .buttons,
    .header .btn,
    .search-form .industry_img,
    .search-form .localization_img,
    .newsletter .industry_img,
    .newsletter .localization,
    .newsletter input[name='newsletter_city'],
    .newsletter form > div:not([class]) {
        display: none !important;
    }

    /* ---------------------------------------------------------------- header */

    .header {
        width: auto;
        height: auto;
        background: #fff;
        padding-bottom: 10px;
        text-align: center;
    }

    .header h2 {
        position: static;
        background: var(--m-blue);
        padding: 5px var(--m-gutter);
        font-size: 11px;
        line-height: 1.3;
    }

    .header .logo {
        position: static;
        display: inline-block;
        margin-top: 12px;
    }

    .panel {
        position: static;
        width: auto;
        height: auto;
        margin: var(--m-gap) var(--m-gutter) 0;
    }

    /* ---------------------------------------------------------------- search panel
       wyszukiwarka.png (labels baked in) is dropped; controls are re-ordered with flex `order`
       so the template DOM stays untouched: keywords > industry combo > industry list > location combo > city/region list > PFRON > button */

    .search-form {
        width: auto;
        height: auto;
        background: var(--m-blue);
        padding: 10px;
        border-radius: var(--m-radius);
    }

    .search-form form {
        display: flex;
        flex-direction: column;
    }

    .search-form form > * {
        margin-top: var(--m-gap);
    }

    .search-form form > :first-child {
        margin-top: 0;
    }

    .search-form input,
    .search-form select {
        position: static;
    }

    .search-form input[name='what'] {
        order: 1;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid var(--m-input-border);
        border-radius: var(--m-radius);
        padding: 10px;
        font-size: var(--m-font-input);
    }

    /* combo boxes: search panel (.count-1/-2) and newsletter panel (.count-3/-4) */
    .search-form .count-1,
    .search-form .count-2,
    .newsletter .count-3,
    .newsletter .count-4 {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        z-index: auto;
        background: #fff;
        border: 1px solid var(--m-input-border);
        border-radius: var(--m-radius);
        padding: 10px 32px 10px 10px;
        font-size: var(--m-font-input);
    }

    .search-form .count-1::after,
    .search-form .count-2::after,
    .newsletter .count-3::after,
    .newsletter .count-4::after {
        content: "\25BE";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #666;
    }

    .search-form .count-1 { order: 2; }
    .search-form .industry-div { order: 3; }
    .search-form .count-2 { order: 4; }
    .search-form .localization-div { order: 5; }
    .search-form .pfron-search { order: 6; }
    .search-form input[type='image'] { order: 7; }

    .search-form .industry-div,
    .search-form .localization-div {
        position: static;
        width: auto;
        max-height: var(--m-dropdown-max-height);
        overflow-y: auto;
        padding: 6px 10px;
        border-radius: var(--m-radius);
    }

    .search-form .industry-div table,
    .search-form .localization-div table {
        width: 100%;
    }

    .search-form .industry-div td,
    .search-form .localization-div td {
        padding: 6px 0;
    }

    .search-form .industry-div span,
    .search-form .localization-div span {
        padding-left: 8px;
    }

    .search-form input[type='checkbox'] {
        width: 20px;
        height: 20px;
        margin: 0;
        vertical-align: middle;
    }

    .search-form input[name='where'] {
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        font-size: var(--m-font-input);
        border-radius: var(--m-radius);
    }

    .search-form .pfron-search {
        position: static;
        font-size: 14px;
        text-transform: none;
        white-space: normal;
        padding: 2px 0;
    }

    .search-form input[type='image'] {
        align-self: center;
        margin-top: 10px;
    }

    /* ---------------------------------------------------------------- newsletter panel
       newsletter.png (labels baked in) is dropped; .newsletter-label elements (desktop-hidden) provide the text labels.
       Same flex `order` technique as the search panel: keywords > industry combo/list > location combo/list > e-mail > button > consent.
       Panel open/close stays jQuery slideDown/slideUp (inline display) - nothing here touches display on .newsletter. */

    .newsletter-trigger {
        float: none;
        width: auto;
        text-align: center;
    }

    .newsletter {
        width: auto;
        height: auto;
        background: var(--m-blue);
        padding: 44px 10px 12px;
        margin-top: var(--m-gap);
        border-radius: var(--m-radius);
    }

    #close-newsletter {
        top: 6px;
        right: 6px;
        padding: 4px;
    }

    .newsletter form {
        display: flex;
        flex-direction: column;
    }

    .newsletter form > * {
        margin-top: var(--m-gap);
    }

    .newsletter form > input[type='text'] {
        margin-top: 3px;
    }

    .newsletter input,
    .newsletter select {
        position: static;
    }

    .newsletter-label {
        display: block;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
    }

    .newsletter label[for='newsletter_words'] { order: 1; margin-top: 0; }
    .newsletter input[name='newsletter_words'] { order: 2; }
    .newsletter .count-3 { order: 3; }
    .newsletter .industry-div { order: 4; }
    .newsletter .count-4 { order: 5; }
    .newsletter .localization-div { order: 6; }
    .newsletter label[for='newsletter_email'] { order: 7; }
    .newsletter input[name='newsletter_email'] { order: 8; }
    .newsletter input[type='image'] { order: 9; }
    .newsletter .newsletter-consent { order: 10; }

    .newsletter input[name='newsletter_words'],
    .newsletter input[name='newsletter_email'],
    .newsletter input[name='where'] {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid var(--m-input-border);
        border-radius: var(--m-radius);
        padding: 10px;
        font-size: var(--m-font-input);
    }

    .newsletter .industry-div,
    .newsletter .localization-div {
        position: static;
        width: auto;
        max-height: var(--m-dropdown-max-height);
        overflow-y: auto;
        padding: 6px 10px;
        border-radius: var(--m-radius);
    }

    .newsletter .industry-div table,
    .newsletter .localization-div table {
        width: 100%;
    }

    .newsletter .industry-div td,
    .newsletter .localization-div td {
        padding: 6px 0;
    }

    .newsletter .industry-div span,
    .newsletter .localization-div span {
        padding-left: 8px;
    }

    .newsletter input[type='checkbox'] {
        width: 20px;
        height: 20px;
        margin: 0;
        vertical-align: middle;
    }

    .newsletter input[type='image'] {
        align-self: center;
        margin-top: 12px;
        padding: 8px;
    }

    .newsletter .newsletter-consent {
        position: static;
        white-space: normal;
        text-align: center;
        font-size: 12px;
        line-height: 1.4;
    }

    /* ---------------------------------------------------------------- status message after newsletter submit (and other form results) */

    .msg-true,
    .msg-false {
        text-align: left;
        padding: 14px 12px 14px 70px;
        background-position: 10px center;
    }

    /* ---------------------------------------------------------------- mobile ad slots (zones MOBILE_TOP / MOBILE_LIST in adverts.tpl) */

    .ad-mobile {
        display: block;
        margin: var(--m-gap) 0;
        text-align: center;
        overflow: hidden;
    }

    /* ---------------------------------------------------------------- home */

    h1.home {
        width: auto;
        box-sizing: border-box;
        background: var(--m-blue);
        padding: 8px 12px;
        line-height: 1.3;
        font-size: 16px;
        margin-bottom: var(--m-gap);
    }

    .total_job_count_label {
        float: none;
        display: block;
        position: static;
        left: auto;
        margin-top: 2px;
    }

    .total_job_count {
        font-size: 16px;
    }

    .box-wide,
    .box-left,
    .box-right {
        float: none;
        width: auto;
        height: auto;
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        margin-top: var(--m-gap);
        padding-bottom: 6px;
    }

    .box-left ul,
    .box-right ul,
    .box-wide ul {
        width: auto;
        margin: 0;
    }

    .box-left li,
    .box-right li,
    .box-wide li {
        font-size: var(--m-font);
        padding: 8px 12px 8px 30px;
        margin-top: 0;
        border-top: 1px solid var(--m-row-border);
    }

    #regions_short h2,
    #cities_short h2,
    #industries_short h2,
    #advertising h2,
    #new_jobs h2,
    #promoted_jobs h2 {
        background-position: right 10px center;
    }

    .articles-home .box-small {
        float: none;
        width: auto;
        height: auto;
        background: #fff;
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        margin: var(--m-gap) 0 0;
        padding: 12px;
        overflow: hidden;
    }

    /* ---------------------------------------------------------------- listing / hubs */

    .filters {
        width: auto;
        margin-bottom: var(--m-gap);
    }

    /* table -> stacked blocks; a display:table with block cells shrink-wraps instead of honouring width:100% */
    .filters table,
    .filters tbody,
    .filters tr,
    .filters td {
        display: block;
        width: auto;
    }

    .filters table {
        position: static;
        padding: 6px 10px;
    }

    .filters table td {
        padding: 3px 0;
    }

    .filters table select {
        width: 100%;
        padding: 6px;
        font-size: var(--m-font-input);
    }

    .filters .pfron-cell {
        padding-left: 0;
        text-align: left;
        white-space: normal;
    }

    .pfron-empty {
        margin: var(--m-gap) 0;
    }

    .jobs {
        width: auto;
        min-height: 0;
        padding: 10px 12px;
    }

    .jobs h2,
    .jobs .title {
        font-size: 17px;
        line-height: 1.3;
    }

    .jobs .firm,
    .jobs .date,
    .jobs .city,
    .jobs .industry {
        float: none;
        line-height: 1.5;
    }

    .jobs .date {
        font-size: 13px;
    }

    /* 17px-wide "superoferta" ribbon sits inside the box padding instead of overhanging it */
    .jobs.promoted-div {
        padding-left: 30px;
    }

    .jobs .promoted {
        left: 6px;
    }

    .paging {
        padding: 10px 0;
    }

    .paging a {
        display: inline-block;
        padding: 8px 12px;
        margin: 3px 2px;
    }

    /* ---------------------------------------------------------------- offer / article / page column
       templates carry style="float:left" / style="width:175px" inline on .div-border and on the .side-col wrapper
       (similar offers + 160x600 ad) - hence !important. Selectors are deliberately non-structural: the CBOP blob
       can contain stray closing tags that end .div-border/.right early, so nesting cannot be relied on. */

    .div-border {
        float: none !important;
        width: auto !important;
        box-sizing: border-box;
    }

    .side-col {
        float: none !important;
        width: auto !important;
    }

    .side-col .div-border {
        margin-top: 12px !important;
    }

    .side-col ul {
        width: auto !important;
    }

    .job-info {
        width: auto;
        min-height: 0;
        padding: 4px 0;
    }

    .job-info .industry,
    .job-info .date,
    .job-info .localization {
        position: static;
        display: block;
        margin: 3px 0;
    }

    .key-info {
        width: auto;
    }

    .apply-btn {
        display: block;
        text-align: center;
        padding: 12px;
        font-size: 16px;
    }

    .description {
        width: auto;
    }

    .description .head {
        display: block;
        padding: 8px 12px;
        line-height: 1.4;
    }

    .description .text {
        padding: 10px 8px;
        text-align: left;
        overflow-x: auto;
        font-size: var(--m-font);
    }

    .description .text img {
        max-width: 100%;
        height: auto;
    }

    .description .text table {
        max-width: 100%;
    }

    /* CBOP blob two-column rows */
    .kol-etykieta,
    .kol-wartosc {
        float: none;
        width: auto;
        padding-left: 0;
    }

    .kol-wartosc {
        margin-top: 2px;
    }

    .article-body {
        padding: 0 4px 8px;
        font-size: var(--m-font);
    }

    .article-body .article-thumb {
        width: 90px;
        margin: 0 0 8px 12px;
    }

    .article-body .privacy-table {
        display: block;
        overflow-x: auto;
    }

    /* ---------------------------------------------------------------- footer */

    .privacy-link {
        float: none !important;
        display: block;
        clear: both;
        text-align: center;
    }

    .footer {
        height: auto;
        margin-top: 24px;
        padding: 12px var(--m-gutter) 10px;
    }

    .footer .logo {
        position: static;
        display: block;
        margin: 0 auto 6px;
    }

    .copyright {
        position: static;
    }
}