/*
 * Styles the Content Grid block.
 */

.content-grid-block .row {
  --bs-gutter-x: 1.5em;
  --bs-gutter-y: 1.5em;
}

.content-grid-block .grid-column .grid-image-container {
  padding-bottom: 1em;
}

.content-grid-block .grid-text-container {
  padding-bottom: 1em;
}

.content-grid-block .grid-card .grid-text-container {
  padding: 1em 1em 0 1em;
}

.content-grid-block .grid-fill {
  display: flex;
  overflow: hidden;
  justify-content: center;
}

.content-grid-block .grid-fill img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.content-grid-block .grid-fill article {
  width: 100%;
  height: auto;
}

.content-grid-block .grid-fill article div {
  height: 100%;
  display: flex;
}

/* Card Layout CSS */

.content-grid-block .grid-card {
  color: #000;
  background-color: #FFF;
  height: 100%;
  -webkit-box-shadow: 0 0 10px rgb(0, 0, 0, 10%);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgb(0, 0, 0, 10%);
  transition: box-shadow 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

.content-grid-block .grid-card:hover {
  -webkit-box-shadow: 0 0 20px rgb(0, 0, 0, 25%);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 20px rgb(0, 0, 0, 25%);
}

/* Override for Card links color to maintain accessibility (white on blue) */

.content-grid-block .grid-card .grid-text-container a {
  color: var(--ucb-link);
  text-decoration: none;
}

.content-grid-block .grid-card .grid-text-container a:hover {
  color: var(--ucb-link-visited);
  text-decoration: none;
}

/* Overlay Layout CSS */

.content-grid-block .overlay-grid-image-container {
  position: relative;
  width: 100%;
  margin-bottom: 1em;
}

.content-grid-block .overlay-grid-image-container strong {
  padding: 0.75rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  margin-bottom: 0;
  color: white;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
}