/* Banská Bystrica – mesto v premene · design tokens
   Použitie: Elementor → Site Settings → Custom CSS (alebo child theme style.css).
   Global Colors/Fonts nastavte ručne podľa ELEMENTOR.md; tieto premenné slúžia pre vlastné triedy. */

/* Fonty načítava Elementor lokálne (Site Settings → Global Fonts, Load Google Fonts Locally). */

:root {
  /* základ */
  --bb-navy: #1E3A5F;          /* Primary */
  --bb-terra: #C96E4A;         /* Secondary */
  --bb-text: #22344F;          /* Text (telo článku) */
  --bb-copper: #C8834A;        /* Accent – Buďte pri tom */

  /* rubriky: plná farba / farba pre text */
  --bb-cat-premeny: #1E3A5F;   --bb-cat-premeny-text: #1E3A5F;
  --bb-cat-ako: #6A8FD1;       --bb-cat-ako-text: #3E63A8;
  --bb-cat-pohlady: #C96E4A;   --bb-cat-pohlady-text: #A85333;
  --bb-cat-ludia: #E0B04A;     --bb-cat-ludia-text: #8A6410;
  --bb-cat-historia: #6B5E73;  --bb-cat-historia-text: #6B5E73;
  --bb-cat-bpt: #C8834A;       --bb-cat-bpt-text: #8A4F22;

  /* plochy */
  --bb-bg: #F5F2EC;
  --bb-bg-alt: #EFEDE8;
  --bb-card: #FFFFFF;
  --bb-placeholder: #EAE6DD;
  --bb-copper-surface: #F8F1E8;
  --bb-copper-tag: #F1DFCB;
  --bb-copper-btn: #9A5A26;
  --bb-copper-btn-text: #7A4419;
  --bb-gold-on-dark: #E0B04A;

  /* text */
  --bb-text-muted: #3F5170;    /* perexy, sprievodné texty – kontrast 7,2:1 (AAA) */
  --bb-text-soft: #4F5B6A;     /* meta, popisky – kontrast 6,2:1 */
  --bb-on-dark: #F5F2EC;
  --bb-line: #D6D8D8;          /* rgba(30,58,95,.14) */
  --bb-line-strong: rgba(30,58,95,.22);

  /* písma */
  --bb-serif: 'Source Serif 4', Georgia, serif;
  --bb-sans: 'Archivo', system-ui, sans-serif;

  /* rozloženie */
  --bb-max: 1440px;
  --bb-pad: 56px;
  --bb-radius: 0;
  --bb-shadow-hover: 0 8px 20px rgba(30,58,95,.10);
  --bb-ease: .2s ease;
}
@media (max-width: 1024px) { :root { --bb-pad: 32px; } }
@media (max-width: 767px)  { :root { --bb-pad: 20px; } }

body { background: var(--bb-bg); color: var(--bb-text-muted); font-family: var(--bb-sans); }
a { color: var(--bb-navy); text-decoration: none; transition: color var(--bb-ease); }
a:hover { color: var(--bb-terra); }

