/* ============================================================
   SNEŽANA MARINKOVIĆ — PSIHOLOG | main.css
   Design system: Manrope (sans) + Newsreader (serif)
   Paleta: terracotta (#B5765C) + šalfija (#1E2A26)
   ============================================================ */

/* ── 0. RESET & BOX SIZING ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── 1. CSS VARIJABLE — DESIGN TOKENS ─────────────────────── */
:root {
  /* Boje — pozadina */
  --c-bg:          #F7F4EF;
  --c-bg-warm:     #EFEAE2;
  --c-bg-warmer:   #F2EDE5;
  --c-bg-dark:     #17211E;
  --c-bg-card:     #FFFFFF;
  --c-bg-muted:    #F0E1D8;

  /* Boje — tekst */
  --c-text-1:      #1E2A26;   /* primarni */
  --c-text-2:      #5C6862;   /* sekundarni */
  --c-text-3:      #8A9189;   /* muted */
  --c-text-dark:   #F2EDE5;   /* na tamnoj pozadini */
  --c-text-dark-2: #A3B0A8;   /* sekundarni na tamnoj */

  /* Boje — akcent (terracotta / za pojedince) */
  --c-accent:      #B5765C;
  --c-accent-dark: #9E5F46;
  --c-accent-deep: #8A4F35;
  --c-accent-bg:   #F0E1D8;
  --c-accent-mid:  #8A6250;

  /* Boje — zelena (za kompanije / šalfija) */
  --c-green:       #6FA491;
  --c-green-dark:  #3F6B5C;
  --c-green-light: #85B3A2;

  /* Boje — border */
  --c-border:      #E2DBD0;
  --c-border-card: #E9E2D8;
  --c-border-dark: #2A342F;

  /* Tipografija */
  --font-sans:   'Manrope', system-ui, -apple-system, sans-serif;
  --font-serif:  'Newsreader', Georgia, 'Times New Roman', serif;

  /* Razmaci */
  --section-pad-v:  clamp(64px, 8vw, 108px);
  --section-pad-h:  clamp(20px, 4vw, 48px);
  --container-max:  1240px;
  --card-radius:    4px;

  /* Tranzicije */
  --ease-spring:    cubic-bezier(0.22, 0.68, 0, 1);
  --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:       0.25s;
  --dur-mid:        0.4s;
  --dur-slow:       0.6s;
}

/* ── 2. BASE STILOVI ────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--c-accent-dark);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover { color: var(--c-text-1); }

p { text-wrap: pretty; }

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

/* ── 3. LAYOUT HELPER ───────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--section-pad-h);
  padding-right: var(--section-pad-h);
}

.section {
  padding-top: var(--section-pad-v);
  padding-bottom: var(--section-pad-v);
  padding-left: var(--section-pad-h);
  padding-right: var(--section-pad-h);
}
.section .container { padding-left: 0; padding-right: 0; }

/* ── 4. TIPOGRAFIJA ─────────────────────────────────────────── */

/* Label tag — UPPERCASE SMALL */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.label-tag::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--c-accent);
  flex-shrink: 0;
}
.label-tag.accent   { color: var(--c-accent-mid); }
.label-tag.green    { color: var(--c-green-light); }
.label-tag.no-line::before { display: none; }

/* Naslovi */
.heading-xxl {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.026em;
  color: var(--c-text-1);
}
.heading-xl {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-text-1);
}
.heading-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text-1);
}
.heading-md {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.016em;
  color: var(--c-text-1);
}
.heading-sm {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--c-text-1);
}

/* Na tamnoj pozadini */
.dark .heading-xxl,
.dark .heading-xl,
.dark .heading-lg,
.dark .heading-md { color: var(--c-text-dark); }

/* Body text */
.body-lead {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--c-text-1);
}
.body-base  { font-size: 15.5px; line-height: 1.78; color: var(--c-text-2); }
.body-sm    { font-size: 14.5px; line-height: 1.7;  color: var(--c-text-2); }
.body-xs    { font-size: 13px;   line-height: 1.6;  color: var(--c-text-3); }

