/* -- DYNAMIC DIAMOND CLUSTER STYLES (Final Version w/ Tablet Order) -- */

:root {
  --bhsu-green: #006838;
  --bhsu-gold: #FDC92B;
  --bhsu-dark-text: #222;
  --bhsu-white-text: #fff;
  --diamond-size: 300px;
  --diamond-border: 6px;
  --diamond-gap: 5px; 
}

.diamond-cluster {
  font-family: sans-serif;
  padding: 2rem 1rem;
  max-width: 1000px;
  margin: auto;
  display: grid;
  gap: var(--diamond-gap);
  justify-items: center;
}

.diamond-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: var(--diamond-size);
  height: var(--diamond-size);
  border: var(--diamond-border) solid var(--bhsu-green);
  background-color: var(--bhsu-gold);
  color: var(--bhsu-dark-text);
  transform: rotate(45deg);
  border-radius: 45px;
}

.diamond-item .diamond-content {
  transform: rotate(-45deg);
  padding: 1rem;
  max-width: 85%;
}

.diamond-content h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.diamond-content p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Set Mission, Beliefs, and Vision to green */
.diamond-item:nth-child(3), /* Mission */
.diamond-item:nth-child(5), /* Beliefs */
.diamond-item:nth-child(6)  /* Vision */ {
  background-color: var(--bhsu-green);
  color: var(--bhsu-white-text);
  border-color: var(--bhsu-gold);
}


/* -- RESPONSIVE LAYOUTS -- */

/* Default (Mobile): Single column */
.diamond-cluster {
  grid-template-columns: 1fr;
}

/* Tablet: 2-column layout with custom order */
@media screen and (min-width: 768px) {
  .diamond-cluster {
    grid-template-columns: 1fr 1fr;
    max-width: 650px;
  }
  
  /* NEW: Reorder items to group by color */
  .diamond-item:nth-child(1) { order: 1; } /* Yellow */
  .diamond-item:nth-child(2) { order: 3; } /* Yellow */
  .diamond-item:nth-child(4) { order: 5; } /* Yellow */
  
  .diamond-item:nth-child(3) { order: 2; } /* Green */
  .diamond-item:nth-child(5) { order: 4; } /* Green */
  .diamond-item:nth-child(6) { order: 6; } /* Green */
}

/* Desktop: 3-column layout with custom cluster order */
@media screen and (min-width: 1200px) {
  .diamond-cluster {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1000px;
  }
  
  /* Use 'order' to create the final cluster arrangement */
  .diamond-item:nth-child(1) { order: 2; } /* Program Standards */
  .diamond-item:nth-child(2) { order: 1; } /* BHSU */
  .diamond-item:nth-child(3) { order: 3; } /* Mission */
  .diamond-item:nth-child(4) { order: 4; } /* Educator Prep */
  .diamond-item:nth-child(5) { order: 6; } /* Beliefs */
  .diamond-item:nth-child(6) { order: 5; } /* Vision */
}