/* ---------- tlačidlá ---------- */
.bb-btn, .bb-btn-outline, .bb-btn-copper {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  border-radius: 0; transition: all var(--bb-ease); cursor: pointer; text-decoration: none;
}
.bb-btn { padding: 16px 34px; background: var(--bb-navy); color: var(--bb-on-dark); font: 500 15.5px/1 var(--bb-sans); border: 0; }
.bb-btn:hover { background: var(--bb-terra); color: #fff; }

.bb-btn-outline { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--bb-navy); color: var(--bb-navy); background: transparent; font: 600 14px/1 var(--bb-sans); }
.bb-btn-outline:hover { background: var(--bb-navy); color: #fff; }

.bb-btn-copper { min-height: 48px; padding: 0 22px; border: 2px solid var(--bb-copper-btn); background: #fff; color: var(--bb-copper-btn-text); font: 700 14.5px/1 var(--bb-sans); }
.bb-btn-copper:hover { background: var(--bb-copper-btn); color: #fff; box-shadow: 0 6px 16px rgba(154,90,38,.28); transform: translateY(-1px); }

.bb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(30,58,95,.22); color: var(--bb-navy); transition: all var(--bb-ease); }
.bb-icon-btn:hover { background: var(--bb-navy); color: var(--bb-on-dark); }
.bb-footer .bb-icon-btn { border-color: rgba(245,242,236,.28); color: var(--bb-on-dark); }
.bb-footer .bb-icon-btn:hover { background: var(--bb-on-dark); color: var(--bb-navy); }

/* ---------- typografické prvky ---------- */
.bb-eyebrow { display: flex; align-items: center; gap: 10px; font: 600 11.5px/1 var(--bb-sans); letter-spacing: .15em; text-transform: uppercase; color: #A85333; }
.bb-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--bb-terra); }
.bb-meta { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.bb-meta__cat { font: 600 11px/1 var(--bb-sans); letter-spacing: .12em; text-transform: uppercase; }
.bb-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(30,58,95,.35); }
.bb-meta__date { font: 400 11.5px/1 var(--bb-sans); color: var(--bb-text-soft); }

/* farba rubriky – trieda podľa slug kategórie */
.cat-premeny-mesta     { --cat: var(--bb-cat-premeny);  --cat-text: var(--bb-cat-premeny-text); }
.cat-ako-funguje-mesto { --cat: var(--bb-cat-ako);      --cat-text: var(--bb-cat-ako-text); }
.cat-pohlady-a-komentare { --cat: var(--bb-cat-pohlady); --cat-text: var(--bb-cat-pohlady-text); }
.cat-ludia-v-meste     { --cat: var(--bb-cat-ludia);    --cat-text: var(--bb-cat-ludia-text); }
.cat-historia-mesta    { --cat: var(--bb-cat-historia); --cat-text: var(--bb-cat-historia-text); }
.cat-budte-pri-tom     { --cat: var(--bb-cat-bpt);      --cat-text: var(--bb-cat-bpt-text); }
[class*="cat-"] .bb-meta__cat { color: var(--cat-text); }

/* ---------- štítky a filtre ---------- */
.bb-chip { display: inline-flex; align-items: center; flex: none; white-space: nowrap; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(30,58,95,.2); color: var(--bb-navy); font: 400 14px/1 var(--bb-sans); transition: border-color var(--bb-ease); }
.bb-chip:hover { border-color: var(--bb-navy); }
.bb-chip.is-active { background: var(--bb-navy); border-color: var(--bb-navy); color: var(--bb-on-dark); font-weight: 600; }
.bb-chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 48px;
  -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 72px),transparent); mask-image: linear-gradient(90deg,#000 calc(100% - 72px),transparent); }
.bb-chip-row::-webkit-scrollbar { display: none; }

.bb-type-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; background: var(--bb-copper-tag); border-left: 4px solid var(--bb-copper); font: 700 12px/1 var(--bb-sans); letter-spacing: .1em; text-transform: uppercase; color: #6E3A12; }
.bb-countdown { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--bb-navy); color: var(--bb-on-dark); font: 600 12.5px/1 var(--bb-sans); white-space: nowrap; }
.bb-datebox { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 104px; border: 1.5px solid var(--bb-copper); color: var(--bb-cat-bpt-text); }
.bb-datebox.is-next { background: var(--bb-copper-surface); }
.bb-datebox__day { font: 600 38px/1 var(--bb-serif); }
.bb-datebox__month, .bb-datebox__pre { font: 600 12px/1.5 var(--bb-sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- formuláre ---------- */
.bb-field { height: 52px; padding: 0 16px; border: 1px solid rgba(30,58,95,.25); border-radius: 0; background: #fff; font: 400 15.5px/1 var(--bb-sans); color: var(--bb-navy); }
.bb-field:focus { outline: none; border: 1.5px solid var(--bb-navy); box-shadow: 0 0 0 3px rgba(106,143,209,.25); }

/* ---------- náhradná ilustrácia článku bez fotky ---------- */
.bb-fallback { position: relative; aspect-ratio: 4/3; overflow: hidden; background: color-mix(in srgb, var(--cat) 12%, transparent); }
.bb-fallback img { position: absolute; left: -40%; bottom: 10%; width: 180%; height: auto; opacity: .6; }

/* ---------- panoráma v hero: odkrytie zľava doprava ---------- */
@keyframes bbWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bb-panorama { display: block; width: 100%; height: auto; animation: bbWipe 2.6s cubic-bezier(.35,0,.15,1) .3s both; }
@media (prefers-reduced-motion: reduce) { .bb-panorama { animation: none; } }