/* ================================
   Expert Heroes Layout
================================ */

/* Expert Heroes Grid Container */
#expert-heroes {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  border: 2px solid var(--border); /* Outer border (optional) */
}

/* Apply grid to the container holding the hero pieces */
.expert-hero-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 380px)); /* Adjusted max to fit within 900px */
  gap: 0; /* No gap so dividers align perfectly */
  justify-content: center;
  align-items: stretch;
}

/* Heading spans full width */
#expert-heroes > h2 {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  text-align: center;
}

/* Expert Hero Card */
.hero-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Fills its grid cell */
  min-width: 200px;
  height: auto;
  padding: 10px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
  border: none; /* Dividers will handle separation */
}

/* Hover effect */
.hero-piece:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Expert Hero Image */
.hero-image {
  width: 75%; /* Keep width proportional to card */
  max-width: 150px; /* Optional: cap the width to avoid overly large images */
  aspect-ratio: 1 / 1; /* Ensure a square container to maintain image proportions */
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Show full image without cropping */
  object-position: center; /* Center the image */
}

/* ================================
   Dividers for Desktop
================================ */

/* Vertical divider between columns */
.expert-hero-container .hero-piece:nth-child(odd) {
  border-right: 2px solid var(--border);
}

/* Horizontal divider after first row */
.expert-hero-container .hero-piece:nth-child(1),
.expert-hero-container .hero-piece:nth-child(2) {
  border-bottom: 2px solid var(--border);
}

/* ================================
   Mobile Adjustments
================================ */
@media (max-width: 768px) {
  .expert-hero-container {
    grid-template-columns: 1fr; /* Stack vertically on mobile */
  }

  #expert-heroes {
    padding: 0.5rem;
  }

  .hero-piece {
    min-width: auto;
    padding: 8px;
  }

  .hero-image {
    width: 50%; /* Smaller width on mobile */
    max-width: 100px; /* Cap width for mobile */
    aspect-ratio: 1 / 1; /* Maintain square shape */
  }

  .hero-piece h3 {
    font-size: 0.9rem;
  }

  /* Remove vertical divider on mobile */
  .expert-hero-container .hero-piece {
    border-right: none !important;
  }

  /* Add horizontal dividers between all cards */
  .expert-hero-container .hero-piece:not(:last-child) {
    border-bottom: 2px solid var(--border);
  }
}