/* 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));
  }
}
@media (min-width: 1280px) {
  .dynamic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Definizione del bordo tratteggiato 90% della dimensione immagine */
.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 */
  opacity: 0.8;
  display: none; /* Gestito dalle media queries */
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--holzhof-color-green),
      var(--holzhof-color-green) 3px,
      transparent 3px,
      transparent 11px
    ),
    repeating-linear-gradient(
      180deg,
      var(--holzhof-color-green),
      var(--holzhof-color-green) 3px,
      transparent 3px,
      transparent 11px
    ),
    repeating-linear-gradient(
      90deg,
      var(--holzhof-color-green),
      var(--holzhof-color-green) 3px,
      transparent 3px,
      transparent 11px
    ),
    repeating-linear-gradient(
      180deg,
      var(--holzhof-color-green),
      var(--holzhof-color-green) 3px,
      transparent 3px,
      transparent 11px
    );
  background-position:
    left top,
    right top,
    left bottom,
    left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size:
    100% 2px,
    2px 100%,
    100% 2px,
    2px 100%;
  border-radius: 10px;
}

/* LOGICA SCACCHIERA UNIVERSALE AGGIORNATA */
/* Ora punta a .card-image-container::before invece che .card-styled */

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

/* Tablet: 2 colonne (Scacchiera) */
@media (min-width: 640px) 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) and (max-width: 1279px) {
  .card-wrapper:nth-child(odd) .card-image-container::before {
    display: block;
  }
}

/* Desktop Large: 4 colonne (Scacchiera) */
@media (min-width: 1280px) {
  .card-wrapper:nth-child(8n + 1) .card-image-container::before,
  .card-wrapper:nth-child(8n + 3) .card-image-container::before,
  .card-wrapper:nth-child(8n + 6) .card-image-container::before,
  .card-wrapper:nth-child(8n + 8) .card-image-container::before {
    display: block;
  }
}

.card-image-container {
  position: relative;
  /* overflow: visible è CRUCIALE per far vedere il bordo che esce fuori (top -5%) */
  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 {
  padding: 30px 45px;
}