.forces-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .forces-grid { grid-template-columns: repeat(var(--cols-tablet, 2), 1fr); }
}

@media (max-width: 640px) {
  .forces-grid { grid-template-columns: repeat(var(--cols-mobile, 1), 1fr); }
}

.forces-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: opacity .25s ease, transform .25s ease;
  cursor: pointer;
}

.forces-imgwrap{
  position: relative;
}

.forces-featured {
  width: 100%;
  height: 200px;
  object-fit: var(--forces-fit, cover);
}

.forces-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1);
  width: var(--forces-logo-size, auto);
  height: var(--forces-logo-size, auto);
  max-width: var(--forces-logo-size, 55%);
  max-height: var(--forces-logo-size, 55%);
  object-fit: contain;
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.forces-item:hover .forces-logo{
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.92);
}

.forces-item h3 { margin: 10px 0; }
.forces-item p { flex-grow: 1; }

.forces-hidden { opacity: 0; transform: translateY(6px); }

/* Button loader indicator (minimal, non-invasive) */
.forces-controls button {
  position: relative;
}

.forces-controls .forces-loader {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: forcesSpin .8s linear infinite;
}

.forces-controls button.is-loading .forces-loader {
  display: inline-block;
}

@keyframes forcesSpin {
  to { transform: rotate(360deg); }
}