/* Projects page: loaded after styles.css */

.cases-head { display: grid; gap: 1rem; margin-block-end: 2rem; }
.cases-head h2 { margin: 0; }
.case-count { margin: 0; font-size: var(--step--1); min-height: 1.4em; }

/* ---------- Sector filter ---------- */
.case-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.case-filter[hidden] { display: none; }
.case-filter__btn {
  font: 500 0.92rem/1 var(--font-body); color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: var(--radius-pill);
  padding: 0.65rem 1rem; min-height: 44px; cursor: pointer;
  transition:
    background-color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}
.case-filter__btn:active { transform: scale(0.97); }
.case-filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .case-filter__btn:hover { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .case-filter__btn:active { transform: none; }
}
/* Phones: one horizontally scrolling row that bleeds to the screen edges and fades out on the
   side that has more chips (is-start / is-end are set by projects.js). The block padding keeps
   the focus ring inside the scroll box. */
@media (max-width: 759px) {
  .case-filter {
    --fade-l: 1.5rem; --fade-r: 2.5rem;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); margin-block: -4px;
    scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .case-filter.is-start { --fade-l: 0px; }
  .case-filter.is-end { --fade-r: 0px; }
  .case-filter::-webkit-scrollbar { display: none; }
  .case-filter::after { content: ""; flex: none; width: 1px; } /* keeps the end padding scrollable */
  .case-filter__btn { flex: none; scroll-snap-align: start; padding-inline: 0.9rem; font-size: 0.9rem; }
}

/* ---------- Project grid: compact tiles, unlike the Solutions rows ---------- */
.cases {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem;
}
@media (min-width: 760px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { border-block-start: 2px solid var(--ink); }
/* Phones: lighter rules between tiles; the list keeps one strong rule at the top */
@media (max-width: 759px) {
  .case { border-block-start-width: 1px; }
  .case:first-child { border-block-start-width: 2px; }
  /* after filtering: the first visible tile carries the strong rule */
  .case:not(.case:not([hidden]) ~ .case) { border-block-start-width: 2px; }
}
.case[hidden] { display: none; }
.case article { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; padding-block: 1.25rem 2.5rem; }

.case__where { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.6rem; font-size: var(--step--1); }
.case__sector { color: var(--cobalt-text); font-weight: 600; }
.case__country { color: var(--slate); padding-inline-start: 1rem; border-inline-start: 1px solid var(--line); }
.case__meta h3 { margin: 0; font-size: var(--step-2); max-width: 16em; }
.case__project { margin: 0.3rem 0 0; color: var(--slate); font-size: 0.97rem; }

.case__scope { margin: 0; color: var(--ink-2); max-width: 34em; }

.case__tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cases-foot { margin: 1rem 0 0; }

@media (max-width: 759px) {
  .case article { padding-block: 1rem 1.75rem; gap: 0.6rem; }
  .case__where { margin-block-end: 0.4rem; }
  .cases-head { margin-block-end: 1.25rem; gap: 0.75rem; }
}

/* ---------- Windows High Contrast: keep the selected filter distinct ---------- */
@media (forced-colors: active) {
  .case-filter__btn { border-color: ButtonText; }
  .case-filter__btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}