/* =====================================================================
   OIW ecosystem grid (Motorola Solutions safety and security ecosystem)
   ---------------------------------------------------------------------
   Used on /enterprise/safety-security-ecosystem.htm with js/oiw-ecosystem.js.
   Intro and CTA band come from section 4 of oiw-styles.css.
   Colours come from the --oiw-* variables (set per site in custom.css).

   Markup:
   <div class="oiw-eco-filter" role="group" aria-label="Filter technologies">
     <button type="button" data-filter="all" aria-pressed="true">All</button>
     <button type="button" data-filter="radios" aria-pressed="false">Radios</button>
     <span class="oiw-eco-count" aria-live="polite"></span>
   </div>
   <div class="oiw-eco-grid">
     <a class="oiw-eco-card" href="/page.htm" data-group="radios">
       <span class="oiw-eco-image"><img src="/images/ecosystem/x.webp" alt=""></span>
       <span class="oiw-eco-body">
         <span class="oiw-eco-label">Radios &amp; push-to-talk</span>
         <strong class="oiw-eco-title">Title</strong>
         <span class="oiw-eco-desc">One line.</span>
       </span>
     </a>
   </div>
   Button counts are added by the script. Without the script every card shows.
   ===================================================================== */

.oiw-eco-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 8px 0 28px; padding: 16px 0;
  border-top: 1px solid var(--oiw-border, #dce2e8);
  border-bottom: 1px solid var(--oiw-border, #dce2e8);
}
.oiw-eco-filter button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 16px;
  font-family: inherit; font-size: 14px; line-height: 1.2;
  color: var(--oiw-text, #17283e); background: #fff;
  border: 1px solid #c7ced6; border-radius: 0; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.oiw-eco-filter button:hover { border-color: var(--oiw-text, #17283e); }
.oiw-eco-filter button:focus-visible { outline: 2px solid var(--oiw-accent, #244b8e); outline-offset: 2px; }
.oiw-eco-filter button[aria-pressed="true"] {
  color: #fff; background: var(--oiw-band-bg, #17283e); border-color: var(--oiw-band-bg, #17283e);
}
.oiw-eco-filter button .oiw-eco-num {
  min-width: 22px; padding: 2px 6px; font-size: 12px; font-weight: 700; text-align: center;
  background: var(--oiw-surface, #f4f6f8); color: var(--oiw-muted, #5c6877);
}
.oiw-eco-filter button[aria-pressed="true"] .oiw-eco-num { background: rgba(255,255,255,.18); color: #fff; }
.oiw-eco-count { margin-left: auto; font-size: 13px; color: var(--oiw-muted, #5c6877); }

.oiw-eco-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (min-width: 1200px) { .oiw-eco-grid { grid-template-columns: repeat(4, 1fr); } }

.oiw-eco-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--oiw-border, #dce2e8);
  color: var(--oiw-text, #17283e); text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.oiw-eco-card[hidden] { display: none; }
.oiw-eco-card:hover, .oiw-eco-card:focus-visible {
  color: var(--oiw-text, #17283e);
  border-color: var(--oiw-text, #17283e);
  box-shadow: 0 12px 28px rgba(35, 65, 84, .12);
}
.oiw-eco-card:focus-visible { outline: 2px solid var(--oiw-accent, #244b8e); outline-offset: 2px; }

.oiw-eco-image {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: 18px; box-sizing: border-box;
  background: var(--oiw-surface, #f4f6f8); overflow: hidden;
}
.oiw-eco-image img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  mix-blend-mode: multiply; transition: transform .3s;
}
.oiw-eco-card:hover .oiw-eco-image img { transform: scale(1.04); }

.oiw-eco-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.oiw-eco-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--oiw-label, #244b8e);
}
.oiw-eco-title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.oiw-eco-title::after { content: "\00a0\2197"; /* non-breaking space keeps the arrow with the last word */ color: var(--oiw-accent, #244b8e); font-weight: 400; }
.oiw-eco-desc { font-size: 14px; line-height: 1.6; color: var(--oiw-muted, #5c6877); }

.oiw-eco-empty { padding: 28px; border: 1px dashed var(--oiw-border, #dce2e8); color: var(--oiw-muted, #5c6877); }

/* includes.css styles main-content h2/p; keep the intro and band tidy */
main-content .oiw-eco-grid + .oiw-cta-band, .oiw-eco-grid + .oiw-cta-band { margin-top: 56px; }

@media (max-width: 600px) {
  .oiw-eco-count { margin-left: 0; width: 100%; }
  .oiw-eco-filter button { padding: 8px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .oiw-eco-card, .oiw-eco-image img { transition: none; }
  .oiw-eco-card:hover .oiw-eco-image img { transform: none; }
}

/* Homepage version: grey band, white cards. <section class="py-6 oiw-eco-section"> */
.oiw-eco-section { background: var(--oiw-surface, #f4f6f8); }
.oiw-eco-section .oiw-eco-card { background: #fff; }
.oiw-eco-section .oiw-eco-image { background: #eef1f4; }
.oiw-eco-section .oiw-eco-filter { margin-top: 0; }
/* Homepage: 2 rows of 6 on desktop, 3 across on tablets, 2 on phones */
.oiw-eco-section .oiw-eco-grid { gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .oiw-eco-section .oiw-eco-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .oiw-eco-section .oiw-eco-grid { grid-template-columns: repeat(6, 1fr); } }
.oiw-eco-section .oiw-eco-image { padding: 12px; }
.oiw-eco-section .oiw-eco-body { gap: 6px; padding: 14px 14px 16px; }
.oiw-eco-section .oiw-eco-label { font-size: 10px; letter-spacing: .8px; }
.oiw-eco-section .oiw-eco-title { font-size: 15px; }
.oiw-eco-section .oiw-eco-desc { font-size: 13px; line-height: 1.5; }