/* SourcingPromo — case studies: the archive (/cases/), one case topic and one project.

   Every class here is prefixed `case-` so it can never reach another page's markup, and every value
   comes from tokens.css: no raw colour, no fixed radius. The shared pieces are reused rather than
   restated — .section, .wrap, .stack, .cluster, .lede, .eyebrow, .btn, .card, .facts,
   .placeholder-media, .note, .small, .empty and the catalogue's .cat-pagination. Mobile first: one
   column, the two-column reading layout from 960px where the project actually has a sidebar. */

/* ---------- chip rows: the topic family and the chosen conditions ---------- */
.case-chips{display:block;min-width:0}
.case-chips--sub{margin-top:.15rem;padding-left:.85rem;border-left:2px solid var(--line)}
.case-chips__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.case-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .75rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--ink-2);font-size:var(--step--1);font-weight:560;
  line-height:1.3;text-decoration:none;
}
.case-chip:hover{border-color:var(--ink);color:var(--ink);background:var(--sand)}
.case-chip.is-on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}
.case-chip--sub{font-weight:520}
.case-chip__count{
  padding:0 .4rem;border-radius:var(--radius-pill);background:var(--sand-2);
  font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.case-chip.is-on .case-chip__count{background:var(--paper);color:var(--brand-dark)}

.case-chip:focus-visible,
.case-filter-link:focus-visible,
.case-filters__trigger:focus-visible,
.case-card__more:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}

/* ---------- the secondary conditions, inside the shared disclosure behaviour ----------
   The panel's height is animated by the behaviour runtime, so nothing here sets one. */
