@charset "UTF-8";
/* ==========================================================================
   ERC — Edukativno razvojni centar
   Globalni dizajn sistem: svetla tema, cijan/plavi akcenti, Work Sans font.
   Stilovi za javni sadržaj (header/hero/misija/seminari/footer/service-card)
   žive ovde jer se taj HTML ubacuje preko [innerHTML] i ne može da koristi
   stilove sa nivoa Angular komponente.
   ========================================================================== */
:root {
  --erc-primary: #2563eb;
  --erc-primary-dark: #1d4ed8;
  --erc-primary-soft: #eaf1ff;
  --erc-accent: #06b6d4;
  --erc-accent-soft: #e5fbff;
  --erc-bg: #ffffff;
  --erc-bg-subtle: #f7f9fc;
  --erc-white: #ffffff;
  --erc-text: #0f172a;
  --erc-text-muted: #5b6577;
  --erc-border: #e4e9f1;
  --erc-danger: #dc2626;
  --erc-success: #16a34a;
  --erc-radius-sm: 10px;
  --erc-radius-md: 16px;
  --erc-radius-lg: 24px;
  --erc-radius-full: 9999px;
  --erc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --erc-shadow-md: 0 12px 32px -16px rgba(15, 23, 42, 0.22);
  --erc-shadow-lg: 0 24px 60px -24px rgba(37, 99, 235, 0.28);
  --erc-max-width: 1180px;
  --erc-font: 'Work Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

router-outlet + * {
  display: block;
}

body {
  margin: 0;
  background: var(--erc-bg-subtle);
  color: var(--erc-text);
  font-family: var(--erc-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.erc-page-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--erc-text-muted);
  font-size: 15px;
}

/* ---------- Buttons (used inside CMS HtmlContent blocks) ---------- */
.erc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--erc-radius-full);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.erc-btn-primary {
  background: linear-gradient(135deg, var(--erc-primary), var(--erc-accent));
  color: #fff;
  box-shadow: var(--erc-shadow-lg);
}
.erc-btn-primary:hover {
  transform: translateY(-1px);
}

.erc-btn-outline {
  background: transparent;
  border-color: #22c55e;
  color: #22c55e;
}
.erc-btn-outline:hover {
  background: rgba(34, 197, 94, 0.08);
}

.erc-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--erc-accent);
}

/* ---------- Topbar / navigation (block slug: header) ---------- */
/* The header block is injected into its own wrapper <div> by the Angular
   template ([innerHTML]), a div exactly as tall as the header itself. That
   leaves position: sticky with no room to stick (its containing block is
   the wrapper, not the page), so it scrolled away with the rest of the
   content. Collapsing the wrapper makes .erc-topbar a direct child of the
   full-height page component instead, which fixes it. */
div:has(> .erc-topbar) {
  display: contents;
}

.erc-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--erc-border);
}

.erc-topbar-inner {
  max-width: var(--erc-max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.erc-logo {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reserve room for the enlarged, absolutely positioned logo image below. */
  padding-left: 120px;
  text-decoration: none;
  color: var(--erc-text);
  font-weight: 800;
  font-size: 18px;
}
.erc-logo img {
  position: absolute;
  left: 0;
  /* A small fixed gap from the top of the bar (instead of centering)
     keeps the logo from being clipped by the viewport edge, while it
     still overflows generously past the bottom of the topbar. */
  top: -30px;
  height: 116px;
  width: 108px;
  object-fit: contain;
}
.erc-logo .erc-logo-text {
  font-size: 28px;
  letter-spacing: 0.08em;
}

.erc-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.erc-nav a {
  padding: 8px 16px;
  border-radius: var(--erc-radius-full);
  text-decoration: none;
  color: var(--erc-text);
  font-weight: 500;
  font-size: 14.5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.erc-nav a:hover {
  background: var(--erc-primary-soft);
  color: var(--erc-primary);
}

.erc-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.erc-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--erc-radius-full);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--erc-text-muted);
  border: 1px solid var(--erc-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.erc-nav-icon:hover {
  color: var(--erc-primary);
  border-color: var(--erc-primary);
}

.erc-nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--erc-border);
  color: var(--erc-text-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.erc-nav-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.erc-nav-social:hover {
  color: var(--erc-primary);
  border-color: var(--erc-primary);
  background: var(--erc-primary-soft);
}

/* ---------- Hero (block slug: hero) ---------- */
.erc-hero {
  max-width: var(--erc-max-width);
  margin: 0 auto;
  padding: 8px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 56px;
  align-items: center;
}

.erc-hero-media {
  border-radius: var(--erc-radius-lg);
  overflow: hidden;
  box-shadow: var(--erc-shadow-md);
  aspect-ratio: 4/5;
}
.erc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.erc-hero-content h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--erc-text);
}
.erc-hero-content p {
  margin: 0 0 28px;
  color: var(--erc-text-muted);
  font-size: 17px;
  max-width: 60ch;
}

/* ---------- Audience (block slug: audience) ---------- */
.erc-audience {
  max-width: var(--erc-max-width);
  margin: 0 auto;
  padding: 64px 24px 56px;
}

