/* Components for Site Lebecque */

/* Product Card */
.product {
  flex: 0 1 calc(33.333% - 2em);
  box-sizing: border-box;
  text-align: center;
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  margin-bottom: var(--spacing-large);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: box-shadow 0.3s ease-in-out;
  box-shadow: var(--box-shadow-light);
}

@media (prefers-color-scheme: dark) {
  .product {
    background-color: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.product:hover {
  box-shadow: var(--box-shadow-hover);
}

.product a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product h2 {
    margin-top: 0;
    font-size: var(--font-size-h2);
    flex-grow: 1;
}

.product img {
  max-width: 100%;
  height: auto;
  margin-top: var(--spacing-medium);
}