/*
 * case-study.css
 * Intelisale — Studije slučaja
 * Učitava se SAMO na single-studije_slucaja stranicama.
 */

:root {
  --ics-brand:     #0A2F5A;
  --ics-brand-hv:  #0d3a70;
  --ics-cta:       #397BF9;
  --ics-cta-hv:    #2563eb;
  --ics-teal:      #00B4D8;
  --ics-teal-bg:   rgba(0, 180, 216, .08);
  --ics-h1:        #2c5282;
  --ics-h2:        #353642;
  --ics-body:      #79798c;
  --ics-white:     #ffffff;
  --ics-surface:   #f7f8fc;
  --ics-border:    #e2e6ef;
  --ics-f-head:    'Inter', sans-serif;
  --ics-f-ui:      'Urbanist', sans-serif;
  --ics-radius:    15px;
  --ics-radius-sm: 8px;
  --ics-shadow:    0 4px 18px rgba(10, 47, 90, .09);
  --ics-shadow-lg: 0 10px 36px rgba(10, 47, 90, .13);
}

/* Fix: WP theme section has overflow:hidden which breaks position:sticky on sidebar.
   Override only on case study pages via the body class. */
section.page-title-button-style,
section.page-title-button-style.ipad-top-space-margin,
section.big-section.pb-0,
.single-studije_slucaja main,
.single-studije_slucaja .page-title-button-style {
  overflow: visible !important;
}

/* Sakrij default hero i head sekciju — zamenjene su ICS layoutom */
.studije-slucaja-hero,
.studije-slucaja-head {
  display: none !important;
}

.single-studije_slucaja .entry-title,
.single-studije_slucaja h1.entry-title,
.single-studije_slucaja h2.entry-title {
  display: none !important;
}

.ics-wrap {
  font-family: var(--ics-f-ui) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--ics-body) !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 0 0 80px !important;
}

.ics-top-header {
  text-align: center !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}

.ics-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ics-teal) !important;
  margin-bottom: 16px !important;
  line-height: 1 !important;
}
.ics-eyebrow::before,
.ics-eyebrow::after {
  content: '' !important;
  display: block !important;
  width: 22px !important;
  height: 1.5px !important;
  background: var(--ics-teal) !important;
  flex-shrink: 0 !important;
}

.ics-wrap .ics-top-header .ics-title {
  display: block !important;
  font-family: var(--ics-f-head) !important;
  font-size: clamp(24px, 3.8vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  color: var(--ics-h1) !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.ics-metrics {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 0 44px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--ics-shadow-lg) !important;
}

.ics-metric {
  flex: 1 1 0% !important;
  background: var(--ics-brand) !important;
  padding: 28px 20px !important;
  text-align: center !important;
  position: relative !important;
  transition: background .22s;
}
.ics-metric + .ics-metric {
  border-left: 1px solid rgba(255, 255, 255, .10) !important;
}
.ics-metric::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--ics-teal) !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.ics-metric:hover::before { transform: scaleX(1); }
.ics-metric:hover { background: var(--ics-brand-hv) !important; }

.ics-metric__value {
  display: block !important;
  font-family: var(--ics-f-head) !important;
  font-size: clamp(30px, 4.5vw, 46px) !important;
  font-weight: 700 !important;
  color: var(--ics-teal) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  letter-spacing: -1px !important;
}
.ics-metric__label {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .62) !important;
}

.ics-sidebar {
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
}

.ics-layout {
  display: grid !important;
  grid-template-columns: 1fr 270px !important;
  gap: 48px !important;
  align-items: start !important;
  position: relative !important;
}

.ics-body {
  text-align: left !important;
}

.ics-body p {
  font-family: var(--ics-f-ui) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--ics-body) !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.ics-wrap .ics-body .ics-h2 {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--ics-h2) !important;
  letter-spacing: -0.5px !important;
  text-align: left !important;
  margin: 36px 0 14px !important;
  padding: 0 0 10px !important;
  border: none !important;
  border-bottom: 2px solid var(--ics-border) !important;
  background: transparent !important;
}