/* Italic accent */
em.accent { font-style: italic; color: var(--c-accent-dark); }

/* ── 5. DUGMAD ──────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--c-text-1);
  color: var(--c-text-dark) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--c-accent-dark);
  transform: translateY(-1px);
  color: #fff !important;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: transparent;
  color: var(--c-text-dark) !important;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid rgba(242,237,229,0.35);
  border-radius: var(--card-radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: var(--c-green);
  background: rgba(111,164,145,0.12);
  color: #fff !important;
}

/* Tekstualni link sa linijom */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-1);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
  transition: border-color var(--dur-mid) ease, gap var(--dur-mid) ease;
}
.text-link:hover {
  border-color: var(--c-accent-dark);
  gap: 18px;
  color: var(--c-text-1);
}
.text-link .arrow { color: var(--c-accent-dark); font-size: 15px; }

/* ── 6. HEADER / NAVIGACIJA ─────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 78px;
  background: rgba(247,244,239,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #E2DBD0;
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(30,42,38,0.06);
}

/* Navigacija */
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: #4A574F;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav a:hover { color: #1E2A26; }

/* Usluge dropdown */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4A574F;
  padding: 6px 0;
  cursor: default;
  user-select: none;
  transition: color 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown__trigger { color: #1E2A26; }
.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -18px;
  padding-top: 14px;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown__menu { display: block; animation: sneza-dropdown 0.22s ease both; }
@keyframes sneza-dropdown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Mobilni hamburger — 3 linije → X animacija */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid #E2DBD0;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #1E2A26;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
/* Animacija: 3 linije → X */
.nav-toggle[aria-expanded="true"] { border-color: #B5765C; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobilni meni — počinje ISPOD header-a (78px), logo u header-u ostaje uvek vidljiv */
@keyframes om-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav {
  display: none;
  position: fixed;
  top: 78px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: #F7F4EF;
  flex-direction: column;
  border-top: 1px solid #E2DBD0;
  box-shadow: 0 8px 32px -8px rgba(30,42,38,0.14);
}
.mobile-nav.open {
  display: flex;
  animation: om-drop 0.28s cubic-bezier(0.22,0.68,0,1) both;
}
.mobile-nav a {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(28px, 7vw, 38px);
  color: #1E2A26;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid #E2DBD0;
}
.mobile-nav a:hover { color: #9E5F46; }
.mobile-nav__cta {
  display: block;
  text-align: center;
  background: #1E2A26;
  color: #F7F4EF !important;
  font-family: Manrope, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600;
  padding: 17px 24px;
  border-radius: 999px;
  border-bottom: none !important;
}
.mobile-nav__cta:hover { background: #9E5F46 !important; }
.mobile-nav__viber {
  display: block;
  text-align: center;
  background: transparent;
  color: #1E2A26 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid #C9C0B3 !important;
  border-bottom: 1px solid #C9C0B3 !important;
}

/* ── 7. FOOTER ──────────────────────────────────────────────── */

.site-footer {
  background: #17211E;
  color: #C9D2CC;
}

/* ── 8. HERO SEKCIJA ────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(52px, 6vw, 88px) var(--section-pad-h) clamp(36px, 4vw, 52px);
  text-align: center;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: -160px;
  right: -140px;
  width: 560px;
  height: 560px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(181,118,92,0.1), rgba(181,118,92,0) 68%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: var(--container-max); margin: 0 auto; }
.hero__kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent-mid);
}
.hero__kicker .line {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--c-accent);
}
.hero__title {
  margin: 24px auto 0;
  max-width: 900px;
}

/* ── 9. CARDS (Dual split — Pojedinci / Kompanije) ─────────── */

.split-cards {
  padding: 0 var(--section-pad-h) clamp(52px, 6vw, 88px);
}
.split-cards__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 64px);
  min-height: clamp(340px, 34vw, 420px);
  padding: clamp(30px, 3.4vw, 46px);
  border-radius: var(--card-radius);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-slow) ease;
}
.card:hover { transform: translateY(-5px); }
.card__circle {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  pointer-events: none;
}

/* Card — Bela (pojedinci) */
.card--light {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card);
}
.card--light:hover {
  box-shadow: 0 34px 60px -34px rgba(30,42,38,0.36);
  border-color: #D9C4B7;
}
.card--light .card__circle { border: 1px solid var(--c-bg-muted); }
.card--light .card__dot  { background: var(--c-accent); }
.card--light .card__type { color: var(--c-accent-dark); }
.card--light .card__title { color: var(--c-text-1); }
.card--light .card__desc  { color: var(--c-text-2); }
.card--light .card__link  { color: var(--c-text-1); }
.card--light .card__link .line { background: var(--c-accent); }

