/* === OneRight UI FULL STYLES (restored) — 2025-10-25 + Visual Polish 2025-10-26 === */

/* Google Fonts – písané písmo s diakritikou pre slogan */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap');

/* Base */
:root{--bg:#f7f9fc;--panel:#fff;--line:#e5e7eb;--text:#0f172a;--muted:#64748b;--accent:#2563eb;--accent-weak:#dbeafe}
*{box-sizing:border-box} html,body{height:100%}
body.or-body{margin:0;color:var(--text);background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* Topbar */
.or-topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.or-topbar .wrap{display:flex;align-items:center;gap:20px}
.nav{display:flex;gap:14px;align-items:center;margin-left:30px;flex-wrap:wrap}
.nav a{color:var(--text)}
.nav a.btn{background:var(--accent);color:#fff;padding:6px 12px;border-radius:10px}
.nav a.btn:hover{filter:brightness(.95);text-decoration:none}
.nav-spacer{flex:1}

/* === ČLENSTVO BADGE – OneRight (2025-10-27 v2: ikony + 3D efekt) === */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#aaa;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:
    0 2px 6px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.28);
  line-height:1.2;
  user-select:none;
  transition:transform .12s ease, box-shadow .15s ease, filter .2s ease;
}
/* umiestnenie v topbare */
.nav .badge{align-self:center}
.badge:hover{
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.32);
  filter: brightness(1.02);
}
.badge:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
/* ikonka pred textom (bez zmeny HTML) */
.badge::before{
  content: "•";
  font-size:14px;
  line-height:1;
}
/* farby + ikonky podľa typu členstva */
.badge.neplatiaci{
  background: linear-gradient(#b9bcc3, #9fa3aa);
  border-color: rgba(0,0,0,.12);
}
.badge.neplatiaci::before{ content:"👤"; }
.badge.platiaci{
  background: linear-gradient(#46d273, #2fae58);
  border-color: rgba(0,0,0,.10);
}
.badge.platiaci::before{ content:"✅"; }
.badge.zastupca_vz{
  background: linear-gradient(#2b8fe6, #1664c6);
  border-color: rgba(0,0,0,.12);
}
.badge.zastupca_vz::before{ content:"🏛️"; }

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:24px;
  padding:44px 16px 28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#f0f6ff 0%,#fff 100%);
  margin-top:18px;
  position:relative;
  overflow:hidden;
}
/* overlay pre lepší kontrast textu na fotke */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 75%);
  pointer-events:none;
}
.hero-left, .hero-right{ position:relative; z-index:1; }

.hero-left h1{
  margin:0 0 6px;
  font-size:3.4rem;
  line-height:1.1;
  /* písané písmo s podporou SK diakritiky */
  font-family: "Dancing Script", "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-weight:700;
  color: var(--text);
  letter-spacing:.4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08);
}
.hero-left .note{margin:0 0 16px;color:var(--muted); text-shadow:0 1px 0 rgba(0,0,0,.04);}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-primary,.btn-ghost,.btn-small{display:inline-block;padding:8px 14px;border-radius:10px;border:1px solid var(--accent)}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{background:var(--accent-weak);color:var(--accent)}
.btn-link{border:none;padding:0;background:none;color:var(--accent)}
.btn-small{font-size:.9rem}
.hero-right{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(229,231,235,.8);
  border-radius:12px;
  padding:14px;
  box-shadow:0 6px 24px rgba(15,23,42,.06);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
}
.summary-table{width:100%;border-collapse:separate;border-spacing:0 6px}
.summary-table td:first-child{color:var(--muted)}
.summary-table td:last-child{text-align:right}

/* Founders */
.founders{margin-top:36px}
.founders-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:20px}
.founder{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  text-align:center;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.founder:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.10); border-color:#d1d5db; }
.founder img{width:100%;max-width:150px;height:auto;margin:0 auto;display:block;border-radius:12px}
.f-name{margin-top:6px;font-weight:700}
.founders-mission{color:var(--muted)}

/* Projects */
.projects{margin-top:36px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.project-card{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--text);text-decoration:none;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 1px 0 rgba(0,0,0,.02)
}
.project-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.10);border-color:#d1d5db;text-decoration:none}
.project-card img{width:100%;height:160px;object-fit:contain;border-radius:10px}
.project-card h3{margin:8px 0 4px;font-weight:700}
.project-card .link{color:var(--accent)}

/* Tiles & cards */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.tile,.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.tile.small{padding:10px}
.manifest-cta{margin:16px auto;text-align:center}
.manifest-cta .btn-primary{padding:10px 18px;border-radius:12px;font-weight:600}
.card.center{max-width:860px;margin:22px auto;text-align:center}

/* Footer */
.or-footer{border-top:1px solid var(--line);background:var(--panel);margin-top:40px;padding:24px 16px;font-size:.95rem;color:var(--text)}
.footer-wrap{max-width:1100px;margin:0 auto;text-align:center}
.footer-top{margin-bottom:20px}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);font-weight:500}
.footer-logo-img{height:56px;width:auto;vertical-align:middle}
.footer-cols{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;text-align:left;margin-bottom:16px}
.footer-col{min-width:220px}
.footer-col h4{font-size:1.05rem;color:var(--accent);margin:0 0 8px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:6px 0}
.footer-col a{color:var(--text);text-decoration:none}
.footer-col a:hover{color:var(--accent);text-decoration:underline}
.cookies-note{font-size:.85rem;color:var(--muted);margin-top:16px}

/* Responsívne */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .founders-grid,.projects-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .founders-grid,.projects-grid,.tiles{grid-template-columns:1fr}
}

