/* Verzia A – vzhľad a rozmery 1:1 podľa súčasného webu (namerané 2026-09-28), pridané efekty.
   Veľkosti písma, šírky a odsadenia zodpovedajú pôvodnému project.css pri šírkach 1440 / 1200 / 1024 / 768 / 390 px. */

@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu-bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #1a1b20;
  --panel: #52555f;
  --green: #55bb5c;          /* nadpisy, odkazy */
  --green-dark: #02944a;     /* tlačidlá, nadpisy služieb, Prečo my */
  --green-hover: #25c86a;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: #fff; font: 300 16px/1.6 "Ubuntu", sans-serif; } /* bez -webkit-font-smoothing – pôvodný web ho nemá, písmo by bolo tenšie */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; transition: color .25s; }
a:hover { color: #fff; }
h1, h2, h3 { margin: 20px 0 10px; }
p { margin: 0 0 10px; }
strong { font-weight: 700; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--green-dark); color: #fff; padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; color: #fff; }

/* Kontajner ako Bootstrap 3: 1140 / 940 / 720 px obsahu */
.wrap { width: 100%; padding-inline: 15px; margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: 750px; } }
@media (min-width: 992px) { .wrap { width: 970px; } }
@media (min-width: 1200px) { .wrap { width: 1170px; } }
.center { text-align: center; }

/* Nadpisy sekcií + pôvodná dekoratívna čiara */
.section-title { font: 900 39px/1 "Ubuntu", sans-serif; text-align: center; }
.deco { display: block; width: 94px; height: 8px; margin: 15px auto 30px; }
@media (max-width: 991px) { .section-title { font-size: 40px; } }
@media (max-width: 425px) { .section-title { font-weight: 400; } }

