:root {
  --segpol-icons-dark: #2f2a27;
  --segpol-icons-text: #3a3530;
  --segpol-icons-accent: #b27047;
  --segpol-icons-bg: #f8f4ee;
  --segpol-icons-border: rgba(73, 62, 51, .14);
  --segpol-icons-container: 1360px;
  --segpol-icons-transition: 720ms cubic-bezier(.22, .61, .36, 1);
}

/* Base */
.segpol-icons-strip {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  background:
    linear-gradient(180deg, #fffdfa 0%, var(--segpol-icons-bg) 100%);
}

.segpol-icons-strip__container {
  width: min(100% - 16px, var(--segpol-icons-container));
  margin-inline: auto;
}



/* Ważne przy Drupal field wrappers wewnątrz Splide */
.segpol-icons-strip .field,
.segpol-icons-strip .field__items {
  display: contents;
}

.segpol-icons-strip .splide__track {
  overflow: hidden;
}

.segpol-icons-strip .splide__list {
  align-items: stretch;
}

.segpol-icon-item {
  position: relative;
}

.segpol-icon-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  width: 1px;
  height: calc(100% - 36px);
  background: var(--segpol-icons-border);
  z-index: 2;
}

.segpol-icon-item__inner {
  min-height: 110px;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.segpol-icon-item__icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--segpol-icons-accent);
}

.segpol-icon-item__icon img,
.segpol-icon-item__icon svg {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}

.segpol-icon-item__icon .field,
.segpol-icon-item__icon .field__item,
.segpol-icon-item__icon .media,
.segpol-icon-item__icon picture {
  width: 100%;
  height: 100%;
  display: block;
}

.segpol-icon-item__icon .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.segpol-icon-item__heading {
  color: var(--segpol-icons-text);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  max-width: 140px;
}

/* Mobile — 1 lub 2 slajdy według JS */
@media (max-width: 640px) {
  .segpol-icon-item__inner {
    min-height: 104px;
    padding: 18px 18px;
    gap: 14px;
  }

  .segpol-icon-item__heading {
    max-width: 160px;
  }
}

/* Tablet */
@media (min-width: 641px) {
  .segpol-icon-item__inner {
    min-height: 108px;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .segpol-icon-item__inner {
    min-height: 112px;
    padding: 22px 16px;
  }

  .segpol-icon-item__heading {
    max-width: 155px;
  }
}

/* Compact variant */
.segpol-icons-strip--compact .segpol-icon-item__inner {
  min-height: 92px;
  padding: 16px 16px;
  gap: 12px;
}

.segpol-icons-strip--compact .segpol-icon-item__icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
}

.segpol-icons-strip--compact .segpol-icon-item__icon img,
.segpol-icons-strip--compact .segpol-icon-item__icon svg {
  width: 44px;
  height: 44px;
}

.segpol-icons-strip--compact .segpol-icon-item__heading {
  font-size: 11px;
  max-width: 120px;
}

/* Animations */
.segpol-icons-strip--animation-none {
  opacity: 1;
  transform: none;
}

.js-segpol-icons-strip-animate {
  will-change: opacity, transform;
}

.segpol-icons-strip--animation-fade-in {
  opacity: 0;
  transition: opacity var(--segpol-icons-transition);
}

.segpol-icons-strip--animation-fade-in.is-visible {
  opacity: 1;
}

.segpol-icons-strip--animation-slide-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--segpol-icons-transition),
    transform var(--segpol-icons-transition);
}

.segpol-icons-strip--animation-slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.segpol-icons-strip--animation-stagger-items .segpol-icon-item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 680ms cubic-bezier(.22, .61, .36, 1),
    transform 680ms cubic-bezier(.22, .61, .36, 1);
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item {
  opacity: 1;
  transform: translateY(0);
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(1) {
  transition-delay: 60ms;
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(2) {
  transition-delay: 120ms;
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(3) {
  transition-delay: 180ms;
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(4) {
  transition-delay: 240ms;
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(5) {
  transition-delay: 300ms;
}

.segpol-icons-strip--animation-stagger-items.is-visible .segpol-icon-item:nth-child(6) {
  transition-delay: 360ms;
}

.segpol-icons-strip--animation-line-reveal .segpol-icons-strip__slider {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 500ms ease,
    clip-path 900ms cubic-bezier(.22, .61, .36, 1);
}

.segpol-icons-strip--animation-line-reveal.is-visible .segpol-icons-strip__slider {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .js-segpol-icons-strip-animate,
  .segpol-icons-strip--animation-fade-in,
  .segpol-icons-strip--animation-slide-up,
  .segpol-icons-strip--animation-stagger-items .segpol-icon-item,
  .segpol-icons-strip--animation-line-reveal .segpol-icons-strip__slider {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}