/* Card — Tamna (kompanije) */
.card--dark {
  background: var(--c-bg-dark);
  border: 1px solid var(--c-bg-dark);
}
.card--dark:hover { box-shadow: 0 34px 60px -34px rgba(23,33,30,0.6); }
.card--dark .card__circle { border: 1px solid var(--c-border-dark); }
.card--dark .card__dot   { background: var(--c-green); }
.card--dark .card__type  { color: var(--c-green-light); }
.card--dark .card__title { color: var(--c-text-dark); }
.card--dark .card__desc  { color: var(--c-text-dark-2); }
.card--dark .card__link  { color: var(--c-text-dark); }
.card--dark .card__link .line { background: var(--c-green); }

.card__top { position: relative; display: flex; align-items: center; gap: 11px; }
.card__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.card__type { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.card__bottom { position: relative; }
.card__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -0.026em; }
.card__desc  { display: block; margin-top: 16px; max-width: 400px; font-size: 15.5px; line-height: 1.7; }
.card__link  { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14px; font-weight: 600; }
.card__link .line { display: block; width: 30px; height: 1px; }

/* ── 10. SEKCIJA — Dobrodošlica (foto + tekst) ─────────────── */

.welcome {
  border-top: 1px solid var(--c-border);
}
.welcome__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.welcome__image {
  flex: 0 1 320px;
  min-width: 240px;
  order: 2;
}
.welcome__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--c-bg-warm);
  overflow: hidden;
}
.welcome__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--c-text-3);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}
.welcome__content {
  flex: 1 1 460px;
  min-width: 0;
  order: 1;
  max-width: 640px;
}

/* ── 11. INFO KARTICE (savetovanje vs terapija) ─────────────── */

.info-cards { background: var(--c-bg-warm); }
.info-grid {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.info-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-bg-card);
  border: 1px solid #E4DCD1;
  border-radius: var(--card-radius);
}
.info-card__type { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent-dark); }
.info-card__list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-card__item {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text-1);
}
.info-card__item::before {
  content: '';
  flex-shrink: 0;
  margin-top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--c-accent);
}
.info-card__cta {
  margin-top: auto;
  padding-top: 26px;
}

/* ── 12. BLOG KARTICE ───────────────────────────────────────── */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(36px, 4vw, 52px);
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) ease;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(30,42,38,0.18);
}
.blog-card__image {
  aspect-ratio: 16 / 10;
  background: var(--c-bg-warm);
  overflow: hidden;
  flex-shrink: 0;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) ease;
}
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__body { padding: clamp(22px, 2.5vw, 30px); display: flex; flex-direction: column; flex: 1; }
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: 12px;
}
.blog-card__meta .sep { color: var(--c-border); }
.blog-card__meta .time { color: var(--c-text-3); font-weight: 500; letter-spacing: 0.06em; text-transform: none; }
.blog-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  color: var(--c-text-1);
  margin-bottom: 10px;
}
.blog-card__excerpt { font-size: 14px; line-height: 1.7; color: var(--c-text-2); flex: 1; }
.blog-card__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent-dark);
}

/* ── 13. SINGLE BLOG POST ───────────────────────────────────── */