/* Tlačidlá */
.btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; isolation: isolate;
  height: 44px; padding: 0 51px; border: 1px solid var(--green-dark); border-radius: 50px; cursor: pointer;
  background: var(--green-dark); color: #fff; font: 500 18px/1 "Ubuntu", sans-serif; text-decoration: none;
  transition: background-color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn::before { /* lesk pri prejdení myšou */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover { background: transparent; border-color: var(--green-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(37,200,106,.7); }
.btn:hover::before { transform: translateX(120%); }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn--large { height: 54px; padding: 0 38px; margin-top: 20px; text-transform: uppercase; }

/* Hlavička a menu */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s, box-shadow .35s; }
.site-header.is-scrolled { background: rgba(26, 27, 32, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px 0 30px; min-height: 70px; }
.logo img { width: 100px; }
.menu { display: flex; list-style: none; margin: 0; padding: 10px 0; }
.menu a {
  display: block; position: relative; margin: 12px 10px; padding: 17px 5px;
  color: #fff; opacity: .8; font: 500 14px/1 "Ubuntu", sans-serif; text-transform: uppercase;
  transition: opacity .25s;
}
.menu a::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 8px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.menu a:hover, .menu a[aria-current] { opacity: 1; color: #fff; }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.nav-toggle { display: none; }

@media (max-width: 991px) {
  .nav-bar { padding: 0 15px; min-height: 62px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 40px; border: 0; background: transparent; color: #fff; cursor: pointer; z-index: 2; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; position: relative; transition: transform .3s var(--ease); }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
  .menu-open .nav-toggle span { background: transparent; }
  .menu-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
  .site-header { background: var(--bg); }
  #menu { position: fixed; inset: 0; background: rgba(26,27,32,.97); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .menu-open #menu { opacity: 1; visibility: visible; }
  .menu { flex-direction: column; text-align: center; }
  .menu a { margin: 4px 10px; padding: 12px 5px; font-size: 18px; }
  .menu-open { overflow: hidden; }
}

/* Úvod (hero) – fotka 720 px dole vľavo, text vpravo ako na pôvodnom webe */
.hero { position: relative; overflow: hidden; background: #111 url("/assets/img/pozadie-1920.webp") center / cover no-repeat; }
.poly { background: #111 url("/assets/img/pozadie-1920.webp") center / cover no-repeat; }
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .hero, .poly { background-image: image-set(url("/assets/img/pozadie-1920.avif") type("image/avif"), url("/assets/img/pozadie-1920.webp") type("image/webp")); }
}
@media (max-width: 800px) { .hero, .poly { background-image: url("/assets/img/pozadie-960.webp"); } }
.hero .wrap { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; }
.hero-photo { position: absolute; bottom: 0; left: 15px; width: 720px; animation: rise 1.1s var(--ease) .1s both; }
.hero-photo img { width: 100%; }
.hero-copy { position: relative; margin-left: calc(50% + 85px); width: 485px; padding-top: 40px; }
.hero-title { display: block; margin: 0; font: 900 78px/1 "Ubuntu", sans-serif; animation: title-in 1s var(--ease) .2s both; }
.hero-title .eq { color: var(--green); display: inline-block; animation: eq-pop .6s var(--ease) 1s both; }
.hero-sub { margin: 18px 10px 0 0; font: 300 20px/1.5 "Ubuntu", sans-serif; animation: fade .9s var(--ease) .45s both; }
.hero .btn--large { animation: fade .9s var(--ease) .6s both; }
.hero::after { /* jemná zelená žiara za postavou */
  content: ""; position: absolute; z-index: 0; left: 8%; bottom: -25%; width: 700px; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(85,187,92,.18), transparent 70%);
}
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }
@keyframes title-in { from { opacity: 0; transform: translateY(30px); } }
@keyframes eq-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }

@media (min-width: 1367px) { .hero { height: 800px; } }
@media (min-width: 992px) and (max-width: 1366px) { .hero { height: 670px; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-photo { width: 500px; }
  .hero-copy { margin-left: calc(50% + 20px); width: 450px; }
}
@media (max-width: 991px) {
  .hero { min-height: 100svh; padding-bottom: 40px; }
  .hero .wrap { display: block; text-align: center; }
  .hero-photo { position: static; width: 70%; margin: 100px auto 0; }
  .hero-copy { margin: 0 auto; width: auto; padding-top: 0; }
  .hero-sub { margin-right: 0; }
}
@media (max-width: 425px) { .hero-title { font-size: 50px; } }

/* Parallax pozadia pri scrollovaní – len CSS, kde to prehliadač vie */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { animation: bg-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes bg-drift { to { background-position: center 35%; } }
  }
}
/* Postupné objavovanie pri scrollovaní – len CSS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .reveal-zoom { animation: reveal-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
    @keyframes reveal-zoom { from { opacity: .3; transform: scale(.93) translateY(40px); } }
  }
}

/* Kvalitný servis (pôvodne .frequent-questions) */
.intro { padding: 25px 0; background: #1d2029; }
.intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.intro h1 { font: 700 37px/1 "Ubuntu", sans-serif; color: var(--green); }
.intro .text { width: 65.4%; }
.intro h2 { font: 900 29px/32px "Ubuntu", sans-serif; }
.intro .accent { color: var(--green); font-weight: 700; margin-top: 26px; }
@media (max-width: 991px) { .intro-grid { grid-template-columns: 1fr; gap: 0; } .intro .text { width: auto; } }
@media (max-width: 425px) { .intro h1 { font: 400 33px/1 "Ubuntu", sans-serif; } .intro h2 { font: 400 25px/32px "Ubuntu", sans-serif; } }

/* Blog (pôvodne .news) */
.news { padding: 40px 0; background: #252934; text-align: center; }
.news-head { display: flex; justify-content: center; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.news-head h2 { margin: 0; font: 700 30px/1 "Ubuntu", sans-serif; text-decoration: underline; }
.news-head h2 span { color: var(--green); }
.news-head .all { font-size: 16px; font-weight: 500; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 128px; text-align: left; } /* text stĺpca 295 px ako pôvodne */
.post { position: relative; padding: 20px 22px; margin: -20px -22px; border-radius: 8px; transition: background-color .35s, transform .35s var(--ease); }
.post:hover { background: rgba(255,255,255,.05); transform: translateY(-4px); }
.post time { display: block; font-size: 14px; line-height: 25.6px; color: #999; }
.post h3 { margin: 0 0 10px; font: 500 30px/36px "Ubuntu", sans-serif; }
.post h3 a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.post:hover h3 a { color: #ddd; text-decoration-color: transparent; }
.post h3 a::after { content: ""; position: absolute; inset: 0; } /* celý blok je klikateľný */
.post p { margin: 0; }
@media (max-width: 991px) { .news-head h2 { font-size: 40px; } .posts { grid-template-columns: 1fr; gap: 30px; } }

/* Vynaložené úsilie (pôvodne .overview) */
.overview { padding-top: 72px; background: var(--bg); text-align: center; }
.overview .text { max-width: 930px; margin: 0 auto; }
.overview .text p { margin-bottom: 20px; }
.overview .accent { color: var(--green); font-weight: 700; }
.overview .shot img { width: 100%; }

/* Pre koho (pôvodne .duration) */
.for { padding: 70px 0 100px; }
.for .lead { text-align: center; }
.audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.audience {
  position: relative; width: calc(100% - 38px); min-height: 176px; margin: 60px 0 0 19px; padding: 32px 33px 30px 34px;
  background: rgba(82, 85, 95, .92); border-radius: 6px; transition: transform .35s var(--ease), background-color .35s;
}
.audience:hover { transform: translateY(-6px); background: #5d606b; }
.audience h3 { margin: 0; font: 500 32px/1.2 "Ubuntu", sans-serif; }
.audience .num {
  position: absolute; top: -25px; right: -35px; width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center; background: var(--green-dark); font: 500 28px/1 "Ubuntu", sans-serif;
  box-shadow: 0 0 0 0 rgba(37,200,106,.35); transition: box-shadow .4s var(--ease);
}
.audience:hover .num { box-shadow: 0 0 0 10px rgba(37,200,106,.18); }
@media (max-width: 991px) { .audiences { grid-template-columns: 1fr; gap: 0; } .audience { width: calc(100% - 80px); min-height: 0; margin: 60px 0 0 40px; } }
@media (max-width: 425px) {
  .audience { width: calc(100% - 22px); margin: 50px 0 0; padding: 25px 20px; }
  .audience h3 { font-size: 26px; }
  .audience .num { width: 50px; height: 50px; font-size: 24px; right: -22px; }
}

/* Služby (pôvodne .testimonials) */
.services-sec { padding: 70px 0 35px; background: #1e212a; text-align: center; }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.service { padding-bottom: 20px; }
.service .icon { width: 44px; height: 44px; margin: 20px auto -8px; color: var(--green-dark); stroke-width: 1.4; transition: transform .45s var(--ease), color .3s; }
.service:hover .icon { transform: translateY(-4px) scale(1.08); color: var(--green-hover); }
.service h3 { font: 500 32px/1.2 "Ubuntu", sans-serif; color: var(--green-dark); min-height: 2.4em; } /* vždy 2 riadky ako pôvodne → bloky zarovnané */
.service p { margin: 0 0 10px; }
@media (max-width: 1199px) { .services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991px) { .services { grid-template-columns: 1fr; } }
@media (max-width: 425px) { .service h3 { font-size: 26px; } }

/* Cena a formuláre */
.price { padding: 70px 0 100px; text-align: center; }
.price h3 { font: 500 32px/1.2 "Ubuntu", sans-serif; }
@media (max-width: 425px) { .price h3 { font-size: 26px; } }
.form { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 50px auto 0; padding-inline: 15px; text-align: left; }
@media (min-width: 1200px) { .form { grid-template-columns: 1fr 1fr; gap: 15px 30px; max-width: 870px; padding-inline: 0; } }
.form--contact { margin-top: 3rem; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  display: block; width: 100%; height: 48px; padding: 0 10px; border: 1px solid var(--panel); border-radius: 0;
  background: var(--panel); color: #fff; font: 500 18px/1.6 "Ubuntu", sans-serif; -webkit-appearance: none; appearance: none;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { height: 121px; padding-top: 8px; resize: vertical; }
.field select { background: #1c2029 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; border-color: #1c2029; cursor: pointer; }
.field select:invalid { color: rgba(255,255,255,.7); }
.field option { color: #111; }
.field ::placeholder { color: #fff; opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(85,187,92,.25); }
.form-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 5px; }
.form-note { margin: 0; font-size: 14px; color: #bbb; }
.form-status:empty { display: none; }
.form-status { margin: 0; padding: 10px 16px; border-radius: 4px; background: rgba(255,255,255,.08); }
.form-status.is-ok { background: rgba(85,187,92,.18); }
.form-status.is-error { background: rgba(229,72,77,.2); }
.hp { position: absolute; left: -9999px; }

/* Prečo my (pôvodne .facts-1) */
.why { display: grid; grid-template-columns: 1fr 1fr; min-height: 630px; background: #028844; } /* o 8 % tmavšia ako #02944a → biely text má kontrast 4,56:1 */
.why-img { position: relative; overflow: hidden; }
.why-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.why:hover .why-img img { transform: scale(1.04); }
.why-text { display: flex; flex-direction: column; justify-content: center; padding: 40px 107px 40px 93px; }
.why-text h2 { margin: 0 0 20px; font: 500 32px/1.2 "Ubuntu", sans-serif; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 54px 1fr; gap: 6px; align-items: start; margin-bottom: 14px; font: 400 19px/30.4px "Ubuntu", sans-serif; }
.checks .icon { width: 44px; height: 44px; margin-top: -8px; stroke-width: 2.4; }
.checks .icon path { stroke-dasharray: 24; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .checks .icon path { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    @keyframes draw { from { stroke-dashoffset: 24; } }
  }
}
@media (max-width: 991px) {
  .why { grid-template-columns: 1fr; }
  .why-img { height: 630px; }
  .why-text { padding: 40px 15px 50px 80px; }
  .why-text h2 { font: 500 40px/48px "Ubuntu", sans-serif; }
  .checks li { grid-template-columns: 30px 1fr; }
  .checks .icon { width: 24px; height: 24px; margin-top: 3px; }
}
@media (max-width: 425px) { .why-img { height: 390px; } .why-text { padding-left: 15px; } }

/* Aktuálne spravujeme */
.clients-sec { padding: 70px 0 100px; }
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; list-style: none; padding: 0; margin: 30px auto 0; }
.clients a {
  display: block; padding: 4px 14px; border-radius: 999px; font: 300 18px/28.8px "Ubuntu", sans-serif; color: var(--green);
  background: rgba(20,21,25,.45); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.clients a:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; transform: translateY(-2px); }

/* Časté otázky (nová sekcia) */
.faq-sec { padding: 70px 0 60px; background: #1e212a; }
.faq { max-width: 870px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; transition: border-color .3s, background-color .3s; }
.faq details[open] { border-color: rgba(85,187,92,.5); background: rgba(255,255,255,.06); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; font: 500 19px/1.4 "Ubuntu", sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 22px; height: 22px; color: var(--green); transition: transform .35s var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 18px; }
.faq .answer p { margin: 0; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Kontakt */
.contact { padding: 72px 0 45px; background: #25252d; }
.about { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; align-items: start; }
.about picture { justify-self: end; margin-right: 16px; }
.about img { width: 230px; height: 230px; border-radius: 30px; }
.about-text p { font: 300 19px/30.4px "Ubuntu", sans-serif; margin-bottom: 20px; }
.about details { grid-column: 1 / -1; text-align: center; }
.about details summary { display: inline-block; padding: 8px 32px; border-radius: 20px; background: var(--panel); cursor: pointer; color: #fff; font-size: 14px; font-weight: 500; list-style: none; transition: background-color .25s; }
.about details summary:hover { background: var(--green-dark); }
.about details summary::-webkit-details-marker { display: none; }
.about details summary .less, .about details[open] summary .more { display: none; }
.about details[open] summary .less { display: inline; }
.about details > div { max-width: 848px; margin: 20px 0 0 auto; text-align: left; }
.about details p { font: 300 19px/30.4px "Ubuntu", sans-serif; margin-bottom: 20px; }
.contact-lead { margin: 30px 0 0; text-align: center; font: 400 25px/40px "Ubuntu", sans-serif; }
@media (max-width: 1199px) { .about { grid-template-columns: 1fr; text-align: center; } .about picture { justify-self: center; margin: 0; } }

/* Pätička */
.footer { padding: 70px 0 30px; background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 100px; }
.footer-contact { justify-self: end; text-align: right; }
.footer-contact img { width: 175px; margin: 0 0 22px auto; }
.footer-contact p { margin: 0 0 10px; }
.footer-contact a { color: #fff; }
.footer-contact a:hover { color: var(--green); }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: block; padding: 12px 0; color: #ddd; font: 500 16px/25.6px "Ubuntu", sans-serif; text-transform: uppercase; }
.footer-nav a:hover { color: var(--green); }
.copy { margin: 40px 0 0; text-align: center; font-size: 14px; color: #999; }
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-contact { justify-self: center; text-align: center; }
  .footer-contact img { margin-inline: auto; }
}

/* ===== Podstránky (blog, články, 404) – rozmery podľa pôvodných .news-list / .news-detail ===== */

/* Hlavička podstránky s polygónom */
.page-head { display: flex; align-items: center; height: 500px; padding-top: 70px; }
.page-head h1 { margin: 20px 0 10px; font: 700 39px/1 "Ubuntu", sans-serif; color: #fff; animation: fade .8s var(--ease) .1s both; }
.page-head--list h1 { font: 900 78px/1 "Ubuntu", sans-serif; }
.page-head--list h1 span { color: var(--green); }
.page-head p { margin: 18px 10px 0 0; font: 300 20px/1.5 "Ubuntu", sans-serif; animation: fade .8s var(--ease) .25s both; }
.page-head .date { margin: 0; font-size: 14px; line-height: 25.6px; color: #999; }
@media (max-width: 991px) { .page-head { text-align: center; } .page-head p { margin-right: 0; } }
@media (max-width: 425px) {
  .page-head { height: 350px; padding-top: 62px; }
  .page-head--list h1 { font-size: 58px; }
}

/* Tmavý podklad obsahu (pôvodne .news) */
.news-body { padding: 40px 0; background: #252934; }

/* Zoznam článkov */
.list { display: grid; gap: 50px; }
.list-item { position: relative; display: grid; grid-template-columns: 268px minmax(0, 783px); gap: 24px; align-items: start; }
.list-item .thumb { display: block; overflow: hidden; height: 170px; }
.list-item .thumb img { width: 100%; height: 170px; object-fit: cover; transition: transform .6s var(--ease); }
.list-item:hover .thumb img { transform: scale(1.05); }
.list-item .date { display: block; font-size: 14px; line-height: 25.6px; color: #999; }
.list-item h2 { margin: 0 0 30px; font: 700 30px/30px "Ubuntu", sans-serif; }
.list-item h2 a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.list-item:hover h2 a { color: #ddd; text-decoration-color: transparent; }
.list-item h2 a::after { content: ""; position: absolute; inset: 0; }
.list-item p { margin: 0; }
@media (max-width: 991px) {
  .list-item { grid-template-columns: 1fr; gap: 0; }
  .list-item .thumb { margin-bottom: 4px; }
}

/* Článok */
.article-grid { display: grid; grid-template-columns: 765px 355px; gap: 20px; align-items: start; }
.clanok { min-width: 0; padding-top: 10px; }
.clanok h2 { margin: 40px 0 20px; font: 700 30px/30px "Ubuntu", sans-serif; }
.clanok h3 { margin: 40px 0 20px; font: 500 30px/36px "Ubuntu", sans-serif; }
.clanok h4 { margin: 40px 0 20px; font: 500 22px/30.8px "Ubuntu", sans-serif; }
.clanok > :first-child { margin-top: 0; }
.clanok ul, .clanok ol { margin: 0 0 10px; padding-left: 40px; }
.clanok img { height: auto; }
.clanok picture { display: block; }
.clanok a { color: var(--green); }
.clanok p a, .clanok li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* odkaz v texte nesmie spoliehať len na farbu */
.clanok a:hover { color: #fff; }
.clanok hr { margin: 20px 0; border: 0; border-top: 1px solid #555; }
.clanok table { border-collapse: collapse; margin: 0 0 10px; }
.clanok th, .clanok td { padding: 6px 10px; border: 1px solid rgba(255,255,255,.6); text-align: left; vertical-align: top; }
.clanok th { font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* Autor článku */
.author { display: grid; grid-template-columns: 238px minmax(0, 382px); align-items: start; margin-top: 20px; }
.author img { width: 145px; height: auto; }
.author .name { display: block; color: var(--green); font-size: 17px; font-weight: 500; }
.author .name + .name { margin-bottom: 25.6px; }
@media (max-width: 425px) { .author { grid-template-columns: 1fr; } .author img { width: 52%; padding-bottom: 20px; } }

/* Bočný panel s ostatnými článkami */
.sidebar { padding-top: 45px; }
.sidebar-title { margin: 0 0 30px; padding-left: 15px; font: 700 55px/55px "Ubuntu", sans-serif; }
.sidebar-title a { color: var(--green); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sidebar-title a:hover { color: #fff; }
.sidebar > p { padding-left: 15px; margin-bottom: 36px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { position: relative; padding: 0 80px 32px 15px; }
.side-list .date { display: block; font-size: 14px; line-height: 25.6px; color: #999; }
.side-list h3 { margin: 0 0 10px; font: 500 24px/28.8px "Ubuntu", sans-serif; }
.side-list h3 a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s; }
.side-list li:hover h3 a { color: #ddd; }
.side-list h3 a::after { content: ""; position: absolute; inset: 0; }
.side-list p { margin: 0 0 10px; }
@media (max-width: 1199px) {
  .article-grid { grid-template-columns: 1fr; gap: 40px; }
  .sidebar { padding-top: 0; }
}
@media (max-width: 425px) { .sidebar-title, .sidebar > p { padding-left: 0; } .side-list li { padding: 0 0 32px; } }

/* 404 */
.not-found .links { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}