/* e-Pszczelarz.pl / Cloudy2026 - RWD stage 2
   Naglowek, tresc K2 i legacy moduly/sliderowe.
   Tylko breakpointy mobilne/tabletowe; desktop pozostaje bez zmian.
*/

@media (max-width: 1024px) {
  #ja-header .main,
  #ja-header .inner,
  #ja-mainnav .main,
  #ja-topsl .main,
  #ja-container > .main,
  #eps-bottom-full > .main,
  #ja-botsl .main,
  #ja-footer .main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .k2Container,
  .itemList,
  .itemListView,
  .itemView,
  .catItemView,
  .latestItemView,
  .genericItemView {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #headerRound1,
  #headerRound2,
  #headerRound3,
  #headerRound4,
  #headerRound5,
  #headerRound6 {
    display: none !important;
  }

  #ja-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #ja-header > .main {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }

  #ja-header .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #ja-header h1.logo,
  #ja-header .logo-text {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #ja-header h1.logo a {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #ja-header h1.logo img {
    display: block !important;
    width: auto !important;
    max-width: min(260px, 88vw) !important;
    max-height: 78px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  #searchWrapper,
  #ja-search {
    display: block !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
  }

  #ja-search form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #ja-search input[type="text"],
  #ja-search input.inputbox,
  #ja-search .inputbox {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
  }

  #ja-current-content,
  .ja-content-main,
  .k2Container,
  .itemList,
  .itemListView,
  .itemView,
  .catItemView,
  .latestItemView,
  .genericItemView,
  .itemContainer,
  .itemContainerLast,
  .itemColumn,
  .article_column,
  .article-column,
  .blog-item {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .catItemView,
  .latestItemView,
  .genericItemView,
  .itemView {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  .catItemImageBlock,
  .latestItemImageBlock,
  .genericItemImageBlock,
  .itemImageBlock {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .catItemImageBlock img,
  .latestItemImageBlock img,
  .genericItemImageBlock img,
  .itemImageBlock img,
  .catItemImage img,
  .latestItemImage img,
  .genericItemImage img,
  .itemImage img {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .catItemHeader,
  .latestItemHeader,
  .genericItemHeader,
  .itemHeader,
  .catItemBody,
  .latestItemBody,
  .genericItemBody,
  .itemBody,
  .catItemIntroText,
  .itemFullText {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .catItemTitle,
  .latestItemTitle,
  .genericItemTitle,
  .itemTitle {
    margin-top: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #ja-topsl {
    margin-top: 14px !important;
  }

  #ja-topsl .main {
    display: block !important;
  }

  #ja-topsl .ja-box,
  #ja-topsl .ja-box-center,
  #ja-topsl .ja-box-left,
  #ja-topsl .ja-box-right {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  #ja-topsl .ja-moduletable,
  #ja-topsl .moduletable,
  #ja-topsl .ja-module,
  #ja-topsl .module {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #ja-topsl .ja-box-ct,
  #ja-topsl .jamod-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #ja-topsl .nspMain,
  #ja-topsl .nspArts,
  #ja-topsl .nspArtPage,
  #ja-topsl .nspArtPage > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #ja-topsl .nspArts,
  #ja-topsl .nspArtPage > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding: 7px 5px 11px !important;
  }

  #ja-topsl .nspArt {
    display: block !important;
    float: none !important;
    flex: 0 0 78% !important;
    width: 78% !important;
    max-width: 78% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    scroll-snap-align: start !important;
  }

  #ja-topsl .nspArt img,
  #ja-topsl img.nspImage {
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    margin: 0 auto 7px !important;
  }

  #ja-topsl .nspHeader {
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  #ja-topsl .nspText {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  #ja-topsl [class*="sot-k2"],
  #ja-topsl [class*="sot_k2"],
  #ja-topsl [id*="sot-k2"],
  #ja-topsl [id*="sot_k2"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #ja-left .ja-moduletable,
  #ja-right .ja-moduletable,
  #ja-left .ja-module,
  #ja-right .ja-module,
  #ja-left .moduletable,
  #ja-right .moduletable {
    height: auto !important;
    overflow: hidden !important;
  }

  /* Mobile: Aktualnosci + Najnowsze artykuly = czytelna lista samych tytulow. */
  #Mod367 .nspArts,
  #Mod367 .nspArtPage > div,
  #Mod330 .nspArts,
  #Mod330 .nspArtPage > div {
    display: block !important;
    overflow: visible !important;
    padding: 8px 7px !important;
  }

  #Mod367 .nspArt,
  #Mod330 .nspArt {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #d7e3e8 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(30,60,75,.08) !important;
    overflow: hidden !important;
  }

  #Mod367 .nspArt:last-child,
  #Mod330 .nspArt:last-child {
    margin-bottom: 0 !important;
  }

  #Mod367 .nspArt img,
  #Mod367 img.nspImage,
  #Mod367 .nspText,
  #Mod367 .nspInfo,
  #Mod367 .nspInfo1,
  #Mod367 .nspInfo2,
  #Mod367 .nspLinks,
  #Mod367 .readon,
  #Mod330 .nspArt img,
  #Mod330 img.nspImage,
  #Mod330 .nspText,
  #Mod330 .nspInfo,
  #Mod330 .nspInfo1,
  #Mod330 .nspInfo2,
  #Mod330 .nspLinks,
  #Mod330 .readon {
    display: none !important;
  }

  #Mod367 .nspHeader,
  #Mod330 .nspHeader {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    white-space: normal !important;
  }

  #Mod367 .nspHeader a,
  #Mod330 .nspHeader a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 34px 12px 13px !important;
    color: #24566b !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #Mod367 .nspHeader a:after,
  #Mod330 .nspHeader a:after {
    content: "›" !important;
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #7197a7 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  #Mod367 .nspHeader a:active,
  #Mod330 .nspHeader a:active {
    background: #eef5f7 !important;
  }
}

@media (max-width: 420px) {
  #ja-header > .main {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  #ja-header h1.logo img {
    max-width: min(225px, 88vw) !important;
    max-height: 70px !important;
  }

  #ja-topsl .nspArt {
    flex-basis: 86% !important;
    width: 86% !important;
    max-width: 86% !important;
  }

  #Mod367 .nspArt,
  #Mod330 .nspArt {
    width: 100% !important;
    max-width: 100% !important;
  }

  #Mod367 .nspHeader,
  #Mod330 .nspHeader {
    font-size: 15px !important;
  }
}