/* ============================================================
   LEGAL — Politika privatnosti & Uslovi korišćenja — v2
   Spirit of Youth · District Sensation
   ============================================================ */

/* ── Hero — tipografski, bez fotografije ── */
.legal-hero {
  background: var(--color-dark);
  padding: 160px 0 72px;
  position: relative;
  overflow: hidden;
}
.legal-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,205,221,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,205,221,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
}
.legal-hero::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,205,221,0.07) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none; z-index: 0;
}
/* Left accent line */
.legal-hero-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom,
    transparent,
    var(--color-accent) 25%,
    var(--color-accent) 75%,
    transparent
  );
  opacity: 0.4; z-index: 1;
}
.legal-hero-inner {
  position: relative; z-index: 1;
}
.legal-hero-inner .eyebrow { margin-bottom: var(--space-4); }
.legal-hero-inner h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--color-white);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-4);
}
.legal-hero-inner p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.4);
  max-width: 480px;
  line-height: 1.7;
  margin: 0;
}

/* ── Body ── */
.legal-body {
  background: var(--color-off-white);
}
.legal-inner {
  max-width: 800px;
  margin: 0 auto;
}

.legal-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-10);
  box-shadow: 0 2px 8px rgba(10,43,64,0.06);
  /* Accent linija na vrhu */
  position: relative;
  overflow: hidden;
}
.legal-content::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--color-accent), var(--color-mid));
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* Lead paragraf */
.legal-content > p:first-of-type {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-dark);
  font-weight: var(--weight-medium);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6) !important;
  border-bottom: 1px solid var(--color-border);
}

.legal-content h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-dark);
  letter-spacing: -0.015em;
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Accent dot ispred svakog h3 */
.legal-content h3::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
.legal-content h3:first-of-type {
  border-top: none;
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}

.legal-content p {
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text-body);
  margin-bottom: var(--space-4);
}
.legal-content p:last-of-type { margin-bottom: 0; }

.legal-content ul {
  margin: var(--space-3) 0 var(--space-5);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}
.legal-content ul li {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-body);
  padding-left: var(--space-4);
  position: relative;
}
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.7;
}

.legal-content b {
  color: var(--color-text-dark);
  font-weight: var(--weight-semi);
}

.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.legal-content a:hover { opacity: 0.7; }

.legal-updated {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .legal-hero { padding: 110px 0 56px; }
  .legal-content { padding: var(--space-6) var(--space-5); }
  .legal-content h3 { font-size: var(--text-base); }
}