/**
 * Thumbnail block — a portrait image with a linked title, optional caption and
 * optional button, arranged as a responsive grid or as a list with the text
 * beside the image.
 *
 * DOM: .c-thumbnail-block > .field--name-cpag-content > .field__item >
 * .c-thumbnail, so the grid/list container is the field wrapper and each
 * .c-thumbnail lays out its own image and body.
 */

/* Thumbnail item
   ========================================================================== */

.c-thumbnail__image-link {
  display: block;
}

.c-thumbnail__image {
  aspect-ratio: 3 / 4;
}

/* Guarantees every thumbnail is the same size even if a source image somehow
   escapes the 3:4 crop. */
.c-thumbnail__image img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.c-thumbnail__body > * + * {
  margin-top: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  margin-top: var(--space-s);
}

.c-thumbnail__image-link + .c-thumbnail__body,
.c-thumbnail__image + .c-thumbnail__body {
  margin-top: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  margin-top: var(--space-s);
}

.c-thumbnail__title {
  display: block;
  font-size: max(1.20rem, min(calc(1.10rem + 0.50vw), 1.56rem));
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.5;
  line-height: var(--leading-spacey);
}

/* Only a linked title is teal. An unlinked one deliberately sets no colour, so
   it inherits the same colour as every other heading on the page. */
a.c-thumbnail__title {
  color: #0F7697;
  color: var(--color-link);
}

.c-thumbnail__body .field--name-field-text {
  color: #201C40;
  color: var(--color-deep-purple);
  font-size: max(1.00rem, min(calc(0.8rem + 0.35vw), 1.25rem));
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.5;
  line-height: var(--leading-spacey);
}

/* Grid layout
   ========================================================================== */

.c-thumbnail-block--grid > .field--name-cpag-content {
  display: grid;
  gap: max(2.00rem, min(calc(1.86rem + 0.69vw), 2.50rem));
  grid-gap: max(2.00rem, min(calc(1.86rem + 0.69vw), 2.50rem));
  grid-gap: var(--space-l);
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {

.c-thumbnail-block--grid > .field--name-cpag-content {
    grid-template-columns: 1fr 1fr;
}
  }

/* Kept to a single class so it matches the specificity of the rules around it;
   the --cols-* class is only ever emitted on a grid layout. */
@media (min-width: 990px) {
.c-thumbnail-block--cols-3 > .field--name-cpag-content {
    grid-template-columns: repeat(3, 1fr);
}
  }

/* List layouts
   ========================================================================== */

.c-thumbnail-block--list-left > .field--name-cpag-content,
.c-thumbnail-block--list-right > .field--name-cpag-content {
  max-width: 47.5rem;
  max-width: var(--paragraph-max-width);
}

.c-thumbnail-block--list-left .field__item + .field__item,
.c-thumbnail-block--list-right .field__item + .field__item {
  border-top: 1px solid #D6D3CF;
  border-top: 1px solid var(--color-mid-grey);
  margin-top: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  margin-top: var(--space-s);
  padding-top: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  padding-top: var(--space-s);
}

/* Below the small breakpoint both list layouts stack, so the image sits above
   the text and the image column width does not apply. */
@media (min-width: 600px) {
  .c-thumbnail-block--list-left .c-thumbnail,
  .c-thumbnail-block--list-right .c-thumbnail {
    align-items: start;
    display: grid;
    gap: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
    grid-gap: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
    grid-gap: var(--space-s);
    gap: var(--space-s);
  }

  .c-thumbnail-block--list-left .c-thumbnail {
    grid-template-columns: 17.0625rem 1fr;
    grid-template-columns: var(--thumbnail-list-image-width) 1fr;
  }

  .c-thumbnail-block--list-right .c-thumbnail {
    grid-template-columns: 1fr 17.0625rem;
    grid-template-columns: 1fr var(--thumbnail-list-image-width);
  }

  .c-thumbnail-block--list-right .c-thumbnail > .c-thumbnail__image-link,
  .c-thumbnail-block--list-right .c-thumbnail > .c-thumbnail__image {
    order: 2;
  }

  .c-thumbnail-block--list-right .c-thumbnail > .c-thumbnail__body {
    order: 1;
  }

  /* The grid gap already separates the image from the body. */
  .c-thumbnail-block--list-left .c-thumbnail__image-link + .c-thumbnail__body,
  .c-thumbnail-block--list-left .c-thumbnail__image + .c-thumbnail__body,
  .c-thumbnail-block--list-right .c-thumbnail__image-link + .c-thumbnail__body,
  .c-thumbnail-block--list-right .c-thumbnail__image + .c-thumbnail__body {
    margin-top: 0;
  }
}