/* === GRID LAYOUT === */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* TWO columns */
  gap: 25px;
  margin: 2rem 0;
}

/* === CARD WRAPPER (clickable link) === */
.flip-card {
  perspective: 1000px;
  text-decoration: none;
  color: inherit;
}

/* === INNER ROTATION CONTAINER === */
.flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;  /* square */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Hover flip */
.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* === FRONT & BACK === */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Front image */
.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Back side */
.flip-back {
  background: #222;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  transform: rotateY(180deg);
}

.flip-back {
  background: linear-gradient(135deg, #1b3c59, #2f5d8a);
  color: #f5f8fb;
}
.flip-back h3 {
  color: #9fd3ff;
}

/* Alternative colour ideas */
/*

.flip-back {
  background: linear-gradient(135deg, #1f4d3a, #2e7d5b);
  color: #f4f7f5;
}
.flip-back h3 {
  color: #a8e6cf;
}

.flip-back {
  background: linear-gradient(135deg, #355c7d, #c06c84);
  color: #ffffff;
}
*/

/* Optional hover shadow effect */
.flip-card:hover {
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}


@media (max-width: 768px) {
  .flip-grid {
    grid-template-columns: 1fr;
  }
}