/* Approved PPT project categories, capabilities and product groups. */
.project-categories { display: grid; gap: 48px; }
.project-category { min-width: 0; }
.project-category h3 { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; margin-bottom: 18px; color: var(--accent); }
.work-section .project-category .project-grid { grid-template-rows: none; grid-auto-rows: 250px; aspect-ratio: auto; }
.work-section .project-category .project-grid:not(:has(.project-card:hover, .project-card.touched)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.work-section:not(.is-expanded) .project-category .project-card:nth-child(n) { display: block; }
.work-section .project-category .project-card { min-width: 0; }
.project-card--pending { cursor: default; background: #f2f1ef; }
.project-card--pending .card-img-wrap { display: grid; place-items: center; opacity: 1; }
.project-pending-label { font-size: 14px; color: #666; }
.project-card--pending .product-glimpse { opacity: 1; transform: none; }
.project-card--pending::after { content: none; }
.approved-capabilities .capability-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.approved-gallery-caption { font-size: 14px; line-height: 1.5; padding: 12px 0; color: var(--fg); }

.approved-product-grid .glimpse-name { white-space: normal; }
.project-card:focus-visible, .storage-system-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Optional local previews use one uninterrupted grid, with the existing card effects. */
.work-section .project-grid--compact { grid-template-rows: none; grid-auto-rows: 250px; aspect-ratio: auto; }
.work-section:not(.is-expanded) .project-grid--compact .project-card:nth-child(n) { display: block; }
.project-category-label {
  position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px;
  color: #e1261c; font: 700 16px/1.3 var(--font-sans); pointer-events: none;
}
/* Option 4 filters the same cards without changing their interaction hooks. */
.project-filter-row {
  display: flex; gap: 24px; overflow-x: auto; margin-bottom: 24px;
  padding-bottom: 4px; scrollbar-width: thin;
}
.project-filter-button {
  flex: 0 0 auto; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: #73736f; font: 500 14px/1.4 var(--font-sans); cursor: pointer;
}
.project-filter-button[aria-pressed="true"] { color: var(--fg); border-bottom-color: currentColor; }
.project-filter-button:hover { color: var(--fg); }
.project-filter-button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.project-filter-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.project-grid[data-work-layout="option4"] .project-card[hidden] { display: none !important; }
/* Option 3 attaches a vertical category strip to its first project only. */
.project-grid[data-work-layout="option3"] .project-card { min-width: 0; min-height: 0; overflow: visible; }
.project-grid[data-work-layout="option3"] .project-card-surface {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
}
.project-grid[data-work-layout="option3"] .project-category-label {
  display: flex; align-items: center; justify-content: center;
  top: -1px; bottom: -1px; left: -7px; right: auto; width: 34px;
  border-radius: 7px; background: #ff0000; color: #fff; font-size: 18px; line-height: 1.2;
}
.project-grid[data-work-layout="option3"] .project-category-label span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
.project-grid[data-work-layout="option3"] .project-card:has(.project-category-label) .product-glimpse {
  padding-left: 42px;
}
/* The existing hover grows a whole column; hide only that column's strips. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(5n+1):is(:hover, .touched)) .project-card:nth-child(5n+1) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(5n+2):is(:hover, .touched)) .project-card:nth-child(5n+2) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(5n+3):is(:hover, .touched)) .project-card:nth-child(5n+3) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(5n+4):is(:hover, .touched)) .project-card:nth-child(5n+4) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(5n+5):is(:hover, .touched)) .project-card:nth-child(5n+5) > .project-category-label {
    opacity: 0; visibility: hidden;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 769px) and (max-width: 1024px) {
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(3n+1):is(:hover, .touched)) .project-card:nth-child(3n+1) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(3n+2):is(:hover, .touched)) .project-card:nth-child(3n+2) > .project-category-label,
  .project-grid[data-work-layout="option3"]:has(.project-card:nth-child(3n+3):is(:hover, .touched)) .project-card:nth-child(3n+3) > .project-category-label {
    opacity: 0; visibility: hidden;
  }
}
@media (max-width: 768px) {
  .work-section .project-category .project-grid { grid-auto-rows: 190px; }
  .work-section .project-category .project-grid:not(:has(.project-card:hover, .project-card.touched)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-categories { gap: 32px; }
  .project-category h3 { font-size: 17px; }
  .approved-capabilities .capability-journey { display: block; }
  .approved-capabilities .capability-card:nth-child(2)::before { aspect-ratio: 853 / 405; background-position: center 68.8%; }
  .approved-capabilities .capability-card:nth-child(3)::before { aspect-ratio: 853 / 449; background-position: center 100%; }
  .approved-product-grid .glimpse-name { font-size: 12px; line-height: 1.4; }
  .work-section .project-grid--compact { grid-auto-rows: 190px; }
  .project-category-label { top: 14px; left: 14px; right: 14px; font-size: 12px; }
  .project-grid[data-work-layout="option3"] .project-category-label {
    left: -5px; width: 26px; font-size: 12px; border-radius: 6px;
  }
  .project-grid[data-work-layout="option3"] .project-card:has(.project-category-label) .product-glimpse {
    padding-left: 32px !important;
  }
}