:root { --color-bg: #f8fafc; --color-text: #1e293b; --color-text-muted: #475569; --color-primary: #0f766e; --color-primary-hover: #0d9488; --color-header-bg: #0f172a; --color-header-text: #f1f5f9; --color-footer-bg: #0f172a; --color-footer-text: #94a3b8; --color-border: #e2e8f0; --color-focus: #0f766e; --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: var(--font-sans); --max-width: 1200px; --spacing: 1rem; --radius: 8px; } * { box-sizing: border-box; } html { scroll-padding-top: 1rem; overflow-x: hidden; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; margin: 0; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; } h1 { font-family: var(--font-heading); color: var(--color-h1, var(--color-heading, var(--color-text))); } h2 { font-family: var(--font-heading); color: var(--color-h2, var(--color-heading, var(--color-text))); } h3 { font-family: var(--font-heading); color: var(--color-h3, var(--color-heading, var(--color-text))); } h4 { font-family: var(--font-heading); color: var(--color-h4, var(--color-heading, var(--color-text))); } h5 { font-family: var(--font-heading); color: var(--color-h5, var(--color-heading, var(--color-text))); } h6 { font-family: var(--font-heading); color: var(--color-h6, var(--color-heading, var(--color-text))); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: underline; } .skip-link { position: absolute; top: -3rem; left: var(--spacing); z-index: 100; padding: 0.5rem 1rem; background: var(--color-primary); color: #fff; text-decoration: none; border-radius: var(--radius); font-weight: 500; transition: top 0.2s; } .skip-link:focus { top: var(--spacing); outline: 3px solid var(--color-focus); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .mt-3 { margin-top: 1rem !important; } .search-form { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; } .search-form input[type="search"] { flex: 1; min-width: 12rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; } .search-results-count { color: var(--color-text-muted); margin-bottom: 0.75rem; } .article-list-search { list-style: none; padding: 0; } .article-list-search li { margin-bottom: 0.5rem; } .search-meta { color: var(--color-text-muted); font-size: 0.9rem; } .article-meta-attachments { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.85rem; color: var(--color-text-muted); margin-left: 0.35rem; } .article-meta-attachments .article-meta-item { white-space: nowrap; } .article-meta-attachments .meta-icon-img, .article-card-meta-attachments .meta-icon-img, .gallery-card-photo-count .meta-icon-img, .calendar-month-events-meta .meta-icon-img, .calendar-day-popover-meta .meta-icon-img { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; margin-right: 0.15em; color: inherit; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .article-meta-attachments .meta-icon-img, .article-card-meta-attachments .meta-icon-img, .gallery-card-photo-count .meta-icon-img, .calendar-month-events-meta .meta-icon-img, .calendar-day-popover-meta .meta-icon-img { mask-image: var(--meta-icon-url); -webkit-mask-image: var(--meta-icon-url); } .article-card-attachments { margin: 0 0 0.5rem; } .search-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--spacing); visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; } .search-modal.is-open { visibility: visible; opacity: 1; } .search-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: pointer; } .search-modal-panel { position: relative; width: 100%; max-width: 560px; max-height: 85vh; overflow: auto; background: var(--color-bg); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.3); padding: 1.5rem; } .search-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .search-modal-title { margin: 0; font-size: 1.25rem; } .search-modal-close { width: 2.5rem; height: 2.5rem; border: none; background: var(--color-border); border-radius: var(--radius); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .search-modal-close:hover { background: var(--color-text-muted); color: #fff; } .search-modal-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .search-modal-form input[type="search"] { flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; } .search-modal-results { min-height: 2rem; } .search-modal-loading, .search-modal-empty { color: var(--color-text-muted); margin: 0.5rem 0; } .search-modal-count { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .search-modal-list { list-style: none; padding: 0; margin: 0; } .search-modal-list li { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .search-modal-list a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .search-modal-list a:hover { text-decoration: underline; } .search-modal-meta { font-size: 0.85rem; color: var(--color-text-muted); } button.header-link-icon { background: transparent; border: none; cursor: pointer; color: inherit; padding: 0; font-size: 1rem; } .module-calendar-interactive .calendar-svatek { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-text-muted, #6b7280); } .module-calendar-interactive .calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .module-calendar-interactive .calendar-prev, .module-calendar-interactive .calendar-next { width: 2rem; height: 2rem; border: 1px solid var(--color-border); background: var(--color-bg); border-radius: var(--radius); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; } .module-calendar-interactive .calendar-prev:hover, .module-calendar-interactive .calendar-next:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .module-calendar-interactive .calendar-month-label { font-weight: 600; font-size: 0.95rem; } .module-calendar-interactive .calendar-grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .module-calendar-interactive .calendar-grid th { padding: 0.25rem; font-weight: 600; color: var(--color-text-muted); } .module-calendar-interactive .calendar-day { padding: 0.2rem; text-align: center; border: 1px solid var(--color-border); cursor: default; } .module-calendar-interactive .calendar-day-other { color: var(--color-text-muted); opacity: 0.6; } .module-calendar-interactive .calendar-day-has-events { cursor: pointer; background: rgba(var(--color-primary-rgb, 15, 118, 110), 0.08); font-weight: 500; } .module-calendar-interactive .calendar-day-has-events:hover { background: rgba(var(--color-primary-rgb, 15, 118, 110), 0.18); } .module-calendar-interactive .calendar-day-has-events.calendar-day-uniform { background: rgba(var(--color-primary-rgb, 15, 118, 110), 0.08); } .module-calendar-interactive .calendar-day-has-events.calendar-day-uniform:hover { background: rgba(var(--color-primary-rgb, 15, 118, 110), 0.18); } .module-calendar-interactive .calendar-day { position: relative; } .module-calendar-interactive .calendar-cell-strips { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; display: flex; flex-direction: column; border-radius: 2px 0 0 2px; overflow: hidden; } .module-calendar-interactive .calendar-cell-strips span { flex: 1 1 0; min-height: 2px; } .module-calendar-interactive .calendar-day-popover { position: fixed; z-index: 10000; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 0.75rem 2rem 0.75rem 0.75rem; min-width: 200px; max-width: 320px; display: none; } .module-calendar-interactive .calendar-day-popover.is-open { display: block; } .module-calendar-interactive .calendar-month-events-wrap { border-top: 1px solid var(--color-border); padding-top: 0.75rem; } .module-calendar-interactive .calendar-month-events-title { font-size: 0.95rem; margin: 0 0 0.5rem 0; } .module-calendar-interactive .calendar-month-events-list { list-style: none; padding: 0; margin: 0; } .module-calendar-interactive .calendar-month-events-list li { padding: 0.25rem 0 0.25rem 0.5rem; margin-bottom: 0.2rem; border-left: 3px solid #6b7280; } .module-calendar-interactive .calendar-month-events-date { font-size: 0.85rem; color: var(--color-text-muted); margin-right: 0.35rem; } .module-calendar-interactive .calendar-month-events-list a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; } .module-calendar-interactive .calendar-month-events-list a:hover { text-decoration: underline; } .module-calendar-interactive .calendar-day-popover-title { margin: 0 0 0.5rem 0; font-size: 0.95rem; } .module-calendar-interactive .calendar-day-popover-list { list-style: none; padding: 0; margin: 0; } .module-calendar-interactive .calendar-day-popover-list li { padding: 0.35rem 0; border-left: 3px solid #6b7280; padding-left: 0.5rem; margin-bottom: 0.25rem; } .module-calendar-interactive .calendar-day-popover-list a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; } .module-calendar-interactive .calendar-day-popover-list a:hover { text-decoration: underline; } .module-calendar-interactive .calendar-day-popover-close { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; border: none; background: transparent; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; color: var(--color-text-muted); } .module-calendar-interactive { position: relative; } .header-jumbotron { width: 100%; height: 0; padding-bottom: 28%; min-height: 140px; max-height: 320px; background-size: cover; background-position: center; background-repeat: no-repeat; } .info-bar { background: rgba(0, 0, 0, 0.06); color: var(--color-text); padding: 0.5rem var(--spacing); font-size: 0.9rem; text-align: center; } .info-bar .cont { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } .public-header { background: var(--color-header-bg); color: var(--color-header-text); padding: 0.75rem var(--spacing); box-shadow: 0 1px 3px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 50; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .header-logo { order: 1; } .public-nav { order: 2; } .header-right-links { order: 3; } .header-right-links { display: flex; align-items: center; gap: 0.5rem; } .header-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--color-header-text); text-decoration: none; border-radius: var(--radius); font-size: 1.1rem; transition: background 0.2s; } .header-link-icon:hover { background: rgba(255,255,255,0.15); color: #fff; } .header-link-icon-inner { line-height: 1; } .header-link-icon-img { width: 1.25rem; height: 1.25rem; object-fit: contain; display: block; } .header-link-icon-img.header-link-icon-css { filter: brightness(0) invert(1); } .header-logo { color: inherit; text-decoration: none; font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; } .header-logo:focus { outline: 2px solid #fff; outline-offset: 2px; } .header-logo:hover { color: #fff; } .header-logo img { max-height: 48px; width: auto; display: block; } .header-logo-text { white-space: nowrap; } .public-nav { display: flex; align-items: center; position: relative; } .nav-toggle { display: none; padding: 0.625rem 0.875rem; background: transparent; border: 1px solid rgba(255,255,255,.4); color: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; border-radius: var(--radius); transition: background .2s ease, border-color .2s ease; } .nav-toggle:focus { outline: 2px solid #fff; outline-offset: 2px; } .nav-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); } .nav-toggle-icon { filter: brightness(0) invert(1); width: 1.25rem; height: 1.25rem; object-fit: contain; } .public-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.75rem; } .public-nav #main-menu > li { position: relative; } .public-nav #main-menu > li > a { color: var(--color-header-text); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 6px; display: inline-block; font-weight: 500; transition: background .2s ease, color .2s ease; } .public-nav #main-menu > li > a:hover { background: rgba(255,255,255,.12); color: #fff; } .public-nav #main-menu > li > a:focus { outline: 2px solid #fff; outline-offset: 2px; } .public-nav #main-menu > li > a .menu-rozcestnik-icon { height: 1em; width: auto; vertical-align: middle; display: inline-block; filter: brightness(0) invert(1); } .public-nav #main-menu > li > a:hover .menu-rozcestnik-icon { filter: brightness(0) invert(1); } .public-nav .has-submenu { position: relative; overflow: visible; } .public-nav .has-submenu > a { position: relative; padding-right: 1.5em; } .public-nav .has-submenu > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 10px; } .public-nav .submenu .has-submenu > a::after { left: auto; right: -6px; bottom: 0; top: 0; width: 16px; height: auto; } .public-nav .has-submenu > a .menu-arrow { margin-left: 0.25rem; opacity: .85; font-size: .9em; transition: transform .2s ease; } .public-nav .has-submenu:hover > a .menu-arrow { transform: translateY(1px); } .public-nav .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; width: max-content; max-width: 320px; background: var(--color-menu-submenu-bg, #1e293b); color: var(--color-menu-submenu-text, #f1f5f9); padding: 0.5rem 0; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12); list-style: none; z-index: 100; overflow: visible; margin-top: 2px; flex-direction: column; border: 1px solid rgba(255,255,255,.06); transition: opacity .15s ease, visibility .15s ease; } .public-nav #main-menu > .has-submenu > .submenu { display: none; flex-direction: column; padding: 0.5rem 0; } .public-nav #main-menu > .has-submenu:hover > .submenu { display: flex; } .public-nav .submenu > li { width: 100%; position: relative; overflow: visible; min-width: 0; } .public-nav .submenu > li > a { display: block; width: 100%; box-sizing: border-box; padding: 0.625rem 1rem; white-space: nowrap; color: var(--color-menu-submenu-text, #f1f5f9); text-decoration: none; border-radius: 0; transition: background .15s ease, color .15s ease; border-left: 3px solid transparent; } .public-nav .submenu > li > a:hover { background: rgba(255,255,255,.1); color: #fff; } .public-nav .submenu > li > a:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: -2px; } .public-nav .submenu .has-submenu > a { padding-right: 2rem; } .public-nav .submenu .submenu { position: absolute; left: 100%; top: 0; margin-left: 2px; min-width: 240px; padding: 0.5rem 0; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12); z-index: 101; display: none; flex-direction: column; background: var(--color-menu-submenu-bg, #1e293b); border: 1px solid rgba(255,255,255,.06); } .public-nav .has-submenu:hover > .submenu { display: flex; } .public-nav .submenu .has-submenu:hover > .submenu { display: flex; } .public-nav .submenu .submenu .submenu { left: 0; top: 100%; margin-left: 0; margin-top: 2px; display: none; flex-direction: column; } .public-nav .submenu .submenu .has-submenu:hover > .submenu { display: flex; } .public-nav .submenu .submenu .submenu .submenu { left: 100%; top: 0; margin-left: 2px; display: none; } .public-nav .submenu .submenu .submenu .has-submenu:hover > .submenu { display: flex; } .public-nav .submenu .submenu .submenu .submenu .submenu { left: 0; top: 100%; margin-left: 0; margin-top: 2px; display: none; } .public-nav .submenu .submenu .submenu .submenu .has-submenu:hover > .submenu { display: flex; } .module.module-menu .menu-list { list-style: none; margin: 0; padding: 0; } .module.module-menu .menu-list .module-menu-item + .module-menu-item { border-top: 1px solid var(--color-border, #e2e8f0); } .module.module-menu .menu-list a { display: block; padding: 0.5rem 0.75rem; text-decoration: none; color: var(--color-text, #0f172a); border-radius: 4px; } .module.module-menu .menu-list a:hover { background: #f1f5f9; color: var(--color-primary, #2563eb); } .module.module-menu .menu-list .module-menu-item.is-active > a { font-weight: 600; color: var(--color-primary, #2563eb); } .card .module-menu-collapsible .menu-list { display: none; } .card.module-menu-open .module-menu-collapsible .menu-list { display: block; } .module-menu-toggle-header { cursor: pointer; } .sidebar .card.card-menu-module > .card-body { padding: 0; } .module-menu-header-icon { display: inline-block; margin-left: auto; width: 1.1em; height: 1.1em; background-color: currentColor; mask-image: url('../images/svg/menu.svg'); -webkit-mask-image: url('../images/svg/menu.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .breadcrumb-bar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .breadcrumb-bar .breadcrumb-wrap { padding: 0.5rem var(--spacing); } .breadcrumb-wrap { padding: 0.35rem var(--spacing) 0; max-width: var(--max-width); margin: 0 auto; } .breadcrumb { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .breadcrumb li { display: flex; align-items: center; gap: 0.25rem; } .breadcrumb-sep { color: rgba(255,255,255,.6); } .breadcrumb a { color: var(--color-header-text); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: rgba(255,255,255,.85); } .breadcrumb-bar .breadcrumb-sep { color: var(--color-text-muted, #6b7280); } .breadcrumb-bar .breadcrumb a { color: var(--color-primary); } .breadcrumb-bar .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-bar .breadcrumb span { color: var(--color-text); } @media (max-width: 768px) { .nav-toggle { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .nav-toggle-icon { display: block; } .public-header { position: relative; } .public-nav { position: static; order: 3; } .header-right-links { order: 2; } .header-logo { order: 1; } .public-nav > ul#main-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 999; flex-direction: column; align-items: stretch; padding: 0 0 1.5rem; margin: 0; max-height: 70vh; background: var(--color-header-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 8px 24px rgba(0,0,0,.15); } .public-nav #main-menu.is-open { display: flex; flex-direction: column; flex-wrap: nowrap; } .public-nav #main-menu > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); } .public-nav #main-menu > li > a { display: block; width: 100%; box-sizing: border-box; padding: 1rem 1.25rem; min-height: 48px; line-height: 1.4; font-size: 1rem; color: var(--color-header-text); position: relative; z-index: 1; } .public-nav .has-submenu > a { padding-right: 3rem; } .public-nav .has-submenu > a::after { display: none; } .public-nav .has-submenu .submenu { display: none; position: static; width: 100%; min-width: 0; max-width: none; margin: 0; padding: 0; box-shadow: none; border: none; border-radius: 0; background: var(--color-menu-submenu-bg, #1e293b); color: var(--color-menu-submenu-text, #f1f5f9); position: relative; z-index: 1; flex-direction: column; flex-wrap: nowrap; } .public-nav #main-menu .has-submenu.is-open > .submenu { display: flex; flex-direction: column; flex-wrap: nowrap; } .public-nav .has-submenu:hover > .submenu { display: none; } .public-nav .submenu > li { width: 100%; } .public-nav .submenu > li > a { padding: 0.875rem 1.25rem 0.875rem 1.75rem; min-height: 48px; font-size: 0.9375rem; border-left: 3px solid rgba(255,255,255,.2); color: var(--color-menu-submenu-text, #f1f5f9); position: relative; z-index: 1; } .public-nav .submenu .submenu { position: static; margin: 0; background: rgba(0,0,0,.25); display: none; flex-direction: column; flex-wrap: nowrap; width: 100%; } .public-nav #main-menu .has-submenu.is-open .submenu .has-submenu.is-open > .submenu { display: flex; } .public-nav .submenu .submenu > li > a { padding-left: 2.25rem; } .public-nav .submenu .submenu .submenu > li > a { padding-left: 2.75rem; } .public-nav .submenu .submenu .submenu .submenu > li > a { padding-left: 3.25rem; } .public-nav .menu-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); transition: transform .25s ease; } .public-nav .has-submenu.is-open > a .menu-arrow { transform: translateY(-50%) rotate(90deg); } } main { min-height: 40vh; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } .cont { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); } .main-content-single { overflow-x: hidden; } main { overflow-x: hidden; } main:has(> .uvod-slider-fullwidth) { overflow-x: visible; } .uvod-slider { width: 100%; max-width: none; box-sizing: border-box; overflow: hidden; background: var(--color-header-bg); position: relative; } .uvod-slider-inner { position: relative; height: var(--uvod-slider-height, 420px); width: 100%; } .uvod-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; display: flex; flex-wrap: wrap; gap: 0; } .uvod-slide.active { opacity: 1; pointer-events: auto; } .uvod-slider-effect-slide .uvod-slider-inner { display: flex; flex-wrap: nowrap; transition: transform 0.5s ease; } .uvod-slider-inner-carousel.uvod-slider-inner { display: flex; flex-wrap: nowrap; } .uvod-slider-inner-carousel .uvod-slide-item { flex: 0 0 auto; min-width: 0; height: 100%; } .uvod-slider-effect-slide .uvod-slide { position: relative; flex: 0 0 auto; opacity: 1; pointer-events: auto; } .uvod-slider-effect-slide .uvod-slide.active { opacity: 1; } .uvod-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .uvod-slide-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 2rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; } .uvod-slider-fullwidth .uvod-slide-caption { padding-left: max(var(--spacing), calc((100vw - var(--max-width)) / 2 + var(--spacing) + 10px)); } .uvod-slider-viewport-wrap .uvod-slide-caption { padding-left: max(var(--spacing), calc((100vw - var(--max-width)) / 2 + var(--spacing))); } .uvod-slide-caption h2 { margin: 0 0 0.25rem; font-size: 1.35rem; } .uvod-slide-caption a { color: #fff; text-decoration: none; } .uvod-slide-caption a:hover { text-decoration: underline; } .uvod-slide-caption a:focus { outline: 2px solid #fff; outline-offset: 2px; } .uvod-slide-excerpt { margin: 0; font-size: 0.95rem; opacity: .95; } .uvod-slider-indicators { position: absolute; bottom: 0.5rem; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.5rem; z-index: 5; } .uvod-slider-dots { display: flex; gap: 0.4rem; } .uvod-slider-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.3); cursor: pointer; padding: 0; transition: background .2s; } .uvod-slider-dot:hover { background: rgba(255,255,255,.6); } .uvod-slider-dot.active { background: #fff; } .uvod-slider-dot:focus { outline: 2px solid #fff; outline-offset: 2px; } .uvod-slider-viewport-wrap { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; left: 0; overflow: hidden; } .uvod-slider-viewport-wrap .uvod-slider-fullwidth { width: 100%; min-width: 100vw; max-width: none; margin-left: 0; margin-right: 0; } .uvod-slider-viewport-wrap .uvod-slider-single-slide .uvod-slide { width: 100vw !important; min-width: 100%; } .uvod-slider-fullwidth { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .uvod-slider-fullwidth .uvod-slider-inner { width: 100vw; min-width: 100%; max-width: none; } .uvod-slider-fullwidth .uvod-slide { left: 0; right: 0; box-sizing: border-box; } .uvod-slider-fullwidth.uvod-slider-per-1 .uvod-slide { width: 100%; min-width: 100%; } .uvod-slider-fullwidth.uvod-slider-per-1 .uvod-slide-item { width: 100% !important; min-width: 100%; max-width: none; } .uvod-slider-fullwidth .uvod-slide-item img { width: 100% !important; height: 100%; min-width: 100%; max-width: none; object-fit: cover; object-position: center; display: block; vertical-align: top; } .uvod-slider-per-1 .uvod-slide-item { width: 100%; min-width: 100%; flex: 0 0 100%; } .uvod-slider-per-2 .uvod-slide-item { width: 50%; } .uvod-slider-per-3 .uvod-slide-item { width: 33.333%; } .uvod-slider-per-4 .uvod-slide-item { width: 25%; } .uvod-slider-per-5 .uvod-slide-item { width: 20%; } .uvod-slider-per-6 .uvod-slide-item { width: 16.666%; } .uvod-slider-per-7 .uvod-slide-item { width: 14.285%; } .uvod-slider-per-8 .uvod-slide-item { width: 12.5%; } .uvod-slide-item { position: relative; height: 100%; min-height: 0; overflow: hidden; } .uvod-slide-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .uvod-slide-item .uvod-slide-caption { position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.9rem; padding: 0.75rem 1rem; } .uvod-slider-fullwidth .uvod-slide-item .uvod-slide-caption { padding-left: max(var(--spacing), calc((100vw - var(--max-width)) / 2 + var(--spacing) + 10px)); } .uvod-slider-viewport-wrap .uvod-slide-item .uvod-slide-caption { padding-left: max(var(--spacing), calc((100vw - var(--max-width)) / 2 + var(--spacing))); } .uvod-slide-item .uvod-slide-caption h2 { font-size: 1rem; } .uvod-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; z-index: 5; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .uvod-slider-arrow:hover { background: rgba(0,0,0,.8); } .uvod-slider-prev { left: 0.5rem; } .uvod-slider-next { right: 0.5rem; } @media (max-width: 768px) { .uvod-slider-viewport-wrap { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .uvod-slider-fullwidth { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .uvod-slider-fullwidth .uvod-slider-inner { width: 100%; min-width: 100%; } .uvod-slider-fullwidth .uvod-slide-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .uvod-slider-fullwidth .uvod-slide-item { height: 100%; min-height: 0; } .uvod-slider-inner { height: var(--uvod-slider-height-mobile, 280px); } .uvod-slider { max-height: none; } .uvod-slide-caption { padding: 1rem; } .uvod-slide-caption h2 { font-size: 1.1rem; } .uvod-slider-per-mobile-1 .uvod-slide-item { width: 100% !important; } .uvod-slider-per-mobile-2 .uvod-slide-item { width: 50% !important; } .uvod-slider-per-mobile-3 .uvod-slide-item { width: 33.333% !important; } .uvod-slider-per-mobile-4 .uvod-slide-item { width: 25% !important; } .uvod-slider.uvod-slider-per-1 .uvod-slide-item { width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; } } .layout-cols { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem var(--spacing) 3rem; display: grid; gap: 2rem; align-items: start; } .layout-cols { grid-template-columns: 1fr; grid-template-areas: "main"; } .layout-cols .main-content { grid-area: main; } .layout-cols.has-left.has-right { grid-template-columns: 1fr minmax(0, 2fr) 1fr; grid-template-areas: "left main right"; } .layout-cols.has-left.has-right .sidebar-left { grid-area: left; } .layout-cols.has-left.has-right .main-content { grid-area: main; } .layout-cols.has-left.has-right .sidebar-right { grid-area: right; } .layout-cols.has-left:not(.has-right) { grid-template-columns: 1fr minmax(0, 2fr); grid-template-areas: "left main"; } .layout-cols.has-left:not(.has-right) .sidebar-left { grid-area: left; } .layout-cols.has-left:not(.has-right) .main-content { grid-area: main; } .layout-cols.has-right:not(.has-left) { grid-template-columns: minmax(0, 2fr) 1fr; grid-template-areas: "main right"; } .layout-cols.has-right:not(.has-left) .main-content { grid-area: main; } .layout-cols.has-right:not(.has-left) .sidebar-right { grid-area: right; } .sidebar { min-width: 0; } .main-content { min-width: 0; } @media (max-width: 1024px) { .layout-cols.has-left.has-right { grid-template-columns: 1fr; grid-template-areas: "main" "left" "right"; } .layout-cols.has-left.has-right .sidebar-left { grid-area: left; } .layout-cols.has-left.has-right .main-content { grid-area: main; } .layout-cols.has-left.has-right .sidebar-right { grid-area: right; } .layout-cols.has-left:not(.has-right), .layout-cols.has-right:not(.has-left) { grid-template-columns: 1fr; } } @media (max-width: 640px) { .layout-cols { gap: 1rem; padding: 1rem var(--spacing) 2rem; } } .pagination-wrap { margin-top: 1.5rem; } .pagination { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; } .pagination li { margin: 0; } .pagination a { display: inline-block; padding: 0.4rem 0.75rem; border-radius: var(--radius); background: var(--color-border); color: var(--color-text); text-decoration: none; font-size: 0.9rem; } .pagination a:hover { background: var(--color-text-muted); color: #fff; } .pagination a.active { background: var(--color-primary); color: #fff; pointer-events: none; } .pagination a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .pagination-ellipsis { display: inline-block; padding: 0.4rem 0.35rem; color: var(--color-text-muted); font-size: 0.9rem; } .category-lock-card { max-width: 420px; margin: 2rem auto 3rem; padding: 2rem; background: #fff; border-radius: var(--radius, 8px); box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.06); text-align: center; } .category-lock-title { font-size: 1.35rem; margin: 0 0 0.5rem; color: var(--color-text); } .category-lock-desc { font-size: 0.95rem; color: var(--color-text-muted); margin: 0 0 1.25rem; line-height: 1.5; } .category-lock-alert { margin-bottom: 1rem; text-align: left; } .category-lock-form { text-align: left; } .category-lock-input { width: 100%; padding: 0.65rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; line-height: 1.5; box-sizing: border-box; background: #fff; color: var(--color-text); transition: border-color 0.2s, box-shadow 0.2s; } .category-lock-input::placeholder { color: var(--color-text-muted); } .category-lock-input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } .category-lock-btn { margin-top: 0.5rem; } .sidebar .card { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 1.25rem; overflow: hidden; } .sidebar .card:last-child { margin-bottom: 0; } .card-header { padding: 0.75rem 1rem; background: var(--color-card-header-bg, var(--color-bg)); color: var(--color-card-header-text, var(--color-text)); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.5rem; } .card-header .card-header-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h1 a, .card-header h2 a, .card-header h3 a, .card-header h4 a, .card-header h5 a, .card-header h6 a { color: inherit; text-decoration: none; } .card-header h1 a:hover, .card-header h2 a:hover, .card-header h3 a:hover, .card-header h4 a:hover, .card-header h5 a:hover, .card-header h6 a:hover { text-decoration: underline; } .sidebar .card-header-title { margin: 0; font-size: 1rem; font-weight: 600; } .sidebar .card-body { padding: 1rem; background: var(--color-card-body-bg, #fff); color: var(--color-card-body-text, var(--color-text)); } .sidebar .card .module-title { display: none; } .module { background: transparent; border-radius: 0; padding: 0; box-shadow: none; margin-bottom: 1.5rem; } .sidebar .card-body .module { margin: 0; } .module-title { font-size: 1.1rem; margin: 0 0 1rem; color: var(--color-text); padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-primary); } .module-subtitle { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; color: var(--color-text-muted); } .module-empty { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); } .calendar-list { list-style: none; margin: 0; padding: 0; } .calendar-list li { padding: 0.5rem 0 0.5rem 0.5rem; border-bottom: 1px solid var(--color-border); border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 0.2rem; } .calendar-list li:last-child { border-bottom: 0; } .calendar-list time { font-size: 0.85rem; color: var(--color-text-muted); } .calendar-list a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .calendar-list a:hover { text-decoration: underline; } .calendar-list a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .module-list { list-style: none; margin: 0; padding: 0; } .module-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); } .module-list li:last-child { border-bottom: 0; } .module-list .meta { font-size: 0.85rem; color: var(--color-text-muted); margin-right: 0.5rem; } .module-notice-board .notice-board-meta { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.25rem; } .module-notice-board .notice-board-meta .meta { display: block; margin-right: 0; } .module-notice-board .notice-board-list a { color: var(--color-primary); text-decoration: none; font-size: 0.9rem; } .module-notice-board .notice-board-list a:hover { text-decoration: underline; } .quick-message-item .quick-message-date { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .quick-message-item .quick-message-title { font-weight: 600; margin-bottom: 0.35rem; } .quick-message-item .quick-message-content { font-size: 0.95rem; line-height: 1.45; } .quick-message-item .quick-message-content p { margin: 0 0 0.35rem; } .quick-message-item .quick-message-content p:last-child { margin-bottom: 0; } .quick-message-docs { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.9rem; } .quick-message-docs li { margin: 0.2rem 0; } .quick-message-docs a { color: var(--color-primary); text-decoration: none; } .quick-message-docs a:hover { text-decoration: underline; } .module-contact p { margin: 0 0 0.5rem; font-size: 0.9rem; } .module-contact a { color: var(--color-primary); text-decoration: none; } .module-contact a:hover { text-decoration: underline; } .module-contact a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .contact-addr { margin-bottom: 0.5rem; } .uredni-hodiny { font-size: 0.9rem; white-space: pre-line; } .contact-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .contact-table th, .contact-table td { padding: 0.35rem 0.5rem 0.35rem 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--color-border); } .contact-table th { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; width: 1%; } .contact-table td { word-break: break-word; } .uvod-aktuality .uvod-aktuality-title, .uvod-aktuality h1#h2akt { margin: 0 0 1.25rem; color: var(--color-h1, var(--color-heading, var(--color-text))); } .article-list-stacked { display: flex; flex-direction: column; gap: 1.5rem; } .article-card-stacked { margin: 0; } .article-card-stacked-inner { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; border-left: 4px solid var(--color-primary); } .article-card-stacked-image { display: block; height: 180px; background: var(--color-border); overflow: hidden; } .article-card-stacked-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .article-card-stacked-image:hover img { transform: scale(1.05); } .article-card-stacked-body { padding: 1rem 1.25rem; min-width: 0; } .article-card-stacked-inner:not(:has(.article-card-stacked-image)) .article-card-stacked-body { width:100%;grid-column: 1 / -1; } .article-card-date-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; } .article-card-meta-date-author { font-size: 0.8rem; color: var(--color-text-muted); } .article-card-date { font-size: inherit; } .article-card-date-sep { margin: 0 0.35em; opacity: 0.8; } .article-card-date-row .article-card-author { font-size: inherit; margin: 0; } .article-card-meta-attachments { font-size: 0.8rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem; } .article-card-stacked h2, .article-card-stacked h3 { margin: 0 0 0.5rem; font-size: 1.15rem; line-height: 1.35; color: var(--color-h2, var(--color-heading, var(--color-text))); } .article-card-stacked h2 a, .article-card-stacked h3 a { color: inherit; text-decoration: none; } .article-card-stacked h2 a:hover, .article-card-stacked h3 a:hover { text-decoration: underline; } .article-card-stacked h2 a:focus, .article-card-stacked h3 a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .article-card-excerpt { font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.45; } .article-card-stacked .btn { font-size: 0.85rem; padding: 0.4rem 0.75rem; } .article-card-stacked-body > .article-card-author { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 0.5rem; } .gallery-card-author { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 0.35rem; } .article-card-photo-top .article-card-stacked-inner { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; grid-template-columns: unset; grid-template-rows: unset; } .article-list-photo-top .article-card-stacked-inner { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; } .article-card-photo-top .article-card-stacked-image { width: 100%; height: 220px; min-width: 0; flex-shrink: 0; overflow: hidden; } .article-card-photo-top .article-card-stacked-body { flex: 1; min-width: 0; width: 100%; } @media (max-width: 640px) { .article-card-stacked-inner { grid-template-columns: 1fr; } .article-card-stacked.article-card-photo-top .article-card-stacked-inner { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } .article-card-stacked-image { height: 200px; } .article-card-stacked-body { padding: 1rem 1.25rem; } } .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--color-text-muted); color: #fff; text-decoration: none; border-radius: var(--radius); border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; } .btn:hover { background: var(--color-text); color: #fff; } .btn:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .btn-primary { background: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); } .text-center { text-align: center; } .mt-4 { margin-top: 1.5rem; } .site-info { background: #f1f5f9; padding: 2rem 0; margin-top: 2rem; } .footer-heading { font-size: 1rem; margin: 0 0 0.75rem; color: var(--color-text); } .footer-info { margin-bottom: 1.5rem; } .footer-info p { margin: 0 0 0.35rem; font-size: 0.9rem; line-height: 1.4; } .footer-info a { color: var(--color-text-muted); text-decoration: none; } .footer-info a:hover { text-decoration: underline; } .footer-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } @media (max-width: 900px) { .footer-grid-3 { grid-template-columns: 1fr; } } #footer-map { height: 220px; border-radius: var(--radius); overflow: hidden; margin-top: 0.5rem; border: 1px solid var(--color-border); } .footer-map-placeholder { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; } .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 1rem var(--spacing); font-size: 0.9rem; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .footer-legal a { color: var(--color-footer-text); text-decoration: none; } .footer-legal a:hover { color: #fff; } .footer-legal a:focus { outline: 2px solid #fff; outline-offset: 2px; } .footer-webskolam { display: flex; align-items: center; gap: 0.5rem; } .footer-webskolam .logoWs { height: 28px; width: auto; } .footer-admin { display: flex; gap: 1rem; flex-wrap: wrap; } .footer-admin a { color: var(--color-footer-text); text-decoration: none; } .footer-admin a:hover { color: #fff; } .footer-admin a:focus { outline: 2px solid #fff; outline-offset: 2px; } .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-header-bg); color: var(--color-header-text); padding: 1rem var(--spacing); box-shadow: 0 -2px 10px rgba(0,0,0,.2); z-index: 1000; } .cookie-consent[hidden] { display: none !important; } .cookie-consent-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .cookie-consent-text { margin: 0; font-size: 0.9rem; line-height: 1.4; flex: 1; min-width: 200px; } .cookie-consent-text a { color:var(--color-primary); text-decoration: underline; } .cookie-consent-text a:hover { color:var(--color-primary-hover); } .cookie-consent-text a:focus { outline: 2px solid #fff; outline-offset: 2px; } .cookie-consent-btn { padding: 0.5rem 1rem; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; cursor: pointer; flex-shrink: 0; } .cookie-consent-btn:hover { background: var(--color-primary-hover); } .cookie-consent-btn:focus { outline: 2px solid #fff; outline-offset: 2px; } .cookie-consent-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-shrink: 0; } .cookie-consent-btn-technical { background: rgba(255,255,255,.25); color: inherit; } .cookie-consent-btn-technical:hover { background: rgba(255,255,255,.35); } .dev-version-bar { background: #b91c1c; color: #fff; text-align: center; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600; } .legal-page { padding: 2rem 0 3rem; } .legal-page h1 { margin: 0 0 1rem; } .legal-page h2 { margin: 1.5rem 0 0.5rem; } .legal-page p { margin: 0 0 0.75rem; line-height: 1.5; } .legal-page ul { margin: 0 0 1rem; padding-left: 1.5rem; } .legal-page a { color: var(--color-primary); text-decoration: none; } .legal-page a:hover { text-decoration: underline; } .legal-page a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; } .alert { padding: 1rem; margin-bottom: 1rem; border-radius: var(--radius); } .alert-error { background: #fee2e2; color: #991b1b; } .alert-success { background: #dcfce7; color: #166534; } .article-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .article-card { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; border-left: 4px solid var(--color-primary); transition: box-shadow .2s; } .article-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); } .article-card-image { height: 180px; background: var(--color-border); display: block; } .article-card-image img { width: 100%; height: 100%; object-fit: cover; } .article-card-body { padding: 1rem 1.25rem; } .article-card-date { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.35rem; } .article-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; line-height: 1.35; } .article-card h3 a { color: inherit; text-decoration: none; } .article-card h3 a:hover { text-decoration: underline; } .article-card-excerpt { font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.45; } .article-card .btn { font-size: 0.85rem; padding: 0.4rem 0.75rem; } .uvod-list-simple { list-style: none; padding: 0; margin: 0; } .uvod-list-simple li { padding: 0.65rem 0; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .uvod-list-simple li a { color: var(--color-text); text-decoration: none; font-weight: 500; } .uvod-list-simple li a:hover { text-decoration: underline; } .uvod-list-simple .meta { font-size: 0.85rem; color: var(--color-text-muted); } .article-main-photo { max-width: 100%; height: auto; border-radius: var(--radius); } .article-body, .article-excerpt { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--color-text); } .article-body h1, .article-excerpt h1 { font-family: var(--font-heading); color: var(--color-h1, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h2, .article-excerpt h2 { font-family: var(--font-heading); color: var(--color-h2, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h3, .article-excerpt h3 { font-family: var(--font-heading); color: var(--color-h3, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h4, .article-excerpt h4 { font-family: var(--font-heading); color: var(--color-h4, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h5, .article-excerpt h5 { font-family: var(--font-heading); color: var(--color-h5, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h6, .article-excerpt h6 { font-family: var(--font-heading); color: var(--color-h6, var(--color-heading, var(--color-text))); margin: 1.25em 0 0.5em; line-height: 1.3; } .article-body h1:first-child, .article-body h2:first-child, .article-body h3:first-child, .article-excerpt h1:first-child, .article-excerpt h2:first-child, .article-excerpt h3:first-child { margin-top: 0; } .article-body p, .article-excerpt p { margin: 0.75em 0; } .article-body p:first-child, .article-excerpt p:first-child { margin-top: 0; } .article-body p:last-child, .article-excerpt p:last-child { margin-bottom: 0; } .article-body a, .article-excerpt a { color: var(--color-primary); text-decoration: none; } .article-body a:hover, .article-excerpt a:hover { text-decoration: underline; } .article-body ul, .article-body ol, .article-excerpt ul, .article-excerpt ol { margin: 0.75em 0; padding-left: 1.5em; } .article-body img { max-width: 100%; height: auto; border-radius: var(--radius); } .article-body { overflow-x: auto; } .article-body table, .article-body table.article-table { width: 100%; max-width: 100%; border-collapse: collapse; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .article-body table thead, .article-body table.article-table thead { display: table-header-group; } .article-body table td, .article-body table th, .article-body table.article-table td, .article-body table.article-table th { border: 1px solid var(--color-border, #e2e8f0); padding: 0.5rem 0.75rem; text-align: left; } .article-body table th, .article-body table.article-table th { font-weight: 600; background: var(--color-bg, #f8fafc); color: var(--color-text, #1e293b); } .article-body table tbody tr:nth-child(even), .article-body table.article-table tbody tr:nth-child(even) { background: #fafbfc; } .article-body table tbody tr:hover, .article-body table.article-table tbody tr:hover { background: #f1f5f9; } .article-gallery { margin-top: 2rem; } .article-gallery h2 { font-size: 1.1rem; margin-bottom: .75rem; } .article-gallery-inner { display: flex; flex-wrap: wrap; gap: .5rem; } .article-gallery-item { display: block; width: 160px; height: 120px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); cursor: pointer; } .article-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0; } .gallery-view-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .gallery-view-btn { padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; min-width: 2.5rem; } .gallery-view-btn:hover { background: #f1f5f9; } .gallery-view-btn.active { background: var(--color-primary, #2563eb); color: #fff; border-color: var(--color-primary, #2563eb); } .gallery-pagination { display: flex; justify-content: center; flex-wrap: wrap; } .gallery-pagination-inner { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; justify-content: center; } .gallery-pagination-inner a, .gallery-pagination-inner span { display: inline-block; padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.9rem; } .gallery-pagination-inner a { text-decoration: none; border: 1px solid #cbd5e1; background: #fff; color: inherit; } .gallery-pagination-inner a:hover { background: #f1f5f9; } .gallery-pagination-inner .gallery-page-current { background: var(--color-primary, #2563eb); color: #fff; border-color: var(--color-primary, #2563eb); } .gallery-images-grid-wrap { position: relative; min-height: 120px; } .gallery-images-grid { display: grid; gap: 1rem; margin: 1.5rem 0; min-height: 80px; } .gallery-images-grid-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255,255,255,0.92); border-radius: 8px; font-size: 0.9rem; color: #64748b; z-index: 5; } .gallery-images-grid-wrap.loading .gallery-images-grid-loading { display: flex; } .gallery-images-grid-wrap.loading .gallery-images-grid { opacity: 0.5; pointer-events: none; } .gallery-images-grid-spinner { width: 28px; height: 28px; border: 3px solid #e2e8f0; border-top-color: var(--color-primary, #2563eb); border-radius: 50%; animation: gallery-grid-spin 0.6s linear infinite; } @keyframes gallery-grid-spin { to { transform: rotate(360deg); } } .gallery-images-grid.gallery-images-cols-1 { grid-template-columns: 1fr; } .gallery-images-grid.gallery-images-cols-2 { grid-template-columns: repeat(2, 1fr); } .gallery-images-grid.gallery-images-cols-3 { grid-template-columns: repeat(3, 1fr); } .gallery-images-grid.gallery-images-cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .gallery-toolbar { flex-direction: column; align-items: stretch; } .gallery-view-switcher { justify-content: center; } .gallery-view-btn-desktop { display: none !important; } .gallery-images-grid.gallery-images-cols-2 { grid-template-columns: repeat(2, 1fr); } .gallery-images-grid.gallery-images-cols-3 { grid-template-columns: repeat(2, 1fr); } .gallery-images-grid.gallery-images-cols-4 { grid-template-columns: repeat(2, 1fr); } } .gallery-image-wrap { margin: 0; } .gallery-image-trigger { display: block; width: 100%; padding: 0; border: none; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); cursor: pointer; background: none; -webkit-tap-highlight-color: transparent; text-decoration: none; color: inherit; } .gallery-image-trigger:hover { box-shadow: 0 4px 10px rgba(0,0,0,.15); } .gallery-image-trigger img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.3s ease; } .gallery-image-trigger:hover img { transform: scale(1.05); } .gallery-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; } .gallery-lightbox[hidden] { display: none !important; } .gallery-lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.85); cursor: pointer; } .gallery-lightbox-content { position: relative; max-width: 95vw; max-height: 95vh; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .gallery-lightbox-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-width: 80px; min-height: 80px; } .gallery-lightbox-loading { display: none; position: absolute; width: 48px; height: 48px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: gallery-lightbox-spin 0.8s linear infinite; } .gallery-lightbox-loading.is-visible { display: block; } .gallery-lightbox-img { max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); transition: opacity 0.4s ease; } .gallery-lightbox-img.is-loaded { opacity: 1; } .gallery-lightbox-img.gallery-lightbox-img-switch { animation: gallery-lightbox-img-in 0.25s ease forwards; } @keyframes gallery-lightbox-img-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes gallery-lightbox-spin { to { transform: rotate(360deg); } } .gallery-lightbox-close { position: absolute; top: -2.5rem; right: 0; background: #fff; border: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #1e293b; } .gallery-lightbox-close:hover { background: #f1f5f9; } .gallery-lightbox-prev, .gallery-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); border: none; width: 3rem; height: 3rem; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; color: #1e293b; padding: 0; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .gallery-lightbox-prev:hover, .gallery-lightbox-next:hover { background: #fff; } .gallery-lightbox-prev { left: 1rem; } .gallery-lightbox-next { right: 1rem; } .article-videos { margin-top: 2rem; } .article-videos h2 { font-size: 1.1rem; margin-bottom: .75rem; } .article-video-item { margin-bottom: 1rem; } .article-video-item video { display: block; } .article-video-title { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); } .article-video-embed { margin-bottom: 0.5rem; } .article-video-embed-consent { margin-bottom: 0.5rem; min-height: 80px; } .article-video-embed-msg { padding: 1rem; background: #f1f5f9; border-radius: 6px; color: #475569; margin: 0; } .article-video-embed-msg a { color: var(--color-primary, #2563eb); } .article-documents { margin-top: 2rem; } .article-documents h2 { font-size: 1.1rem; margin-bottom: 0.75rem; } .article-documents-table-wrap { overflow-x: auto; } .article-documents-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px); background: #fff; } .article-documents-table td { padding: 0.6rem 0.75rem; font-size: 0.95rem; border-bottom: 1px solid var(--color-border, #e2e8f0); } .article-documents-table tbody tr:last-child td { border-bottom: none; } .article-documents-table tbody tr.article-documents-row-even { background: #f8fafc; } .article-documents-table tbody tr:hover { background: #f1f5f9; } .article-documents-table tbody tr.article-documents-row-even:hover { background: #e2e8f0; } .article-documents-cell-name { width: 100%; } .article-documents-cell-name > a { color: var(--color-primary, #2563eb); text-decoration: none; } .article-documents-cell-name > a:hover { text-decoration: underline; } .article-doc-size { color: var(--color-text-muted, #64748b); font-size: 0.9em; } .article-documents-cell-action { white-space: nowrap; text-align: right; width: 1%; } .article-documents-table .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.875rem; } .clanky-index-wrap { position: relative; min-height: 120px; } .clanky-index-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px); background: #fff; } .clanky-index-table td { padding: 0.6rem 0.75rem; font-size: 0.95rem; border-bottom: 1px solid var(--color-border, #e2e8f0); } .clanky-index-table tbody tr:last-child td { border-bottom: none; } .clanky-index-table tbody tr.clanky-index-row-even { background: #f8fafc; } .clanky-index-table tbody tr:hover { background: #f1f5f9; } .clanky-index-table tbody tr.clanky-index-row-even:hover { background: #e2e8f0; } .clanky-index-cell-title { width: 100%; } .clanky-index-cell-title a { color: var(--color-text, #1e293b); text-decoration: none; } .clanky-index-cell-title a:hover { color: var(--color-primary, #2563eb); text-decoration: underline; } .clanky-index-cell-date { white-space: nowrap; color: var(--color-text-muted, #64748b); font-size: 0.9rem; } .clanky-index-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(255,255,255,0.92); border-radius: var(--radius, 8px); font-size: 0.9rem; color: #64748b; z-index: 5; } .clanky-index-wrap.loading .clanky-index-loading { display: flex; } .clanky-index-wrap.loading #clankyIndexContainer { opacity: 0.5; pointer-events: none; } .clanky-index-spinner { width: 28px; height: 28px; border: 3px solid #e2e8f0; border-top-color: var(--color-primary, #2563eb); border-radius: 50%; animation: clanky-index-spin 0.6s linear infinite; } @keyframes clanky-index-spin { to { transform: rotate(360deg); } } .clanky-index-pagination { margin-top: 1rem; } .article-document-pdf-embed { margin-top: 2rem; position: relative; z-index: 0; } .article-document-pdf-embed h2 { font-size: 1.1rem; margin-bottom: 0.75rem; } .article-document-pdf-embed { position: relative; } .article-pdf-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 320px; background: #f1f5f9; border-radius: var(--radius, 8px); color: #475569; } .article-pdf-spinner { width: 40px; height: 40px; border: 3px solid #e2e8f0; border-top-color: var(--color-primary, #2563eb); border-radius: 50%; animation: article-pdf-spin 0.8s linear infinite; } @keyframes article-pdf-spin { to { transform: rotate(360deg); } } .article-pdf-iframe { width: 100%; min-height: 480px; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius, 8px); } .article-pdf-download { margin-top: 0.75rem; font-size: 0.9rem; } .article-pdf-download a { color: var(--color-primary, #2563eb); } .public-edit-links-wrap { position: fixed; bottom: 1rem; left: 1rem; padding: .5rem; background: #00000030; border-radius: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; z-index: 1000; } .public-edit-admin-logo { display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: box-shadow 0.2s; } .public-edit-admin-logo:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.35); } .public-edit-admin-logo img { display: block; width: 40px; height: 40px; object-fit: cover; } .public-edit-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .public-edit-link { display: inline-block; padding: 0.35rem 0.75rem; font-size: 0.875rem; background: var(--color-primary, #0f766e); color: #fff; text-decoration: none; border-radius: var(--radius, 6px); } .public-edit-link:hover { background: var(--color-primary-hover, #0d9488); color: #fff; } .file-icon-img { width: 1em; height: 1em; display: inline-block; vertical-align: -0.18em; margin-right: 0.3em; object-fit: contain; } *:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } button:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }