/*
Theme Name:   VPS Stará Ľubovňa
Theme URI:    https://vpssl.sk
Description:  Hello Elementor child theme pre VPS Stará Ľubovňa, s.r.o., r.s.p.
Author:       VPS Stará Ľubovňa
Version:      1.0.4
Template:     hello-elementor
Text Domain:  vps-child
License:      GPL-2.0+
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS  (CSS Custom Properties)
   Mapované aj ako Elementor Global Color CSS premenné
═══════════════════════════════════════════════════════════ */
:root {
  /* Vlastné farby VPS */
  --g:       #6b9f2a;   /* Brand zelená – hlavná */
  --g-mid:   #8ec63f;   /* Brand zelená – stredná */
  --g-lite:  #f2f7e8;   /* Zeleno-biela pozadie */
  --g-tint:  #d6eab0;   /* Zelený tint pre orámovanie */
  --dark:    #1a2e08;   /* Tmavá (pätička) */
  --text:    #111827;   /* Hlavný text */
  --sub:     #374151;   /* Sekundárny text */
  --muted:   #6B7280;   /* Stlmený text */
  --border:  #E4EBE6;   /* Orámovanie */
  --bg:      #F6F8F5;   /* Pozadie sekcií */
  --w:       1180px;    /* Max šírka kontajnera */

  /* Elementor Global Color premenné – mapovanie na VPS farby */
  --e-global-color-primary:    #6b9f2a;
  --e-global-color-secondary:  #1a2e08;
  --e-global-color-text:       #111827;
  --e-global-color-accent:     #8ec63f;

  /* Stadium calendar slot colors */
  --slot-free:      #F5FBE9;
  --slot-free-brd:  #86efac;
  --slot-taken:     #fef2f2;
  --slot-taken-brd: #fecaca;
  --slot-sel:       #6b9f2a;
  --slot-past:      #f9fafb;
  --slot-past-txt:  #d1d5db;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET + BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════════════════════ */
.container { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════ */
.topbar {
  background: #243d10;
  padding: 8px 0;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.topbar-left  { display: flex; align-items: center; gap: 18px; }
.topbar-item  { display: flex; align-items: center; gap: 5px; }
.topbar-item svg { width: 12px; height: 12px; opacity: .75; flex-shrink: 0; }
.topbar-sep   { width: 1px; height: 11px; background: rgba(255,255,255,.25); }
.topbar-right a {
  color: rgba(255,255,255,.8); font-size: 12px; font-weight: 500;
  display: flex; align-items: center; gap: 5px; transition: color .2s;
}
.topbar-right a:hover { color: #fff; }
.topbar-right svg { width: 14px; height: 14px; fill: rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════════
   HEADER  (sticky, scroll shadow)
═══════════════════════════════════════════════════════════ */
header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow .25s;
}
header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-img { height: 52px; width: auto; display: block; object-fit: contain; }
.logo-mark {
  width: 42px; height: 42px;
  background: var(--g);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 22px; height: 22px; }
.logo-name { font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.logo-sub  { font-size: 11px; color: var(--muted); font-weight: 400; }

nav { display: flex; align-items: center; gap: 2px; }
nav a {
  padding: 7px 12px; font-size: 13.5px; font-weight: 500;
  color: var(--sub); border-radius: 7px;
  transition: background .15s, color .15s; white-space: nowrap;
}
nav a:hover { background: var(--g-lite); color: var(--g); }
nav a.active { background: var(--g-lite); color: var(--g); font-weight: 600; }
nav a.nav-cta {
  margin-left: 8px; padding: 9px 20px;
  background: var(--g); color: #fff; font-weight: 600; border-radius: 8px;
}
nav a.nav-cta:hover { background: #527820; color: #fff; }

/* ── Sekcia formulára ── */
.bf-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 18px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.bf-section-title:first-child { margin-top: 0; }

/* ── Extra option karta (šatne) ── */
.extra-option {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 11px;
  cursor: pointer; user-select: none; transition: all .18s;
  background: #fff;
}
.extra-option:hover { border-color: #86efac; background: #f9fef5; }
.extra-option.selected { border-color: var(--g); background: #f0fdf4; }
.extra-option-ico {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.extra-option.selected .extra-option-ico { background: var(--g-tint); }
.extra-option-ico svg { width: 18px; height: 18px; stroke: var(--g); }
.extra-option-info { flex: 1; }
.extra-option-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.extra-option-info span  { font-size: 11.5px; color: var(--muted); }
.extra-option-price { font-size: 13px; font-weight: 700; color: var(--g); white-space: nowrap; }
.extra-option-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.extra-option-check svg { width: 10px; height: 10px; stroke: #fff; opacity: 0; transition: opacity .15s; }
.extra-option.selected .extra-option-check { background: var(--g); border-color: var(--g); }
.extra-option.selected .extra-option-check svg { opacity: 1; }

/* ── Nav pulzujúca bodka (ihrisko) ── */
.nav-pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; margin-right: 6px; margin-left: 0; vertical-align: middle;
  position: relative; top: -1px;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: nav-pulse 2s ease-in-out infinite;
}
@keyframes nav-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,.5); }
  60%  { box-shadow: 0 0 0 6px rgba(34,197,94,0);  }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);  }
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════════════════════════ */
section { padding: 84px 0; }
.s-gray { background: var(--bg); }

.s-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--g); margin-bottom: 12px;
}
.s-label::before {
  content: ''; width: 20px; height: 2.5px;
  background: var(--g-mid); border-radius: 2px;
}
.s-label-w { color: rgba(255,255,255,.7); }
.s-label-w::before { background: rgba(255,255,255,.45); }

.s-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800; letter-spacing: -1.2px;
  line-height: 1.08; color: var(--text);
}
.s-title-w { color: #fff; }
.s-desc {
  font-size: 16px; color: var(--muted);
  line-height: 1.75; margin-top: 14px;
  max-width: 520px; font-weight: 400;
}
.s-desc-w { color: rgba(255,255,255,.6); }

.s-header { margin-bottom: 52px; }
.s-header-c { text-align: center; }
.s-header-c .s-label  { justify-content: center; }
.s-header-c .s-desc   { margin: 14px auto 0; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn-solid {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; background: var(--g); color: #fff;
  font-size: 14px; font-weight: 600; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(141,198,63,.3);
  transition: background .2s, transform .2s;
}
.btn-solid:hover { background: #527820; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; background: var(--bg); color: var(--sub);
  font-size: 14px; font-weight: 600; border-radius: 9px;
  border: 1.5px solid var(--border);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-ghost:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  color: var(--sub); border: 1.5px solid var(--border);
  border-radius: 8px; background: #fff;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--g); color: var(--g); }

.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: #fff; color: var(--g);
  font-size: 15px; font-weight: 700; border-radius: 9px;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  transition: transform .2s, box-shadow .2s;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.28); }

.btn-more {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px; font-size: 13.5px; font-weight: 600;
  color: var(--g); border: 1.5px solid var(--g-tint);
  border-radius: 8px; background: #fff;
  transition: border-color .2s, background .2s;
}
.btn-more:hover { border-color: var(--g); background: var(--g-lite); }

/* ═══════════════════════════════════════════════════════════
   HERO  (hlavná stránka)
═══════════════════════════════════════════════════════════ */
.hero { padding: 80px 0 88px; background: #fff; }
.hero .container {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 60px; align-items: center;
}
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--g); margin-bottom: 20px;
}
.hero-label-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--g-mid);
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero-title {
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -2px; color: var(--text); margin-bottom: 22px;
}
.hero-title .hl { color: var(--g); }
.hero-desc {
  font-size: 17px; color: var(--muted);
  line-height: 1.75; max-width: 460px;
  font-weight: 400; margin-bottom: 36px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; gap: 28px; align-items: stretch; }
.hstat { display: flex; flex-direction: column; }
.hstat-n { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--text); }
.hstat-l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.hstat-sep { width: 1px; background: var(--border); align-self: stretch; }

/* Hero visual panel */
.hero-visual { position: relative; }
.hero-panel {
  width: 100%; aspect-ratio: 5/4; border-radius: 24px; overflow: hidden;
  background: linear-gradient(145deg, #5c8c24 0%, #7db836 55%, #a8d460 100%);
  position: relative;
}
.hero-panel-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-panel-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-panel-icon svg { width: 88px; height: 88px; opacity: .12; }

.hero-float-a {
  position: absolute; bottom: 24px; left: -28px;
  background: #fff; border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,.14);
  display: flex; align-items: center; gap: 12px; min-width: 196px;
}
.hero-float-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--g-lite);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-float-ico svg { width: 19px; height: 19px; stroke: var(--g); }
.hero-float-a strong { display: block; font-size: 20px; font-weight: 900; color: var(--g); }
.hero-float-a span   { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.hero-float-b {
  position: absolute; top: 24px; right: -20px;
  background: var(--g); color: #fff;
  border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(141,198,63,.4);
  font-size: 13px; font-weight: 700; text-align: center; line-height: 1.35;
}
.hero-float-b small { display: block; font-size: 10.5px; font-weight: 400; opacity: .75; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   QUICKLINKS BAR
═══════════════════════════════════════════════════════════ */
.quicklinks {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 3px solid var(--g-lite);
}
.quicklinks .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.qlink {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 22px; border-right: 1px solid var(--border);
  transition: background .15s; cursor: pointer;
}
.qlink:last-child { border-right: none; }
.qlink:hover { background: var(--g-lite); }
.qlink:hover .qlink-ico { background: var(--g-tint); }
.qlink-ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.qlink-ico svg { width: 21px; height: 21px; stroke: var(--g); }
.qlink-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.qlink-sub   { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 26px;
  position: relative; overflow: hidden;
  transition: box-shadow .22s, transform .22s;
}
.svc-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--g) 0%, var(--g-mid) 100%);
  transform: scaleY(0); transform-origin: top; transition: transform .25s;
}
.svc-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-3px); }
.svc-card:hover::before { transform: scaleY(1); }
.svc-ico {
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--g-lite);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; transition: background .2s;
}
.svc-card:hover .svc-ico { background: var(--g-tint); }
.svc-ico svg { width: 24px; height: 24px; stroke: var(--g); }
.svc-card h3 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; line-height: 1.3; }
.svc-card p  { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════════════════════ */
.stats-strip { padding: 0 0 72px; }
.stats-inner {
  background: var(--g); border-radius: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.sbox {
  padding: 44px 28px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.sbox:last-child { border-right: none; }
.sbox-n { font-size: 48px; font-weight: 900; color: #fff; letter-spacing: -2.5px; line-height: 1; }
.sbox-l { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 9px; font-weight: 400; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════
   ABOUT SECTION  (text left, image right)
═══════════════════════════════════════════════════════════ */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.about-text .s-desc { max-width: 440px; }
.about-checks { margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.a-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--sub); line-height: 1.5; }
.a-check-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--g-lite); border: 1.5px solid var(--g-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.a-check-ico svg { width: 11px; height: 11px; stroke: var(--g); }
.about-btns { margin-top: 32px; display: flex; gap: 12px; }
.about-visual { position: relative; }
.about-img {
  width: 100%; aspect-ratio: 4/3.5; border-radius: 22px;
  background: linear-gradient(145deg, #5c8c24, #7db836);
  overflow: hidden; position: relative;
}
.about-img::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,.03) 28px, rgba(255,255,255,.03) 56px);
}
.about-img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.about-img-ph svg { width: 80px; height: 80px; opacity: .13; }
.about-badge {
  position: absolute; top: 20px; right: 20px;
  background: var(--g); color: #fff; border-radius: 10px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(141,198,63,.4);
}
.about-float {
  position: absolute; bottom: -18px; left: -24px;
  background: #fff; border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
  display: flex; align-items: center; gap: 13px;
}
.about-float-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--g-lite); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.about-float-ico svg { width: 20px; height: 20px; stroke: var(--g); }
.about-float strong { display: block; font-size: 22px; font-weight: 900; color: var(--g); }
.about-float span   { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════════════════════ */
.cta-sec { background: linear-gradient(135deg, #5c8c24 0%, #8ec63f 100%); padding: 80px 0; text-align: center; }
.cta-sec h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 14px; }
.cta-sec p  { font-size: 17px; color: rgba(255,255,255,.62); max-width: 480px; margin: 0 auto 34px; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   NEWS LIST  (aktuality)
═══════════════════════════════════════════════════════════ */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-row {
  display: grid; grid-template-columns: 100px 1fr 44px; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px;
  transition: box-shadow .2s, transform .2s;
}
.news-row:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateX(5px); }
.news-date { display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid var(--border); padding-right: 24px; }
.news-date-n { font-size: 38px; font-weight: 900; color: var(--g); letter-spacing: -2px; line-height: 1; }
.news-date-m { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; margin-top: 2px; }
.news-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--g); background: var(--g-lite); border-radius: 100px; padding: 3px 10px; margin-bottom: 7px;
}
.news-row h3 { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.news-row p  { font-size: 13px; color: var(--muted); line-height: 1.6; }
.news-arrow {
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s, border-color .18s;
}
.news-row:hover .news-arrow { background: var(--g); border-color: var(--g); }
.news-row:hover .news-arrow svg { stroke: #fff; }
.news-arrow svg { width: 16px; height: 16px; stroke: var(--muted); transition: stroke .18s; }
.sec-more { text-align: center; margin-top: 30px; }

/* ═══════════════════════════════════════════════════════════
   CONTACT  (formulár)
═══════════════════════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: start; }
.contact-info p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-top: 14px; max-width: 360px; }
.clist { margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.citem { display: flex; gap: 14px; align-items: flex-start; }
.citem-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--g-lite); border: 1px solid var(--g-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.citem-ico svg { width: 20px; height: 20px; stroke: var(--g); }
.citem strong { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px; }
.citem span   { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.contact-form-card {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px;
  box-shadow: 0 4px 28px rgba(0,0,0,.06);
}
.contact-form-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 26px; letter-spacing: -.3px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sub); margin-bottom: 6px; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--bg); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.fg input::placeholder, .fg textarea::placeholder { color: #9ca3af; }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--g); background: #fff;
  box-shadow: 0 0 0 3px rgba(141,198,63,.08);
}
.fg textarea { min-height: 110px; resize: vertical; }
.btn-send {
  width: 100%; padding: 14px; background: var(--g); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 700; border: none; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(141,198,63,.28); transition: background .2s, transform .2s; margin-top: 4px;
}
.btn-send:hover { background: #527820; transform: translateY(-1px); }

/* Contact form feedback */
.vps-form-success {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--g-lite); border: 1.5px solid var(--g-tint);
  border-radius: 12px; padding: 20px 22px;
  font-size: 15px; font-weight: 600; color: var(--g); line-height: 1.55;
}
.vps-form-success svg { width: 22px; height: 22px; stroke: var(--g); flex-shrink: 0; margin-top: 2px; }
.vps-form-error {
  background: #fef2f2; border: 1.5px solid #fecaca;
  border-radius: 10px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 500; color: #dc2626; margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO  (podstránky)
═══════════════════════════════════════════════════════════ */
.page-hero { padding: 64px 0 72px; background: #fff; }
.page-hero .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); transition: color .15s; }
.breadcrumb a:hover { color: var(--g); }
.breadcrumb svg { width: 13px; height: 13px; flex-shrink: 0; }
.page-title { font-size: clamp(34px,4.5vw,56px); font-weight: 900; line-height: 1.06; letter-spacing: -1.8px; color: var(--text); margin-bottom: 18px; }
.page-title .hl { color: var(--g); }
.page-desc { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 460px; margin-bottom: 28px; font-weight: 400; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.htag { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.htag svg { width: 13px; height: 13px; stroke: var(--muted); }
.htag-green { background: var(--g-lite); border-color: var(--g-tint); color: var(--g); }
.htag-green svg { stroke: var(--g); }
.hero-float { position: absolute; bottom: 20px; left: -22px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.14); display: flex; align-items: center; gap: 11px; min-width: 196px; }
.hero-float-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--g-lite); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-float-ico svg { width: 19px; height: 19px; stroke: var(--g); }
.hero-float strong { display: block; font-size: 20px; font-weight: 900; color: var(--g); }
.hero-float span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════
   O SPOLOČNOSTI  –  sekcia poslanie, hodnoty
═══════════════════════════════════════════════════════════ */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mission-img { width: 100%; aspect-ratio: 4/3; border-radius: 20px; background: linear-gradient(145deg, #5c8c24, #7db836); overflow: hidden; position: relative; }
.mission-img::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg,transparent,transparent 28px,rgba(255,255,255,.03) 28px,rgba(255,255,255,.03) 56px); }
.mission-img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mission-img-ph svg { width: 80px; height: 80px; opacity: .13; }
.mission-badge { position: absolute; top: 20px; right: 20px; background: var(--g); color: #fff; border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(141,198,63,.4); }
.mission-text p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-top: 16px; }
.check-list { margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--sub); line-height: 1.5; }
.check-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--g-lite); border: 1.5px solid var(--g-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.check-ico svg { width: 11px; height: 11px; stroke: var(--g); }

.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.val-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; position: relative; overflow: hidden; transition: box-shadow .22s,transform .22s; }
.val-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg,var(--g) 0%,var(--g-mid) 100%); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.val-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-3px); }
.val-card:hover::before { transform: scaleY(1); }
.val-ico { width: 50px; height: 50px; border-radius: 13px; background: var(--g-lite); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: background .2s; }
.val-card:hover .val-ico { background: var(--g-tint); }
.val-ico svg { width: 24px; height: 24px; stroke: var(--g); }
.val-card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.val-card p  { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   VEDENIE A RADY
═══════════════════════════════════════════════════════════ */
.mgmt-featured { display: flex; justify-content: center; margin-bottom: 56px; }
.mgmt-card-main { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 38px 44px; text-align: center; max-width: 440px; width: 100%; box-shadow: 0 4px 28px rgba(0,0,0,.07); }
.mgmt-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #fff; margin: 0 auto 18px; }
.mgmt-name { font-size: 21px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.mgmt-role-badge { display: inline-block; background: var(--g); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 100px; padding: 4px 16px; margin-bottom: 16px; letter-spacing: .3px; }
.mgmt-bio { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.boards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.board-block { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.board-header { padding: 20px 26px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--border); }
.board-header-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.board-header-ico svg { width: 19px; height: 19px; }
.board-header h3 { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.board-header span { font-size: 12px; color: var(--muted); }
.member-list { padding: 6px 0; }
.member-row { display: flex; align-items: center; gap: 14px; padding: 13px 26px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -.3px; }
.member-name { font-size: 14px; font-weight: 600; color: var(--text); }
.member-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
.member-badge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 100px; padding: 1px 8px; margin-top: 4px; border: 1px solid; }

/* ═══════════════════════════════════════════════════════════
   PRACOVÍSKÁ  (Kde pracujú ľudia VPS)
═══════════════════════════════════════════════════════════ */
.work-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.work-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: box-shadow .24s,transform .24s; }
.work-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,.1); transform: translateY(-4px); }
.work-banner { height: 116px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.work-banner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.18) 0%,transparent 60%); }
.work-banner svg { width: 42px; height: 42px; stroke: #fff; stroke-width: 1.6; position: relative; z-index: 1; }
.work-body { padding: 20px 22px 22px; }
.work-body h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.work-body p  { font-size: 13px; color: var(--muted); line-height: 1.65; }
.work-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; border: 1px solid; }

/* ═══════════════════════════════════════════════════════════
   REFERENCIE  –  projektová mriežka, carousel, lightbox
═══════════════════════════════════════════════════════════ */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.f-btn { padding: 9px 18px; font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 100px; background: #fff; color: var(--sub); transition: all .18s; }
.f-btn:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.f-btn.active { background: var(--g); border-color: var(--g); color: #fff; }
.proj-count-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.proj-count-label strong { color: var(--text); font-weight: 700; }

.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.proj-card { border-radius: 18px; overflow: hidden; border: 1.5px solid var(--border); background: #fff; cursor: pointer; transition: box-shadow .22s,transform .22s,border-color .22s; position: relative; }
.proj-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); border-color: #c9dcd0; }
.proj-card.active { border-color: var(--g); box-shadow: 0 0 0 3px rgba(141,198,63,.12),0 8px 32px rgba(0,0,0,.1); }
.proj-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.proj-thumb-bg { width: 100%; height: 100%; transition: transform .4s ease; }
.proj-card:hover .proj-thumb-bg { transform: scale(1.04); }
.proj-thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.proj-thumb-icon svg { width: 52px; height: 52px; opacity: .22; }
.proj-year-chip { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; letter-spacing: .3px; }
.proj-cat-chip  { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; color: var(--sub); }
.proj-info { padding: 16px 18px 14px; }
.proj-title { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 8px; }
.proj-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proj-loc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-loc svg { width: 12px; height: 12px; stroke: var(--muted); flex-shrink: 0; }
.proj-value { font-size: 13px; font-weight: 700; color: var(--g); white-space: nowrap; }
.proj-expand-row { padding: 0 18px 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .2s; }
.proj-card:hover .proj-expand-row, .proj-card.active .proj-expand-row { color: var(--g); }
.proj-expand-row svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .3s; }
.proj-card.active .proj-expand-row svg { transform: rotate(180deg); }

/* Detail panel */
.proj-detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.4,0,0.2,1); }
.proj-detail.open { grid-template-rows: 1fr; }
.proj-detail-inner { overflow: hidden; min-height: 0; }
.proj-detail-body { background: #fff; border: 1.5px solid var(--g); border-radius: 18px; padding: 32px 36px 28px; display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: start; margin: 4px 0 8px; position: relative; box-shadow: 0 4px 28px rgba(141,198,63,.1); }
.proj-detail-body::before { content: ''; position: absolute; top: -9px; left: calc(var(--arrow-x, 50px)); border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--g); filter: drop-shadow(0 -2px 2px rgba(141,198,63,.15)); }
.detail-cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--g); margin-bottom: 10px; }
.detail-cat-tag::before { content: ''; width: 16px; height: 2px; background: var(--g-mid); border-radius: 2px; }
.detail-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.6px; line-height: 1.2; margin-bottom: 16px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 18px; }
.detail-meta-item span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.detail-meta-item strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.detail-desc { font-size: 14px; color: var(--sub); line-height: 1.75; }
.detail-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.detail-close:hover { background: var(--g-tint); }
.detail-close svg { width: 14px; height: 14px; stroke: var(--muted); }

/* Carousel */
.detail-gallery { display: flex; flex-direction: column; gap: 0; }
.gallery-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.gallery-counter-chip { position: absolute; bottom: 10px; right: 10px; z-index: 5; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.9); background: rgba(0,0,0,.45); border-radius: 100px; padding: 2px 9px; backdrop-filter: blur(4px); }
.carousel { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg); height: 220px; user-select: none; }
.carousel-viewport { width: 100%; height: 100%; overflow: hidden; }
.carousel-track { display: flex; height: 100%; transition: transform .38s cubic-bezier(.4,0,.2,1); }
.carousel-slide { flex-shrink: 0; width: calc(100% / 3); height: 100%; position: relative; cursor: zoom-in; padding-right: 5px; box-sizing: border-box; }
.carousel-slide:last-child { padding-right: 0; }
.carousel-slide-bg { width: 100%; height: 100%; transition: transform .35s ease; }
.carousel-slide:hover .carousel-slide-bg { transform: scale(1.03); }
.carousel-slide-label { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.52); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
.carousel-zoom-icon { position: absolute; bottom: 10px; right: 10px; width: 28px; height: 28px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border-radius: 7px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.carousel-slide:hover .carousel-zoom-icon { opacity: 1; }
.carousel-zoom-icon svg { width: 14px; height: 14px; stroke: #fff; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; transition: background .15s,transform .15s; z-index: 2; cursor: pointer; }
.carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-btn svg { width: 16px; height: 16px; stroke: #111827; stroke-width: 2.5; }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel-btn:disabled:hover { transform: translateY(-50%) scale(1); }
.carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s,transform .2s; border: none; padding: 0; }
.carousel-dot.active { background: var(--g); transform: scale(1.25); }
.carousel-dot:hover:not(.active) { background: #aaa; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.93); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(880px, 90vw); width: 100%; }
.lb-img { width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.7); position: relative; transition: opacity .22s; }
.lb-img-bg { width: 100%; height: 100%; transition: opacity .22s; }
.lb-img-label { position: absolute; bottom: 14px; left: 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; }
.lb-counter { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s,transform .15s; z-index: 10; }
.lb-nav:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.06); }
.lb-nav svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; }
.lb-prev { left: clamp(12px,3vw,40px); }
.lb-next { right: clamp(12px,3vw,40px); }
.lb-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; z-index: 10; }
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-close svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; }

/* ═══════════════════════════════════════════════════════════
   TRANSPARENTNOSŤ  –  taby a súbory
═══════════════════════════════════════════════════════════ */
.tab-bar { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 36px; overflow-x: auto; }
.tab-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .18s,border-color .18s; }
.tab-btn:hover { color: var(--g); }
.tab-btn.active { color: var(--g); border-bottom-color: var(--g); }
.tab-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.tab-count { background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 1px 8px; font-size: 11px; font-weight: 700; transition: background .18s,border-color .18s; }
.tab-btn.active .tab-count { background: var(--g-lite); border-color: var(--g-tint); color: var(--g); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Súbory tab */
.file-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.file-search-wrap { position: relative; flex: 1; min-width: 200px; }
.file-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--muted); }
.file-search { width: 100%; padding: 10px 14px 10px 36px; border: 1.5px solid var(--border); border-radius: 9px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg); outline: none; transition: border-color .2s,background .2s; }
.file-search:focus { border-color: var(--g); background: #fff; }
.cat-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-chip { padding: 7px 14px; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 100px; background: #fff; color: var(--sub); cursor: pointer; transition: all .16s; }
.cat-chip:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.cat-chip.active { background: var(--g); border-color: var(--g); color: #fff; }
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; transition: box-shadow .2s,border-color .2s; }
.file-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); border-color: #c8d9cc; }
.file-type { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .5px; flex-shrink: 0; }
.ft-pdf { background: #fef2f2; color: #dc2626; }
.ft-xls { background: #F5FBE9; color: #16a34a; }
.ft-doc { background: #eff6ff; color: #2563eb; }
.ft-zip { background: #fefce8; color: #ca8a04; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-cat-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 100px; padding: 2px 9px; }
.file-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.file-meta { text-align: right; }
.file-size { font-size: 12.5px; font-weight: 600; color: var(--sub); }
.file-date { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   FUTBALOVÉ IHRISKO  –  kalendár, sloty, formulár
═══════════════════════════════════════════════════════════ */
.res-section { padding: 0 0 80px; }
.res-grid { display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: start; }
.res-left { display: flex; flex-direction: column; gap: 24px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.card-head { padding: 20px 24px 0; }
.card-title { font-size: 16px; font-weight: 700; color: var(--text); }
.card-sub   { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.card-body  { padding: 20px 24px 24px; }

/* Calendar */
.cal { }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-month { font-size: 15px; font-weight: 700; color: var(--text); }
.cal-arrow { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.cal-arrow:hover { background: var(--g-lite); }
.cal-arrow svg { width: 16px; height: 16px; stroke: var(--sub); }
.cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 500; cursor: default; position: relative; }
.cal-day.past { color: var(--slot-past-txt); background: none; }
.cal-day.available { color: var(--text); cursor: pointer; transition: background .15s; }
.cal-day.available:hover { background: var(--g-lite); color: var(--g); }
.cal-day.today { font-weight: 800; color: var(--g); }
.cal-day.selected { background: var(--g); color: #fff; font-weight: 700; }
.cal-day.has-reservations::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #f97316; }
.cal-day.empty { background: none; }

/* Time slots */
.slots-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.slots-grid--half { grid-template-columns: repeat(6,1fr); gap: 6px; }
.slot { border-radius: 10px; padding: 11px 8px; text-align: center; font-size: 13px; font-weight: 600; border: 1.5px solid; cursor: pointer; transition: all .18s; }
.slot.free   { background: var(--slot-free); border-color: var(--slot-free-brd); color: #166534; }
.slot.free:hover { background: var(--g-tint); border-color: #4ade80; transform: translateY(-2px); }
.slot.free.sel { background: var(--slot-sel); border-color: var(--slot-sel); color: #fff; box-shadow: 0 2px 8px rgba(107,159,42,.3); }
.slot.free.sel:hover { background: #527820; border-color: #527820; }
.slot.free.sel.sel-start { border-radius: 10px 10px 10px 10px; } /* ponecháme plný radius – grid má gap */
.slot.free.sel.sel-end   { border-radius: 10px 10px 10px 10px; }
.slot.taken  { background: var(--slot-taken); border-color: var(--slot-taken-brd); color: #991b1b; cursor: not-allowed; opacity: .7; }
.slot-time  { font-size: 11.5px; font-weight: 700; letter-spacing: -.1px; white-space: nowrap; }
.slot-price { font-size: 11px; margin-top: 3px; opacity: .8; font-weight: 600; }

/* Booking panel */
.booking-panel { position: sticky; top: 90px; }
.booking-empty { padding: 48px 28px; text-align: center; color: var(--muted); }
.booking-empty svg { width: 48px; height: 48px; stroke: #d1d5db; margin: 0 auto 16px; }
.booking-empty h4 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.booking-empty p  { font-size: 13.5px; line-height: 1.6; }
.booking-form-wrap { display: none; }
.booking-summary { padding: 20px 24px 16px; background: linear-gradient(135deg,var(--g),#527820); border-radius: 14px 14px 0 0; margin: -1px -1px 0; }
.bs-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.bs-main  { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.bs-sub   { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 4px; }
.bs-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.bs-price-label { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.4; flex: 1; }
.bs-price-val   { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -.5px; white-space: nowrap; }
.booking-fields { padding: 20px 24px 24px; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book-btn { width: 100%; padding: 14px; background: var(--g); color: #fff; font-size: 14px; font-weight: 700; border: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 16px rgba(141,198,63,.28); transition: background .2s,transform .2s; }
.book-btn:hover { background: #527820; transform: translateY(-1px); }
.book-terms { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; }
.book-terms a { color: var(--g); }
.extra-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 8px; cursor: pointer; font-size: 0.875rem; color: #1a2e1f; transition: border-color .15s, background .15s; }
.extra-check:hover { border-color: var(--g); background: #f0fdf4; }
.extra-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--g); flex-shrink: 0; cursor: pointer; }
.extra-check strong { color: var(--g); }

/* Pitch panel */
.pitch-panel { width: 100%; aspect-ratio: 5/4; border-radius: 22px; background: linear-gradient(145deg, #5c8c24 0%, #7db836 55%, #a8d460 100%); position: relative; overflow: hidden; }
.pitch-panel-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 22px 22px; }
.pitch-panel-svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pitch-float { position: absolute; bottom: 20px; left: -22px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.14); display: flex; align-items: center; gap: 11px; min-width: 196px; }
.pitch-float-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--g-lite); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pitch-float-ico svg { width: 19px; height: 19px; stroke: var(--g); }
.pitch-float strong { display: block; font-size: 20px; font-weight: 900; color: var(--g); }
.pitch-float span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* Cenník + prevádzkový poriadok */
.info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.info-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; }
.info-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--g-lite); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.info-ico svg { width: 22px; height: 22px; stroke: var(--g); }
.info-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.info-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price-table { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.price-head { padding: 20px 28px; background: var(--bg); border-bottom: 1px solid var(--border); }
.price-head h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.price-head span { font-size: 12.5px; color: var(--muted); }
.price-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--border); }
.price-row:last-child { border-bottom: none; }
.pr-label { font-size: 14px; font-weight: 600; color: var(--text); }
.pr-label span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pr-val { font-size: 22px; font-weight: 900; color: var(--g); white-space: nowrap; }
.pr-val small { font-size: 13px; font-weight: 500; color: var(--muted); }
.rules-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.rules-card h3 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 20px; }
.rules-list { display: flex; flex-direction: column; gap: 12px; }
.rules-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--sub); line-height: 1.5; }
.rule-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--g-lite); border: 1.5px solid var(--g-tint); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.rule-ico svg { width: 11px; height: 11px; stroke: var(--g); }

/* Modal (rezervácia) */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.45); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal { background: #fff; border-radius: 22px; padding: 48px 44px; max-width: 460px; width: 90%; text-align: center; transform: scale(.95) translateY(20px); transition: transform .3s cubic-bezier(.22,.68,0,1.2); box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.modal-overlay.show .modal { transform: scale(1) translateY(0); }
.modal-icon { width: 72px; height: 72px; background: var(--g-lite); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.modal-icon svg { width: 36px; height: 36px; stroke: var(--g); }
.modal h3 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
.modal p  { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 6px; }
.modal-detail { background: var(--bg); border-radius: 12px; padding: 16px; margin: 18px 0; text-align: left; border: 1px solid var(--border); }
.modal-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; }
.modal-detail-row span:first-child { color: var(--muted); }
.modal-detail-row strong { font-weight: 700; color: var(--text); }
.modal-close { width: 100%; padding: 14px; background: var(--g); color: #fff; font-size: 14px; font-weight: 700; border: none; border-radius: 9px; cursor: pointer; transition: background .18s; }
.modal-close:hover { background: #527820; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer { background: var(--dark); padding: 64px 0 32px; color: rgba(255,255,255,.55); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
.footer-brand-name { font-size: 14.5px; font-weight: 700; color: #fff; }
.footer-brand-sub  { font-size: 11px; color: rgba(255,255,255,.3); }
.footer-brand p    { font-size: 13px; color: rgba(255,255,255,.3); line-height: 1.7; margin-top: 16px; max-width: 220px; }
.footer-social { display: flex; gap: 8px; margin-top: 20px; }
.footer-social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; transition: background .18s; }
.footer-social a:hover { background: rgba(255,255,255,.14); }
.footer-social svg { width: 14px; height: 14px; fill: rgba(255,255,255,.55); }
.footer-col h4   { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.22); margin-bottom: 16px; }
.footer-col ul   { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 13.5px; color: rgba(255,255,255,.42); transition: color .18s; }
.footer-col ul a:hover { color: #7ddba0; }
.footer-bottom   { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: rgba(255,255,255,.18); }
.footer-bottom a { color: rgba(255,255,255,.28); transition: color .18s; }
.footer-bottom a:hover { color: rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════
   TRANSPARENTNOSŤ  –  doplnková CSS
═══════════════════════════════════════════════════════════ */

/* Hero panel – dokument karty vo vnútri panela */
.hero-panel-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px;
}
.hero-doc {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: 12px 16px; width: 100%;
  display: flex; align-items: center; gap: 12px;
}
.hero-doc-ico {
  width: 34px; height: 34px; background: rgba(255,255,255,.18);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-doc-ico svg { width: 16px; height: 16px; stroke: #fff; }
.hero-doc-text   { flex: 1; min-width: 0; }
.hero-doc-label  { font-size: 10.5px; color: rgba(255,255,255,.6); font-weight: 500; }
.hero-doc-val    { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-doc-amt    { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; flex-shrink: 0; }

/* Info karty s ikonou vľavo (flex layout) */
.info-card-ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--g-lite);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-card-ico svg { width: 22px; height: 22px; stroke: var(--g); }
.info-card:has(.info-card-ico) { display: flex; align-items: flex-start; gap: 16px; }
.info-card h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 5px; }

/* Tabs wrapper (záložky s tabulkou) */
.tabs-wrap {
  background: #fff; border-radius: 20px; border: 1px solid var(--border);
  overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.tabs-nav {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg); padding: 6px 6px 0; overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
/* Keď je tab-bar vnútri tabs-wrap, zruš jeho vlastný dolný okraj */
.tabs-wrap .tab-bar { margin-bottom: 0; border-bottom: none; gap: 4px; overflow-x: hidden; }
.tabs-wrap .tab-btn {
  padding: 11px 22px; border-radius: 10px 10px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, background .2s, border-color .2s;
}
.tabs-wrap .tab-btn:hover { background: rgba(255,255,255,.7); color: var(--sub); }
.tabs-wrap .tab-btn.active { background: #fff; color: var(--g); border-bottom-color: var(--g); }
.tabs-wrap .tab-btn.active .tab-count { background: var(--g); border-color: var(--g); color: #fff; }

/* Table toolbar – vyhľadávanie a filter */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px 0; flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-right { font-size: 12.5px; color: var(--muted); }
.toolbar-right strong { color: var(--text); font-weight: 700; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap svg { position: absolute; left: 11px; width: 15px; height: 15px; stroke: var(--muted); pointer-events: none; }
.search-input {
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 14px 9px 34px;
  font-size: 13.5px; font-family: inherit; color: var(--text);
  background: var(--bg); outline: none; width: 220px;
  transition: border-color .2s, box-shadow .2s;
}
.search-input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(141,198,63,.1); background: #fff; }
.search-input::placeholder { color: var(--muted); }
.year-select {
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; font-family: inherit; color: var(--sub);
  background: var(--bg); outline: none; cursor: pointer; transition: border-color .2s;
}
.year-select:focus { border-color: var(--g); }

/* Tabuľka dokumentov */
.table-outer { padding: 16px 0 0; overflow-x: auto; }
.table-outer table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-outer thead th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table-outer thead th:first-child { padding-left: 24px; }
.table-outer thead th:last-child  { padding-right: 24px; text-align: right; }
.table-outer tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.table-outer tbody tr:last-child  { border-bottom: none; }
.table-outer tbody tr:hover       { background: var(--bg); }
.table-outer tbody td { padding: 14px 16px; color: var(--sub); vertical-align: middle; line-height: 1.4; }
.table-outer tbody td:first-child { padding-left: 24px; }
.table-outer tbody td:last-child  { padding-right: 24px; text-align: right; }
.td-num    { font-weight: 700; color: var(--text); font-size: 13px; white-space: nowrap; }
.td-desc   { color: var(--text); font-weight: 500; max-width: 260px; }
.td-desc small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.td-partner { color: var(--sub); max-width: 200px; }
.td-date   { white-space: nowrap; color: var(--muted); font-size: 13px; }
.td-amount { font-weight: 800; color: var(--text); white-space: nowrap; font-size: 14px; }

/* Stavové badge */
.badge        { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
.badge-green  { background: var(--g-lite); color: #15803d; border: 1px solid var(--g-tint); }
.badge-yellow { background: #fefce8; color: #854d0e; border: 1px solid #fef08a; }
.badge-blue   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-gray   { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Tlačidlo stiahnutia */
.btn-icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--sub);
  background: #fff; cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-icon svg { width: 13px; height: 13px; stroke: currentColor; }
.btn-icon:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }

/* Stránkovanie */
.pag { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.pag-info { font-size: 12.5px; color: var(--muted); }
.pag-btns { display: flex; align-items: center; gap: 6px; }
.pag-btn {
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sub); transition: all .15s;
}
.pag-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.pag-btn:hover:not(:disabled) { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.pag-btn.active { background: var(--g); border-color: var(--g); color: #fff; }
.pag-btn:disabled { opacity: .35; cursor: not-allowed; }
.pag-ellipsis { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.per-page-select { font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; cursor: pointer; color: var(--sub); background: #fff; }

/* ═══════════════════════════════════════════════
   AKTUALITY – page-aktuality.php
   ═══════════════════════════════════════════════ */

/* Narrow page hero (aktuality, transparentnosť …) */
.page-hero--narrow { padding: 56px 0 60px; background: #fff; border-bottom: 1px solid var(--border); }
.page-hero--narrow .page-desc { max-width: 520px; }
/* Override the 2-col grid from .page-hero .container — pre single-col heroe */
.page-hero--narrow .container { display: block; }

/* Filter bar */
.news-filter-bar { padding: 28px 0 0; }
.news-filter-bar .container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-btn {
  padding: 8px 18px; font-size: 13.5px; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 100px;
  background: #fff; color: var(--sub); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: all .18s; font-family: inherit;
}
.filter-btn:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.filter-btn.active { background: var(--g); border-color: var(--g); color: #fff; }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; border-radius: 100px; padding: 0 5px;
  font-size: 10.5px; font-weight: 700;
  background: rgba(0,0,0,.07); color: inherit;
}
.filter-btn.active .filter-count { background: rgba(255,255,255,.25); }

/* News section */
.news-section { padding: 40px 0 80px; }
.news-list { display: flex; flex-direction: column; gap: 10px; }

/* News row */
.news-row {
  display: grid; grid-template-columns: 100px 1fr 44px;
  gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s;
}
.news-row:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateX(5px); }

/* Date column */
.news-date { display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid var(--border); padding-right: 24px; }
.news-date-n { font-size: 38px; font-weight: 900; color: var(--g); letter-spacing: -2px; line-height: 1; }
.news-date-m { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; margin-top: 2px; }

/* Body / middle column */
.news-body { min-width: 0; }

/* Category tag */
.news-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--g); background: var(--g-lite); border-radius: 100px; padding: 3px 10px; margin-bottom: 7px; }
.news-tag.tag-career  { color: #6d28d9; background: #f5f3ff; }
.news-tag.tag-project { color: #0369a1; background: #f0f9ff; }
.news-tag.tag-announce { color: #b45309; background: #fffbeb; }

/* Title & excerpt */
.news-row h3 { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.news-row p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Arrow circle */
.news-arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s, border-color .18s; }
.news-arrow svg { width: 16px; height: 16px; stroke: var(--muted); transition: stroke .18s; }
.news-row:hover .news-arrow { background: var(--g); border-color: var(--g); }
.news-row:hover .news-arrow svg { stroke: #fff; }

/* Featured first row */
.news-row.featured { grid-template-columns: 120px 1fr 54px; padding: 28px; background: var(--g-lite); border-color: var(--g-tint); }
.news-row.featured .news-date-n { font-size: 48px; }
.news-row.featured h3 { font-size: 18px; }
.news-row.featured .news-arrow { width: 54px; height: 54px; }

/* Pagination */
.news-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; }
.page-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--border);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--sub);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .18s; font-family: inherit;
}
.page-btn:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.page-btn.active { background: var(--g); border-color: var(--g); color: #fff; }
.page-btn--arrow { color: var(--muted); }
.page-btn--arrow svg { width: 16px; height: 16px; stroke: currentColor; }

/* ═══════════════════════════════════════════════
   REFERENCIE – page-referencie.php
   ═══════════════════════════════════════════════ */

/* Hero */
.ref-hero { padding: 64px 0 56px; background: #fff; border-bottom: 1px solid var(--border); }
/* Override 2-col grid z .page-hero .container — ref-hero je jednoslĺpcový */
.ref-hero .container { display: block; }
.ref-hero .page-desc { max-width: 520px; margin-bottom: 0; }
.ref-hero .page-title { font-size: clamp(36px,4.5vw,60px); letter-spacing: -2px; }
.hero-stats-row { display: flex; gap: 36px; margin-top: 32px; flex-wrap: wrap; }
/* Scoped hstat pre ref-hero (zelené čísla) */
.ref-hero .hstat { display: flex; flex-direction: column; gap: 2px; }
.ref-hero .hstat-n { font-size: 32px; font-weight: 900; color: var(--g); letter-spacing: -1.5px; line-height: 1; }
.ref-hero .hstat-l { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* Section wrapper */
.ref-section { padding: 56px 0 80px; }

/* Filter bar */
.ref-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.ref-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.f-btn { padding: 9px 18px; font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 100px; background: #fff; color: var(--sub); cursor: pointer; transition: all .18s; font-family: inherit; }
.f-btn:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.f-btn.active { background: var(--g); border-color: var(--g); color: #fff; }
.proj-count-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.proj-count-label strong { color: var(--text); font-weight: 700; }

/* Projects grid */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Project card */
.proj-card { border-radius: 18px; overflow: hidden; border: 1.5px solid var(--border); background: #fff; cursor: pointer; transition: box-shadow .22s, transform .22s, border-color .22s; position: relative; }
.proj-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-3px); border-color: #c9dcd0; }
.proj-card.active { border-color: var(--g); box-shadow: 0 0 0 3px rgba(141,198,63,.12), 0 8px 32px rgba(0,0,0,.1); }

/* Thumbnail */
.proj-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.proj-thumb-bg { width: 100%; height: 100%; transition: transform .4s ease; }
/* reálna fotka v thumbnaily karty */
.proj-thumb-photo { background-size: cover; background-position: center; }
.proj-card:hover .proj-thumb-bg { transform: scale(1.04); }
.proj-thumb-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.proj-thumb-icon svg { width: 52px; height: 52px; opacity: .22; }
.proj-year-chip { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; letter-spacing: .3px; }
.proj-cat-chip { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; color: var(--sub); }

/* Card info */
.proj-info { padding: 16px 18px 14px; }
.proj-title { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 8px; }
.proj-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proj-loc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-loc svg { width: 12px; height: 12px; stroke: var(--muted); flex-shrink: 0; }
.proj-value { font-size: 13px; font-weight: 700; color: var(--g); white-space: nowrap; }
.proj-expand-row { padding: 0 18px 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .2s; }
.proj-card:hover .proj-expand-row,
.proj-card.active .proj-expand-row { color: var(--g); }
.proj-expand-row svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .3s; }
.proj-card.active .proj-expand-row svg { transform: rotate(180deg); }

/* Detail panel */
.proj-detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1); }
.proj-detail.open { grid-template-rows: 1fr; }
.proj-detail-inner { overflow: hidden; min-height: 0; }
.proj-detail-body {
  background: #fff; border: 1.5px solid var(--g); border-radius: 18px;
  padding: 32px 36px 28px; display: grid; grid-template-columns: 340px 1fr;
  gap: 36px; align-items: start; margin: 4px 0 8px;
  position: relative; box-shadow: 0 4px 28px rgba(141,198,63,.1);
}
.proj-detail-body::before {
  content: ''; position: absolute; top: -9px; left: var(--arrow-x, 50px);
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 9px solid var(--g); filter: drop-shadow(0 -2px 2px rgba(141,198,63,.15));
}

/* Detail info */
.detail-cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--g); margin-bottom: 10px; }
.detail-cat-tag::before { content: ''; width: 16px; height: 2px; background: var(--g-mid); border-radius: 2px; display: inline-block; }
.detail-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.6px; line-height: 1.2; margin-bottom: 16px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 18px; }
.detail-meta-item span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.detail-meta-item strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.detail-desc { font-size: 14px; color: var(--sub); line-height: 1.75; }
.detail-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.detail-close:hover { background: var(--g-tint); }
.detail-close svg { width: 14px; height: 14px; stroke: var(--muted); }

/* Gallery */
.detail-gallery { display: flex; flex-direction: column; }
.gallery-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.gallery-counter-chip { position: absolute; bottom: 10px; right: 10px; z-index: 5; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.9); background: rgba(0,0,0,.45); border-radius: 100px; padding: 2px 9px; backdrop-filter: blur(4px); }

/* Carousel */
.carousel { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg); height: 220px; user-select: none; }
.carousel-viewport { width: 100%; height: 100%; overflow: hidden; }
.carousel-track { display: flex; height: 100%; transition: transform .38s cubic-bezier(.4,0,.2,1); }
.carousel-slide { flex-shrink: 0; width: calc(100% / 3); height: 100%; position: relative; cursor: zoom-in; padding-right: 5px; box-sizing: border-box; }
.carousel-slide:last-child { padding-right: 0; }
.carousel-slide-bg { width: 100%; height: 100%; transition: transform .35s ease; }
.carousel-slide:hover .carousel-slide-bg { transform: scale(1.03); }
.carousel-slide-label { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,.52); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
.carousel-zoom-icon { position: absolute; bottom: 10px; right: 10px; width: 28px; height: 28px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); border-radius: 7px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.carousel-slide:hover .carousel-zoom-icon { opacity: 1; }
.carousel-zoom-icon svg { width: 14px; height: 14px; stroke: #fff; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; z-index: 2; cursor: pointer; }
.carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-btn svg { width: 16px; height: 16px; stroke: #111827; stroke-width: 2.5; }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel-btn:disabled:hover { transform: translateY(-50%) scale(1); }
.carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, transform .2s; border: none; padding: 0; }
.carousel-dot.active { background: var(--g); transform: scale(1.25); }
.carousel-dot:hover:not(.active) { background: #aaa; }

/* Stats strip */
.ref-stats-strip { padding: 0 0 80px; }
.ref-stats-inner { background: var(--g); border-radius: 22px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.sbox { padding: 44px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.sbox:last-child { border-right: none; }
.sbox-n { font-size: 48px; font-weight: 900; color: #fff; letter-spacing: -2.5px; line-height: 1; }
.sbox-l { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 9px; font-weight: 400; line-height: 1.45; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.93); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(880px,90vw); width: 100%; }
.lb-img { width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.7); position: relative; }
.lb-img-bg { width: 100%; height: 100%; transition: opacity .22s; }
.lb-img-label { position: absolute; bottom: 14px; left: 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; }
.lb-counter { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s; z-index: 10; }
.lb-nav:hover { background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.06); }
.lb-nav svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; }
.lb-prev { left: clamp(12px,3vw,40px); }
.lb-next { right: clamp(12px,3vw,40px); }
.lb-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; z-index: 10; }
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-close svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; }

/* ── Reálne fotky v carousel a thumbnail (referencie) ── */
.carousel-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.carousel-slide:hover .carousel-slide-img { transform: scale(1.03); }
.proj-thumb-photo { background-size: cover; background-position: center; }

/* ═══════════════════════════════════════════════════════════
   SINGLE AKTUALITA  —  single-aktualita.php
═══════════════════════════════════════════════════════════ */

/* Narrow centred wrapper (max 780 px) */
.art-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Article Header ── */
.art-header {
  padding: 48px 0 36px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 20px;
}
.art-date-txt,
.art-read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.art-date-txt svg,
.art-read-time svg { width: 14px; height: 14px; stroke: var(--muted); flex-shrink: 0; }
.art-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 18px;
}
.art-lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 400;
  max-width: 680px;
}

/* ── Cover image / gradient ── */
.art-cover-wrap {
  background: #fff;
  padding: 0 0 48px;
}
.art-cover {
  width: 100%;
  aspect-ratio: 16/7;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.art-cover--photo {
  background-size: cover;
  background-position: center;
}
.art-cover--grad {
  background: linear-gradient(145deg, #5c8c24 0%, #7db836 55%, #a8d460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-cover-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.art-cover-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-cover-icon svg { width: 80px; height: 80px; opacity: .13; }
.art-cover-label {
  position: absolute;
  bottom: 18px;
  left: 22px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 6px 14px;
}

/* ── Prose body ── */
.art-body-wrap {
  padding: 52px 0 48px;
  background: #fff;
}
.art-body {
  font-size: 16px;
  color: var(--sub);
  line-height: 1.85;
}
.art-body > * + * { margin-top: 20px; }
.art-body h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.6px;
  line-height: 1.2;
  margin-top: 44px;
  margin-bottom: -8px;
}
.art-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
  margin-top: 32px;
  margin-bottom: -8px;
}
.art-body strong { color: var(--text); font-weight: 700; }
.art-body a { color: var(--g); text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.art-body a:hover { color: #527820; }
.art-body ul, .art-body ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.art-body ul { list-style: none; padding-left: 0; }
.art-body ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.art-body ul li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-mid);
  flex-shrink: 0;
  margin-top: 9px;
}
.art-body ol { list-style: decimal; }
.art-body ol li { padding-left: 4px; }
.art-body blockquote {
  border-left: 3px solid var(--g-mid);
  padding: 16px 20px;
  background: var(--g-lite);
  border-radius: 0 10px 10px 0;
  font-size: 15.5px;
  color: var(--sub);
  font-style: italic;
}
.art-body img {
  border-radius: 12px;
  width: 100%;
  height: auto;
}
.art-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

/* ── Article footer: back + share ── */
.art-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.art-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sub);
  transition: border-color .18s, background .18s, color .18s;
}
.art-back-btn:hover { border-color: var(--g); color: var(--g); background: var(--g-lite); }
.art-back-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.art-share { display: flex; align-items: center; gap: 8px; }
.art-share-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.art-share-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--bg); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s, border-color .18s;
  color: var(--sub);
}
.art-share-btn:hover { background: var(--g-lite); border-color: var(--g-tint); color: var(--g); }
.art-share-btn svg {
  width: 15px; height: 15px;
  fill: currentColor; /* Facebook icon */
  stroke: none;
}
.art-share-btn:last-of-type svg { fill: none; stroke: currentColor; stroke-width: 2; }
.art-copy-toast {
  font-size: 12px; font-weight: 600; color: var(--g);
  background: var(--g-lite); border: 1px solid var(--g-tint);
  border-radius: 6px; padding: 3px 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.art-copy-toast.visible { opacity: 1; }

/* ── Related posts section ── */
.art-related {
  padding: 60px 0 72px;
}
.art-related-header { margin-bottom: 32px; }
.art-related-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--text);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE  —  Mobilná a tabletová verzia
   Breakpoints:
     1024px  tablet landscape / malý laptop
      768px  tablet portrait / veľký mobil
      480px  malý mobil
═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   Transparentnosť: info-grid modifier class
───────────────────────────────────────────────────────── */
.info-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ─────────────────────────────────────────────────────────
   Hamburger nav button (skrytý na desktope)
───────────────────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 6px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .18s, background .18s;
}
.nav-burger:hover { border-color: var(--g); background: var(--g-lite); }
.nav-burger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay za otvoreným menu */
body.nav-overlay-active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 98;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET  ≤ 1024 px
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Topbar: skryť adresu, nechať len FB ── */
  .topbar-left { display: none; }

  /* ── Header: hamburger namiesto nav ── */
  .nav-burger { display: flex; }

  #mainNav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    width: min(300px, 80vw);
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0,0,0,.12);
    padding: 80px 24px 32px;
    gap: 4px;
    z-index: 99;
    overflow-y: auto;
    transition: none;
  }
  #mainNav.nav-open { display: flex; }

  #mainNav a {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sub);
    border-radius: 9px;
    transition: background .15s, color .15s;
  }
  #mainNav a:hover { background: var(--g-lite); color: var(--g); }
  #mainNav a.nav-cta {
    margin-top: 12px;
    background: var(--g);
    color: #fff;
    text-align: center;
    font-weight: 700;
  }
  #mainNav a.nav-cta:hover { background: #527820; }

  /* ── Hero (front-page) ── */
  .hero { padding: 56px 0 64px; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { display: none; }

  /* ── Page hero (podstránky) ── */
  .page-hero { padding: 48px 0 56px; }
  .page-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .page-hero .hero-visual { display: none; }

  /* ── Ref-hero override ── */
  .ref-hero .container { display: block; }

  /* ── Services ── */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Stats ── */
  .stats-inner, .ref-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .sbox:nth-child(2) { border-right: none; }
  .sbox:nth-child(3) { border-top: 1px solid rgba(255,255,255,.12); }

  /* ── About ── */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { display: none; }

  /* ── Mission ── */
  .mission-grid { grid-template-columns: 1fr; gap: 36px; }
  .mission-grid > div:first-child { display: none; } /* skryť placeholder obrázok */

  /* ── Values ── */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Boards ── */
  .boards-grid { grid-template-columns: 1fr; }

  /* ── Work grid ── */
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  /* ── Quicklinks ── */
  .quicklinks .container { grid-template-columns: repeat(2, 1fr); }
  .qlink:nth-child(2) { border-right: none; }
  .qlink:nth-child(3) { border-top: 1px solid var(--border); }

  /* ── Proj grid (referencie) ── */
  .proj-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Proj detail body ── */
  .proj-detail-body { grid-template-columns: 1fr; }
  .detail-info { order: 1; }
  .detail-gallery { order: 2; }

  /* ── Stadion: reservation grid ── */
  .res-grid { grid-template-columns: 1fr; }
  .booking-panel { position: static !important; }

  /* ── Stadion: info-grid, price-grid ── */
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }

  /* ── Transparentnosť: table-toolbar ── */
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-direction: column; align-items: stretch; }
  .search-input { width: 100% !important; }
  .year-select { width: 100% !important; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }

}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL  ≤ 768 px
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container padding ── */
  .container, .art-wrap { padding: 0 16px; }

  /* ── Topbar: skryť celý ── */
  .topbar { display: none; }

  /* ── Sections padding ── */
  section { padding: 56px 0; }
  .s-gray.s-gray { padding: 56px 0; }

  /* ── Hero (front-page) ── */
  .hero { padding: 40px 0 48px; }
  .hero-title { letter-spacing: -1.5px; }
  .hero-desc { font-size: 15px; margin-bottom: 24px; }
  .hero-btns { flex-direction: column; gap: 10px; margin-bottom: 32px; }
  .hero-btns .btn-solid,
  .hero-btns .btn-ghost { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 14px 20px; }
  .hstat-sep { display: none; }

  /* ── Page hero ── */
  .page-hero { padding: 36px 0 44px; }
  .page-hero--narrow { padding: 36px 0 44px; }

  /* ── Ref-hero ── */
  .ref-hero { padding: 36px 0 44px; }
  .hero-stats-row { flex-wrap: wrap; gap: 14px; }

  /* ── Section headings ── */
  .s-header { margin-bottom: 32px; }
  .s-title { letter-spacing: -.5px; }

  /* ── Services → 1 col ── */
  .svc-grid { grid-template-columns: 1fr; }

  /* ── Stats → 2 col, menší font ── */
  .stats-inner, .ref-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .sbox { padding: 28px 16px; }
  .sbox-n { font-size: 34px; letter-spacing: -1.5px; }

  /* ── Values → 1 col ── */
  .values-grid { grid-template-columns: 1fr; }

  /* ── Work grid → 1 col ── */
  .work-grid { grid-template-columns: 1fr; }

  /* ── Quicklinks → 2 col ── */
  .quicklinks .container { grid-template-columns: repeat(2, 1fr); }

  /* ── News rows: zúžiť date stĺpec ── */
  .news-row {
    grid-template-columns: 68px 1fr 36px;
    gap: 12px;
    padding: 14px 16px;
  }
  .news-row.featured {
    grid-template-columns: 68px 1fr 36px;
    padding: 16px;
  }
  .news-date-n { font-size: 26px; }
  .news-date-m { font-size: 11px; }
  .news-row h3 { font-size: 14px; }
  .news-row p  { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-arrow  { width: 36px; height: 36px; }

  /* ── Contact form fields: 1 col ── */
  .frow2 { grid-template-columns: 1fr; }

  /* ── Proj grid → 1 col ── */
  .proj-grid { grid-template-columns: 1fr !important; }

  /* ── Proj filter bar ── */
  .ref-filter-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .filter-tabs { flex-wrap: wrap; gap: 6px; }

  /* ── Carousel: 1 slide ── */
  .carousel-slide { width: 100% !important; }

  /* ── Referencie stats ── */
  .ref-stats-inner { grid-template-columns: repeat(2, 1fr); }

  /* ── Stadion: slots grid → 3 col ── */
  .slots-grid { grid-template-columns: repeat(3, 1fr); }
  .slots-grid--half { grid-template-columns: repeat(4, 1fr); }

  /* ── Stadion: info-grid → 1 col ── */
  .info-grid, .info-grid--3 { grid-template-columns: 1fr; }

  /* ── Stadion: booking form fields → 1 col ── */
  .fg-row { grid-template-columns: 1fr; }

  /* ── Transparentnosť: tabs zmenšiť ── */
  .tab-btn { padding: 10px 14px !important; font-size: 13px !important; }
  .tab-count { display: none; }

  /* ── Transparentnosť: file-card → 2-riadok ── */
  .file-card { flex-wrap: wrap; }
  .file-info { flex: 1 1 auto; min-width: 0; }
  .file-right {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    gap: 12px;
  }

  /* ── Detail meta → 1 col ── */
  .detail-meta { grid-template-columns: 1fr; }

  /* ── Footer: 1 col ── */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }

  /* ── CTA section ── */
  .cta-sec { padding: 56px 0; }
  .cta-sec h2 { margin-bottom: 12px; }

  /* ── Single article ── */
  .art-header { padding: 32px 0 24px; }
  .art-cover-wrap { padding: 0 0 32px; }
  .art-cover { aspect-ratio: 16/9; border-radius: 12px; }
  .art-body-wrap { padding: 36px 0 36px; }
  .art-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .art-share { width: 100%; }

  /* ── O spoločnosti: mgmt-card ── */
  .mgmt-card-main { padding: 28px 24px; }
  .mgmt-avatar { width: 68px; height: 68px; font-size: 22px; }

}

/* ═══════════════════════════════════════════════════════════════════════
   MALÝ MOBIL  ≤ 480 px
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Container ── */
  .container, .art-wrap { padding: 0 14px; }

  /* ── Quicklinks → 1 col ── */
  .quicklinks .container { grid-template-columns: 1fr; }
  .qlink:nth-child(3) { border-top: none; }

  /* ── Quicklinks border cleanup ── */
  .qlink { border-right: none !important; border-bottom: 1px solid var(--border); }
  .qlink:last-child { border-bottom: none; }

  /* ── Stats → 2 col, kompaktné ── */
  .sbox { padding: 22px 12px; }
  .sbox-n { font-size: 28px; }

  /* ── News row ── */
  .news-row { grid-template-columns: 56px 1fr 32px; gap: 10px; padding: 12px 14px; }
  .news-date-n { font-size: 22px; }

  /* ── Proj card ── */
  .proj-card { border-radius: 12px; }
  .proj-thumb { height: 120px; }

  /* ── Stadion: slots → 2 col ── */
  .slots-grid { grid-template-columns: repeat(2, 1fr); }
  .slots-grid--half { grid-template-columns: repeat(3, 1fr); }

  /* ── Calendar smaller ── */
  .cal-day { font-size: 11.5px; }
  .cal-dow span { font-size: 10px; }
  .cal-nav { padding: 0 0 10px; }

  /* ── Filter btns wrap ── */
  .filter-btn, .f-btn { font-size: 12px; padding: 6px 12px; }

  /* ── Breadcrumb skrátiť ── */
  .breadcrumb { font-size: 11.5px; flex-wrap: wrap; }

  /* ── Val-card ── */
  .val-card { padding: 24px 20px; }

  /* ── Work-card banner ── */
  .work-banner { height: 90px; }

  /* ── Boards: member-row ── */
  .member-row { padding: 12px 18px; }
  .member-av { width: 36px; height: 36px; font-size: 11px; }

  /* ── Art title ── */
  .art-title { letter-spacing: -1px; }
  .art-lead { font-size: 15px; }

  /* ── Footer ── */
  .footer-col ul { gap: 8px; }

}