/* -- 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);
	margin-bottom: 0px;
}
.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);
}



/* efrog */
:root {
  --glass-900: hsl(256, 43%, 7%);
  --glass-800: hsl(240, 24%, 13%);
  --glass-700: hsl(243, 26%, 15%);
  --glass-600: hsl(252, 9%, 22%);
  --glass-500: hsl(259, 13%, 28%);
  --glass-400: hsl(254, 22%, 32%);

  --glass-300: hsl(251, 13%, 68%);
  --glass-200: hsl(240, 15%, 76%);
  --glass-100: hsl(240, 21%, 88%);

  --surface-1: var(--glass-900);
  --surface-2: var(--glass-800);
  --surface-3: var(--glass-700);

  --border-1: var(--glass-500); /* top */
  --border-2: var(--glass-600); /* bottom */
}

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*html {
  color-scheme: dark;
  font-family: system-ui;
}*/

/*body {
  min-block-size: 100vb;
  background-size: cover;
  color: var(--text-3);
  background-color: var(--primary-900);
  background-image: linear-gradient(
      hsl(from var(--primary-700) h s l / 0.7) 0 0
    ),
    url("https://images.unsplash.com/photo-1535408190508-be4c21946da6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDc3NTcyOTB8&ixlib=rb-4.1.0&q=85");
  background-position: top left;
  background-size: 300%;
  line-height: 1.5;
  padding: 10rem 2rem;
}*/

.frosted-card {
  max-inline-size: 500px;
  margin-inline: auto;
  padding: 21px;

  display: grid;
  gap: 1lh;
}

/* .frosted-card {
  background-color: var(--surface-1);
  border-radius: 1rem;

  border: transparent 1px solid;
  background: radial-gradient(
        circle at 50% 250%,
        var(--primary-500),
        var(--surface-1)
      )
      padding-box,
    linear-gradient(var(--border-1), var(--border-2)) border-box;
} */

.frosted-card {
  --border-width: 1px;
  border-radius: 1rem;
  position: relative;

  background: hsl(from var(--surface-3) h s l / 0.25);
  backdrop-filter: blur(12px);
}

.frosted-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  border: var(--border-width) solid transparent;
  background: linear-gradient(var(--border-1), var(--border-2)) border-box;
  mask: linear-gradient(black, black) border-box,
    linear-gradient(black, black) padding-box;
  mask-composite: subtract;
}