/*
 * Division tiles. Each <li> carries --sk-tile, set inline from the division's
 * brand slug, so the four tints come from the brand guide rather than from CSS
 * hardcoded to a page order.
 *
 * Layer order inside each link, bottom to top: grayscale photo, brand tint at
 * multiply, bottom scrim for text legibility, top accent bar, then content.
 */

.divisions {
  padding: 0;

  /*
	 * Hover behaviour is gated on a real pointer: on touch there is no hover to
	 * reveal the subtext, so it stays open and the tiles keep equal widths.
	 */

}

.divisions__grid {
  display: flex;
  flex-wrap: wrap;

  @media (min-width: 48rem) {
    flex-wrap: nowrap;
  }
}

.divisions__item {
  position: relative;
  flex: 1 1 50%;

  /* Contains the multiply blend so it cannot reach the page background. */
  isolation: isolate;
  min-height: clamp(17.5rem, 30vw, 26.25rem);
  background: var(--sk-tile);

  @media (min-width: 48rem) {
    flex: 1 1 0;
    transition: flex-grow 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

.divisions__link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 28px 30px 30px;
  overflow: hidden;
  border-left: 1px solid rgb(255 255 255 / 10%);
  color: var(--sk-white);
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.divisions__media {
  position: absolute;
  inset: 0;
  z-index: -1;

  /* Placeholder backdrop so tiles read correctly before photography lands.
		   Multiplied by the brand tint, it resolves to a slightly darkened tile. */

  background: #e8e8e8;
  filter: grayscale(1);
  transition: filter 450ms;
}

.divisions__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.divisions__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sk-tile);
  mix-blend-mode: multiply;
  opacity: 0.82;
  transition: opacity 450ms;
  pointer-events: none;
}

/*
	 * Bottom scrim for label legibility, holding a light veil across the upper
	 * two thirds. The veil is what separates the tile body from the accent bar:
	 * both derive from --sk-tile, so without it the bar is mathematically almost
	 * the same color as the wash beneath it and disappears.
	 */

.divisions__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      0deg,
      rgb(15 15 15 / 62%),
      rgb(15 15 15 / 18%) 55%
    );
  pointer-events: none;
}

/* Full-strength division color, above every wash layer. */
.divisions__bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 5px;
  background: var(--sk-tile);
  pointer-events: none;
}

.divisions__content {
  position: relative;
  z-index: 1;
}

.divisions__label {
  display: block;
  max-width: 240px;
  font-family: var(--sk-font-display);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.1;
}

/*
	 * Collapsed with grid-template-rows rather than height, because 0fr to 1fr
	 * animates reliably while height:auto does not.
	 */

.divisions__reveal {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

/*
	 * A 0fr track still takes an automatic minimum from its item, so the grid
	 * child must carry no margin or padding of its own. All spacing lives on the
	 * subtext inside it, where it gets clipped instead of propping the row open.
	 */

.divisions__reveal-inner {
  min-height: 0;
  overflow: hidden;
}

.divisions__subtext {
  display: block;
  max-width: 280px;
  padding-top: 12px;
  color: rgb(255 255 255 / 88%);
  font-size: 0.9063rem;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}
@media (hover: hover) {
  .divisions__reveal {
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 400ms,
        opacity 350ms;
  }

  .divisions__item:hover,
  .divisions__item:focus-within {
    .divisions__reveal {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .divisions__media {
      filter: grayscale(0);
    }

    .divisions__tint {
      opacity: 0.6;
    }
  }
  @media (min-width: 48rem) {
    .divisions__item:hover,
    .divisions__item:focus-within {
      flex-grow: 1.75;
    }
  }
}