.ics-pullquote {
  margin: 30px 0 !important;
  padding: 20px 24px !important;
  border: none !important;
  border-left: 4px solid var(--ics-teal) !important;
  background: var(--ics-teal-bg) !important;
  border-radius: 0 var(--ics-radius-sm) var(--ics-radius-sm) 0 !important;
}
.ics-pullquote p {
  font-family: var(--ics-f-ui) !important;
  font-size: 1.2em !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--ics-brand) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.ics-pullquote cite {
  display: block !important;
  margin-top: 10px !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--ics-teal) !important;
}

.ics-sidebar,
.ics-layout > aside,
.ics-layout .ics-sidebar {
  position: sticky !important;
  top: 32px !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  will-change: transform !important;
  align-self: start !important;
}

.ics-infobox {
  background: var(--ics-white) !important;
  border: 1.5px solid var(--ics-border) !important;
  border-radius: var(--ics-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--ics-shadow) !important;
}
/* Logo row — universal, supports both image logo and letter avatar */
.ics-infobox__logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid var(--ics-border) !important;
  text-align: center !important;
}
.ics-logo-img {
  width: 100% !important;
  max-width: 180px !important;
  height: 48px !important;
  object-fit: contain !important;
}
.ics-logo-mark {
  width: 48px !important;
  height: 48px !important;
  background: var(--ics-brand) !important;
  border-radius: var(--ics-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ics-logo-mark span {
  font-family: var(--ics-f-head) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ics-teal) !important;
  line-height: 1 !important;
}
.ics-logo-name {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ics-h2) !important;
  text-align: center !important;
}
.ics-logo-role { display: none !important; }
.ics-logo-text { display: contents !important; }
.ics-infobox__hd {
  background: var(--ics-surface) !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--ics-border) !important;
}
.ics-infobox__hd-label {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ics-body) !important;
}
.ics-infobox__row {
  display: flex !important;
  flex-direction: column !important;
  padding: 11px 20px !important;
  border-bottom: 1px solid var(--ics-border) !important;
  background: transparent !important;
  transition: background .15s;
}
.ics-infobox__row:last-child { border-bottom: none !important; }
.ics-infobox__row:hover { background: var(--ics-surface) !important; }
.ics-infobox__key {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ics-teal) !important;
  margin-bottom: 2px !important;
}
.ics-infobox__val {
  display: block !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ics-h2) !important;
  line-height: 1.4 !important;
}

.ics-cta {
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 2px solid var(--ics-border) !important;
  text-align: center !important;
}
.ics-cta__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ics-body) !important;
  margin-bottom: 12px !important;
}
.ics-cta__label::before,
.ics-cta__label::after {
  content: '' !important;
  display: block !important;
  width: 18px !important;
  height: 1.5px !important;
  background: var(--ics-border) !important;
  flex-shrink: 0 !important;
}
.ics-wrap .ics-cta .ics-cta__heading {
  display: block !important;
  font-family: var(--ics-f-head) !important;
  font-size: clamp(20px, 2.8vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: var(--ics-h1) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.ics-cta__sub {
  font-family: var(--ics-f-ui) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ics-body) !important;
  max-width: 440px !important;
  margin: 0 auto 28px !important;
  line-height: 1.6 !important;
}
.ics-cta__actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.ics-btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: var(--ics-cta) !important;
  color: var(--ics-white) !important;
  border: 1.25px solid transparent !important;
  border-radius: var(--ics-radius) !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(57, 123, 249, .28) !important;
  transition: background .22s, transform .18s, box-shadow .22s;
}
.ics-btn-p:hover {
  background: var(--ics-cta-hv) !important;
  color: var(--ics-white) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
.ics-btn-s {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: transparent !important;
  color: var(--ics-brand) !important;
  border: 1.25px solid var(--ics-brand) !important;
  border-radius: var(--ics-radius) !important;
  font-family: var(--ics-f-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .22s, color .22s, transform .18s;
}
.ics-btn-s:hover {
  background: var(--ics-brand) !important;
  color: var(--ics-white) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

@media (max-width: 820px) {
  .ics-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ics-sidebar { order: -1 !important; }
  .ics-metrics { flex-direction: column !important; }
  .ics-metric + .ics-metric {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
  }
}

@media (max-width: 480px) {
  .ics-wrap { padding-bottom: 48px !important; }
  .ics-cta__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ics-btn-p, .ics-btn-s { justify-content: center !important; }
}