/* ============================================================
   home.css — homepage specific styles
   ============================================================ */

:root {
  --corner-size: clamp(80px, 11vw, 200px);
  --corner-width: calc(var(--corner-size) * 1.291);
  --corner-overlap: calc(var(--corner-width) / 2);

  /* Side vine tile aspect ratio: 111.96 / 237.74 = 0.471
     width is fixed to --corner-width, height of each tile
     scales proportionally */
  --side-tile-height: calc(var(--corner-width) / 0.471);
}

.page-content {
  display: flex;
  flex-direction: column;
  padding-bottom: 0; /* remove the default padding from base.css */
}

/* ── Home page wrapper ──────────────────────────────────── */
.home-wrapper {
  position: relative;
  padding-top: calc(var(--corner-size) + var(--spacing-md));
  padding-bottom: var(--spacing-sm);
  flex: 1;
  min-height: calc(100vh - var(--nav-height));
}

/* ── Top edge ───────────────────────────────────────────── */
.border-top {
  position: absolute;
  top: 0;
  left: var(--corner-overlap);
  right: var(--corner-overlap);
  height: var(--corner-size);
  background-image: url("/assets/SVG/TopVine.svg");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center top;
  z-index: 1;
}

/* ── Side edges ─────────────────────────────────────────── */
/* Start at half the corner height (overlap) and stretch to
   the bottom of the wrapper. repeat-y tiles downward. */
.border-left,
.border-right {
  position: absolute;
  top: var(--corner-size); /* slide up under the corner */
  bottom: 0;
  width: var(--corner-width);
  background-repeat: repeat-y;
  background-size: 100% auto; /* width fills div, height scales proportionally */
  background-position: top center;
  z-index: 1;
}

.border-left {
  left: 0;
  background-image: url("/assets/SVG/LSideVine.svg");
}

.border-right {
  right: 0;
  background-image: url("/assets/SVG/RSideVine.svg");
}

/* ── Corner pieces ──────────────────────────────────────── */
.border-corner-tl,
.border-corner-tr {
  position: absolute;
  top: 0;
  width: var(--corner-width);
  height: var(--corner-size);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.border-corner-tl {
  left: 0;
  background-image: url("/assets/SVG/TLCornerFlower.svg");
  background-position: left top;
}

.border-corner-tr {
  right: 0;
  background-image: url("/assets/SVG/TRCornerFlower.svg");
  background-position: right top;
}

/* ── Hero content ───────────────────────────────────────── */
.home-hero {
  text-align: center;
}

.home-hero h1 {
  margin-bottom: 0;
  font-family: var(--font-fancy);
  font-size: clamp(2rem, 9vw, 7rem);
}

.home-hero .subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
  font-size: clamp(1rem, 4vw, 3rem);
}

.home-hero .date-location {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.home-hero .cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.location::before {
  content: "\00a0\00a0\2022\00a0\00a0";
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .home-hero .names {
    font-size: 1.5rem;
  }
  .home-hero .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .date-location {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .location::before {
    display: none;
  }
}