/* -- BLOG-CARD -- */



/* BLOG-CARD SETTINGS */
body .blog-card {
	border: 1px solid var(--border-color);
	background-color: var(--blog-card-bg);
	background-image: var(--blog-card-bg-image);
}
.blog-card .blog-card__title {
  background: var(--blog-card-title-bg);
  background-image: var(--blog-card-title-bg-image);
	border: 1px solid var(--border-color);
}
.blog-card .blog-card__title a {
	color: var(--blog-card-title-text-color);
}

/* HOME PAGE ADJUSTMENTS */
img[src$=".gif"] {
	background-color: var(--neutral-200); /* The gif file of the platentektoniek must have a (close to) white background in any theme  --loop-item-bg-color */
}


/* Animating the Button of the home-card */
.home-card-leesverder {
  position: relative; /* needed for pseudo-element */
  display: inline-block;
  padding: 0.15em 0em !important; /* text aligns left without padding left, the transition uses this as a start value */
  border-radius: 0.5em;
  overflow: hidden;
  color: var(--text-color); /* Text color */
  cursor: pointer; /* Optional: indicate interactivity */
  /*margin-right: auto;
  margin-left: initial;
  width: 100%;
  text-align: left;
  transition: transform 0.3s ease;*/
  /* Start with no horizontal translation (left-aligned) */
  left: 0;
  transform: translateX(0);
  transition: transform 0.25s ease;
}

.home-card-leesverder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--blog-card-button-bg-color);
  border-radius: 0.5em;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  will-change: transform;
  z-index: -1;
  /*margin-right: auto;
  margin-left: auto;
  text-align: left;*/
}

/* Hover effect */
.blog-card:hover .home-card-leesverder,
.blog-card:focus-within .home-card-leesverder {
  /* Move left position and shift back by 50% width to center */
  /*left: 50%;
  transform: translateX(-50%);*/
  color: white; /*var(--text-color-blog-card-button)*/
	padding: 0.15em 1.8em !important; /* text gets some padding left, the transition uses this as a end value */
}

.blog-card:hover .home-card-leesverder::before,
.blog-card:focus-within .home-card-leesverder::before {
  transform: scaleX(1);
}