, which then follows its image. Classes: align-right / align-center (TinyMCE), pull-right, float-end, mx-auto. */
:is(.com-content-article__body, .blog-item) img:not(a img):not(figure img),
:is(.com-content-article__body, .blog-item) figure { float:left; width:300px; max-width:100%; margin:.3rem 1.25rem 1rem 0; }
:is(.com-content-article__body, .blog-item) figure img { display:block; width:100%; height:auto; float:none !important; margin:0 !important; }
:is(.com-content-article__body, .blog-item) :is(img:not(figure img), figure):is([style*="float: right"], [style*="float:right"], .align-right, .pull-right, .float-end),
:is(.com-content-article__body, .blog-item) figure:has(> img:is([style*="float: right"], [style*="float:right"])) {
float:right; margin:.3rem 0 1rem 1.25rem; }
:is(.com-content-article__body, .blog-item) figure:has(> img:is([style*="float: left"], [style*="float:left"])) {
float:left; margin:.3rem 1.25rem 1rem 0; }
:is(.com-content-article__body, .blog-item) :is(img:not(figure img), figure):is([style*="margin-left: auto"], .align-center, .mx-auto),
:is(.com-content-article__body, .blog-item) figure:has(> img[style*="margin-left: auto"]) {
float:none; display:block; margin:.3rem auto 1rem; }
:is(.com-content-article__body, .blog-item) figcaption { font-size:.85rem; color:var(--ombud-faint); margin-top:.35rem; }
:is(.com-content-article__body, .blog-item) img:not(a img) { cursor:zoom-in; }
.blog-item { display:flow-root; } /* each item contains its floated image */
/* Description + author (template.js) over the bottom of the image on hover; below it on touch screens */
.ombud-fig { position:relative; }
:is(.com-content-article__body, .blog-item) .ombud-fig figcaption {
position:absolute; left:0; right:0; bottom:0; margin:0; padding:1.75rem .75rem .6rem;
background:linear-gradient(transparent, rgba(0,0,0,.82)); color:#fff; font-size:.8rem; line-height:1.35;
border-radius:0 0 var(--ombud-radius) var(--ombud-radius); opacity:0; transition:opacity .2s; pointer-events:none; }
.ombud-fig:is(:hover, :focus-within) figcaption { opacity:1; }
.ombud-imgcap__author { display:block; font-size:.8em; opacity:.85; margin-top:.15rem; }
@media (hover:none) {
:is(.com-content-article__body, .blog-item) .ombud-fig figcaption {
position:static; opacity:1; padding:.35rem 0 0; background:none; color:var(--ombud-faint); }
}
/* Lightbox (template.js): full screen — image, caption, and for galleries arrows + a thumbnail row */
.ombud-lightbox { width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
background:#0b0d0f; color:#fff; overflow:hidden; }
.ombud-lightbox[open] { display:flex; flex-direction:column; }
.ombud-lightbox::backdrop { background:rgba(0,0,0,.96); }
.ombud-lightbox figure { flex:1; min-height:0; display:flex; flex-direction:column; margin:0; }
.ombud-lightbox__stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
padding:3.75rem 4.5rem .5rem; }
.ombud-lightbox__stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:0; }
.ombud-lightbox:not(.is-gallery) .ombud-lightbox__stage img { cursor:zoom-out; }
.ombud-lightbox figcaption { flex:none; width:100%; max-width:60rem; margin:0 auto; padding:.6rem 1rem .9rem;
font-size:1rem; line-height:1.45; text-align:center; }
.ombud-lightbox figcaption[hidden] { display:none; }
.ombud-lightbox .ombud-imgcap__author { margin-top:.3rem; font-size:.875rem; opacity:.75; }
.ombud-lightbox__count { display:block; margin-bottom:.2rem; font-size:.8rem; letter-spacing:.04em; opacity:.6; }
.ombud-lightbox__close, .ombud-lightbox__nav {
position:absolute; z-index:1; display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; padding:0;
border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer;
transition:background-color .15s; }
.ombud-lightbox__close { position:fixed; top:.75rem; right:.75rem; font-size:1.75rem; }
.ombud-lightbox__nav { top:50%; margin-top:-1.375rem; padding-bottom:.2rem; }
.ombud-lightbox__nav--prev { left:1rem; }
.ombud-lightbox__nav--next { right:1rem; }
.ombud-lightbox:not(.is-gallery) .ombud-lightbox__nav { display:none; }
.ombud-lightbox__close:hover, .ombud-lightbox__nav:hover { background:var(--ombud-primary); }
.ombud-lightbox :focus-visible { outline:2px solid var(--ombud-orange); outline-offset:2px; }
.ombud-lightbox__thumbs { flex:none; display:flex; gap:.5rem; margin:0; padding:.25rem 1rem 1rem; list-style:none;
overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent; }
.ombud-lightbox__thumbs:empty { display:none; }
.ombud-lightbox__thumbs li { flex:none; }
.ombud-lightbox__thumbs li:first-child { margin-left:auto; } /* centred while it fits, scrolls when it doesn't */
.ombud-lightbox__thumbs li:last-child { margin-right:auto; }
.ombud-lightbox__thumbs button { display:block; padding:0; border:2px solid transparent; border-radius:4px; background:none;
opacity:.5; cursor:pointer; transition:opacity .15s, border-color .15s; }
.ombud-lightbox__thumbs button:hover { opacity:.85; }
.ombud-lightbox__thumbs button[aria-current="true"] { opacity:1; border-color:var(--ombud-orange); }
.ombud-lightbox__thumbs img { display:block; width:4.5rem; height:3.25rem; object-fit:cover; border-radius:2px; }
/* Article gallery (layouts/com_content/field/gallery.php): thumbnail strip under the text */
.fields-container:has(> .field-entry.gallery) { margin:0; padding:0; list-style:none; }
.ombud-gallery { clear:both; margin:1.75rem 0 1rem; }
.ombud-gallery__title { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; font-size:1.25rem; color:var(--ombud-ink); }
.ombud-gallery__count { padding:.1rem .5rem; border-radius:999px; background:var(--ombud-bg-alt); color:var(--ombud-muted);
font-size:.8rem; font-weight:600; }
.ombud-gallery__strip { position:relative; }
.ombud-gallery__track { display:flex; gap:.75rem; margin:0; padding:0 0 .5rem; list-style:none; overflow-x:auto;
scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--ombud-border) transparent; }
.ombud-gallery__track li { flex:none; scroll-snap-align:start; }
.ombud-gallery__thumb { display:block; overflow:hidden; border-radius:var(--ombud-radius); box-shadow:var(--ombud-shadow); cursor:zoom-in; }
.ombud-gallery__thumb img { display:block; width:13.5rem; height:9rem; object-fit:cover; border-radius:0; transition:transform .3s; }
.ombud-gallery__thumb:hover img, .ombud-gallery__thumb:focus-visible img { transform:scale(1.05); }
.ombud-gallery__thumb:focus-visible { outline:2px solid var(--ombud-orange); outline-offset:2px; }
.ombud-gallery__nav { position:absolute; top:calc(50% - .25rem); z-index:1; display:flex; align-items:center; justify-content:center;
width:2.5rem; height:2.5rem; margin-top:-1.25rem; padding:0 0 .15rem; border:0; border-radius:50%;
background:var(--ombud-primary); color:#fff; font-size:1.6rem; line-height:1; box-shadow:var(--ombud-shadow-hover); cursor:pointer; }
.ombud-gallery__nav:hover { background:var(--ombud-primary-dark); }
.ombud-gallery__nav[hidden] { display:none; }
.ombud-gallery__nav--prev { left:-.75rem; }
.ombud-gallery__nav--next { right:-.75rem; }
.ombud-content table { width:100%; border-collapse:collapse; margin:1rem 0; }
.ombud-content table td, .ombud-content table th { border:1px solid var(--ombud-border); padding:.5rem .7rem; }
/* Attachments (com_attachments) — override the dark theme cleanly */
.attachmentsContainer {
margin:1.5rem 0; border:1px solid var(--ombud-border); border-radius:var(--ombud-radius);
overflow:hidden; background:#fff; }
.attachmentsContainer .Attachments, .attachmentsContainer > p:first-child,
.attachmentsContainer .attachmentsList_title {
background:var(--ombud-bg-alt) !important; border-bottom:2px solid var(--ombud-primary);
margin:0 !important; padding:.6rem 1rem !important; font-weight:700; color:var(--ombud-ink) !important; }
/* rows render as a table; the dark theme colours the | cells — override those */
.attachmentsList, .attachmentsList table { background:#fff !important; }
.attachmentsList tbody tr.odd td,
.attachmentsList tbody tr.even td,
.attachmentsList tbody tr td {
background-color:#fff !important; color:var(--ombud-text) !important;
padding:.55rem 1rem !important; border-bottom:1px solid var(--ombud-border) !important; }
.attachmentsList tbody tr.even td { background-color:var(--ombud-bg-alt) !important; }
.attachmentsList a { color:var(--ombud-primary) !important; font-weight:600; }
.attachmentsList a:hover { color:var(--ombud-primary-dark) !important; text-decoration:underline; }
.attachmentsList .attachmentsAdditionalInfo, .attachmentsList .file_size,
.attachmentsList .attachmentsModificationDate { color:var(--ombud-faint) !important; font-weight:400; }
/* Breadcrumbs polish */
.ombud-breadcrumbs .breadcrumb { display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin:0; padding:0; list-style:none; }
.ombud-breadcrumbs .breadcrumb li { color:var(--ombud-muted); }
.ombud-breadcrumbs a { color:var(--ombud-primary); }
/* ============================================================
Phase T7 — footer polish
============================================================ */
.ombud-footer__cols .moduletable { margin-bottom:1rem; }
.ombud-footer__cols h3 { font-size:1.05rem; color:#fff; margin:0 0 .9rem; padding-bottom:.5rem; position:relative; }
.ombud-footer__cols h3::after { content:""; position:absolute; left:0; bottom:0; width:40px; height:2px; background:var(--ombud-orange); }
.ombud-footer__cols ul { list-style:none !important; margin:0; padding:0 !important; }
.ombud-footer__cols li { padding:.3rem 0; list-style:none; border:0; }
.ombud-footer__cols img { max-height:60px; width:auto; }
.ombud-footer__cols p { margin:0 0 .5rem; }
/* ============================================================
Phase T8 — QA / mobile fixes
============================================================ */
@media (max-width: 991.98px) {
/* make the mobile nav bar obviously tappable */
.ombud-nav .container { padding-block:.4rem; }
/* label left, three stacked bars right; bars turn into an X when open */
.ombud-nav__toggle { display:grid; grid-template-columns:auto 28px; justify-items:center; align-items:center; column-gap:.6rem; row-gap:6px; padding:.6rem .25rem; overflow:visible; }
.ombud-nav__toggle::after { content:"Мени"; grid-column:1; grid-row:1 / 4; justify-self:end; color:#fff; font-weight:600; font-size:.95rem; }
.ombud-nav__toggle span { grid-column:2; width:24px; margin:0; border-radius:1px; transition:transform .2s, opacity .2s; }
.ombud-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.ombud-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.ombud-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
}
@media (max-width: 575.98px) {
.ombud-tiles { grid-template-columns:1fr; } /* one tile per row */
.ombud-home-news__more { grid-template-columns:1fr; }
.ombud-brand__logo { height:48px; }
.ombud-brand__name { font-size:1.1rem; }
}
/* Branded default news thumbnail (articles without a body photo) */
/* ============================================================
Mobile rework — everything below is max-width only; desktop untouched
============================================================ */
@media (max-width: 991.98px) {
/* collapsible submenus (toggle buttons injected by template.js) */
.ombud-nav .mod-menu li.parent { display:flex; flex-wrap:wrap; align-items:stretch; }
.ombud-nav .mod-menu li.parent > a,
.ombud-nav .mod-menu li.parent > span { flex:1; }
.ombud-nav .mod-menu li.parent > .mod-menu__sub { display:none; flex-basis:100%; }
.ombud-nav .mod-menu li.parent.is-open > .mod-menu__sub { display:block; }
.ombud-nav__sub-toggle { width:48px; background:none; border:0; color:#fff; cursor:pointer; }
.ombud-nav__sub-toggle::before { content:""; display:inline-block; width:.5em; height:.5em;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:translateY(-.15em) rotate(45deg); transition:transform .2s; }
.ombud-nav .is-open > .ombud-nav__sub-toggle::before { transform:translateY(.1em) rotate(225deg); }
.ombud-nav .mod-menu > li { border-bottom:1px solid rgba(255,255,255,.12); }
.ombud-nav .mod-menu > li > a,
.ombud-nav .mod-menu > li > span { padding-block:.8rem; font-size:1rem; }
.ombud-nav .mod-menu__sub a { padding-block:.7rem; font-size:1rem; }
}
@media (max-width: 767.98px) {
/* topbar + header */
.ombud-topbar__inner { min-height:44px; }
.ombud-script-toggle a { display:inline-block; padding:.6rem .5rem; font-size:.95rem; }
.ombud-header__row { padding:.75rem 0; gap:.75rem; }
.ombud-header__search input[type="text"],
.ombud-header__search input[type="search"] { font-size:1rem; padding-block:.7rem; } /* 16px stops iOS zoom-on-focus */
/* hero */
.ombud-carousel .carousel-control-prev, .ombud-carousel .carousel-control-next { display:none; }
/* main + headings */
.ombud-main { padding-block:1.5rem; }
.ombud-section-head h2 { font-size:1.4rem; }
.ombud-content .page-header h1, .ombud-content .page-header h2,
.ombud-content .item-page > h1, .ombud-content .item-page > h2 { font-size:1.55rem; }
/* article body: editor inline "justify" leaves huge gaps on narrow screens */
.ombud-content [style*="justify"] { text-align:left !important; }
.ombud-content { font-size:1.0625rem; }
/* article images: no float on phones — full width above the text */
:is(.com-content-article__body, .blog-item) img:not(a img):not(figure img),
:is(.com-content-article__body, .blog-item) figure { float:none !important; width:auto; margin:0 0 1rem !important; }
/* lightbox: image edge to edge, smaller arrows over it; gallery strip: smaller thumbnails, swipe only */
.ombud-lightbox__stage { padding:3.75rem 0 .5rem; }
.ombud-lightbox__nav { width:2.25rem; height:2.25rem; margin-top:-1.125rem; font-size:1.5rem; background:rgba(0,0,0,.45); }
.ombud-lightbox__nav--prev { left:.4rem; }
.ombud-lightbox__nav--next { right:.4rem; }
.ombud-lightbox figcaption { font-size:.95rem; }
.ombud-lightbox__thumbs img { width:3.5rem; height:2.6rem; }
.ombud-gallery__thumb img { width:10.5rem; height:7.25rem; }
.ombud-gallery__nav { display:none; }
/* wide tables scroll inside their box instead of past the screen */
.ombud-content table { display:block; overflow-x:auto; }
/* attachments: the plugin forces min-width:720px + side-scroll; let columns wrap instead */
.ombud-content .attachmentsList table { display:table; min-width:0; }
.ombud-content .attachmentsList td { overflow-wrap:anywhere; }
/* news cards: shorter previews */
.ombud-card__title { font-size:1.15rem; }
.ombud-card__excerpt { font-size:1rem; }
.ombud-card--noimg .ombud-card__excerpt { -webkit-line-clamp:4; line-clamp:4; }
/* sidebar: readable size + tappable rows */
.ombud-sidebar { font-size:1rem; }
.ombud-sidebar li a { padding:.65rem 0; }
/* pagination: wrap, big targets */
.ombud-content .pagination { flex-wrap:wrap; justify-content:center; gap:.25rem; }
.ombud-content .page-link { min-width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center; }
/* footer */
.ombud-footer__cols li { padding:.5rem 0; }
.ombud-footer__bar .container { flex-direction:column; text-align:center; }
}
@media (min-width: 992px) { .ombud-nav__sub-toggle { display:none; } }
|