@font-face { font-family: "Google Sans Flex"; src: url("fonts/GoogleSansFlex-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;} @font-face { font-family: "Google Sans Flex"; src: url("fonts/GoogleSansFlex-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap;} @font-face { font-family: "Google Sans Flex"; src: url("fonts/GoogleSansFlex-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;} .tinymceEditor { border: 1px solid red; } :root { --brand-ink: #141417; --brand-red: #e51f37; --brand-orange: #f0771e; --brand-yellow: #edbd21; --brand-yellow-press: #cda31c; --brand-red-bright: #ff3b50; --brand-yellow-bright: #ffd838; --bg: #0a0a0c; --surface-1: #141417; --surface-2: #1d1d22; --surface-3: #26262c; --line: #2a2a31; --line-soft: rgba(255,255,255,.06); --line-strong: rgba(255,255,255,.14); --fg-1: #f5f5f7; --fg-2: #b8b8c0; --fg-3: #7a7a85; --fg-inverse: #0a0a0c; --accent: var(--brand-red); --accent-hover: #ff2a44; --accent-press: #c01a2f; --accent-soft: rgba(229, 31, 55, .12); --warn: var(--brand-orange); --gold: var(--brand-yellow); --cat-domestic: var(--brand-yellow); --cat-foreign: var(--brand-red); --cat-live: #22c55e; --cat-result: var(--brand-orange); --r-sm: 0.25em; --r-md: 0.375em; --r-pill: 62.4375em; --shadow-sm: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 1px 0.125em rgba(0,0,0,.4); --shadow-md: 0 0.5em 1.5em -0.5em rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.04) inset; --shadow-lg: 0 1.5em 3.75em -1em rgba(0,0,0,.7), 0 1px 0 0 rgba(255,255,255,.05) inset; --shadow-red: 0 0.5em 1.75em -0.625em rgba(229,31,55,.55); --glow-gold: 0 0 0 1px rgba(237,189,33,.25), 0 0 1.5em rgba(237,189,33,.15); --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --font-display: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-body: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --font-size: clamp(0.875em, calc(0.3125em + 5vw), 1.0625em); --t-display: clamp(2.5em, 6vw, 5.25em); --t-h1: 2.75em; --t-h2: 2em; --t-h3: 1.5em; --t-h4: 1.25em; --t-h5: 1em; --t-body: 1em; --t-small: 0.875em; --t-xs: 0.75em; --t-overline: 0.6875em; --w-regular: 400; --w-medium: 600; --w-semibold: 600; --w-bold: 700; --w-black: 700; --container: 87.5em; --container-wide: 87.5em; --gutter: 2em; --header-h: 8.25em;} .clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; } .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .embedBlok {display: block; width: 100%;} .embedBlok--audio { max-width: 660px; margin: 15px auto; } .embedBlok--audio iframe { display: block; } .PKWin_print_html, .PKWin_print_body { background: #333333 !important; background-image: none !important; color: #ffffff !important; } .in_website_hp { position: absolute; left: -9999px; opacity: 0; height: 0px; width: 0px; z-index: -1; } .editor { padding:20px; } .news-detail { max-width: 705px; margin: 10px auto; border: 1px solid black; padding: 10px; height: auto!important; } .enRozvrzeni { } .deRozvrzeni { } body { display: block !important; } /*------------------------RESET---------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;} article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; } /*------------------------------------------------------*/ .chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } html {font-size: var(--font-size);} html, body {background: var(--bg); color: var(--fg-1); font-family: var(--font-body); line-height: 1.55; font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none;} * {box-sizing: border-box;} body {background: var(--bg); color: var(--fg-1); min-height: 100vh; margin: 0;} .container {max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);} @media (max-width: 1080px) { :root {--gutter: 1.35em;} } @media (max-width: 480px) { :root {--gutter: 1.15em;} } .main-grid {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3em; align-items: start;} html.no-js .nojs-fallback {display: block;} html.no-js #root {display: none;} main.container {padding-top: 1.75em;} @media (max-width: 1080px) { .main-grid {grid-template-columns: minmax(0, 1fr);} } @media (max-width: 760px) { body {padding-bottom: 4.25em;} } h1, .h1 {font-family: var(--font-display); font-size: var(--t-h1); font-weight: var(--w-black); line-height: 1.04; letter-spacing: -0.02em; color: var(--fg-1);} h2, .h2 {font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--w-bold); line-height: 1.1; letter-spacing: -0.015em;} h3 {font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--w-bold); line-height: 1.18; letter-spacing: -0.01em;} h4 {font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: 1.25;} h5 {font-size: var(--t-h5); font-weight: var(--w-semibold); line-height: 1.3;} p {color: var(--fg-2); } small {font-size: var(--t-small); color: var(--fg-2);} .overline {font-size: var(--t-overline); font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);} .display {font-family: var(--font-display); font-size: var(--t-display); font-weight: var(--w-black); letter-spacing: -0.035em; line-height: 0.92;} a {color: var(--fg-1); text-decoration: none;} a:hover {color: var(--accent);} code, pre {font-family: var(--font-mono); font-size: 0.95em;} ::selection {background: var(--fg-1); color: var(--bg);} ::-moz-selection {background: var(--fg-1); color: var(--bg);} h1.hdr-tag, span.hdr-tag {font-family: var(--font-display); font-weight: 600; font-size: clamp(10px, calc(1px + 1vw), 14px); line-height: 1.3; color: var(--fg-1); letter-spacing: -0.005em; width: 20em; border-left: 0.1em solid var(--line-strong); padding: 0.15em 0 0.15em 0.85em; margin: 0; text-transform: none;} .header {background: var(--surface-1); position: relative; border-bottom: 1px solid var(--line); container-type: inline-size; container-name: hdr;} .hdr-top {margin: 0; padding: 0.9em var(--gutter); display: flex; align-items: center; gap: 1.4em;} .hdr-logo img {height: 3.2em; width: auto; display: block;} .hdr-socials {display: flex; gap: 0.4em; margin-left: auto;} .hdr-socials a, .hdr-socials button {width: 2.15em; height: 2.15em; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.4em; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); transition: all 150ms ease; cursor: pointer; padding: 0; font: inherit;} .hdr-socials a:hover, .hdr-socials button:hover {background: rgba(255,255,255,0.06); color: var(--fg-1); border-color: var(--line-strong);} .hdr-socials .ic {width: 1.05em; height: 1.05em;} .hdr-mobile-actions {display: none; gap: 0.4em; margin-left: auto; flex-shrink: 0;} .hdr-icon-btn {width: 2.15em; height: 2.15em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.4em; color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease; font: inherit; padding: 0;} .hdr-icon-btn:hover {background: rgba(255,255,255,0.06); color: var(--fg-1); border-color: var(--line-strong);} .hdr-icon-btn .ic {width: 1.05em; height: 1.05em;} .hdr-overlay {position: fixed; inset: 0; background: rgba(10,10,12,0.85); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 1.25em;} .hdr-overlay[hidden] {display: none !important;} .hdr-overlay--menu {justify-content: flex-end; padding: 0; align-items: stretch; background: rgba(10,10,12,0.35);} .hdr-overlay-bar {background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0.9em 1em; width: 100%; max-width: 32em; display: flex; align-items: center; gap: 0.75em; color: var(--fg-1);} .hdr-overlay-bar input {flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg-1); font-family: var(--font-body); font-size: 1em; min-width: 0;} .hdr-overlay-bar button {background: transparent; border: 0; color: var(--fg-2); font-size: 1.4em; width: 2em; height: 2em; cursor: pointer; line-height: 1;} .hdr-search-wrap {width: 100%; max-width: 32em; display: flex; flex-direction: column; gap: 0.5em;} .search-suggest {background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow-y: auto; overscroll-behavior: contain; max-height: min(62vh, 30em);} .search-suggest[hidden] {display: none !important;} .search-suggest-item {display: flex; align-items: center; gap: 0.75em; padding: 0.7em 1em; color: var(--fg-1); border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none;} .search-suggest-item:last-of-type {border-bottom: 0;} .search-suggest-item.is-active, .search-suggest-item:hover {background: rgba(255,255,255,0.06); color: var(--fg-1);} .search-suggest-item .ss-dot {width: 0.5em; height: 0.5em; border-radius: 50%; flex-shrink: 0; background: var(--fg-3);} .search-suggest-item .ss-dot.ss-domestic {background: var(--brand-yellow);} .search-suggest-item .ss-dot.ss-foreign {background: var(--brand-red);} .search-suggest-item .ss-thumb {width: 2.75em; height: 2.75em; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-soft);} .search-suggest-item .ss-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;} .search-suggest-item .ss-thumb--empty img {display: none;} .search-suggest-item .ss-body {display: flex; flex-direction: column; gap: 0.1em; min-width: 0; flex: 1;} .search-suggest-item .ss-title {font-family: var(--font-display); font-weight: 600; font-size: 0.95em; line-height: 1.25; color: var(--fg-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .search-suggest-item .ss-date {font-size: 0.72em; color: var(--fg-3); letter-spacing: 0.02em;} .search-suggest-empty {padding: 0.85em 1em; color: var(--fg-3); font-size: 0.85em;} .search-suggest-all {display: block; width: 100%; text-align: left; padding: 0.75em 1em; background: var(--surface-3); border: 0; border-top: 1px solid var(--line-strong); color: var(--fg-2); font-family: var(--font-body); font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;} .search-suggest-all:hover {background: rgba(255,255,255,0.06); color: var(--fg-1);} .hdr-drawer {background: var(--surface-1); border-left: 1px solid var(--line); width: min(20em, 88vw); height: 100%; padding: 1.15em 1.4em 1.4em; overflow-y: auto; display: flex; flex-direction: column; gap: 1.4em; font-size: 1.1em;} .hdr-drawer-head {display: flex; justify-content: space-between; align-items: center; font-size: 0.75em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); padding-bottom: 0.9em; border-bottom: 2px solid var(--line-strong);} .hdr-drawer-head button {background: transparent; border: 0; color: var(--fg-1); font-size: 1.7em; line-height: 1; cursor: pointer; width: 2em; height: 2em;} .hdr-drawer-links {display: flex; flex-direction: column; gap: 0.75em;} .hdr-drawer-links a, .hdr-drawer-socials a {font-size: 1em; color: var(--fg-2); display: flex; align-items: center; gap: 0.6em; font-weight: 600; padding: 0.5em 0.6em; border-radius: var(--r-sm); transition: background 140ms ease, color 140ms ease;} .hdr-drawer-links a:hover, .hdr-drawer-socials a:hover {background: var(--surface-3); color: var(--fg-1);} .hdr-drawer-links .ic, .hdr-drawer-socials .ic {width: 1.2em; height: 1.2em; flex-shrink: 0;} .hdr-drawer-socials {display: none; flex-direction: column; gap: 0.75em; padding-top: 1.25em; border-top: 2px solid var(--line-strong);} .hdr-drawer-cats {display: flex; flex-direction: column; gap: 1em; padding-bottom: 1.1em; margin-bottom: 1em; border-bottom: 2px solid var(--line-strong);} .hdr-drawer-cat {display: flex; flex-direction: column; gap: 0.3em;} .hdr-drawer-cat-head {font-size: 0.95em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--scene-color); padding: 0.3em 0.2em; text-decoration: none;} .hdr-drawer-sub {display: flex; flex-direction: column; gap: 0.1em; padding-left: 0;} .hdr-drawer-sub a {font-size: 0.95em; font-weight: 600; color: var(--fg-2); padding: 0.4em 0.6em; border-radius: var(--r-sm); text-decoration: none; transition: background 140ms ease, color 140ms ease;} .hdr-drawer-sub a:hover {background: var(--surface-3); color: var(--fg-1);} .hdr-drawer-sub a[aria-current="page"] {background: var(--scene-color); color: var(--scene-on);} .hdr-drawer-all {font-weight: 700; border-bottom: 2px solid var(--line-strong); border-radius: 0; margin-bottom: 0.35em; padding-bottom: 0.6em;} .hdr-menu {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0; font-size: 0.7rem; margin: 0; box-sizing: border-box;} .hdr-dd {position: relative; display: flex; align-items: center; height: 100%;} .hdr-dd-toggle {height: 100%; font-size: 1.1em; font-weight: 700; text-transform: uppercase; color: var(--scene-on); background: var(--scene-color); display: inline-flex; justify-content: center; align-items: center; gap: 0.45em; white-space: nowrap; cursor: pointer; padding: 0 1.6em; transition: background 140ms ease;} .hdr-dd:hover .hdr-dd-toggle, .hdr-dd:focus-within .hdr-dd-toggle, .hdr-dd.open .hdr-dd-toggle {background: var(--scene-color-press); color: var(--scene-on);} .hdr-dd-panel a.hdr-dd-all.active {background: var(--scene-color); color: var(--scene-on);} .hdr-dd-caret {width: 1.25em; height: 1.25em; transition: transform 160ms ease;} .hdr-dd:hover .hdr-dd-caret, .hdr-dd:focus-within .hdr-dd-caret, .hdr-dd.open .hdr-dd-caret {transform: rotate(180deg);} .hdr-dd-panel {width: 100%; position: absolute; top: 100%; left: 0; background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); padding: 0.8em; display: flex; flex-direction: column; gap: 0.1em; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(0.4em); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; z-index: 60;} .hdr-dd:hover .hdr-dd-panel, .hdr-dd:focus-within .hdr-dd-panel, .hdr-dd.open .hdr-dd-panel {opacity: 1; visibility: visible; transform: translateY(0);} .hdr-dd-panel a {font-size: 1.2em; font-weight: 600; color: var(--fg-1); white-space: nowrap; padding: 0.5em 0.75em; border-radius: var(--r-sm); transition: background 140ms ease, color 140ms ease;} .hdr-dd-panel a:hover {background: var(--surface-3);} .hdr-dd-panel a.active {background: var(--scene-color); color: var(--scene-on);} .hdr-dd-all {display: none;} .hdr-link {height: 100%; font-size: 1.2em; color: var(--fg-2); display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; white-space: nowrap; padding: 0 1.6em; transition: background 140ms ease;} .hdr-link:hover {background: var(--surface-3); color: var(--fg-1);} .hdr-link[aria-current="page"] {color: var(--fg-1); background: #34343d;} .hdr-drawer-links a[aria-current="page"] {color: var(--fg-1); background: var(--surface-3);} .hdr-link .ic {width: 1em; height: 1em;} @media (min-width: 1081px) { .hdr-menu {position: absolute; top: 0; left: 0; height: 100%; padding-inline: 19rem 10rem; z-index: 1; gap: 0.4em;} .hdr-logo, .hdr-socials {position: relative; z-index: 2;} .hdr-dd, .hdr-dd-toggle, .hdr-link {height: 2.15rem;} .hdr-dd-toggle, .hdr-link {border-radius: 0.4em;} } @media (min-width: 1081px) and (max-width: 1280px) { .hdr-dd-toggle, .hdr-link {padding: 0 1.3em;} } @media (min-width: 1501px) { .hdr-top {padding: 1.05em var(--gutter);} .hdr-menu {font-size: 0.8rem;} } @media (max-width: 1080px) { .header {display: contents;} .hdr-top {position: sticky; top: 0; z-index: 50; background: var(--surface-1); border-bottom: 1px solid var(--line); padding: 0.6em 1em; gap: 0.6em;} .hdr-logo img {height: 2.75em;} .hdr-mobile-actions {display: inline-flex; margin-left: 0;} .hdr-mobile-actions .hdr-icon-btn[aria-label="Hledat"] {display: none;} .hdr-menu {display: flex; gap: 0; background: var(--surface-3); border-bottom: 1px solid var(--line); overflow: visible; font-size: 0.7rem; position: sticky; top: var(--hdr-top-h, 3.4em); z-index: 40; transition: transform 560ms ease, box-shadow 560ms ease; will-change: transform;} .nav-pinned .hdr-menu {box-shadow: var(--shadow-md);} .nav-hide .hdr-menu {transform: translateY(calc(-100% - 1px));} .hdr-dd {font-size: min(1em, calc(0.2em + 2vw)); width: 50%;} .hdr-dd:first-child {border-right: solid 1px var(--bg);} .hdr-dd-toggle {padding: 0.65em; width: 100%;} .hdr-dd:hover .hdr-dd-panel, .hdr-dd:focus-within .hdr-dd-panel {opacity: 0; visibility: hidden; transform: translateY(0.4em);} .hdr-dd.open .hdr-dd-panel {opacity: 1; visibility: visible; transform: translateY(0);} .hdr-dd:hover .hdr-dd-caret, .hdr-dd:focus-within .hdr-dd-caret {transform: none;} .hdr-dd.open .hdr-dd-caret {transform: rotate(180deg);} .hdr-dd:hover .hdr-dd-toggle, .hdr-dd:focus-within .hdr-dd-toggle {background: var(--scene-color-press); color: var(--scene-on);} .hdr-dd.open .hdr-dd-toggle {background: var(--scene-color-press); color: var(--scene-on);} .hdr-link {display: none;} .hdr-dd-panel a.hdr-dd-all {display: block; font-weight: 700; border-bottom: 1px solid var(--line); margin-bottom: 0.2em; padding-bottom: 0.6em;} .hdr-socials a {display: none;} .hdr-drawer-socials {display: flex;} } @media (max-width: 640px) { .hdr-dd {font-size: min(1em, calc(0.4em + 2.4vw));} } .ticker {background: transparent; border-bottom: 1px solid var(--line); display: flex; align-items: stretch; position: relative; font-size: 0.78rem;} .ticker-label {background: var(--surface-3); font-size: 0.7em; color: var(--fg-1); padding: 0 1em; margin-block: 0.45em; font-weight: 700; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 0.35em; flex-shrink: 0; position: relative; z-index: 2;} .ticker-label::after {content: ""; position: absolute; right: -0.55em; top: 0; bottom: 0; width: 0.6em; background: var(--surface-3); clip-path: polygon(0 0, 100% 50%, 0 100%);} .ticker-label .ic {color: var(--brand-yellow); animation: ticker-dot-fade 1.2s ease-in-out infinite, ticker-dot-color 2.4s steps(1, end) infinite;} .ticker-track {display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-behavior: auto; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none;} .ticker-track::-webkit-scrollbar {display: none;} .ticker-track.is-dragging {cursor: grabbing; scroll-snap-type: none;} .ticker-track.is-dragging a {pointer-events: none;} .ticker-item {display: flex; align-items: center; gap: 0.8em; padding: 0.4em 1.4em; font-size: 0.9em; color: var(--fg-2); white-space: nowrap; border-right: 1px solid var(--line); position: relative; transition: background 160ms ease;} .ticker-item:last-child {border-right: 0;} .ticker-item::before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125em; background: var(--scene-accent, transparent); opacity: 0; transition: opacity 160ms ease-out;} .ticker-item:hover {background: rgba(255,255,255,0.04); color: var(--fg-2);} .ticker-item:hover::before {opacity: 1;} .ticker-evt {font-weight: 700; letter-spacing: 0.08em; color: var(--scene-accent, var(--brand-yellow)); font-size: 0.9em; text-transform: uppercase;} .ticker-bout b {color: var(--fg-1); font-weight: 700;} .ticker-how {font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--line); padding: 0.15em 0.45em; border-radius: 0.2em; color: var(--fg-1);} .ticker::after {content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 3em; pointer-events: none; background: linear-gradient(90deg, rgba(20,20,23,0) 0%, var(--surface-1) 100%);} .page-head {padding-top: 1.75rem; padding-bottom: 1.25rem;} .page-head-inner {border-left: 0.25em solid var(--scene-color); padding-left: 0.9em; display: flex; flex-direction: column; gap: 0.25em;} .page-head-kicker {font-size: 0.8em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scene-color);} .page-head-title {font-family: var(--font-display); font-size: 2.08em; font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0; color: var(--fg-1);} @media (max-width: 720px) { .page-head-title {font-size: 1.52em;} .page-head-kicker {font-size: 0.66em;} } .section-divider {display: flex; align-items: stretch; gap: 1em; padding: 2.25em 0 1.125em;} .section-bar {width: 0.25em; align-self: stretch; flex-shrink: 0;} .section-text {flex: 1;} .section-kicker {font-size: 0.6875em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;} .section-title {font-size: 1.625em; font-weight: 700; letter-spacing: -0.02em; margin: 0.125em 0 0;} .section-more {font-size: 0.75em; color: var(--fg-2); display: inline-flex; align-items: center; align-self: center; gap: 0.375em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;} .section-more:hover {color: var(--fg-1);} .section-bar {background: var(--brand-yellow);} .section-divider--foreign .section-bar {background: var(--brand-red);} .section-divider--mixed .section-bar {background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-red) 100%);} .section-kicker {color: var(--brand-yellow);} .section-divider--foreign .section-kicker {color: var(--brand-red);} .section-divider--mixed .section-kicker {color: var(--fg-1);} .author-page .section-divider .section-bar {background: linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-red) 100%);} .author-page .section-divider .section-kicker {color: var(--fg-1);} .author-page .section-divider .section-title {color: var(--fg-1);} .section-more--bottom {display: none;} @media (max-width: 1080px) { /* Na mobilu sedi tlacitko "Vice z ..." pod kartami jako sourozenec .cards-2, takze se pod nim scitala jeho spodni mezera s hornim odsazenim dalsiho predelu sekce. Na desktopu tlacitko sedi uvnitr hlavicky sekce a problem nenastava, proto se obe hodnoty snizuji jen tady. */ .section-divider {padding: 1.5em 0 0.5em;} .section-divider .section-more {display: none;} .section-more--bottom {display: inline-flex; align-items: center; gap: 0.375em; margin: 0.75em 0 0; padding: 0.4375em 0.625em; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.5938em; font-weight: 700; color: var(--fg-1); letter-spacing: 0.02em; align-self: flex-end; margin-left: auto; width: fit-content;} .section-more--bottom .ic {width: 0.625em; height: 0.625em;} .section-more--bottom:hover {background: var(--surface-1); border-color: var(--line-strong);} .section-more--domestic {color: var(--brand-yellow); border-color: rgba(237,189,33,0.35);} .section-more--foreign {color: var(--brand-red); border-color: rgba(229,31,55,0.35);} } @media (max-width: 540px) { .section-more--bottom {width: 100%; justify-content: center; padding: 0.625em 0.75em; font-size: 0.625em;} } .art-card {background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: all 200ms ease-out; color: var(--fg-1); cursor: pointer;} .art-card:hover {background: var(--surface-2); border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.7);} .art-media {position: relative; aspect-ratio: 16 / 9; overflow: hidden;} .art-media img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms ease-out;} .art-card:hover .art-media img {transform: scale(1.04);} .art-media::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7)); pointer-events: none;} .cat-badge {position: absolute; top: 0.75em; left: 0.75em; z-index: 2; font-size: 0.625em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3125em 0.5625em; border-radius: 0.1875em;} .art-body {padding: 0.75em 0.875em 0.875em; display: flex; flex-direction: column; gap: 0.375em;} .art-tag {font-size: 0.625em; font-weight: 700; letter-spacing: 0.08em; color: var(--scene-accent, var(--brand-red)); text-transform: uppercase;} .art-tag + .art-tag::before {content: "·"; margin: 0 0.5em; color: var(--fg-3);} .art-labels {display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap;} .art-labels .cat-badge {position: static; top: auto; left: auto;} .art-labels .art-tag {color: var(--fg-2); letter-spacing: 0.08em;} .art-labels .art-tag::before {display: none;} /* Nadpis se ori az na ctvrtem radku - na homepage se neukazuje perex a misto dostal nadpis, aby delsi titulek nekoncil trema teckami. Line-clamp zustava, bez nej by extremne dlouhy nadpis rozhodil grid. */ .art-title {font-size: 1.2em; font-weight: var(--w-bold); letter-spacing: -0.005em; line-height: 1.2; color: var(--fg-1); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;} .art-card:hover .art-title {color: var(--fg-1);} .art-perex {font-size: 0.75em; color: var(--fg-2); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} /* Na homepage server perex vubec neposila. Telo karty je flex sloupec s gap, takze prazdny odstavec by po sobe nechal mezeru - skryjeme ho uplne. */ .art-perex:empty, .art-hero-perex:empty {display: none;} .art-meta {margin-top: 0.25em; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.625em; color: var(--fg-3);} .cards-2 .art-body {padding: 1em 1.125em 1.125em; gap: 0.5em;} .cards-2 .art-title {font-size: 1.375em; font-weight: var(--w-bold); line-height: 1.18; -webkit-line-clamp: 4;} .cards-2 .art-perex {font-size: 0.875em; line-height: 1.55; -webkit-line-clamp: 3;} .cards-2 .art-tag {font-size: 0.6875em;} .cards-2 .art-meta {font-size: 0.75em;} .art-hero {position: relative; display: block; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9; color: white; isolation: isolate;} .art-hero img {width: 100%; height: 100%; object-fit: cover; display: block;} .art-hero::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.0) 20%, rgba(10,10,12,0.97) 100%); z-index: 1;} .art-hero-body {position: absolute; bottom: 0; left: 0; max-width: 40rem; padding: 2.25em 2.5em; z-index: 2; display: flex; flex-direction: column; gap: 0.875em;} .art-hero-meta {display: flex; align-items: center; gap: 0.625em; flex-wrap: wrap;} .art-hero-meta .cat-badge {position: static; top: auto; left: auto;} .article-head .art-hero-meta .cat-badge {font-size: 0.7em; padding: 0.35em 0.6em; letter-spacing: 0.14em;} .art-hero-meta .art-tag {color: var(--fg-2);} .art-hero .art-hero-meta .cat-badge {position: static; top: auto; left: auto; font-size: 0.625em; padding: 0.3em 0.6em; letter-spacing: 0.14em;} .art-hero-title {font-size: clamp(1.575em, 3.6vw, 3.15em); font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: 0.98; margin: 0; max-width: 47.5em;} .art-hero-perex {font-size: 1em; color: rgba(245,245,247,0.85); margin: 0; line-height: 1.4;} .art-hero-foot {display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; margin-top: 0.375em;} .art-hero-date {font-family: var(--font-mono); font-size: 0.75em; color: rgba(245,245,247,0.7);} /* Widget "Nejctenejsi dnes". Titulek byl 0.6825em, tj. pod 12 px - klient si stezoval, ze nadpisy skoro nejdou precist. Sousedni widget "Nadchazejici" ma 0.875em, tady jde tedy o srovnani do stejne velikosti. Datum se neukazuje nikde (na homepage bylo zakomentovane primo v sablone, na ostatnich strankach ho skryva CSS). */ .art-compact {display: grid; grid-template-columns: 1.75em 1fr 4.5em; gap: 0.5em; align-items: center; padding: 0.85em 0; border-bottom: 1px solid var(--line); color: var(--fg-1);} .art-compact:last-child {border-bottom: 0;} .art-rank {font-family: var(--font-display); font-size: 1.2em; font-weight: 700; color: var(--scene-accent, var(--brand-red)); font-feature-settings: "tnum";} .art-compact-title {font-size: 0.8em; font-weight: var(--w-bold); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;} .art-compact-meta {display: none;} .art-compact-media {aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.25em;} .art-compact-media img {width: 100%; height: 100%; object-fit: cover; display: block;} .art-compact:hover .art-compact-title {color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;} .cards-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em;padding-top:1.1rem;} .stories-carousel {position: relative;} .stories-carousel .swiper {overflow: hidden;} .stories-carousel .swiper-slide {height: auto;} .stories-carousel .swiper-slide .art-story {width: 100%;} .stories-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 2.75em; height: 2.75em; border-radius: 62.4375em; background: rgba(20,20,23,0.92); border: 1px solid var(--line-strong); color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background 150ms ease, transform 150ms ease, border-color 150ms ease; backdrop-filter: blur(6px);} .stories-nav:hover {background: var(--surface-3); border-color: var(--fg-3);} .stories-nav:active {transform: translateY(-50%) scale(0.95);} .stories-nav--prev {left: -1.375em;} .stories-nav--next {right: -1.375em;} .stories-nav--prev .ic {transform: rotate(180deg);} @media (max-width: 1080px) { .stories-nav--prev {left: 0.6em;} .stories-nav--next {right: 0.6em;} } .stories-nav.swiper-button-disabled {opacity: 0.35; cursor: default;} .related-events {margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line);} .related-head {margin-bottom: 1em;} .related-head .section-title {color: var(--fg-1);} .related-carousel {position: relative;} .related-carousel .swiper {overflow: hidden;} .related-carousel .swiper-slide {height: auto;} .related-carousel .swiper-slide .art-card {width: 100%; height: 100%;} .art-story {position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; display: block; color: var(--fg-1); background: var(--surface-1); border: 1px solid var(--line); isolation: isolate; transition: transform 200ms ease-out, box-shadow 200ms ease-out; container-type: inline-size; container-name: story;} .art-story img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 400ms ease-out;} .art-story::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.96) 100%); z-index: 1; pointer-events: none;} .art-story-body {position: absolute; left: clamp(0.75em, 6cqw, 1.375em); right: clamp(0.75em, 6cqw, 1.375em); bottom: clamp(0.75em, 6cqw, 1.375em); z-index: 2; display: flex; flex-direction: column; gap: clamp(0.375em, 2.5cqw, 0.625em);} .art-story-tags {display: flex; align-items: center; gap: clamp(0.375em, 2cqw, 0.5em); flex-wrap: wrap;} .art-story-tags .cat-badge {position: static; top: auto; left: auto; font-size: clamp(0.5em, 2.6cqw, 0.625em); padding: clamp(0.1875em, 1.1cqw, 0.25em) clamp(0.375em, 2.2cqw, 0.5em); letter-spacing: 0.1em;} .art-story-tag {font-size: clamp(0.5544em, 2.8829cqw, 0.693em) !important; color: var(--fg-2) !important; letter-spacing: 0.06em;} .art-story-tag::before {display: none;} .art-story-tags .cat-badge {font-size: clamp(0.5544em, 2.6611cqw, 0.6237em); padding: clamp(0.1875em, 1.1cqw, 0.25em) clamp(0.375em, 2.2cqw, 0.5em);} .art-story-title {font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(0.9702em, 6.6528cqw, 1.5939em); line-height: 1.12; letter-spacing: -0.015em; margin: 0; color: var(--fg-1); text-shadow: 0 2px 14px rgba(0,0,0,0.6);} .art-story-meta {font-size: clamp(0.693em, 3.3264cqw, 0.8316em); color: var(--fg-2); font-family: var(--font-mono); letter-spacing: 0.04em;} .art-story:hover img {transform: scale(1.04);} .art-story:hover {box-shadow: var(--shadow-md); transform: translateY(-2px);} .art-card, .art-hero, .art-story, .art-compact {transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;} .art-card .art-media img, .art-hero img, .art-story img, .art-compact .art-compact-media img {transition: transform 420ms cubic-bezier(.2,.7,.2,1);} .art-card:hover .art-media img, .art-hero:hover img, .art-story:hover img, .art-compact:hover .art-compact-media img {transform: scale(1.035);} .art-card:hover {transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.7);} .art-card .art-title, .art-hero .art-hero-title, .art-story .art-story-title, .art-compact .art-compact-title {transition: color 220ms ease;} .art-card:hover .art-title, .art-hero:hover .art-hero-title, .art-story:hover .art-story-title, .art-compact:hover .art-compact-title {color: var(--scene-accent, var(--brand-red)); background: transparent; box-shadow: none; text-decoration: none;} .art-media {aspect-ratio: 4 / 3 !important;} .art-hero {aspect-ratio: 4 / 3;} .featured-row__hero .art-hero {aspect-ratio: auto !important; width: 100%; height: 100%; min-height: 0; max-height: none;} .featured-row {display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 1.25em; align-items: stretch;} .featured-row__hero {min-width: 0; display: flex;} .featured-row__hero .art-hero {flex: 1; width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: 14 / 11 !important;} .featured-row__hero .art-hero-title {font-size: clamp(1.35em, 3vw, 2em);} .cat-badge {font-size: 0.5625em; padding: 0.25em 0.5em;} .featured-row__side {display: grid; grid-template-rows: 1fr 1fr; gap: 1.25em; min-width: 0; align-content: start;} .featured-row__side .art-card {display: block; position: relative; min-height: 0; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; isolation: isolate;} .featured-row__side .art-card .art-media {aspect-ratio: auto !important; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;} .featured-row__side .art-card .art-media img {width: 100%; height: 100%; object-fit: cover;} .featured-row__side .art-card::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.97) 100%); z-index: 1; pointer-events: none;} .featured-row__side .art-card .art-body {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.125em 1.375em 0.4em; display: flex; flex-direction: column; gap: 0.5em; background: none;} .featured-row__side .art-title {font-family: var(--font-display); font-size: 0.9em; font-weight: var(--w-bold); line-height: 1.1; letter-spacing: 0em; color: var(--fg-1); text-shadow: 0 2px 14px rgba(0,0,0,0.55); -webkit-line-clamp: 4;} .featured-row__side .art-meta {color: var(--fg-2); font-size: 0.65em;} .featured-row__side .cat-badge {font-size: 0.5em; padding: 0.25em 0.5em;} .featured-row__side .art-card:hover .art-media img {transform: scale(1.04);} .featured-row__side .art-card:hover {transform: translateY(-2px);} .featured-row__hero .art-hero-body {padding: 1em 2.75em;} .cat-badge--domestic {background: var(--brand-yellow); color: #141417;} .cat-badge--foreign {background: var(--brand-red); color: white;} @media (max-width: 720px) { .cards-2 {grid-template-columns: 1fr;} } @media (min-width: 1081px) { .art-story-body, .featured-row__side .art-card .art-body {font-size: 1.15em;} } @media (max-width: 1080px) { .featured-row {grid-template-columns: 1fr;} .featured-row__side {grid-template-rows: auto auto; grid-template-columns: 1fr 1fr;} .featured-row__side .art-card {display: flex; flex-direction: column; position: static; min-height: 0; aspect-ratio: auto; background: var(--bg); border: 0; overflow: visible;} .featured-row__side .art-card::after {display: none;} .featured-row__side .art-card .art-media {position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3 !important;} .featured-row__side .art-card .art-media::after {display: none;} .featured-row__side .art-card .art-media img {width: 100%; height: 100%; object-fit: cover; object-position: center 22%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.55) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.55) 88%, transparent 100%);} .featured-row__side .art-card .art-body {font-size: 1.15em; position: static; padding: 0.25em 1em 1em; margin-top: -2em; gap: 0.5em; background: none;} .featured-row__side .art-title {line-height: 1.15; text-shadow: none; -webkit-line-clamp: 4;} .featured-row__hero .art-hero {min-height: 22.5em; aspect-ratio: 16 / 9 !important;} .featured-row__hero .art-hero img {object-position: center 28%;} } @media (max-width: 760px) { .featured-row__hero .art-hero {background: var(--bg); aspect-ratio: auto !important; min-height: 0 !important; display: flex; flex-direction: column;} .featured-row__hero .art-hero img {width: 100%; height: 62vw; max-height: 28.75em; min-height: 20em; object-fit: cover; object-position: center 18%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.55) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0.55) 88%, transparent 100%);} .featured-row__hero .art-hero::after {display: none;} .featured-row__hero .art-hero-body {position: static; padding: 0.25em 1.125em 1.375em; gap: 0.625em; margin-top: -2.5em;} .featured-row__hero .art-hero-title {font-size: 1.5em !important; line-height: 1.1;} .featured-row__hero .art-hero-perex {font-size: 0.8438em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} .featured-row__hero .art-hero-foot {margin-top: 0.125em;} } @media (max-width: 640px) { .featured-row__hero .art-hero img {height: 70vw; min-height: 17.5em;} .featured-row__side {grid-template-columns: 1fr;} .featured-row__side .art-card .art-media {aspect-ratio: 16 / 10 !important;} .featured-row__side .art-card .art-media img {height: 62vw; max-height: 22.5em;} .featured-row__side .art-title {font-size: 1.375em;} .featured-row__side .art-card .art-body {font-size: 1em;} } @media (prefers-reduced-motion: no-preference) { .art-card, .art-hero {animation: rise 0.42s ease-out both;} .art-card:nth-child(2) {animation-delay: 60ms;} .art-card:nth-child(3) {animation-delay: 120ms;} .art-card:nth-child(4) {animation-delay: 180ms;} .art-card:nth-child(5) {animation-delay: 240ms;} } .widget {background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.125em 1.125em 0.875em;} .widget + .widget {margin-top: 1.25em;} .widget-header {display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.75em; margin-bottom: 0.5em; border-bottom: 1px solid var(--line);} .widget-title {font-size: 0.75em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-1); position: relative;} .widget-more {font-size: 0.6875em; color: var(--fg-3); display: inline-flex; align-items: center; gap: 0.3125em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;} .widget-more:hover {color: var(--fg-1);} .upcoming ul {list-style: none; padding: 0; margin: 0;} .fight-row {padding: 0.75em 0; border-bottom: 1px solid var(--line);} .fight-row:last-child {border-bottom: 0; padding-bottom: 0;} .fight-meta {display: flex; justify-content: space-between; margin-bottom: 0.375em;} .fight-event {font-size: 0.625em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-yellow);} .fight-date {font-family: var(--font-mono); font-size: 0.6875em; color: var(--fg-3);} .fight-bout {display: flex; align-items: center; gap: 0.625em; font-size: 0.875em; font-weight: 700;} .fighter {color: var(--fg-1);} .vs {font-size: 0.9em; color: var(--fg-3); font-weight: 600; letter-spacing: 0.08em;} .fight-class {font-size: 0.6875em; color: var(--fg-3); margin-top: 0.25em;} .mostread ol {list-style: none; padding: 0; margin: 0;} .fight-row .fight-event {color: var(--scene-color);} .card-list {display: flex; flex-direction: column; gap: 1.5rem;} .event-card {display: flex; align-items: center; gap: 1em; padding: 0.95em 1.15em; background: var(--surface-2); border: 1px solid var(--line); border-left: 0.25em solid var(--scene-color); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background 160ms ease;} .event-card-text {display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 1em; min-width: 0;} .event-card:hover {background: var(--surface-3);} .event-card-go {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fg-3); transition: color 160ms ease, transform 160ms ease;} .event-card-go svg {width: 1.15em; height: 1.15em;} .event-card:hover .event-card-go {color: var(--scene-color); transform: translateX(0.2em);} .event-card .event-head-main {flex: 1 1 auto;} .event-card .event-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;} @media (max-width: 540px) { .event-card-text {flex-direction: column; align-items: flex-start; gap: 0.3em;} .event-card .event-meta {align-items: flex-start;} } .event {background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;} .event--detail {overflow: visible;} .event-org {display: block; font-size: 0.7em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scene-color);} .event-name {font-family: var(--font-display); font-size: 1.5em; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; margin: 0.1em 0 0; color: var(--fg-1);} .event-meta {display: flex; flex-direction: column; gap: 0.2em; align-items: flex-end; font-size: 0.8em; color: var(--fg-2);} .event-date, .event-place {display: inline-flex; align-items: center; gap: 0.4em;} .event-date {font-weight: 700; color: var(--fg-1);} .event-meta .ic {width: 1em; height: 1em; color: var(--fg-3); flex-shrink: 0;} .bout-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;} .event-intro {margin-bottom: 1.5rem; font-size: 1em; line-height: 1.65; color: var(--fg-2);} .event-intro-kicker {display: block; font-size: 0.8em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scene-color); margin-bottom: 0.5em;} .event-intro h2 {font-family: var(--font-display); font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--fg-1); margin: 0 0 0.35em;} .event-intro-sub {font-size: 1.1em; font-weight: 600; color: var(--fg-1); margin: 0 0 1em;} .event-intro h3 {font-size: 1.05em; font-weight: 700; letter-spacing: 0.01em; color: var(--fg-1); margin: 1.4em 0 0.6em;} .event-intro p {margin: 0 0 1em;} .event-intro a {color: var(--scene-color); text-decoration: underline; text-underline-offset: 0.15em; font-weight: 600;} .event-intro a:hover {color: var(--fg-1); text-decoration: none;} .event-intro ul {margin: 0 0 1em; padding-left: 0; list-style: none; display: flex; flex-direction: column;} .event-intro ul li {padding: 0.45em 0 0.45em 1.4em; border-bottom: 1px solid var(--line); position: relative; color: var(--fg-1);} .event-intro ul li::before {content: "\25B6"; position: absolute; left: 0; top: 0.45em; height: 1.65em; display: inline-flex; align-items: center; color: var(--scene-color); transform: scale(0.7);} .bout {display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 0.75em; padding: 0.85em 1.15em;} .bout + .bout {border-top: 1px solid var(--line);} .bout-side {display: flex; align-items: center; gap: 0.7em; min-width: 0;} .bout-side--b {flex-direction: row-reverse; text-align: right;} .bf-flag {position: relative; width: 2.8em; height: 1.87em; flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;} .bf-flag-clip {display: block; width: 100%; height: 100%; border-radius: 0.2em; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;} .bf-flag img {width: 100%; height: 100%; object-fit: cover; display: block;} .bf-flag:hover .bf-flag-clip {transform: translateY(-0.1em); box-shadow: var(--shadow-md);} .bf-flag:focus-visible {outline: none;} .bf-flag:focus-visible .bf-flag-clip {box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--scene-color);} .bf-tip {position: absolute; left: 50%; bottom: calc(100% + 0.55em); transform: translateX(-50%) translateY(0.25em); z-index: 6; padding: 0.4em 0.7em; border-radius: 0.35em; background: var(--fg-1); color: var(--surface-1); font-family: var(--font-display); font-size: 0.8em; font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;} .bf-tip::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 0.4em solid transparent; border-top-color: var(--fg-1);} .bf-flag:hover .bf-tip, .bf-flag:focus-visible .bf-tip, .bf-flag.is-open .bf-tip {opacity: 1; transform: translateX(-50%) translateY(0);} .bf-info {display: flex; flex-direction: column; min-width: 0; gap: 0.12em;} .bout-side--b .bf-info {align-items: flex-end;} .bf-name {font-family: var(--font-display); font-size: 1.05em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;} .bf-name-row {display: flex; align-items: center; min-width: 0; max-width: 100%;} .bout-side--b .bf-name-row {flex-direction: row-reverse;} .bf-sub {font-size: 0.72em; color: var(--fg-3); display: flex; align-items: center; gap: 0.45em; white-space: nowrap;} .bf-rec {font-family: var(--font-mono); color: var(--fg-2); font-weight: 600;} /* Vek i bilance jsou u bojovnika nepovinne - kdyz chybi, server dosadi prazdny retezec a v sablone zustane prazdny . .bf-sub je flex s gap (na mobilu dokonce sloupec), takze prazdna polozka sice nema vysku, ale drzi mezeru a rozhazuje zarovnani obou stran karty. Skryty prvek uz flex polozka neni. */ .bf-sub > span:empty {display: none;} .bf-sub:empty {display: none;} .bout-center {display: flex; flex-direction: column; align-items: center; gap: 0.28em; flex-shrink: 0; min-width: 4.5em;} .bout-type {font-size: 0.6em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.25em 0.7em;} .bout-vs {font-family: var(--font-display); font-size: 0.9em; font-weight: 700; font-style: italic; color: var(--fg-3); letter-spacing: 0.04em;} .bout-method {font-family: var(--font-mono); font-size: 0.82em; font-weight: 700; color: var(--scene-color); letter-spacing: 0.04em; text-transform: uppercase;} .bout-result-line {display: flex; align-items: center; gap: 0.4em;} .bout-round-tag {font-family: var(--font-mono); font-size: 0.82em; font-weight: 700; color: var(--scene-color); letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;} .bout-round-tag::before {content: "·"; color: var(--scene-color);} .bout-weight {font-size: 0.6em; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;} .bout-round {font-size: 0.6em; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em;} .bout--result .bout-side.is-loss {opacity: 0.42;} .bout-arrow {width: 0; height: 0; border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent; flex-shrink: 0; visibility: hidden;} .bout-arrow.is-on {visibility: visible;} .bout-arrow--left {border-right: 0.6em solid var(--scene-color);} .bout-arrow--right {border-left: 0.6em solid var(--scene-color);} .bout-center--result {flex-direction: row; gap: 0.5em; min-width: 7em; justify-content: center;} .bout-center-info {display: flex; flex-direction: column; align-items: center; gap: 0.28em;} .page-head--cards .page-head-inner {border-left: 0.25em solid transparent; border-image: linear-gradient(180deg, var(--brand-yellow), var(--brand-red)) 1;} .page-head--cards .page-head-kicker {color: var(--fg-2);} .event-detail .page-head--cards .page-head-inner {border-image: none; border-left: 0.25em solid var(--scene-color);} .event-detail .page-head--cards .page-head-kicker {color: var(--scene-color);} .page-head-back {display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start; margin-bottom: 0.5em; font-size: 0.82em; font-weight: 700; color: var(--fg-2); text-decoration: none; transition: color 160ms ease, gap 160ms ease;} .page-head-back:hover {color: var(--fg-1); gap: 0.6em;} .page-head-back svg {width: 1.1em; height: 1.1em;} .event-detail-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1.4em; margin-top: 0.5em; font-size: 0.9em; color: var(--fg-2);} .event-head-main {display: flex; flex-direction: column; gap: 0.05em; margin-right: auto; min-width: 0;} .pager {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4em; margin-top: 1.5rem;} .pager:empty {display: none;} .pager-btn {min-width: 2.4em; height: 2.4em; padding: 0 0.55em; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg-2); font-family: var(--font-display); font-weight: 700; font-size: 0.9em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;} .pager-btn:hover {background: var(--surface-3); color: var(--fg-1); border-color: var(--line-strong);} .pager-btn.is-active {background: #fff; border-color: #fff; color: var(--bg);} .pager-btn:disabled {opacity: 0.4; cursor: default;} /* Vypustka mezi cisly stran - stejna vyska jako tlacitka, ale bez ramecku. */ .pager-dots {min-width: 1.4em; height: 2.4em; color: var(--fg-3); font-family: var(--font-display); font-weight: 700; font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center;} @media (max-width: 600px) { .event-meta {align-items: flex-start;} .bout {gap: 0.5em; padding: 0.8em 0.5em; align-items: start; font-size: 0.95rem;} .bout-side {flex-direction: column; align-items: center; text-align: center; gap: 0.4em;} .bout-side--b {flex-direction: column; text-align: center;} .bf-info {align-items: center; width: 100%; gap: 0.22em;} .bout-side--b .bf-info {align-items: center;} .bf-name-row {justify-content: center; max-width: 100%;} .bout-side--b .bf-name-row {flex-direction: row;} .bf-name {min-width: 0;} .bf-sub {flex-direction: column; gap: 0.12em; line-height: 1.25; font-size: 0.66em; white-space: nowrap;} .bf-flag {width: 2.6em; height: 1.74em;} .bout-center {min-width: 0; gap: 0.22em;} .bout-center--result {min-width: 0;} } @media (max-width: 440px) { .bout {font-size: 0.82rem; gap: 0.35em; padding: 0.7em 0.3em;} .bf-flag {width: 2.9em; height: 1.94em;} } .ad-slot {position: relative; display: block; width: 100%; border-radius: 0.25em; overflow: hidden;} .ad-slot img {display: block; width: 100%; height: 100%; object-fit: cover;} .inline-ad-wrap {display: flex; justify-content: center; margin: 2.25em 0;} .mobile-anchor-ad {display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(10,10,12,0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 0.375em 0;} .mobile-anchor-ad .ad-slot {margin: 0 auto;} .ad-970x250 {max-width: 60.625em; aspect-ratio: 970 / 250;} .ad-300x250 {max-width: 18.75em; aspect-ratio: 300 / 250;} .ad-300x600 {max-width: 18.75em; aspect-ratio: 300 / 600;} .ad-320x50 {max-width: 20em; aspect-ratio: 320 / 50;} .billboard-top {padding-block: 1.25em;} .billboard-top .inline-ad-wrap {margin: 0;} .main-grid > aside > .ad-slot {margin-block: 1.25em;} .article-side > .ad-slot {margin-bottom: 1.25em;} .main-grid > aside > :first-child {margin-top: 2.25em;} .cards-page .main-grid > aside > :first-child {margin-top: 0;} .inline-ad-wrap--in-article {margin: 1.75em 0;} .interscroller {display: none;} @media (min-width: 1640px) { :root {--skin-top: 7.3em; --skin-url: url('images/banners/skin.webp'); --container: 1200px;} form {position: relative;} form::before {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--container); background: var(--bg); z-index: 1; pointer-events: none;} main, .footer {position: relative; z-index: 2;} .header {position: relative; z-index: 3;} .footer {max-width: var(--container); margin-inline: auto;} } @media (max-width: 760px) { .interscroller {display: block; position: relative; height: 100svh; margin: 2.25em 0; clip-path: inset(0); overflow: hidden;} .interscroller-frame {position: fixed; inset: 0; z-index: 1; overflow: hidden;} .interscroller-frame img {width: 100%; height: 100%; object-fit: cover; display: block;} } @media (max-width: 760px) { .mobile-anchor-ad {display: flex; justify-content: center;} } .article-page {padding: 1.75em 0 0;} .article-grid {display: grid; grid-template-columns: 1fr 300px; gap: 3em; align-items: start;} .article-main {max-width: 47.5em; min-width: 0;} .article-title {font-size: clamp(1.8em, 3.6vw, 2.93em); font-weight: var(--w-bold); letter-spacing: -0.025em; line-height: 1; margin: 0.4375em 0 0.4375em;} .article-perex {font-size: 1.01em; color: var(--fg-2); line-height: 1.45; margin: 0 0 1.75em; max-width: 40em;} .article-byline {display: flex; align-items: center; gap: 1.5em; padding: 0em 0;} .byline-author {display: flex; align-items: center; gap: 0.625em;} .byline-avatar {width: 2.25em; height: 2.25em; border-radius: 50%; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));} .byline-name {font-size: 0.8125em; font-weight: 700; color: var(--fg-1); white-space: nowrap;} a.byline-name {text-decoration: none; transition: color 0.2s ease-in-out;} a.byline-name:hover {color: var(--brand-orange);} .byline-role {font-size: 0.6875em; color: var(--fg-3);} .byline-meta {display: flex; gap: 1em; font-size: 0.75em; color: var(--fg-3); font-family: var(--font-mono); margin-left: auto;} .byline-meta span {display: inline-flex; align-items: center; gap: 0.25em;} .byline-actions {display: flex; gap: 0.375em;} .byline-actions button {width: 2em; height: 2em; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2); border-radius: 0.375em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;} .byline-actions button:hover {color: var(--fg-1); border-color: var(--line-strong);} .author-hero {display: flex; align-items: center; gap: 1.6rem; padding: 0.2em 0 0.4em;} .author-hero-avatar {flex: none; width: 5.5em; height: 5.5em; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange));} /* Fotka autora vyplni kolecko; bez fotky zustane videt gradient pod nim. */ .author-hero-avatar picture {display: block; width: 100%; height: 100%;} .author-hero-avatar img {display: block; width: 100%; height: 100%; object-fit: cover;} .author-hero-info {display: flex; flex-direction: column; gap: 0.3em; min-width: 0;} .author-hero-kicker {font-size: 0.8em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);} .author-hero-name {font-family: var(--font-display); font-size: 2.08em; font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0; color: var(--fg-1);} .author-hero-bio {font-size: 0.95em; color: var(--fg-2); line-height: 1.5; margin: 0.2em 0 0; max-width: 46em;} .author-hero-stats {display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; margin-top: 0.4em; font-size: 0.8em; color: var(--fg-3); font-family: var(--font-mono);} .author-hero-stats b {color: var(--fg-1); font-weight: 700;} .author-hero-socials {display: flex; gap: 0.5em; margin-top: 0.6em;} .author-hero-socials a {width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; transition: 0.2s ease-in-out;} .author-hero-socials a:hover {color: var(--fg-1); border-color: var(--line-strong); background: var(--surface-3);} .cards-3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25em;} @media (max-width: 1080px) { .cards-3 {grid-template-columns: 1fr 1fr;} } @media (max-width: 720px) { .author-hero {flex-direction: column; align-items: flex-start; gap: 1rem;} .author-hero-name {font-size: 1.52em;} .author-hero-avatar {width: 4.2em; height: 4.2em;} .cards-3 {grid-template-columns: 1fr;} } .article-hero {margin: 1.75em 0; border-radius: var(--r-md); overflow: hidden;} .article-hero img {width: 100%; height: auto; display: block;} .article-hero figcaption, .event-hero figcaption {display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: 0.6875em; color: var(--fg-3); letter-spacing: 0.06em; margin-top: 0.5em; padding: 0 0.25em; font-style: italic;} .article-hero figcaption .fig-source, .event-hero figcaption .fig-source {flex: none; text-align: right;} .event-hero {margin: 0 0 1.5rem;} .event-hero .event-hero-frame {display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);} .event-hero .event-hero-frame img {width: 100%; height: 100%; object-fit: cover; display: block;} .article-gallery {margin: 2em 0;} .article-gallery-carousel {position: relative;} .article-gallery-swiper {overflow: hidden;} .article-gallery-swiper .swiper-slide {aspect-ratio: 16 / 9; background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);} .article-gallery-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-in-out;} .article-gallery-swiper .swiper-slide:hover img {transform: scale(1.04);} .article-gallery .gallery-nav--prev {left: -1.375em;} .article-gallery .gallery-nav--next {right: -1.375em;} .article-gallery .gallery-nav--prev .ic {transform: rotate(180deg);} @media (max-width: 1080px) { .article-gallery .gallery-nav--prev {left: 0.6em;} .article-gallery .gallery-nav--next {right: 0.6em;} } .article-gallery .article-gallery-pagination {position: static; width: 100%; margin-top: 0.9em; text-align: center; line-height: 1;} .article-gallery .swiper-pagination-bullet {width: 0.55em; height: 0.55em; background: var(--fg-3); opacity: 0.5; margin: 0 0.22em;} .article-gallery .swiper-pagination-bullet-active {background: var(--scene-color, var(--brand-red)); opacity: 1;} .article-gallery figcaption {font-size: 0.6875em; color: var(--fg-3); letter-spacing: 0.06em; margin-top: 0.6em; padding: 0 0.25em; font-style: italic;} .event-gallery {margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line);} .event-gallery .related-head {margin-bottom: 0.5em;} .event-gallery .article-gallery {margin: 0;} .event-gallery-kat {font-size: 1.05em; font-weight: 700; letter-spacing: 0.01em; color: var(--fg-1); margin: 1.4em 0 0.6em;} .event-gallery-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 0 0 1em;} .event-gallery-item {display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;} .event-gallery-item img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-in-out;} .event-gallery-item:hover img {transform: scale(1.05);} .scene-brand {--scene-color: var(--brand-orange);} body.kontakt {--scene-color: var(--brand-orange);} body.kontakt .page-head {padding-bottom: 1.6rem;} .contact-grid {display: grid; grid-template-columns: 1.7fr 1fr; gap: 2.5rem; align-items: start;} .contact-lead {font-size: 1.2em; font-weight: 600; line-height: 1.6; color: var(--fg-1); margin: 0 0 1.6em;} .contact-main h2 {font-family: var(--font-display); font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-1); margin: 1.7em 0 0.5em;} .contact-main p {font-size: 1em; line-height: 1.7; color: var(--fg-2); margin: 0 0 1em;} .contact-main a {color: var(--scene-color, var(--brand-orange)); font-weight: 600; text-underline-offset: 0.15em;} .contact-main a:hover {text-decoration: underline;} .contact-card {background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5em; position: sticky; top: 1.5rem;} .contact-card-title {display: block; font-family: var(--font-display); font-size: 1.4em; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-1); margin-bottom: 0.7em;} .contact-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1em;} .contact-list li {display: flex; gap: 0.85em; align-items: flex-start;} .contact-list .ic {color: var(--scene-color, var(--brand-red)); flex-shrink: 0; margin-top: 0.1em;} .contact-item {display: flex; flex-direction: column; gap: 0.15em; min-width: 0;} .contact-item-label {font-size: 0.68em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);} .contact-item-value {font-size: 1em; font-weight: 600; color: var(--fg-1); word-break: break-word;} .contact-item-value a {color: var(--fg-1);} .contact-item-value a:hover {color: var(--scene-color, var(--brand-orange));} .contact-socials {display: flex; flex-wrap: wrap; gap: 0.6em; border-top: 1px solid var(--line); margin-top: 1.3em; padding-top: 1.3em;} .contact-socials a {display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 0.9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.4em; font-size: 0.85em; font-weight: 600; color: var(--fg-1); transition: 0.2s ease-in-out;} .contact-socials a:hover {border-color: var(--scene-color, var(--brand-orange)); color: var(--scene-color, var(--brand-orange));} .form {margin: 0.2em 0 0.5em;} .form-items {display: flex; flex-wrap: wrap; gap: 1.1rem;} .form-item {flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 0.45em;} .form-item.w50-100 {flex-basis: calc(50% - 0.55rem);} .form-item label {font-size: 0.7em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);} .form-item-element input, .form-item-element textarea {width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.4em; padding: 0.7em 0.85em; color: var(--fg-1); font-family: var(--font-body); font-size: 0.95em; transition: border-color 0.18s ease-in-out, background 0.18s ease-in-out;} .form-item-element textarea {display: block; resize: vertical; min-height: 7em; line-height: 1.5;} .form-item-element input::placeholder, .form-item-element textarea::placeholder {color: var(--fg-3);} .form-item-element input:focus, .form-item-element textarea:focus {outline: none; border-color: var(--scene-color, var(--brand-orange));} .form-item.is-error .form-item-element input, .form-item.is-error .form-item-element textarea {border-color: var(--brand-red); background: rgba(229,31,55,0.07);} .form-item-msg {display: none; font-size: 0.78em; font-weight: 600; color: var(--brand-red); margin-top: 0.1em;} .form-item.is-error .form-item-msg {display: block;} .form-bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em 1.5em; margin-top: 1.3rem;} .consent {flex: 1 1 18em; font-size: 0.82em; line-height: 1.5; color: var(--fg-3);} .consent a {color: var(--fg-3); font-weight: inherit; text-decoration: underline; text-underline-offset: 0.15em;} .consent a:hover {color: var(--scene-color, var(--brand-orange)); text-decoration: none;} .button {display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.8em 1.6em; font-family: var(--font-body); font-weight: 700; font-size: 0.95em; line-height: 1; border: 1px solid transparent; border-radius: 0.4em; cursor: pointer; white-space: nowrap; text-decoration: none; transition: filter 0.18s ease-in-out;} .button.color1 {background: var(--scene-color, var(--brand-orange)); color: #141417;} .button:hover {filter: brightness(1.08);} .form-bottom .button {font-size: 0.8em;} .form-sent {font-size: 0.9em; font-weight: 700; color: var(--scene-color, var(--brand-orange));} @media (max-width: 860px) { .contact-grid {grid-template-columns: 1fr; gap: 1.75rem;} .contact-card {position: static;} } @media (max-width: 720px) { .form-item.w50-100 {flex-basis: 100%;} } @media (max-width: 440px) { .form-bottom .button {flex: 1 1 100%; width: 100%;} } /* Vlozena karta clanku si nese vlastni scenu - tridu scene-domestic / scene-foreign dosazuje server podle SCENY VLOZENEHO clanku (_Stranky._NahraditPlaceholderyClanku). Definice .scene-* funguji jako scope CSS promennych, takze --scene-color na obalu prebije hodnotu zdedenou z hostitelskeho clanku. Zadne dalsi pravidlo neni potreba. */ .article-embed {display: grid; grid-template-columns: 1fr; gap: 0; margin: 2em 0 1.5em; background: var(--surface-1); border: 1px solid var(--line); border-left: 0.25em solid var(--scene-color, var(--brand-red)); border-radius: var(--r-md); overflow: hidden;} /* Clanek bez kategorie by nechal prazdny kicker a v nem mezeru z flex gap. */ .article-embed-kicker:empty {display: none;} .article-embed-media {display: block; overflow: hidden;} .article-embed-media img {width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 9; transition: transform 400ms ease;} .article-embed:hover .article-embed-media img {transform: scale(1.04);} .article-embed-body {padding: 1.2em 1.4em; display: flex; flex-direction: column; gap: 0.5em; min-width: 0;} .article-embed-kicker {font-size: 0.7em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scene-color, var(--brand-red));} .article-embed-title {font-family: var(--font-display); font-size: 1.25em; font-weight: var(--w-bold); line-height: 1.15; margin: 0;} .article-body .article-embed-title a {color: var(--fg-1); text-decoration: none; font-weight: inherit;} .article-body .article-embed-title a:hover {color: var(--scene-color, var(--brand-red)); text-decoration: none;} .article-embed-perex {font-size: 0.9em; color: var(--fg-2); margin: 0; line-height: 1.5;} .article-embed-link {font-size: 0.8em; font-weight: 700; color: var(--scene-color, var(--brand-red)); display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.15em;} .article-embed-link .ic {width: 1em; height: 1em;} @media (min-width: 720px) { .article-embed {grid-template-columns: 17em 1fr; align-items: stretch;} .article-embed-media img {aspect-ratio: auto; min-height: 100%;} } .article-body {font-size: 1em; line-height: 1.7; color: var(--fg-2); overflow-wrap: break-word;} /* Vlozene embedy (Twitter/X, Instagram, ...) nesmi pretect sloupec clanku. Obsah uvnitr iframu je z cizi domeny a ovlivnit ho nelze - ridime jen velikost obalky. !important je nutny, protoze si Twitter widget nastavuje sirku inline. YouTube a Vimeo maji vlastni responzivni obalku (_Nastaveni._VideoEmbedSablona). */ .article-body > * {max-width: 100%;} .article-body iframe {max-width: 100%; border: 0;} .article-body .twitter-tweet, .article-body .twitter-tweet-rendered, .article-body blockquote.twitter-tweet, .article-body .instagram-media {max-width: min(100%, 34em) !important; margin: 1.75em auto !important;} .article-body p {margin: 0 0 1.125em;} /* Marker vlozene karty ({clanek:...}) pise redaktor do odstavce, jenze