.single-hero {
  padding: clamp(48px, 6vw, 84px) var(--section-pad-h) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--c-border);
}
.single-hero__inner { max-width: 760px; margin: 0 auto; }
.single-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.single-hero__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}
.single-hero__time { font-size: 12px; color: var(--c-text-3); }

.post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--section-pad-h);
}
.post-content h2, .post-content h3, .post-content h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin-top: 44px;
  margin-bottom: 16px;
  color: var(--c-text-1);
  letter-spacing: -0.015em;
}
.post-content h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.post-content h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; }
.post-content p  { font-size: 17px; line-height: 1.85; color: var(--c-text-2); margin-bottom: 20px; }
.post-content p:first-child { font-family: var(--font-serif); font-size: 19px; line-height: 1.7; color: var(--c-text-1); }
.post-content ul, .post-content ol { margin: 20px 0 20px 24px; }
.post-content li { font-size: 16.5px; line-height: 1.8; color: var(--c-text-2); margin-bottom: 8px; }
.post-content blockquote {
  margin: 36px 0;
  padding: 24px 32px;
  background: var(--c-bg-warm);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
}
.post-content blockquote p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text-1);
  margin: 0;
}
.post-content a { color: var(--c-accent-dark); border-bottom: 1px solid var(--c-accent-bg); }
.post-content a:hover { color: var(--c-text-1); border-bottom-color: var(--c-accent); }
.post-content img { border-radius: var(--card-radius); margin: 32px auto; }

/* ── 14. O MENI PAGE ────────────────────────────────────────── */

.about-hero { }
.about-bio {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.about-image {
  position: sticky;
  top: 100px;
}
.about-photo {
  aspect-ratio: 4 / 5;
  background: var(--c-bg-warm);
  overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-content p { margin-top: 18px; }
.about-content p:first-of-type { margin-top: 0; }

.education-grid {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.education-item {
  background: var(--c-bg-card);
  padding: clamp(22px, 2.5vw, 30px);
}
.education-item__year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent-mid);
  margin-bottom: 8px;
}

/* ── 15. PSIHOTERAPIJA PAGE ─────────────────────────────────── */

.therapy-format {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}
.format-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card);
  border-radius: var(--card-radius);
  min-width: 150px;
}
.format-pill__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.format-pill__value {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--c-text-1);
}

.approach-grid {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.approach-card {
  padding: clamp(24px, 3vw, 36px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card);
  border-radius: var(--card-radius);
}
.approach-card__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 12px;
}

/* ── 16. RADIONICE PAGE ─────────────────────────────────────── */

.workshops-dark { background: var(--c-bg-dark); }

/* Radionice QA kartice */
.rad-qa-card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 36px);
  background: var(--c-bg-warm);
  border-radius: var(--card-radius);
  transition: transform 0.45s var(--ease-spring);
}
.rad-qa-card:hover { transform: translateY(-4px); }
.workshop-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 20px);
}
.workshop-card {
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--card-radius);
  transition: background var(--dur-mid) ease, border-color var(--dur-mid) ease;
}
.workshop-card:hover {
  background: rgba(111,164,145,0.08);
  border-color: rgba(111,164,145,0.3);
}
.workshop-card__num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-green);
  margin-bottom: 12px;
}
.workshop-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  color: var(--c-text-dark);
  margin-bottom: 10px;
}
.workshop-card__desc { font-size: 14px; line-height: 1.7; color: var(--c-text-dark-2); }

.stats-grid {
  margin-top: clamp(36px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--c-border-dark);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.stat-item {
  background: rgba(255,255,255,0.04);
  padding: clamp(22px, 3vw, 36px);
}
.stat-item__num {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1;
  color: var(--c-text-dark);
  letter-spacing: -0.02em;
}
.stat-item__label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-text-dark-2);
  line-height: 1.5;
}

