/* ===== HOMEPAGE GRID ===== */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 18px;
  text-align: center;
}

.card.big {
  text-align: center;
  padding: 36px;
}

.card.big h2    { font-size: 40px; }
.card.big .row  { justify-content: center; }

@media (min-width: 1000px) {
  .about-card { grid-column: 1 / -1; }

  .mywork,
  .visualisation { min-height: 700px; }
}

/* ===== CARD OVERLAYS ===== */
.about-card,
.mywork,
.visualisation,
.contact,
.register {
  position: relative;
  overflow: hidden;
}

.about-card h2,
.mywork h2,
.visualisation h2 { color: white; }

.about-card p,
.mywork p,
.visualisation p,
.contact p,
.register p { color: white; }

.contact h3,
.register h3 {
  color: white;
  font-size: 30px;
  margin-bottom: 10px;
}

/* Shared pseudo-element for background images */
.about-card::before,
.mywork::before,
.visualisation::before,
.contact::before,
.register::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.08);
  opacity: 0.55;
  z-index: 0;
}

/* Individual background images */
.about-card::before    { background-image: url("Photo Tableau/Alena1/alena1_eyes_and_nose.jpg"); }
.mywork::before        { background-image: url("Photo Tableau/Final_sans_bord/booby_seales.jpg"); }
.visualisation::before { background-image: url("Photo Tableau/in_the_street_crop.jpg"); }
.contact::before       { background-image: url("Photo Tableau/ariana_bottom_bar_home/ariana_only_eyes_dark.jpg"); }
.register::before      { background-image: url("Photo Tableau/Final_sans_bord/sheherazade.jpg"); }

/* Keep content above overlay */
.about-card > *,
.mywork > *,
.visualisation > *,
.contact > *,
.register > * {
  position: relative;
  z-index: 1;
}

/* ===== OVERLAY BUTTONS (white style) ===== */
.about-card .btn,
.mywork .btn,
.visualisation .btn,
.contact .btn,
.register .btn {
  border-color: white;
  background: transparent;
  color: white;
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.about-card .btn:hover,
.mywork .btn:hover,
.visualisation .btn:hover,
.contact .btn:hover,
.register .btn:hover {
  background: white;
  color: #1D00AE;
  transform: translateY(-2px);
}

/* ===== MYWORK + VISUALISATION CARD LAYOUT ===== */
.mywork,
.visualisation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}