/**
 * inclind:case-study-tile
 *
 * Ported verbatim from the former Canvas "Case Study Tile" code component so
 * the visual is identical. Colors use theme-token custom properties with the
 * original hex values as fallbacks, so the tile renders correctly even where
 * the tokens are not defined.
 */
.case-study-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 390px;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-charcoal-darkest-charcoal, #2a3342);
}

.case-study-tile__image-wrap {
  position: relative;
  width: 100%;
  height: 475px;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.08);
}

.case-study-tile__image,
.case-study-tile__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The looping tile video is decorative: no controls, no pointer target, and
   it holds still for anyone who has asked for reduced motion. */
.case-study-tile__video {
  pointer-events: none;
}

.case-study-tile__video::-webkit-media-controls {
  display: none !important;
}

.case-study-tile__logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Light-grey wash that fades the image back behind the logo on hover.
     Matches the homepage case study tiles (rgba(227,227,227,0.7)). */
  background-color: rgba(227, 227, 227, 0.7);
  transition: opacity 0.2s ease;
}

.case-study-tile:hover .case-study-tile__logo-wrap {
  opacity: 1;
}

/* Logo sizing matches the homepage case study tiles: 50% of the tile width,
   capped at 180px.

   The tint replaces the old `filter: grayscale(1)`: rather than flattening the
   logo to neutral grey (black point #000), it flattens it to a monochrome ramp
   whose black point is #3a4457, so every client logo reads in the same brand
   navy while white counter-shapes stay white. Alpha is untouched, so
   transparent PNG/SVG logos keep their transparency.

   The filter itself is defined once per page in components/layout/layout.twig
   (`#inclind-duotone-navy`) — a CSS filter function cannot do a two-point
   colour map on its own. Tune the tint colour and how dark it reads there;
   both knobs are documented alongside the def. If that def is ever missing the
   reference is simply ignored and the logo renders in its own colours, never
   blank. */
.case-study-tile__logo {
  width: 50%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: url('#inclind-duotone-navy');
}

.case-study-tile__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.case-study-tile__title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  font-size: var(--font-size-large, 21px);
  line-height: var(--font-line-height-large, 32px);
  color: #ffffff;
  word-break: break-word;
  transition: color 0.2s ease;
}

/* Title hover — primary-200 (#f4777b), same as the homepage tiles. */
.case-study-tile:hover .case-study-tile__title,
.case-study-tile:focus-visible .case-study-tile__title {
  color: var(--color-primary-200, #f4777b);
}

.case-study-tile__underline {
  width: 80px;
  height: 7px;
  background-color: var(--color-accents-red, #ed1c24);
}

@media (max-width: 640px) {
  .case-study-tile__image-wrap {
    height: 340px;
  }
}