/* =========================================================
   case-study-card — a whole-card link to a case study. A
   rounded media area (placeholder until a real hero image is
   dropped in) fills the height left under a title that clamps to
   two lines. Composed into the bento via the work-grid layout.
   No hover/active states — the card is a plain navigational link.
   ========================================================= */

.case-study-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-04);   /* 12px — media ↔ title */
  height: 100%;             /* fill the grid cell */
  padding: var(--spacing-06) var(--spacing-06) var(--spacing-05);   /* 24 24 16 */
  color: var(--color-font);
  text-decoration: none;
  background: var(--color-background);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-feature);   /* 40px */
}

/* Media area fills the space left under the title. Today a tokenised
   placeholder fill; a real hero image is dropped in later as
   .case-study-card__image inside this box. */
.case-study-card__media {
  flex: 1 1 0;
  min-height: 0;
  background: var(--color-border);
  border-radius: var(--border-radius-card);   /* 16px inner */
}

/* The real image — fills the media box (object-fit: cover), same inner radius,
   desaturated to 80% greyscale. Framing mirrors the reference site
   (beesley.framer.website): cover + object-position with no zoom by default. The
   focal point and an optional zoom are per-card: each instance can set
   --case-study-card-image-position and --case-study-card-image-scale inline
   (defaults: centred, un-zoomed). object-position and transform-origin share the
   one anchor so the focal point stays put if an instance does zoom. These are
   component-level literals — no token covers them (same precedent as the
   app-bar's blur(5px)). */
.case-study-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--case-study-card-image-position, center);
  transform: scale(var(--case-study-card-image-scale, 1));
  transform-origin: var(--case-study-card-image-position, center);
  filter: grayscale(0.8);
  border-radius: var(--border-radius-card);
}

/* Retro film-grain overlay — a fine SVG fractal-noise texture laid over the
   image (only when a real one is present), blended so it reads as grain on the
   photo rather than a flat speckle. baseFrequency sets the grain size; opacity
   keeps it subtle. Component-level literals, same precedent as the greyscale
   amount above. pointer-events:none so the card stays a plain link. */
.case-study-card__media:has(.case-study-card__image) {
  position: relative;
  overflow: hidden;   /* clip the zoomed image to the rounded media box */
}

.case-study-card__media:has(.case-study-card__image)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-card);   /* match the image's inner radius */
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Title: body-02 (16px / line-height-160 / regular weight).
   Clamps to two lines — it wraps to a 2nd line and truncates with an ellipsis
   from the 3rd, so it always fits and the media takes the rest. */
.case-study-card__title {
  margin: 0;
  font-family: var(--font-family-roboto);
  font-size: var(--type-scale-03);   /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-160);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Focus ring comes from the global :focus-visible rule (blue, token-built).
   Restate the 40px radius so the ring follows the card's corner rather than the
   global 5px default — see a11y/a11y.md §1. */
.case-study-card:focus-visible {
  border-radius: var(--border-radius-feature);
}