:root {
  /* Pas ostane enako visok kot pred uvedbo večjih slik. */
  --capability-strip-h: 88px;
}

.capability-strip {
  border-top-color: rgba(var(--accent-rgb), .32) !important;
  border-bottom-color: rgba(var(--accent-rgb), .22) !important;
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .045) !important;
}

.capability-strip a,
.capability-strip a:first-child {
  border-color: rgba(var(--accent-rgb), .20) !important;
}

/*
  Na namizju je pas fizično zaklenjen na 88 px. Večji slikovni motivi se
  prilegajo znotraj te višine in zato ne morejo več potiskati hero dela
  navzgor ali ustvariti vtisa razširjene noge.
*/
@media (min-width: 761px) {
  .capability-strip {
    height: var(--capability-strip-h) !important;
    min-height: var(--capability-strip-h) !important;
    max-height: var(--capability-strip-h) !important;
    flex: 0 0 var(--capability-strip-h) !important;
    overflow: hidden;
  }

  .capability-strip-inner {
    height: 100% !important;
    min-height: 0 !important;
  }

  .capability-strip a,
  .capability-strip a:first-child {
    height: 100% !important;
    min-height: 0 !important;
  }
}

.capability-strip .cap-image {
  display: grid;
  place-items: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  line-height: 1;
}

.capability-strip .cap-image img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  object-position: center;
  opacity: .98;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(.94)
    drop-shadow(0 0 9px rgba(var(--accent-rgb), .18))
    drop-shadow(0 0 18px rgba(var(--accent-rgb), .09)) !important;
  transition:
    filter .16s ease,
    opacity .16s ease,
    transform .16s ease;
}

.capability-strip a:hover .cap-image img,
.capability-strip a:focus-visible .cap-image img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(.98)
    brightness(1.025)
    drop-shadow(0 0 11px rgba(var(--accent-rgb), .28))
    drop-shadow(0 0 22px rgba(var(--accent-rgb), .13)) !important;
  transform: translateY(-1px) scale(1.035);
}

html[data-contrast="high"] .capability-strip .cap-image img {
  opacity: 1;
  filter:
    hue-rotate(var(--theme-hue-rotate))
    saturate(1.02)
    brightness(1.08)
    contrast(1.06)
    drop-shadow(0 0 12px rgba(var(--accent-rgb), .28)) !important;
}

/*
 * Ko JavaScript pripravi barvno matriko, z njo nadomestimo približni
 * hue-rotate. Svetlost in prosojnost ostaneta iz izvirnika, barvni ton pa je
 * natančno enak vrednosti --accent-rgb brez preostale modre ali cian barve.
 */
html[data-home-theme-filter="matrix"] .capability-strip .cap-image img {
  filter: url("#homeThemeColorize") !important;
}

html[data-home-theme-filter="matrix"] .capability-strip a:hover .cap-image img,
html[data-home-theme-filter="matrix"] .capability-strip a:focus-visible .cap-image img {
  filter: url("#homeThemeColorize") !important;
}

html[data-home-theme-filter="matrix"][data-contrast="high"] .capability-strip .cap-image img {
  filter: url("#homeThemeColorize") !important;
}

/*
 * Sij je namenoma na ovoju in ne v istem filter-nizu kot SVG-matrika.
 * Firefox zato nikoli ne zavrne matričnega obarvanja zaradi kombinacije filtrov.
 */
html[data-home-theme-filter="matrix"] .capability-strip .cap-image {
  filter:
    drop-shadow(0 0 9px rgba(var(--accent-rgb), .18))
    drop-shadow(0 0 18px rgba(var(--accent-rgb), .09));
  transition: filter .16s ease;
}

html[data-home-theme-filter="matrix"] .capability-strip a:hover .cap-image,
html[data-home-theme-filter="matrix"] .capability-strip a:focus-visible .cap-image {
  filter:
    drop-shadow(0 0 11px rgba(var(--accent-rgb), .28))
    drop-shadow(0 0 22px rgba(var(--accent-rgb), .13));
}

html[data-home-theme-filter="matrix"][data-contrast="high"] .capability-strip .cap-image {
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .28));
}

html[data-motion="reduced"] .capability-strip .cap-image img,
html[data-motion="reduced"] .capability-strip a:hover .cap-image img,
html[data-motion="reduced"] .capability-strip a:focus-visible .cap-image img {
  transition: none;
  transform: none;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .capability-strip-inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .capability-strip a {
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    font-size: 10px;
  }

  .capability-strip a:nth-child(3n) {
    border-right: 1px solid rgba(var(--accent-rgb), .20) !important;
  }

  .capability-strip .cap-image {
    width: 50px;
    min-width: 50px;
    height: 50px;
  }

  .capability-strip .cap-image img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  :root {
    --capability-strip-h: auto;
  }

  .capability-strip a {
    min-height: 86px;
    gap: 9px;
  }

  .capability-strip .cap-image {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  .capability-strip .cap-image img {
    width: 46px;
    height: 46px;
  }
}