/* ═══════════════════════════════════════════════════════════════
   onas.css — Štýly pre stránku O nás
   ───────────────────────────────────────────────────────────────
   Importuje sa len na onas.html, spolu s css/style.css
═══════════════════════════════════════════════════════════════ */

/* ── Page Hero ────────────────────────────────────────────── */
.page-hero {
  background:  linear-gradient(135deg, #0a3b66 0%, #0b5ed7 100%);
  padding-block: var(--space-lg);
  text-align:  center;
}

.page-hero--onas { padding-block: 36px; }
.page-hero-super {
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.6);
  margin-bottom:  8px;
}
.page-hero h1    { color: #fff; margin-bottom: var(--space-sm); }
.page-hero-sub   { color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto; }
.page-hero-sub > :first-child { margin-top: 0; }
.page-hero-sub > :last-child { margin-bottom: 0; }

/* ── Aktívny nav odkaz ────────────────────────────────────── */
.nav-active {
  color:       var(--clr-primary) !important;
  font-weight: 600 !important;
}

/* ── Intro sekcia — text + obrázok ───────────────────────── */
.onas-intro-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-xl);
  align-items:           center;
}

.section-eyebrow {
  display:        block;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--clr-primary);
  margin-bottom:  var(--space-sm);
}

.onas-intro-text h2 { margin-bottom: var(--space-sm); }
.onas-intro-text p  { color: var(--clr-muted); margin-bottom: var(--space-sm); }
.onas-intro-text .btn { margin-top: var(--space-sm); }

.onas-intro-img img {
  width:         100%;
  height:        420px;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  display:       block;
}

/* ── Hodnoty ──────────────────────────────────────────────── */
.onas-values {
  padding-top: 10px;
  background: var(--onas-values-bg, #eef4ff);
}

.onas-values-grid { grid-template-columns: repeat(3, 1fr); }

.onas-value-card {
  background:    var(--bg-card);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--transition), transform var(--transition);
  display:       flex;
  gap:           var(--space-sm);
  align-items:   center;
}
.onas-value-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-3px);
}

.onas-value-icon {
  width:           68px;
  height:          68px;
  border-radius:   var(--radius-sm);
  background:      rgba(11,94,215,0.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   0;
  flex:            0 0 68px;
  align-self:      center;
  border:          1px solid color-mix(in srgb, var(--clr-primary) 18%, transparent);
  line-height:     0;
  padding:         0;
  box-sizing:      border-box;
}
.onas-value-icon svg { display: block; width: 40px; height: 40px; max-width: none; margin: 0; flex: 0 0 40px; color: var(--clr-primary); }

.onas-value-content { min-width: 0; }
.onas-value-card h3 { margin-bottom: 8px; }
.onas-value-card p  { color: var(--clr-muted); font-size: 0.95rem; margin: 0; }

/* ── Štatistiky ───────────────────────────────────────────── */
.onas-stats { background: var(--clr-dark); }

.onas-stats-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-md);
  text-align:            center;
}

.onas-stat-item        { display: flex; flex-direction: column; gap: 6px; }
.onas-stat-item .stat-num {
  font-size:   clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color:       #fff;
  line-height: 1;
}
.onas-stat-item .stat-label { font-size: 0.88rem; color: rgba(255,255,255,0.55); }

/* ── Tím ──────────────────────────────────────────────────── */
.onas-team-grid { grid-template-columns: repeat(3, 1fr); }

.team-card {
  background:    var(--bg-card);
  border:        1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--transition), transform var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.team-photo img {
  width:      100%;
  height:     240px;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}
.team-card:hover .team-photo img { transform: scale(1.04); }

.team-info       { padding: var(--space-md); }
.team-info h3    { margin-bottom: 4px; }
.team-role       { font-size: 0.82rem; font-weight: 600; color: var(--clr-primary); margin-bottom: 8px; }
.team-bio        { font-size: 0.88rem; color: var(--clr-muted); margin-bottom: var(--space-sm); }

.team-social     { display: flex; gap: 10px; }
.team-social a   { color: var(--clr-muted); transition: color var(--transition); }
.team-social a:hover { color: var(--clr-primary); }

/* ── CTA lišta ────────────────────────────────────────────── */
.onas-cta-strip {
  background: linear-gradient(135deg, #eef4ff 0%, #f4f7fb 100%);
  padding-block: var(--space-lg);
}

.onas-cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  flex-wrap:       wrap;
}

.onas-cta-inner h2 { margin-bottom: 4px; }
.onas-cta-inner p  { color: var(--clr-muted); margin: 0; }
.onas-cta-desc { color: var(--clr-muted); }
.onas-cta-desc > :first-child { margin-top: 0; }
.onas-cta-desc > :last-child { margin-bottom: 0; }

/* ── Responzívnosť ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .onas-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .onas-team-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .onas-intro-inner   { grid-template-columns: 1fr; }
  .onas-intro-img img { height: 280px; }
  .onas-values-grid   { grid-template-columns: 1fr; }
  .onas-cta-inner     { flex-direction: column; text-align: center; }
}

@media (max-width: 540px) {
  .page-hero--onas { padding-block: 28px; }
  .onas-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .onas-team-grid  { grid-template-columns: 1fr; }
}