/* Case tiles — image + white body cards on the shared .tiles grid. */

.case-tiles {
  /* Figma: 261px, and a set height rather than a ratio on purpose. It keeps the
     images the same size whatever the column count works out to, and it is what
     lets the band below know where half an image is. */
  --case-tile-media-height: 16.3125rem;

  position: relative;
  /* Keeps the band's z-index below scoped to this component. */
  isolation: isolate;
}

/* The dark band, when the row has "Half background" ticked.
   It starts halfway up the images and runs to the bottom of the section, so the
   cards sit astride the colour edge (Figma). The row class paints a hard 50% of
   its own height, which lands well below the images once there is a heading in
   the row — overrides.css switches that layer off when case tiles are present
   and hands the band to this component, which is the only thing here that knows
   how tall an image is.
   Bleeds to both viewport edges (body already clips the x axis, so the extra
   width never opens a scrollbar) and runs on through the row's bottom padding so
   the colour closes the section off. */
.half-background .case-tiles::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: calc(var(--case-tile-media-height) / 2)
    calc(var(--row-padding-block-end) * -1);
  inset-inline: calc(50% - 50vw);
  background-color: var(--color-primary);
}

.case-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-start-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-primary);
  text-decoration: none;
}

.case-tile:hover,
.case-tile:focus,
.case-tile:focus-visible {
  color: var(--color-primary);
}

.case-tile-media {
  display: block;
  overflow: hidden;
  block-size: var(--case-tile-media-height, 16.3125rem);
}

.case-tile-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  width: 100% !important;
  height: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: top center;
  margin-block-end: 0 !important;
}

.case-tile-image-placeholder {
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

.case-tile-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem; /* Figma 12px */
  padding: 2.5rem; /* Figma 40px */
}

.case-tile-title {
  margin-block: 0;
  color: inherit;
}

.case-tile-excerpt {
  display: block;
}

.case-tile-link {
  margin-block-start: auto;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.case-tile:hover .case-tile-link,
.case-tile:focus-visible .case-tile-link {
  text-decoration-thickness: 2px;
}