/* Styles for the card component 

There are three shapes of cards, ordinary text cards, full screen image cards and round image cards.
The content of the cards can be ordinary text, an overlay or a blur overlay that appears upon hover.
*/

.card {
  background-color: var(--white);
  transition: box-shadow var(--animation-time) ease;
  position: relative; /* for overlay */
  padding: var(--margin);
}

.card .title {
  color: white;
  text-align: center;
  padding: var(--margin);
  position: absolute;
  width: 100%;
  top: 0;
}

.card.image,
.card.fill {
  padding: 0;
}

.card.image.round,
.card.image.round img,
.card.image.round .overlay {
  border-radius: 100%;
}

.card,
.image.card img,
.card .overlay {
  border-radius: var(--border-radius);
}

.card.image .description {
  padding: var(--margin);
}

.card.image .background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overlay .extend {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: var(--small-margin);
  color: white;
}

.overlay:hover .extend {
  display: none;
}

blur-overlay-component {
  will-change: background;
  transition: background var(--animation-time) ease;
}

blur-overlay-component:hover {
  background: rgb(0 0 0 / 35%);
}

shift-overlay-component {
  background:
    url('/assets/main/images/background/noise.svg'),
    linear-gradient(
      145deg,
      transparent 45%,
      var(--red) 45%,
      var(--orange) 70%,
      var(--light-orange) 85%
    );
  background-size: 200% 200%; /* Allows animation */
  transition: background-position var(--animation-time);
}

shift-overlay-component:hover {
  background-position: 100% 100%;
}

blur-overlay-component .description,
shift-overlay-component .description {
  will-change: opacity;
  transition: opacity var(--animation-time);
  opacity: 0;
  color: white;
}

.overlay .description {
  width: 100%;
  padding: var(--margin);
}

shift-overlay-component:hover .description,
blur-overlay-component:hover .description {
  opacity: 1;
}