:root {
  /* --cloudy-pink-1: #ffd6e8;
  --cloudy-pink-2: #f7d7e8; */
  --cloudy-blue-1: #d6e9ff;
  --cloudy-blue-2: #d7edf7;
  /* --accent: #f5a6d0; */
  --muted: #595e6b;
}

/* Background canvas */
html {
  min-height: 100%;
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  background: linear-gradient(180deg, #e4ecfd, #fff);
}

/* Page layout */
body {
  margin: 0;
  min-height: 100vh;          /* IMPORTANT */
  background: transparent;   /* gradient lives on html */
  display: flex;
  flex-direction: column;
}

/* Main content pushes footer down */
main {
  flex: 1 0 auto;
}


/* full-page grid */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* two columns */
  grid-template-rows: 1fr 1fr 1fr;      /* three rows of equal height */
  width: 100%;
  min-height: 100vh;                    /* ensures full viewport at least */
}



/* panels cover entire cell */
.panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Top row: pink backgrounds */
.top-left {
  grid-column: 1;
  grid-row: 1;
  background: linear-gradient(135deg, var(--cloudy-blue-2), #e9edff);
}

.top-right {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(135deg, var(--cloudy-blue-1), #f0f1ff);
}

/* Title spans across both top panels */
.home-title {
  grid-column: 1 / span 2;  /* stretch across both top blocks */
  grid-row: 1;              /* stay in top row */
  align-self: center;
  justify-self: center;
  margin: 0;
  /* font-family: 'Pacifico', cursive; */
  /* font-family: "Parisienne", cursive; */
  font-size: clamp(2rem, 4vw, 3.5rem);

  font-family: "Playfair Display SC", serif;
  font-weight: 700;
  font-style: bold;

  color: #3e4350;
  text-align: center;
  z-index: 2;
  position: relative; /* sits above background panels */
}

/* middle row panels */
.mid-left img,
.bot-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mid-right,
.bot-left {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c2d4ee;
}

/* about card */
.about-card,
.catering-card {
  background: #c2d6ee;
  padding: 1rem;
  border-radius: 12px;
  max-width: 500px;       /* limit width to avoid stretching too far */
  width: 90%;             /* responsive on smaller screens */
  text-align: center;
  margin: 0 auto;         /* center horizontally */
}

/* headings and paragraphs */
.about-card h2,
.catering-card h2 {
  margin-top: 0;
  color: #3e4350;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-family: "Playfair Display SC", serif;
}

.about-card p,
.catering-card p {
  margin-top: 10px;
  color: #000000;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
}

/* buttons */
.about-card .btn-link,
.catering-card .btn-link {
  display: inline-block;
  margin-top: 12px;
  padding: .5rem 1rem;
  background: #99bbfa;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;

  /* Smooth transition for all hover effects */
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card .btn-link:hover,
.catering-card .btn-link:hover {
  background: #afc8ff;
  transform: translateY(-3px);    /* subtle lift */
}

/* Mobile view: 650px and below */
@media (max-width: 650px) {
  .home-grid {
    display: grid;
    grid-template-columns: 1fr;   /* single column layout */
    grid-template-rows: auto;     /* rows size naturally */
    gap: 1rem;
    min-height: auto;             /* allow scrolling */
  }

  /* Make title occupy only top panel */
  .home-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem 0;
  }

  /* Stack all other panels below */
  .top-left,
  .top-right {
    display: none; /* hide colored panels on mobile */
  }

  .mid-left,
  .mid-right,
  .bot-left,
  .bot-right {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
  }

  /* Images scale naturally */
  .mid-left img,
  .bot-right img {
    width: 90%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  /* Cards adjust width */
  .about-card,
  .catering-card {
    width: 90%;
    max-width: 100%;
    padding: 1rem;
    margin: 0 auto;
  }

  /* Headings and paragraphs scale down */
  .about-card h2,
  .catering-card h2 {
    font-size: 2rem;
  }

  .about-card p,
  .catering-card p {
    font-size: 1rem;
  }

  /* Buttons scale down */
  .about-card .btn-link,
  .catering-card .btn-link {
    font-size: 0.95rem;
    padding: .5rem 1rem;
  }
}