/* === Auth pages (Prihlásenie & Registrácia) === */
.page-title{ margin: 8px 0 14px; }

.auth-wrap{
  max-width: 880px;
  margin: 24px auto 12px;
}

.auth-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.auth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.auth-grid-3{
  grid-template-columns: 1.1fr 1.1fr 0.8fr;
}

.form-row{ display:block; }
.form-row label{
  display:block; font-weight:600; margin: 4px 0 6px;
}
.form-row input{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; outline:none;
}
.form-row input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.input-with-addon{ display:flex; gap:8px; align-items:center; }
.input-with-addon input{ flex:1; }
.btn-ghost{
  background: var(--accent-weak);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 12px;
  border-radius: 10px;
}

.actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.alert{
  border-radius: 10px; padding: 10px 12px; margin: 10px 0 14px;
  border:1px solid transparent;
}
.alert.error{ background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }
.alert.success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }

.auth-note{ color: var(--muted); margin-top:10px; }

@media (max-width: 900px){
  .auth-grid, .auth-grid-3{ grid-template-columns: 1fr; }
}

/* === DOPLNKY A OPRAVY 2025-10-26 === */

/* Zmenšenie a kľudnejšie logo v topbare */
.or-topbar .wrap { align-items:center; }
.or-topbar img[alt="OneRight"] { height:56px !important; width:auto; }

/* Skry logo len na úvodnej stránke, ak je potrebné */
body.home .or-topbar img[alt="OneRight"] { display:none !important; }

/* Tlačidlá – microinterakcie */
.btn-primary, .btn-ghost {
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 20px rgba(37,99,235,.10);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(37,99,235,.16); text-decoration:none; }
.btn-primary:active, .btn-ghost:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(37,99,235,.18); }
.btn-link { transition: color .15s ease; }
.btn-link:hover { color: #1d4ed8; text-decoration: underline; }

/* Hero – mobilné doladenie */
@media (max-width: 640px){
  .hero { padding: 30px 12px 20px; }
  .hero-left h1 { font-size: 2.2rem; line-height: 1.2; text-align:center; }
  .hero-left .note { text-align:center; }
  .actions-row { justify-content: center; }
}

/* Footer logo jednotné */
.footer-logo-img,
.or-footer img[alt="OneRight"] { height:56px !important; width:auto; }

/* === BOOST vizuálnych efektov — 26.10 === */
/* výraznejší overlay + skleneý panel + silnejšie tiene */
.hero::before{
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 80%);
}
.hero-right{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(209,213,219,.9) !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.18) !important;
  backdrop-filter: saturate(130%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(130%) blur(12px) !important;
}
.btn-primary,.btn-ghost{
  box-shadow: 0 2px 0 rgba(0,0,0,.02), 0 12px 30px rgba(37,99,235,.22) !important;
}
/* === FIX 1: hero nech používa IBA fotku z inline štýlu + náš overlay === */
.hero{ background: none !important; }  /* zrušíme podklad z .hero, ostane fotka + ::before overlay */

/* === FIX 2: na home úplne skryjeme CELÝ kontajner loga (nie len <img>) === */
body.home .or-topbar .logo { display: none !important; } /* tým pádom sa nezobrazí ani alt text „OneRight“ */

/* jemný spacing topbaru keď je logo skryté */
body.home .or-topbar .wrap { padding-top: 6px; padding-bottom: 6px; }

/* === OneRight user tiles – modernized look === */
.tiles {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.tiles .tile {
  flex: 1;
  min-width: 200px;
  background: linear-gradient(to bottom right, #f9fafc, #eef2ff);
  border: 1px solid #dbeafe;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  padding: 14px 16px;
  transition: all 0.25s ease;
  text-decoration: none;
  color: #111827;
  position: relative;
}

.tiles .tile strong {
  display: block;
  font-weight: 700;
  color: #1e40af;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.tiles .tile small {
  color: #475569;
  font-size: 0.85rem;
}

.tiles .tile:hover {
  transform: translateY(-2px);
  background: linear-gradient(to bottom right, #e0e7ff, #f0f9ff);
  border-color: #93c5fd;
  box-shadow: 0 6px 12px rgba(30,64,175,0.1);
}

.tiles .tile::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tiles .tile:hover::after {
  opacity: 1;
}
/* Zvýraznenie blogovej tile na home */
.tiles .tile:first-child{
  grid-column: span 2;
}

/* Na mobile nech sa správa normálne */
@media (max-width: 768px){
  .tiles{
    grid-template-columns:1fr;
  }
  .tiles .tile:first-child{
    grid-column:auto;
  }
}

/* === HOME BLOG TILE LAYOUT OVERRIDE (2025-11-16) === */
/* Na úvodnej (home) stránke používame grid 2:1, aby bol Blog širší než Členovia */
body.home .tiles{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:14px;
  margin-top:20px;
}

/* Prvá dlaždica (Blog) – nech je len v prvom stĺpci, šírku rieši 2:1 grid */
body.home .tiles .tile:first-child{
  grid-column:1 / 2 !important;
}

/* Druhá dlaždica (Členovia) – natiahnuť na výšku, aby sedela s Blogom */
body.home .tiles .tile.small{
  align-self:stretch;
}

/* Blog tile už má svoju šípku v HTML, tú automatickú vypneme */
body.home .tiles .tile:first-child::after{
  display:none;
}

/* Na mobile všetko pod seba */
@media (max-width:768px){
  body.home .tiles{
    grid-template-columns:1fr;
  }
}