/* ============================================================
   CASE STUDY INDEX

   Only what is specific to the case study card and its grid.
   The card box, the covering link, the picture frame, the chip
   on the artwork, the archive shell, the toolbar, the category
   rail, the search field, the count line, the empty state and
   the pagination row all come from es-collection.css, which is
   the same file the blog index is built on. Nothing here
   restates any of them.

   Every colour is a semantic token, so the page follows the
   theme rather than pinning itself to the light one.
   ============================================================ */

/* -- Card ------------------------------------------------
   The frame is 3:2. Every published featured image on this
   post type is a full page store screenshot around 1920x1682,
   which is very nearly square, so some crop is unavoidable at
   any card shape. Anchoring it to the top is what decides
   which part survives: the header, the hero and the opening
   section, rather than the middle of a product grid with the
   header cut off above it.

   Set on the card and not on the frame, because
   `--es-media-ratio` is the frame's own hook in
   es-collection.css and a component is what sets it. */

.es-case { --es-media-ratio: 3 / 2; }

.es-case .es-media img { object-position: top; }

.es-case__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--gap-fluid-sm);
}

.es-case__title {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--font-extrabold);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-normal);
  transition: color var(--duration-normal) var(--ease-out);
}

/* Caps the card at a predictable height so one long client
   headline does not push its card taller than the two beside
   it. Three lines, the same clamp the blog card uses. */
.es-case__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.es-card:hover .es-case__title { color: var(--brand-600); }

/* The foot sits on the bottom edge of the card whatever the
   title above it did, so the hairline is on one line across a
   row rather than stepping with each headline. */
.es-case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* The client's own address, as text. A long host truncates
   rather than wrapping the row onto a second line and pushing
   the foot's hairline out of alignment with its neighbours.
   `min-width: 0` is what lets it: a flex item's automatic
   minimum size is its content, so without it the ellipsis
   never engages and the item simply overflows. */
.es-case__site {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Grid ------------------------------------------------
   The same track as the blog grid, and deliberately the same:
   the two indexes are one page twice over and a card that is
   408px wide on one of them should not be 380px on the other.
   It is written here rather than shared because two callers is
   not yet a pattern; a third collection is when this rule
   moves into es-collection.css.

   `min(100%, 300px)` rather than a bare 300px: below 300px of
   available width a bare floor makes the track wider than the
   grid and the row overflows the viewport. */

.es-cases__grid {
  display: grid;
  gap: var(--gap-fluid-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}