/*
 * Case study listings — /case-studies/ and the two division views.
 *
 * Small on purpose. The cards are the shared sheet's `.blog-card` components,
 * unchanged: a case study card and a blog card carry the same things (image,
 * kicker, headline, read-more) and inventing a second set would be two
 * components to keep in step for no visible difference. Only the two pieces the
 * blog has no equivalent of live here — the division switcher and the badges.
 */

/* ---------------------------------------------------------------------------
   Division switcher
   ---------------------------------------------------------------------------
   Styled as a sibling of `.keyart-filters` (the portfolio's filter row) rather
   than as a sub-nav, because it does the same job: narrowing a set that is
   already on screen. It is real links, not buttons — each view is a real URL
   that can be shared, bookmarked and linked from the sub-nav.
*/
.cs-divisions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.cs-division-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.cs-division-link:hover,
.cs-division-link:focus-visible {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.cs-division-link.active {
  background: var(--chartreuse);
  border-color: var(--chartreuse);
  color: var(--dark);
}

/* The count is a fact about the tab, not a second label — it should read as
   quieter than the name at every state, including the active one. */
.cs-division-count {
  font-size: 0.6875rem;
  font-weight: 700;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Division badges on a card
   ---------------------------------------------------------------------------
   All view only. A case study linked from both a key_art piece and a
   brand_campaign genuinely carries two, and seeing that is the point — it is
   the only place the overlap is visible.
*/
.cs-card-divisions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.cs-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cs-badge--entertainment {
  background: rgba(219, 225, 32, 0.16);
  color: var(--chartreuse);
}

/*
 * Brands reads white-on-transparent rather than a second colour. The palette
 * has one accent and spending it on a category label would put chartreuse in
 * competition with the strip, the CTA and the section label — all of which mean
 * something more than "this is filed under Brands".
 */
.cs-badge--brands {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   "Featured in" — the work a case study describes, on the single template
   ---------------------------------------------------------------------------
   Its own grid rather than `.accordion-gallery--stack`, because that class and
   its rules live in entertainment.css, which this page does not load. Reusing
   the class name would have looked right in the markup and rendered as an
   unstyled column of full-width images.

   Usually one or two tiles, so a fixed column count would strand them at a
   quarter width. auto-fill with a sensible minimum lets one tile sit at a
   readable size and six wrap into rows.
*/
.cs-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.cs-work-grid .keyart-item {
  aspect-ratio: 2 / 3;
  border-radius: 0;
}

.cs-work-grid .keyart-item img,
.cs-work-grid .keyart-item video {
  width: 100%;
  height: 100%;
  /* `contain`, matching the portfolio. Same rule, same reason: never trim the
     artwork. See assets/css/portfolio.css. */
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .cs-divisions {
    margin-bottom: 1.75rem;
  }

  .cs-work-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}