/* Kakanj-X 2.2.0: responsive editorial embeds + category markers */
/* Editorial video: no fixed heights, no horizontal overflow, no forced cropping. */
.article .article-body,.article .kx-reading-content-153,.article .kx-media-wrap{min-width:0;max-width:100%;box-sizing:border-box}
.article .article-body :is(iframe,video,embed,object),
.article .kx-reading-content-153 :is(iframe,video,embed,object){max-width:100%!important;box-sizing:border-box}
.article :is(.article-body,.kx-reading-content-153) :is(iframe,embed,object):not(.kx-nonvideo-220){
  display:block!important;width:100%!important;max-width:100%!important;
  height:auto!important;min-height:0!important;aspect-ratio:16/9;
  border:0;border-radius:10px;background:#101317;
}
.article :is(.article-body,.kx-reading-content-153) video{
 display:block!important;width:100%!important;height:auto!important;max-height:min(80vh,720px)!important;
 min-height:0!important;object-fit:contain!important;border-radius:10px;
}
.article :is(.article-body,.kx-reading-content-153) .kx-media-wrap,
.article .kx-video-hero{width:100%!important;max-width:100%!important;min-width:0;box-sizing:border-box}
.article :is(.article-body,.kx-reading-content-153) :is(.kx-vertical-video-220,.kx-vertical-video-220 iframe,.kx-vertical-video-220 embed,.kx-vertical-video-220 object){
 aspect-ratio:9/16!important;max-width:min(100%,420px)!important;max-height:none!important;
}
.article :is(.article-body,.kx-reading-content-153) .kx-vertical-video-220{width:min(100%,420px)!important;margin-inline:auto!important}
.article :is(.article-body,.kx-reading-content-153) .kx-vertical-video-220 :is(iframe,embed,object){width:100%!important;height:auto!important;min-height:0!important}
.article :is(.article-body,.kx-reading-content-153) .kx-video-ratio-220{aspect-ratio:var(--kx-video-ratio-220,16/9)!important}
.article :is(.article-body,.kx-reading-content-153) .kx-video-frame-220{width:100%!important;max-width:100%!important;overflow:hidden}
.article :is(.article-body,.kx-reading-content-153) :is(p,figure,div):has(>iframe):not(.kx-vertical-video-220){max-width:100%;min-width:0}
@media(max-width:620px){
 .article .kx-video-hero{padding:6px!important}
 .article :is(.article-body,.kx-reading-content-153) iframe{border-radius:8px}
}
/* Category accent markers echo the visual language of a large news site.
   Hues are editorial approximations, not asserted as exact Klix brand codes. */
.kx-global-nav .kx-cat-color-220{--kx-cat-accent-220:#8b9ca9;position:relative}
.kx-global-nav .kx-cat-vijesti-220{--kx-cat-accent-220:#e33f49}
.kx-global-nav .kx-cat-najnovije-220{--kx-cat-accent-220:#e33f49}
.kx-global-nav .kx-cat-kakanj-220{--kx-cat-accent-220:#2fa16a}
.kx-global-nav .kx-cat-ze-do-kanton-220{--kx-cat-accent-220:#2f9d89}
.kx-global-nav .kx-cat-bih-220{--kx-cat-accent-220:#d83f4f}
.kx-global-nav .kx-cat-region-220{--kx-cat-accent-220:#e58a33}
.kx-global-nav .kx-cat-svijet-220{--kx-cat-accent-220:#368fc9}
.kx-global-nav .kx-cat-drustvo-220{--kx-cat-accent-220:#8c69c9}
.kx-global-nav .kx-cat-crna-hronika-220{--kx-cat-accent-220:#bd4b54}
.kx-global-nav .kx-cat-sport-220{--kx-cat-accent-220:#55a447}
.kx-global-nav .kx-cat-magazin-220{--kx-cat-accent-220:#d65e9b}
.kx-global-nav .kx-cat-kultura-220{--kx-cat-accent-220:#9a72cc}
.kx-global-nav .kx-cat-krizaljka-220{--kx-cat-accent-220:#ce9843}
.kx-global-nav .kx-main-nav-186 .kx-cat-color-220::before,
.kx-global-nav .kx-news-submenu-186 .kx-cat-color-220::before{
 content:"";display:inline-block;flex:0 0 auto;width:7px;height:7px;
 margin-right:7px;border-radius:3px;background:var(--kx-cat-accent-220);
 box-shadow:0 0 0 1px rgba(0,0,0,.05);vertical-align:middle;
}
.kx-global-nav .kx-main-nav-186>.kx-cat-color-220,
.kx-global-nav .kx-news-link-186{display:inline-flex;align-items:center;justify-content:center}
.kx-global-nav .kx-news-submenu-186 .kx-cat-color-220{display:flex;align-items:center}
.kx-global-nav .kx-cat-color-220:hover::before,.kx-global-nav .kx-cat-color-220:focus-visible::before{width:8px;height:8px}
body.kx-theme-dark .kx-global-nav .kx-cat-color-220::before{box-shadow:0 0 0 2px rgba(255,255,255,.1)}
@media(max-width:1180px){
 .kx-global-nav .kx-main-nav-186>.kx-cat-color-220{justify-content:flex-start}
 .kx-global-nav .kx-news-link-186{justify-content:flex-start}
}