/* Mobile overrides only - desktop layout stays as the original template */

.gk-burger { display: none; }

@media (max-width: 1020px) {
    html { min-width: 0 !important; }
    #gkWrap1, #gkWrap2, #gkWrap3 { width: auto; padding: 0 12px; box-sizing: border-box; }
    img, iframe, object, embed { max-width: 100%; }
    img { height: auto; }
    iframe[src*="youtube"] { height: auto; aspect-ratio: 16 / 9; }
    table { max-width: 100%; }
}

@media (max-width: 760px) {
    #gkContent, #gkRight { width: 100% !important; float: none !important; }
    #gkContentMainbody { margin-right: 0; }

    /* inline-styled and Joomla columns stack */
    #gkMain [style*="float"], #gkTop1 [style*="float"],
    .cols-2 .column-1, .cols-2 .column-2,
    .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3, .column-2, .column-3 {
        float: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 0 !important;
    }

    #gkLogo { display: flex; justify-content: center; }

    /* homepage 3 boxes */
    .demoFront1 .custom > div { float: none !important; width: auto !important; margin: 0 0 20px !important; }

    /* header slider: smaller headline, screenshot image hidden */
    #gkHeader { display: block; width: auto; }
    .gkTab { max-width: 100%; overflow: hidden; }
    #gkHeader .gkTab .gkTabContainer0, #gkHeader .gkTab .gkTabContainer1 { height: auto; }
    .tabHeaderStyle { zoom: .6; float: none; width: auto; }
    .gkTabItemSpace { overflow: hidden; }
    .gkTabItem img { display: none; }

    /* burger menu inside the black bar (the bar sprite can't grow, so a matching gradient) */
    #gkPageTop { height: auto !important; background: linear-gradient(#2b2b2b, #000 52px, #000); }
    #gkMenu, .gk-menu, .gk-menu ul.level0 { float: none; width: auto; height: auto !important; }
    #gkPageTop .gk-burger { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; background: none; border: 0; color: #fff !important; font: bold 14px Verdana, Geneva, sans-serif; cursor: pointer; }
    #gkPageTop .gk-burger svg { width: 22px; height: 22px; }
    #gkPageTop .gk-burger .gk-burger-close, #gkPageTop.menu-open .gk-burger .gk-burger-open { display: none; }
    #gkPageTop.menu-open .gk-burger .gk-burger-close { display: block; }
    #gkPageTop div.gk-menu { display: none; padding-bottom: 10px; }
    #gkPageTop.menu-open div.gk-menu { display: block; }
    #gkPageTop div.gk-menu > ul.level0 { display: block; }
    #gkPageTop div.gk-menu > ul.level0 > li { float: none; display: block; background: none; height: auto; margin: 0; padding: 0; }
    #gkPageTop div.gk-menu > ul.level0 > li > a { display: block; float: none; height: auto; line-height: 42px; padding: 0 20px; border-top: 1px solid #222; }
    #gkPageTop div.gk-menu > ul.level0 > li > .childcontent { display: block; position: static; left: auto; top: auto; width: auto !important; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; opacity: 1; visibility: visible; }
    #gkPageTop div.gk-menu .childcontent-inner-wrap, #gkPageTop div.gk-menu .childcontent-inner, #gkPageTop div.gk-menu > ul.level0 > li > .childcontent .gkcol { width: auto !important; float: none; background: none; padding: 0; margin: 0; }
    #gkPageTop div.gk-menu > ul.level0 > li .childcontent ul li { float: none; background: none; border: 0; padding: 0; margin: 0; }
    #gkPageTop div.gk-menu > ul.level0 > li .childcontent ul li a { display: block; line-height: 38px; padding: 0 20px 0 40px; color: #ccc; }

    /* long words / urls in articles */
    #gkComponentWrap { overflow-wrap: anywhere; }
}