/* ── 17. KONTAKT PAGE ───────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.contact-method {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(22px, 2.5vw, 30px);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border-card);
  border-radius: var(--card-radius);
}
.contact-method__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.contact-method__value {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--c-text-1);
}
.contact-method__note { font-size: 13px; color: var(--c-text-3); }

/* Forma */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-tabs { display: flex; gap: 0; background: var(--c-bg-warm); border-radius: 3px; padding: 4px; margin-bottom: 4px; }
.form-tab {
  flex: 1;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  color: var(--c-text-3);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.form-tab.active {
  background: var(--c-bg-card);
  color: var(--c-text-1);
  box-shadow: 0 1px 4px rgba(30,42,38,0.08);
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 16px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--c-text-1);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  outline: none;
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(181,118,92,0.12);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--c-text-3); line-height: 1.55; }
.form-check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--c-accent); }
.form-company-fields { display: contents; }
.form-status { font-size: 14px; padding: 12px 16px; border-radius: 3px; }
.form-status.success { background: rgba(63,107,92,0.1); color: var(--c-green-dark); border: 1px solid rgba(63,107,92,0.2); }
.form-status.error   { background: rgba(158,95,70,0.1);  color: var(--c-accent-dark); border: 1px solid rgba(158,95,70,0.2); }

/* ── 18. BLOG LISTING PAGE ──────────────────────────────────── */

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.blog-filter {
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-3);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  background: none;
  text-decoration: none;
}
.blog-filter:hover,
.blog-filter.active {
  border-color: var(--c-accent);
  color: var(--c-accent-dark);
  background: var(--c-accent-bg);
}

/* ── 19. CTA BANNER ─────────────────────────────────────────── */

.cta-banner { background: var(--c-bg-dark); }
.cta-banner__inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.cta-banner .label-tag { justify-content: center; }
.cta-banner .label-tag::before { display: none; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* ── 20. REVEAL ANIMACIJE ───────────────────────────────────── */

@keyframes sneza-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sneza-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-rise {
  animation: sneza-rise 0.85s var(--ease-spring) both;
}
.animate-fade {
  animation: sneza-fade 0.7s ease both;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s var(--ease-spring);
}
[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ── 21. DIVIDER SA LINIJOM ─────────────────────────────────── */

.divider-line {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  margin: 0;
}

/* ── 22. UTICAJ/STATS BAR (za radionice) ───────────────────── */

.impact-bar {
  background: var(--c-bg-warm);
  padding: clamp(36px, 4vw, 52px) var(--section-pad-h);
}
.impact-bar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 3vw, 40px);
  text-align: center;
}

/* ── 23. BREADCRUMBS ────────────────────────────────────────── */

.breadcrumbs {
  padding: 16px var(--section-pad-h);
  font-size: 12.5px;
  color: var(--c-text-3);
  max-width: var(--container-max);
  margin: 0 auto;
}
.breadcrumbs a { color: var(--c-text-3); }
.breadcrumbs a:hover { color: var(--c-accent-dark); }
.breadcrumbs span { margin: 0 4px; }

/* ── 24. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .about-bio { grid-template-columns: 1fr; }
  .about-image { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 680px) {
  .split-cards__grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .workshop-grid { grid-template-columns: 1fr; }
}

/* ── 25. HERO ANIMATIONS (om-* keyframes used by all page heroes) ── */

@keyframes om-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes om-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes om-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes om-open {
  from { opacity: 0; max-height: 0; overflow: hidden; }
  to   { opacity: 1; max-height: 600px; overflow: visible; }
}

/* ── 26. STYLE-HOVER JS FALLBACK ───────────────────────────────── */
/* style-hover attributes are processed by JS; no extra CSS needed  */

/* ── 27. UTILITY KLASE (pill dugmad, eyebrow, image cover) ─────── */

