/* -------------------------------------------------------------------------
   Contact channels — Figma 2665:2133 (CENTRALA / PRODAJA / MARKETING)
   1440×429 grey band with three centered icon columns.
   ------------------------------------------------------------------------- */
:root {
  --vp-cc-bg: #e7e7e7;
  --vp-cc-text: #191919;
  --vp-cc-accent: #8f744c;
  --vp-cc-height: 429px;
  --vp-cc-pad-y: 61px;
  --vp-cc-pad-x: 80px;
  --vp-cc-icon: 60px;
  --vp-cc-icon-gap: 42px;
  --vp-cc-title-gap: 26px;
  --vp-cc-line-gap: 12px;
  --vp-cc-title-size: 20px;
  --vp-cc-title-lh: 1.210227;
  --vp-cc-line-size: 20px;
  --vp-cc-line-lh: 1.210227;
}

.vp-contact-channels {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--vp-cc-height);
  margin: 0;
  padding: var(--vp-cc-pad-y) var(--vp-cc-pad-x);
  background: var(--vp-cc-bg);
  color: var(--vp-cc-text);
  overflow-x: clip;
  box-sizing: border-box;
}

.vp-contact-channels__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 24px;
}

.vp-contact-channels__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  animation: vp-cc-fade-up 700ms var(--vp-menu-ease, ease) both;
  animation-delay: calc(60ms + (var(--vp-cc-i, 0) * 90ms));
}

.vp-contact-channels__item::marker {
  content: none;
  display: none;
}

.vp-contact-channels__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--vp-cc-icon);
  height: var(--vp-cc-icon);
  margin: 0 0 16px;
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

.vp-contact-channels__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-contact-channels__title {
  margin: 0 0 8px;
  padding: 0;
  font-family: "Catamaran", sans-serif;
  font-weight: 600;
  font-size: var(--vp-cc-title-size);
  line-height: var(--vp-cc-title-lh);
  letter-spacing: 0;
  color: var(--vp-cc-text);
}

.vp-contact-channels__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vp-cc-line-gap);
  width: 100%;
}

.vp-contact-channels__line,
.vp-contact-channels a.vp-contact-channels__line {
  margin: 0;
  font-family: "Catamaran", sans-serif;
  font-weight: 400;
  font-size: var(--vp-cc-line-size);
  line-height: var(--vp-cc-line-lh);
  letter-spacing: 0;
  color: var(--vp-cc-text);
  text-decoration: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.vp-contact-channels__line--link {
  transition: color 200ms var(--vp-menu-ease, ease);
}

.vp-contact-channels__line--link:hover,
.vp-contact-channels__line--link:focus-visible {
  color: var(--vp-cc-accent);
}

.vp-contact-channels__line--link:focus-visible {
  outline: 2px solid var(--vp-cc-accent);
  outline-offset: 3px;
}

@keyframes vp-cc-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1440px) {
  .vp-contact-channels {
    /*--vp-cc-height: calc(100vw * 429 / 1440);*/
    --vp-cc-pad-y: calc(100vw * 61 / 1440);
    --vp-cc-pad-x: calc(100vw * 80 / 1440);
    --vp-cc-icon: calc(100vw * 60 / 1440);
    --vp-cc-icon-gap: calc(100vw * 42 / 1440);
    --vp-cc-title-gap: calc(100vw * 26 / 1440);
    --vp-cc-line-gap: calc(100vw * 12 / 1440);
  }

  .vp-contact-channels__grid {
    max-width: calc(100vw * 1200 / 1440);
  }
}

@media (max-width: 1439px) and (min-width: 1025px) {
  .vp-contact-channels {
    --vp-cc-height: auto;
    --vp-cc-pad-y: clamp(48px, calc(100vw * 61 / 1440), 61px);
    --vp-cc-pad-x: clamp(40px, 5vw, 80px);
    --vp-cc-icon: 60px;
    --vp-cc-icon-gap: clamp(28px, calc(100vw * 42 / 1440), 42px);
    --vp-cc-title-gap: clamp(18px, calc(100vw * 26 / 1440), 26px);
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .vp-contact-channels {
    --vp-cc-height: auto;
    --vp-cc-pad-y: 48px;
    --vp-cc-pad-x: 32px;
    --vp-cc-icon: 60px;
    --vp-cc-icon-gap: 28px;
    --vp-cc-title-gap: 18px;
    --vp-cc-line-gap: 8px;
  }

  .vp-contact-channels__grid {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .vp-contact-channels {
    --vp-cc-height: auto;
    --vp-cc-pad-y: 48px;
    --vp-cc-pad-x: 28px;
    --vp-cc-icon: 60px;
    --vp-cc-icon-gap: 28px;
    --vp-cc-title-gap: 16px;
    --vp-cc-line-gap: 8px;
  }

  .vp-contact-channels__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 420px;
  }
}

@media (max-width: 430px) {
  .vp-contact-channels {
    --vp-cc-pad-y: 40px;
    --vp-cc-pad-x: 20px;
    --vp-cc-icon: 56px;
  }

  .vp-contact-channels__grid {
    gap: 36px;
  }
}

@media (max-width: 375px) {
  .vp-contact-channels {
    --vp-cc-pad-x: 16px;
    --vp-cc-icon: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-contact-channels__item {
    animation: none !important;
  }
}