/* Contenitore della griglia dinamica */
.dynamic-grid {
  display: grid;
  gap: 3rem; /* Spaziatura generosa per i bordi */
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-bottom: 3rem;
}

/* Breakpoints per il numero di colonne */
@media (min-width: 640px) {
  .dynamic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .dynamic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card-image-container::before {
  content: "";
  position: absolute;

  /* Dimensione dinamica al 90% del contenitore padre (l'immagine) */
  width: 90%;
  height: 90%;

  /* Posizionamento sfalsato per renderlo visibile dietro l'immagine */
  /* -5% sposta in alto a sinistra, creando l'effetto layer */
  top: -8%;
  left: -6%;

  /* Stile del bordo classico */
  border-radius: 16px;
  z-index: -1; /* Va dietro l'immagine */
  display: none; /* Gestito dalle media queries */
  
  content: "";
  position: absolute; 

  /* Dimensione dinamica al 90% del contenitore padre (l'immagine) */
  object-fit: cover;

  /* Stile del bordo classico */
  border-radius: 16px;
  pointer-events: none;
  /* 1. APPLICHIAMO IL COLORE TRAMITE VARIABILE */
  background-color: var(--holzhof-color-green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='calc(100%25 - 6px)' height='calc(100%25 - 6px)' fill='none' rx='16' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='calc(100%25 - 6px)' height='calc(100%25 - 6px)' fill='none' rx='16' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");

}

/* LOGICA SCACCHIERA UNIVERSALE AGGIORNATA */

/* Mobile: 1 colonna (Semplice alternanza) */
@media (max-width: 767px) {
  .card-wrapper:nth-child(odd) .card-image-container::before {
    display: block;
  }
}

/* Tablet: 2 colonne (Scacchiera) */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-wrapper:nth-child(4n + 1) .card-image-container::before,
  .card-wrapper:nth-child(4n + 4) .card-image-container::before {
    display: block;
  }
}

/* Desktop Small: 3 colonne (Scacchiera) */
@media (min-width: 1024px) {
  .card-wrapper:nth-child(odd) .card-image-container::before {
    display: block;
  }
}

.card-image-container {
  position: relative;
  overflow: visible;
  aspect-ratio: 4 / 3;
  border-radius: 15px;
  /* Spostiamo l'ombra sull'immagine o la teniamo qui, ma qui segue il radius */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background: white; /* Assicura che non sia trasparente per coprire il bordo dietro */
  z-index: 0; /* Crea un contesto di stacking per z-index -1 del bordo */
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Radius applicato direttamente all'immagine per mantenere l'arrotondamento */
  border-radius: 15px;
  position: relative;
  z-index: 1;
}

.btn-card-container {
  position: absolute;
  bottom: 5px;
  right: 1px;
  z-index: 2;
  background-color: white;
  border-radius: 27px;
  scale: 0.7;
  .button {
    background: url("../images/pulsante_green.png") no-repeat;
    background-size: 20%;
    background-position: 35px;
    transition: 0.3s;
    border-radius: 27px;
    border: 2px solid var(--holzhof-color-green);
    height: 50px;
    width: 90px;
  }
  .button:hover {
    background: url("../images/pulsante_white.png") no-repeat;
    background-size: 20%;
    background-position: 35px;
    transition: 0.3s;
    border-radius: 27px;
    background-color: var(--holzhof-color-green);
  }
}

.max-w-7xl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 320px) and (max-width: 767px) {
  .max-w-7xl {
    max-width: 540px;
    padding-right: 10%;
    padding-left: 10%;
  }
}

@media (min-width: 768px) {
  .max-w-7xl {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .max-w-7xl {
    max-width: 960px;
  }
}

@media (min-width: 1400px) {
  .max-w-7xl {
    max-width: 1320px;
  }
}