/* ==============================
   Main Page Settings
   ============================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;   /* allows page to grow beyond viewport height */
  background: #111;
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

/* Mobile poster layout */
.phone-page {
  position: relative;        /* anchors all absolute children */
  width: min(100vw, 430px);
  /* max() ensures page is always tall enough to show the full portrait background
     image (2256×3360px). 149vw = (3360/2256)×100vw — the scaled image height
     when cover fills the viewport width. Falls back to 100vh on portrait screens
     where the image already fits vertically. */
  /*min-height: max(100vh, 149vw);*/
   aspect-ratio: 9/16;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.28)),
    url("images/background.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}


/* ==============================
   Button group and Instagram icon
   Both are independently absolutely positioned inside .phone-page.
   No shared flex wrapper — eliminates any wrapping between them.
   Instagram sits at top-right; button-group sits to its left.
   44px = 32px icon + 12px gap.
   ============================== */

.button-group {
  position: absolute;
  top: 40%;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.instagram-link {
  position: absolute;
  top: 2%;
  right: 4%;
  line-height: 0;
}

.instagram-link img {
  display: block;
  width: 32px;
  height: 32px;
}


/* ==============================
   Optional Title Text
   ============================== */

.page-title {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  text-align: center;
  color: #f7df9a;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
}

.page-title .small-title {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 1px;
}

.page-title h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}


/* ==============================
   Button Styling
   ============================== */

.event-button {
  display: block;
  min-width: 160px;
  padding: 12px 20px;

  color: #fff8dc;
  background: linear-gradient(135deg, rgba(92, 8, 28, 0.92), rgba(148, 34, 42, 0.92));

  border: 1.5px solid #d6ad4c;
  border-radius: 999px;

  font-size: 15px;
  font-weight: bold;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.3px;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(255, 220, 120, 0.15);

  transition: transform 0.15s ease, background 0.15s ease;
}

.event-button:hover,
.event-button:focus {
  background: linear-gradient(135deg, rgba(125, 15, 38, 0.96), rgba(180, 48, 55, 0.96));
  transform: translateY(-1px);
  outline: none;
}


/* ==============================
   Small phones (portrait ≤ 480px)
   Compact buttons so the top bar fits the narrow viewport.
   ============================== */

@media (max-width: 480px) {
  .button-group {
    gap: 10px;
  }

  .event-button {
    min-width: 100px;
    font-size: 9px;
    padding: 8px 12px;
  }
}


/* ==============================
   Phone landscape only (≤ 500px tall)
   Slightly smaller buttons; layout stays the same.
   ============================== */

@media screen and (orientation: landscape) and (max-height: 500px) {
   .phone-page {
      width: 100%;
   }

  .button-group {
    gap: 16px;
  }

  .event-button {
    min-width: 110px;
    font-size: 16px;
    padding: 8px 14px;
  }
}

@media (min-width: 480px) {
  .phone-page {
    width: 100%;
  }
}

/* ==============================
   PC / large tablet (≥ 769px wide)
   Center a 728px column on the dark background,
   matching the brochure.html layout width.
   1085px = ceil(728 × 3360/2256) — full portrait image height
   at 728px container width under background-size:cover.
   100vh wins on tall monitors; 1085px floor lets short
   viewports scroll to see the full image.
   ============================== */

@media (min-width: 769px) {
  .phone-page {
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
    min-height: max(100vh, 1085px);
  }
  
  .button-group {
    gap: 18px;
  }

  .event-button {
    min-width: 110px;
    font-size: 18px;
    padding: 8px 14px;
  }
}