/*
 * Kolumber.pl - responsive layer
 *
 * Loaded AFTER site.css. Desktop (>= 1000px) is left untouched - every rule
 * below lives inside a max-width media query, except the hamburger button
 * which is hidden by default.
 *
 * Strategy:
 *  1. Generic: fluid boxes (max-width: 100%), images scale, floats of the main
 *     columns are dropped so columns stack vertically.
 *  2. Layout: header with hamburger menu, breadcrumbs + search, cookie, footer.
 *  3. Per-page tweaks (home, golists, golist, element, places, photos, users).
 */

/* Hamburger is hidden on desktop */
.nav-toggle,
.nav-toggle-btn { display: none; }

@media (max-width: 999px) {

    /* ------------------------------------------------------------------ */
    /* 1. Generic                                                          */
    /* ------------------------------------------------------------------ */

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

    *, *::before, *::after { box-sizing: border-box; }

    /* nothing inside the page may be wider than the screen
       (also caps inline style="width: 636px" and width: ... !important) */
    .main_page_container *,
    #footer * { max-width: 100%; }

    img { max-width: 100%; height: auto; }
    iframe, object, embed, video { max-width: 100%; }

    /* long words / URLs in user content must not widen the page */
    .main_page_container p,
    .main_page_container .desc,
    .main_page_container dd,
    .main_page_container li { overflow-wrap: break-word; word-wrap: break-word; }

    /* global fixed-width containers -> fluid */
    .container,
    .container2,
    .serwis_sumup .container,
    div.error-web,
    #flashMessage,
    #zapka {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .container .container,
    .container2 .container { padding-left: 0; padding-right: 0; }

    /* main two-column layouts -> one column */
    #main-content, #main-content2, #main-sidebar,
    .main-place-container, #main-place, #main-place-2,
    .leftPanel, .rightPanel, .left_moveBox, .right_moveBox,
    .leftPanel .short-section, .leftPanel .short-section2,
    #left-content, #goLista, #goListaHeader, #goListElements,
    .md_GolistLeft, .md_GolistRight, .md_GolistPoint,
    #photo, #photoHeader, #photoDesc, #photoBig, #photoContent,
    #interesting-places, #interesting-places .wrapper,
    #see-also, #see-also-in-europe,
    #special-places, .interesting-go-lists, #interesting-entries,
    #main-people, #main-friends, #friends,
    #profil, #place-where-i-was, #my-go-list, #my-gallery,
    #my-favorites, #my-favorites-go-list, #last-activity, #my-comments,
    #last-activity-and-my-gallery .container,
    #questions-and-answers, #adverts, #zajawka, .zajawka_and_acitvity_con,
    .big-section, .questions, #footer-place, #searchFriends {
        float: none;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .wrapper, .packet { width: auto; }

    /* touch friendly form controls (16px prevents iOS zoom on focus) */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="search"], textarea, select { font-size: 16px; }

    /* ------------------------------------------------------------------ */
    /* 2. Layout                                                           */
    /* ------------------------------------------------------------------ */

    /* --- header --- */
    .md_new_header { height: auto; }
    .md_new_header .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        padding: 0;
    }
    .md_new_header span#logo {
        margin: 0;
        width: 214px;
        background-position: -10px 0;
        flex: 0 0 auto;
    }
    .md_new_header span#logo a { width: 214px; }

    .nav-toggle {
        display: block;
        position: absolute;
        width: 1px; height: 1px;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .nav-toggle-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        margin-left: auto;
        width: 48px;
        height: 45px;
        padding: 0 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle-btn span {
        display: block;
        height: 3px;
        border-radius: 2px;
        background: #fff;
        transition: transform .2s, opacity .2s;
    }
    .nav-toggle:focus-visible + .nav-toggle-btn { outline: 2px solid #fff; outline-offset: -4px; }
    .nav-toggle:checked + .nav-toggle-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-toggle:checked + .nav-toggle-btn span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-toggle-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .md_new_header .main_nav,
    .md_new_header .user_panel {
        display: none;
        float: none;
        flex: 0 0 100%;
        height: auto;
        line-height: normal;
        background: #3c728c;
    }
    .nav-toggle:checked ~ .main_nav,
    .nav-toggle:checked ~ .user_panel { display: block; }

    .md_new_header .main_nav li {
        float: none;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .md_new_header .main_nav li a {
        float: none;
        display: block;
        padding: 12px 16px;
        font-size: 17px;
    }
    .md_new_header .main_nav li.selected a { background-color: #2f5f76; }

    .md_new_header .user_panel { width: auto !important; }
    .md_new_header .user_panel ul {
        float: none;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        padding: 10px 16px;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .md_new_header .user_panel ul li { float: none; padding: 0; }
    .md_new_header .user_panel ul li span { float: none; padding-top: 0; }
    .md_new_header .user_panel ul li a { font-size: 15px; }
    .md_new_header .buttons_gren { margin-top: 0; }

    /* --- breadcrumbs + search --- */
    #breadcrumbs {
        height: auto;
        line-height: 1.5;
        padding: 6px 0;
        font-size: 12px;
    }
    #breadcrumbs .container { display: flex; flex-direction: column; gap: 6px; }
    #breadcrumbs ul { display: flex; flex-wrap: wrap; }
    #breadcrumbs li { float: none; }
    #breadcrumbs a { padding: 4px 5px; }
    #breadcrumbs form { float: none; margin: 0; width: 100%; }
    #breadcrumbs form fieldset { display: flex; flex-direction: row-reverse; gap: 6px; }
    #breadcrumbs form input.fill {
        float: none;
        flex: 1 1 auto;
        width: auto;
        height: 36px;
        margin: 0;
        padding: 4px 8px;
        border-radius: 3px;
    }
    #breadcrumbs form input.submit {
        float: none;
        flex: 0 0 auto;
        width: auto;
        height: 36px;
        padding: 0 14px;
        background: #5192B1;
        color: #fff;
        font-size: 14px;
        border-radius: 3px;
        cursor: pointer;
    }

    /* --- cookie consent bar (fixed to the bottom) --- */
    .cookie-consent { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent button { flex: 1 1 0; min-width: 0; min-height: 40px; font-size: 15px; }

    /* --- footer --- */
    #footer { padding: 16px 0; }
    #footer ul {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0;
        margin-bottom: 10px;
    }
    #footer li { float: none; }
    #footer a { display: inline-block; padding: 4px 0; font-size: 14px; }
    #license { text-align: left; }

    /* --- pagination (bigger tap targets) --- */
    .md_pag .container { float: none !important; width: auto !important; padding: 0 !important; }
    .pages, .pagination { float: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px !important; }
    .pages span, .pages a, .pagination span, .pagination a { float: none !important; }
    .pages span.pages a, .pages span.pages span, .pagination span.pages a {
        display: inline-block;
        min-width: 36px;
        padding: 6px 8px !important;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------- */
/* 3. Pages                                                                */
/* ---------------------------------------------------------------------- */
@media (max-width: 999px) {

    /* headings that floated next to the intro text */
    .md_new_main h2,
    .leftPanel h2.golistsHeader,
    .leftPanel h2.placesHeader,
    .leftPanel h2.peopleHeader,
    .leftPanel .short-section h2.photo { float: none; clear: both; }

    /* justified text looks bad in narrow columns */
    .md_GolistLeft p, .md_GolistLeft div.desc,
    .main_page_container p, .main_page_container .desc { text-align: left !important; }

    /* grey "Pokaż więcej" bars */
    #main .actions, #main .actions-nobg,
    #interesting-places .actions, .short-section .actions, .short-section2 .actions,
    .golistactions, ul.actions { width: auto; }
    #my-go-list ul.actions, #my-gallery ul.actions, #main-people ul.actions,
    #goListCommentsContener ul.actions, #photoCommentsContener ul.actions { float: none; width: auto; }

    /* --- photo cards: places / golists / photos (home, lists, place) --- */
    .new_places_list, .md_golist_list, .new_photos_list { float: none !important; width: auto; }
    .new_places_list li, .md_golist_list li, .new_photos_list li {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 8px;
        width: auto;
        margin-bottom: 8px;
    }
    .new_places_list li div, .md_golist_list li div, .new_photos_list li div {
        float: none;
        margin: 0;
    }
    .new_places_list li div > a > img,
    .md_golist_list li div > a > img,
    .new_photos_list li div > a > img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .new_places_list li div span, .md_golist_list li div span, .new_photos_list li div span {
        width: auto;
        right: 6px;
        line-height: 1.45;
    }
    .md_golist_list li span.golistInactive { left: auto; right: 12px; bottom: auto; top: 12px; width: auto; }

    /* --- small thumbnail grids (golist photos, user galleries, ...) --- */
    .md_GolistPoint ul.box,
    .interesting-go-lists ul.box,
    #my-gallery ul, #my-favorites ul, #my-favorites-go-list ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: 6px;
        width: auto;
        float: none;
    }
    .md_GolistPoint ul.box li, .interesting-go-lists ul.box li,
    #my-gallery li, #my-favorites li, #my-favorites-go-list li {
        float: none;
        width: auto !important;
        margin: 0 !important;
    }
    .md_GolistPoint ul.box li dl, .interesting-go-lists ul.box li dl { width: auto !important; }
    .md_GolistPoint ul.box li dd.image, .interesting-go-lists ul.box li dd.image,
    li.md_photo dl dd.image { width: auto !important; float: none; }
    .md_GolistPoint ul.box img, .interesting-go-lists ul.box img,
    #my-gallery li img, #my-favorites li img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
    }

    /* --- lists with 80px thumbnail + title (supermiejsca, ciekawe podróże, ...) --- */
    #special-places ul, .interesting-go-lists ul, #interesting-entries ul, .short-section ul,
    #moderate ul, #interesting-places ul { width: auto; float: none; }
    #special-places ul#box_miejsc,
    #interesting-places .interesting-places-elements ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 8px;
    }
    #special-places li, .interesting-go-lists li, #interesting-entries li, .short-section li,
    #special-places li.odd, .interesting-go-lists li.odd, #interesting-entries li.odd, .short-section li.odd,
    #interesting-places li {
        float: none;
        width: auto;
        margin-left: 0;
    }
    #special-places dl, .interesting-go-lists dl, #interesting-entries dl, .short-section dl,
    #interesting-places dl { display: flex; align-items: center; gap: 10px; width: auto; }
    #special-places dt, .interesting-go-lists dt, #interesting-entries dt, .short-section dt,
    #interesting-places dt {
        float: none;
        order: 2;
        width: auto;
        margin: 0;
        font-size: 15px;
    }
    #special-places .image, .interesting-go-lists .image, #interesting-entries .image, .short-section .image,
    #interesting-places .image { float: none; order: 1; flex: 0 0 auto; }
    #special-places .description, .interesting-go-lists .description, #interesting-entries .description,
    .short-section .description, #interesting-places .description { display: none; }

    /* --- golist (podróż) page --- */
    .md_GolistLeft, .md_GolistRight { padding-top: 10px; }
    .md_GolistLeft .md_GolistHeader { width: auto; float: none; }
    .golist-toc { float: none; } /* entries do not float here - keeps the gap above the first entry */
    .md_GolistLeft .md_GolistHeader h1 { font-size: 22px; line-height: 1.25; }
    .md_GolistPoint { padding-top: 16px; }
    .md_GolistPoint .md_PointHeader { display: flex; flex-wrap: wrap; align-items: center; }
    .md_GolistPoint .md_PointHeader .content { flex: 1 1 0; min-width: 0; }
    .md_GolistPoint .md_PointHeader .meta { flex: 0 0 100%; }
    .md_GolistPoint h3 { float: none; font-size: 20px; line-height: 1.25; }
    .md_GolistPoint .desc, .md_GolistPoint .md_PointLinks { width: auto; float: none; }
    .md_GolistPoint .wrapper { width: auto !important; padding-left: 0; }
    .video_show, div.video_show_con { width: auto !important; float: none !important; }
    .md_UserInfo { float: none; width: auto; }
    .md_UserInfo h3 { width: auto; }
    .md_UserInfo ul { width: auto; }
    .md_GolistRight .md_UserMenu, .md_GolistRight .md_GolistGooglemap { float: none; }
    ul.golist-action { width: auto; }

    /* golist element page (/elementy/show) */
    #goListElements .element, #goListElements .element .content,
    #goListElements .element .content .desc { float: none; width: auto; }
    #goListElements .element .photo, #goListElements .element .photo-e { float: none; }
    #goLista #map { float: none; width: auto; }
    #goLista #map:empty { display: none; }
    #goLista #goListaHeader h1 { font-size: 22px; line-height: 1.25; }
    #golistDesc { width: auto !important; padding-left: 0 !important; }
    #golistDesc ul#photo-pagination { float: none !important; }

    /* comments (golist + photo) */
    #goLista #goListCommentsContener, #photo #photoCommentsContener { float: none; width: auto; }
    #goLista #goListCommentsContener #goListComments,
    #photo #photoCommentsContener #photoComments,
    #goLista #goListCommentsContener #goListAddComments,
    #photo #photoCommentsContener #photoAddComments { width: auto; float: none; padding-right: 7px; }
    #goListComments ol li, #photoComments ol li { width: auto !important; float: none !important; display: flex; gap: 8px; }
    #goListComments ol li.hidden, #photoComments ol li.hidden { display: none; }
    #goListComments .av, #photoComments .av { flex: 0 0 50px; width: 50px !important; height: auto !important; }
    #goListComments .commentContent, #photoComments .commentContent,
    #goListComments .commentContent .meta, #photoComments .commentContent .meta { float: none !important; width: auto !important; flex: 1 1 0; min-width: 0; }
    #goListComments .commentContent .meta, #photoComments .commentContent .meta { display: flex; flex-wrap: wrap; align-items: center; }

    /* --- photo page: photo, prev/next, author, then comments --- */
    .new_photo_show { display: flex; flex-direction: column; }
    .new_photo_show #left-content,
    .new_photo_show #photo,
    .new_photo_show #main-sidebar { display: contents; }
    .new_photo_show #photoHeader { order: 1; }
    .new_photo_show #photoDesc { order: 2; }
    .new_photo_show #photo-pagination { order: 3; }
    .new_photo_show .md_UserInfo { order: 4; margin-top: 10px; }
    .new_photo_show #choise-action { order: 5; }
    .new_photo_show #photoCommentsContener { order: 6; }
    #photo #photoHeader { width: auto; float: none; }
    #photo h1 { font-size: 22px; line-height: 1.25; }
    #photo h2 { font-size: 18px; }
    #photo #action { width: auto; }
    #photo #photoDesc, #photo #photoDesc dl dd.description, #photo #photoDesc .photoDesc { width: auto; float: none; }
    #photo #photoBig { width: auto; padding: 0 0 10px; }
    #photoDesc ul li.photoBig, #photo #photoDesc .photoBig { float: none; padding: 8px 0; }
    #photo #photoDesc .photoBig img { display: block; width: 100%; height: auto; }
    .new_photo_show #photo-pagination {
        float: none;
        display: flex;
        justify-content: space-between;
        width: auto;
        margin: 6px 0;
        font-size: 18px;
    }
    .new_photo_show #photo-pagination li { float: none !important; padding: 6px 0 !important; }
    .new_photo_show #choise-action { float: none; width: auto; margin-top: 10px; }

    /* --- place (miejsce) page --- */
    #main-place { padding: 10px 0; }
    #main-place h1, #main-place h2 { float: none; padding-left: 0; font-size: 22px; line-height: 1.25; }
    #main-place dl, #main-place #action { position: static; float: none; margin: 0; }
    #main-menu {
        float: none;
        width: auto;
        padding: 0;
        margin-bottom: 8px;
        background: none;
    }
    #main-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
        background: none;
    }
    #main-menu li { width: auto; padding: 0; background: none; }
    #main-menu a, #main-menu span {
        width: auto;
        padding: 6px 12px;
        border: 1px solid #AEDBF0;
        border-radius: 16px;
        line-height: 1.4;
        font-size: 13px;
    }
    #main-menu a.active { background: #fdffc3; }
    #gallery-places, #gallery-places .main-gallery, #main-gallery, .main-gallery {
        float: none !important;
        width: auto;
        height: auto;
    }
    .main-gallery img, #main-gallery img { width: 100%; height: auto; }
    .main-gallery-panel, #main-gallery-panel { width: auto; right: 0; }
    .main-gallery-panel .gallery-text { float: none; width: auto; padding-right: 90px; }

    #main-people li.first-level,
    #friends li.first-level, #main-friends li.first-level, .short-section2 li.first-level,
    div.short-section2 ul.first-level li.first-level { float: none; width: auto; margin-bottom: 10px; }
    #main-people ul.first-level ul,
    div.short-section2 ul.first-level li.first-level ul,
    div.container2 div.leftPanel div.short-section2 ul.first-level li.first-level ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 6px;
        float: none;
        width: auto;
    }
    #main-people ul.first-level ul li,
    div.short-section2 ul.first-level li.first-level ul li { float: none; width: auto; margin: 0; }
    #main-people li .box_user { height: auto; margin-top: 0; }

    #questions-and-answers .packet { width: auto; }
    #questions-and-answers form input.fill { width: calc(100% - 85px); }

    #footer-place dl { float: none; margin: 0 9px; }

    /* places index (/places/) */
    #main-place-2 h1, #main-place-2 h2 { float: none; padding-left: 0; font-size: 22px; }
    #main-place-2 form { display: flex; gap: 6px; padding: 8px 0; }
    #main-place-2 input.text { flex: 1 1 auto; width: auto; margin: 0; }
    #main-place-2 input.submit { margin: 0; }
    #see-also .container, #see-also-in-europe .container { width: auto; padding: 8px 10px 0; background: none; }
    #see-also ul, #see-also-in-europe ul { float: none; width: auto; display: flex; flex-wrap: wrap; }
    #see-also ul li, #see-also-in-europe ul li { float: none; width: 50%; margin: 0; font-size: 13px; line-height: 2.2; }
    #see-also, #see-also-in-europe { background: none; }

    /* --- lists: tags, users, misc --- */
    /* tags index (/t/) + search results: photo on the left, name and tags on the right
       (overrides the generic .short-section dl flex row, which knows nothing about dd.tags) */
    ul#ides li, ul#ides li dl { width: auto; float: none; }
    ul#ides li { margin: 0 0 12px; }
    ul#ides li dl {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas: "image title" "image tags";
        grid-template-rows: auto 1fr;
        gap: 4px 10px;
        align-items: start;
    }
    ul#ides li dl dt {
        grid-area: title;
        float: none;
        width: auto;
        margin: 0;
        line-height: 1.3;
    }
    ul#ides li dl dd.image,
    ul#ides li dl dd.image_search { grid-area: image; float: none; width: 80px; }
    ul#ides li dl dd.image_search img { display: block; }
    ul#ides li dl dd.tags {
        grid-area: tags;
        float: none;
        width: auto;
        margin: 0;
        line-height: 1.7;
    }
    .tagsRelated { float: none; width: auto; margin: 10px 0; }
    .tagCloud { text-align: left; line-height: 1.9; }
    /* only tags, separators must stay breakable (places cloud on /g/ has no other whitespace) */
    .tagCloud > span[class^="tag_size_"] { white-space: nowrap; }
    .leftPanel .short-sectionPadding { width: auto; float: none; padding: 8px 0; }
    .short-sectionPadding .essence { width: auto; }
    #main-people li { width: auto; }
    #friends #main-content .first-level li { width: auto; height: auto; }

    /* profile */
    #profil dt { float: none; width: auto; }
    #profil dd.description { width: auto; margin-left: 0; }
    #profil dd.akcje { position: static; width: auto; }
    #profil .report { width: auto; }
    #google-map-container { width: auto; height: auto; background: none; }

    /* login / forms */
    .loginCenter { width: auto; }
    #login, #login .formChbox, #login .formSubmit, #login hr { float: none; width: auto; }
    #login .formPart { float: none; }
    #login .formPart input { width: 100%; height: 40px; }
    #registerInfo { float: none; width: auto; height: auto; margin: 16px 0 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid #ccc; }
    #form-edit, #add-place { width: auto; }

    /* static pages, sitemap */
    .alphabet ul { margin-left: 0; display: flex; flex-wrap: wrap; }
    .alphabet li { float: none; width: 36px; line-height: 36px; text-align: center; }
    .md_li { width: 50%; }
}

/* ---------------------------------------------------------------------- */
/* Small phones                                                            */
/* ---------------------------------------------------------------------- */
@media (max-width: 599px) {
    h1 { font-size: 1.6em; line-height: 1.25; }

    /* travel page: table of contents in one column */
    .golist-toc-columns ol { column-count: 1; }
}