.case-filters{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.case-filters__trigger{align-self:flex-start;cursor:pointer}
.case-filters__trigger[aria-expanded="true"]{border-color:var(--ink);background:var(--sand)}
.case-filters__panel{min-width:0}
.case-filters__inner{
  display:grid;gap:1.15rem;margin-top:.35rem;padding:1rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
@media (min-width:720px){.case-filters__inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case-filter-group{min-width:0}
.case-filter-group__title{
  margin-bottom:.5rem;font-size:var(--step--1);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.case-filter-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.case-filter-link{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .8rem;
  padding:.45rem .6rem;border:1px solid transparent;border-radius:var(--radius-sm);
  font-size:.9375rem;color:var(--ink-2);text-decoration:none;
}
.case-filter-link:hover{border-color:var(--line);background:var(--sand);color:var(--ink)}
.case-filter-link.is-on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);font-weight:600}
.case-filter-link__name{min-width:0}
.case-filters__clear{margin:.2rem 0 0}

/* ---------- the result line ---------- */
.case-results{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.25rem}
.case-results__count{margin:0;font-weight:650}
.case-results__conditions{margin:0}
.case-results__clear{font-size:var(--step--1);text-decoration:underline;text-underline-offset:3px}

/* The list sits under the header block, which already carries its own spacing. */
.case-body{padding-top:0}
.case-intro{max-width:70ch;margin-top:.25rem}
.case-hero__topic .case-chip{margin-top:.15rem}

/* ---------- the card grid: 3 across, 2 on a tablet, 1 on a phone ---------- */
.case-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.case-card{min-width:0}
.case-card__media{aspect-ratio:16/10}
.case-card__img{width:100%;height:100%;object-fit:cover}
.case-card__placeholder{
  width:100%;height:100%;padding:.5rem;text-align:center;line-height:1.4;letter-spacing:.06em;
}
.case-card__body{gap:.5rem}
.case-card__chip{align-self:flex-start}
.case-card__notice{margin:0;font-weight:600;color:var(--warn)}
.case-card__lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.case-card__client{margin:0;letter-spacing:.02em}
.case-card__lines{margin:0;display:grid;gap:.35rem}
.case-card__line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem;align-items:baseline}
.case-card__line dt{margin:0;font-size:var(--step--1);color:var(--ink-3);white-space:nowrap}
.case-card__line dt::after{content:":"}
.case-card__line dd{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.case-card__foot{justify-content:flex-start}

/* ---------- pagination and the page's closing words ---------- */
.case-pagination{margin-top:clamp(1.5rem,3vw,2.5rem)}
.case-confidential{margin-top:1.25rem}
.case-back{margin-top:1.5rem}

/* ---------- the closing band, on the archive and on a project ---------- */
.case-band__title{max-width:32ch}
.case-band .lede{max-width:60ch}

/* ---------- one project ---------- */
.case-hero__topic{margin:0}
.case-hero__lede{max-width:66ch}
.case-hero__figure{margin:0;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.case-hero__media{
  aspect-ratio:16/10;overflow:hidden;background:var(--sand-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.case-hero__img{width:100%;height:100%;object-fit:cover}
.case-facts{max-width:46rem}

.case-single-section{padding-top:0}
.case-single{display:grid;gap:clamp(1.5rem,4vw,2.75rem)}
.case-single__main{min-width:0}
@media (min-width:960px){
  .case-single:has(.case-single__aside){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .case-single__aside{position:sticky;top:5.5rem;align-self:start}
}

.case-block{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.case-block h2{font-size:var(--step-2)}
.case-block__text{margin:0;max-width:70ch;line-height:1.65;color:var(--ink-2)}

.case-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;counter-reset:case-step}
.case-step{
  position:relative;padding-left:2.2rem;counter-increment:case-step;
  display:flex;flex-direction:column;gap:.4rem;min-width:0;
}
.case-step::before{
  content:counter(case-step);position:absolute;left:0;top:0;
  width:1.6rem;height:1.6rem;border-radius:var(--radius-pill);
  background:var(--brand-tint);color:var(--brand-dark);
  font-size:.75rem;font-weight:700;display:grid;place-items:center;
}
.case-step__title{font-size:var(--step-1)}
.case-step__text{margin:0;max-width:70ch;line-height:1.6;color:var(--ink-2)}
.case-lines{margin:0}

/* ---------- figures, evidence and the illustrative notice ----------
   The notice is a line of text, never a caption hidden behind an icon: an illustration must not read
   as a photograph of the completed project. */
.case-figure{margin:0;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.case-figure__img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
}
.case-figure__caption{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-3)}
/* The notice an illustration must carry: a visible line, read as a badge, never hidden in a caption. */
.case-figure__notice{
  display:inline-flex;align-self:flex-start;margin:0;padding:.3rem .6rem;
  border-radius:var(--radius-sm);background:var(--brand-tint);color:var(--brand-dark);
  font-size:var(--step--1);font-weight:600;line-height:1.4;
}
.case-evidence{
  list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.case-evidence__item{min-width:0}

/* ---------- the testimonial: quoted, with the attribution the record gives ---------- */
.case-quote{margin:0;padding-left:1rem;border-left:3px solid var(--brand)}
.case-quote__body{margin:0}
.case-quote__body p{margin:0;max-width:60ch;font-size:var(--step-1);line-height:1.55;color:var(--ink)}
.case-prose{max-width:var(--maxw-narrow)}

/* ---------- the sidebar panels ---------- */
.case-panel{
  display:flex;flex-direction:column;gap:.7rem;min-width:0;
  padding:1.1rem 1.2rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.case-panel--sand{background:var(--sand)}
.case-panel__title{font-size:var(--step-1)}
.case-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.case-links a{font-weight:560;text-decoration:none;border-bottom:1px solid var(--line-strong);align-self:flex-start}
.case-links a:hover{border-bottom-color:var(--brand)}
.case-panel__chips{gap:.4rem}

/* ---------- the last two projects, and the empty states ---------- */
.case-more__title{font-size:var(--step-2)}
.case-more__foot{margin-top:1.25rem}
.case-empty{display:flex;flex-direction:column;gap:.7rem;max-width:60ch;margin-inline:auto;text-align:center}
.case-empty p{margin:0}
.case-empty__actions{justify-content:center;margin-top:.4rem}