.wp-block-ldn-flotilla-details-grid {
  margin-block: 2rem;
}

.details-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.details-grid__item {
  flex: 1 0 20%;
  padding: 1rem;
  position: relative;
}

@media (min-width: 768px) {
  .details-grid__item {
    padding: 1.5rem;
  }
}

/* No hover effects */

/* When expanded, take more space */
@media (max-width: 767px) {
  .details-grid__item[open] {
    flex: 1 0 100%;
  }
}

@media (min-width: 768px) {
  .details-grid__item[open] {
    flex: 1 0 40%;
  }
}

.details-grid__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  list-style: none;
  position: relative;
}

/* Hide the default triangle */
.details-grid__summary::-webkit-details-marker {
  display: none;
}

.details-grid__image {
  width: 100px;
  height: 100px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-grid__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-small, 4px);
}

.details-grid__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-primary, #193880);
  margin-bottom: 0.5rem;
}

.details-grid__content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(25, 56, 128, 0.1);
  animation: fadeIn 0.3s ease-in-out;
}

.details-grid__description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text, #333);
  margin-bottom: 1rem;
}

.details-grid__link {
  text-align: left;
}

.details-grid__link .button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: var(--radius-small, 4px);
  transition: var(--transition-standard, all 0.3s ease);
  
  /* Use the existing neumorphic button styling */
  box-shadow: -8px -8px 16px rgba(227, 227, 227, 0.7), 8px 8px 16px rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(142deg, var(--color-background, #f5f5f5), var(--color-white, #ffffff) 61.803398875%);
  color: var(--color-primary, #193880);
  font-family: var(--font-family-primary, sans-serif);
  cursor: pointer;
  border: none;
}

.details-grid__link .button::after {
  content: "→";
  font-weight: bold;
}

.details-grid__link .button:hover {
  background-image: linear-gradient(142deg, var(--color-background, #f5f5f5), var(--color-white, #ffffff) 38.196601125%);
  color: var(--color-accent, #55b4dd);
  text-decoration: none;
  box-shadow: -10px -10px 20px rgba(227, 227, 227, 0.7), 10px 10px 20px rgba(255, 255, 255, 0.7);
}

.details-grid__link .button:active {
  box-shadow: inset -8px -8px 16px rgba(255, 255, 255, 0.7), inset 8px 8px 16px rgba(227, 227, 227, 0.7);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* JavaScript fallback for accordion behavior */
.wp-block-ldn-flotilla-details-grid {
  --accordion-initialized: false;
}