.erc-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.erc-audience-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 32px 28px;
  background: var(--erc-white);
  border: 1px solid var(--erc-border);
  border-radius: var(--erc-radius-lg);
  box-shadow: var(--erc-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.erc-audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--erc-shadow-md);
  border-color: var(--erc-primary);
}
.erc-audience-card h3 {
  margin: 16px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--erc-text);
}
.erc-audience-card p {
  margin: 0 0 20px;
  color: var(--erc-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.erc-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--erc-radius-full);
  background: linear-gradient(135deg, var(--erc-primary-soft), var(--erc-accent-soft));
  color: var(--erc-primary);
}
.erc-audience-icon svg {
  width: 26px;
  height: 26px;
}

.erc-audience-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--erc-primary);
}

@media (max-width: 860px) {
  .erc-audience-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Mission (block slug: misija) ---------- */
.erc-mission {
  max-width: var(--erc-max-width);
  margin: 24px auto 0;
  padding: 0 24px 64px;
}

.erc-mission-content {
  background: linear-gradient(135deg, var(--erc-primary-soft), var(--erc-accent-soft));
  border-radius: var(--erc-radius-lg);
  padding: 48px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.erc-mission-content h2 {
  margin: 0 0 16px;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--erc-text);
}
.erc-mission-content p {
  margin: 0 auto 16px;
  color: var(--erc-text-muted);
  font-size: 16px;
  max-width: 60ch;
}
.erc-mission-content .erc-btn {
  margin-top: 12px;
}

/* ---------- Seminars (block slug: seminari) ---------- */
.erc-seminars {
  max-width: var(--erc-max-width);
  margin: 0 auto;
  padding: 0 24px 64px;
  text-align: center;
}
.erc-seminars h2 {
  margin: 0 0 32px;
  font-size: clamp(22px, 3vw, 30px);
}

.erc-empty-state {
  border: 1.5px dashed var(--erc-border);
  border-radius: var(--erc-radius-lg);
  padding: 48px 24px;
  background: var(--erc-white);
}
.erc-empty-state p {
  margin: 0;
  color: var(--erc-text-muted);
  font-size: 15px;
}

/* ---------- Footer (block slug: footer) ---------- */
.erc-footer {
  border-top: 1px solid var(--erc-border);
  background: var(--erc-white);
  margin-top: 40px;
}

.erc-footer-inner {
  max-width: var(--erc-max-width);
  margin: 0 auto;
  padding: 48px 24px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.erc-footer-col h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--erc-text);
}
.erc-footer-col p {
  margin: 0 0 6px;
  color: var(--erc-text-muted);
  font-size: 14px;
}

.erc-footer-bottom {
  border-top: 1px solid var(--erc-border);
  padding: 20px 24px;
  text-align: center;
}
.erc-footer-bottom p {
  margin: 0;
  color: var(--erc-text-muted);
  font-size: 13px;
}

/* ---------- Generic content pages: Deca i mladi / Odrasli / O ERC-u ---------- */
.erc-page-content {
  max-width: 840px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.erc-service-card {
  background: var(--erc-white);
  border: 1px solid var(--erc-border);
  border-radius: var(--erc-radius-lg);
  padding: 40px;
  box-shadow: var(--erc-shadow-sm);
}
.erc-service-card h2 {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 800;
  color: var(--erc-text);
}
.erc-service-card h3 {
  margin: 28px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--erc-primary);
}
.erc-service-card p {
  margin: 0 0 16px;
  color: var(--erc-text-muted);
  font-size: 16px;
  line-height: 1.75;
}
.erc-service-card ul,
.erc-service-card ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--erc-text-muted);
  font-size: 16px;
  line-height: 1.75;
}
.erc-service-card ul li,
.erc-service-card ol li {
  margin-bottom: 6px;
}
.erc-service-card ul li::marker,
.erc-service-card ol li::marker {
  color: var(--erc-accent);
  font-weight: 700;
}
.erc-service-card blockquote {
  margin: 0 0 20px;
  padding: 18px 24px;
  border-left: 4px solid var(--erc-accent);
  background: var(--erc-accent-soft);
  border-radius: 0 var(--erc-radius-sm) var(--erc-radius-sm) 0;
  color: var(--erc-text);
  font-style: italic;
}

.erc-founder-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 40px;
  align-items: start;
}

.erc-founder-media img {
  border-radius: var(--erc-radius-md);
  box-shadow: var(--erc-shadow-sm);
}

.erc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.erc-tag-list li {
  background: var(--erc-primary-soft);
  color: var(--erc-primary);
  padding: 8px 18px;
  border-radius: var(--erc-radius-full);
  font-weight: 600;
  font-size: 14px;
}

.erc-tagline {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: var(--erc-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .erc-hero {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }
  .erc-hero-media {
    max-width: 320px;
    margin: 0 auto;
  }
  .erc-founder-card {
    grid-template-columns: 1fr;
  }
  .erc-founder-media img {
    max-width: 220px;
    margin: 0 auto;
  }
  .erc-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 680px) {
  .erc-topbar-inner {
    justify-content: center;
    text-align: center;
  }
  .erc-nav {
    justify-content: center;
    width: 100%;
    order: 3;
  }
  .erc-service-card {
    padding: 28px;
  }
}

/* ---------- Audience grid override: 2 boxa po redu, ista visina (Skole i vrtici) ---------- */
.erc-page-content .erc-audience-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.erc-page-content .erc-audience-card {
  height: 100%;
}

@media (max-width: 640px) {
  .erc-page-content .erc-audience-grid {
    grid-template-columns: 1fr;
  }
}