/* Pill dugmad — osnova */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  line-height: 1;
}
/* Tamno dugme (na svetloj pozadini) */
.btn--dark { background: #1E2A26; color: #F7F4EF; }
.btn--dark:hover { background: #9E5F46; transform: translateY(-2px); color: #F7F4EF; }
/* Outline dugme (na svetloj pozadini) */
.btn--outline { background: transparent; color: #1E2A26; border: 1px solid #C9C0B3; padding: 15px 28px; }
.btn--outline:hover { border-color: #9E5F46; transform: translateY(-2px); color: #1E2A26; }
/* Terracotta dugme */
.btn--warm { background: #8A4F35; color: #FBF3EE; }
.btn--warm:hover { background: #1E2A26; transform: translateY(-2px); color: #FBF3EE; }
/* Outline na terracotta pozadini */
.btn--warm-outline { background: transparent; color: #8A4F35; border: 1px solid #D3AE99; padding: 15px 28px; }
.btn--warm-outline:hover { border-color: #8A4F35; transform: translateY(-2px); color: #8A4F35; }
/* Krem dugme (na tamnoj pozadini) */
.btn--cream { background: #F2EDE5; color: #17211E; }
.btn--cream:hover { background: #E8B79B; transform: translateY(-2px); color: #17211E; }
/* Outline na tamnoj pozadini */
.btn--dark-outline { background: transparent; color: #C9D2CC; border: 1px solid #3A4741; padding: 15px 28px; }
.btn--dark-outline:hover { border-color: #C9D2CC; transform: translateY(-2px); color: #F2EDE5; }
/* Tamno dugme sa zelenim hover-om (radionice stranica) */
.btn--dark-forest { background: #1E2A26; color: #F7F4EF; }
.btn--dark-forest:hover { background: #3F6B5C; transform: translateY(-2px); color: #F7F4EF; }

/* Eyebrow labele */
.eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow--accent  { color: #8A6250; }
.eyebrow--muted   { color: #8A9189; }
.eyebrow--green   { color: #85B3A2; }
.eyebrow--dark    { color: #6E7B74; }
.eyebrow--forest  { color: #3F6B5C; }

/* Eyebrow sa crtom levo */
.eyebrow-row { display: flex; align-items: center; gap: 12px; }
.eyebrow-dash {
  display: block;
  flex-shrink: 0;
  height: 1px;
  background: #B5765C;
  transform-origin: left;
  animation: om-line 0.8s cubic-bezier(0.22,0.68,0,1) 0.1s both;
}
.eyebrow-dash--green { background: #6FA491; }

/* Image cover wrapper */
.img-cover { position: relative; width: 100%; background: #EFEAE2; overflow: hidden; }
.img-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 28. CONTACT FORM (new HTML structure from original design) ─── */
#sneza-contact-form .form-status,
#sneza-contact-form-home .form-status {
  display: none;
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}
#sneza-contact-form .form-status.success,
#sneza-contact-form-home .form-status.success {
  background: #DDE8E3;
  color: #1E2A26;
}
#sneza-contact-form .form-status.error,
#sneza-contact-form-home .form-status.error {
  background: #F9E5E0;
  color: #8A4F35;
}

/* ── 29. PATH CARDS — hero kartice na početnoj ──────────────── */
.path-card {
  transition: transform 0.5s cubic-bezier(0.22,0.68,0,1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.path-card:hover { transform: translateY(-5px); }
.path-card--light:hover { box-shadow: 0 34px 60px -34px rgba(30,42,38,0.36); border-color: #D9C4B7; }
.path-card--dark:hover  { box-shadow: 0 34px 60px -34px rgba(23,33,30,0.6); }

/* ── 30. MOBILNA RESPONSIVNOST — opšte ─────────────────────── */
@media (max-width: 640px) {
  /* Dobrodošlica — portret slika puna širina */
  .welcome-image-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;  /* slika ide PRE teksta na mobi */
  }

  /* Hero portrait — o-meni i terapija */
  .hero-portrait-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Kontakt forma — forma full width */
  #sneza-contact-form-home,
  #sneza-contact-form {
    padding: 24px 20px !important;
  }

  /* Dugmad toggle — full width na malim ekranima */
  [data-type] {
    padding: 13px 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  /* Kartice — padding smanjiti */
  .path-card {
    padding: 26px !important;
    min-height: 280px !important;
  }
}