/* =====================================================
   pages.css — CLEAN, DEPLOYMENT‑READY
   Scope: PAGE‑SPECIFIC LAYOUT ONLY
   Do NOT add hero / rays / bull / gallery core styles here
   ===================================================== */

/* =====================================================
   COMMON INNER PAGE PANEL
   ===================================================== */

.about,
.contact,
.access {
  max-width: 760px;
  margin: auto;
  text-align: center;
}

/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-page .about {
  margin-top: 120px;
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-page .hero {
  position: relative;
}

.contact-section {
  padding-top: 420px;
}

.contact-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-details h3 {
  margin-bottom: 20px;
}

.contact-details ul {
  list-style: none;
  padding: 0;
}

.contact-details li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-details i {
  color: var(--gold);
  font-size: 18px;
  width: 22px;
}

.contact-details a {
  color: #fff;
  text-decoration: none;
}

.contact-details a:hover {
  color: var(--gold);
}

.contact-note {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 32px;
}

@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =====================================================
   ACCESS PAGE — STRUCTURE
   ===================================================== */

.access-page .hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Invite text block */
.access-page .about-panel {
  position: absolute;
  top: 0;
  left: 190px;

  max-width: 520px;
  text-align: left;

  z-index: 30;
}

.access-page .about-panel .page-title {
  font-size: 3rem;
}

.access-page .access-note {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

/* =====================================================
   ACCESS PAGE — FORM (TOP LAYER)
   ===================================================== */

.access-page .access-wrap {
  position: absolute;
  top: 38%;
  left: 45%;

  transform: translate(-50%, -50%);

  z-index: 9999;
  pointer-events: auto;
}

/* Glass container */
.access-page .access-iframe-wrap {
  width: 900px;
  max-width: 95vw;

  padding: 28px;
  border-radius: 26px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);

  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(214,177,90,0.45);

  overflow: hidden;
}

/* Google Form iframe */
.access-page .google-form-iframe {
  width: 100%;
  height: 640px;

  border: none;
  border-radius: 18px;

  background: transparent;
}

/* =====================================================
   ACCESS PAGE — MOBILE
   ===================================================== */

@media (max-width: 900px) {
  .access-page .about-panel {
    position: relative;
    top: auto;
    left: auto;
    margin: 80px auto 40px;
    text-align: center;
  }

  .access-page .access-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto 80px;
  }

  .access-page .access-iframe-wrap {
    width: 100%;
  }

  .access-page .google-form-iframe {
    height: 900px;
  }
}
  

/* =====================================================
   CONTACT PAGE — SAFE X / Y POSITION CONTROL
   ===================================================== */

.contact-page .about-panel {
  position: relative;              /* SAFE */
  transform: translate(0px, -90px);  /* X , Y */
  z-index: 40;
}

/* =====================================================
   CONTACT PAGE — Individual box control
   ===================================================== */

.contact-page .contact-details {
  transform: translate(
    -660px,    /* X */
    -100px     /* Y */
  );
}
.contact-page .contact-note {
  transform: translate(
    -350px,    /* X */
    150px     /* Y */
  );
}
/* =====================================================
   CONTACT PAGE — FIX CLICKABLE LINKS
   ===================================================== */

/* Ensure contact content is above background layers */
.contact-page .contact-overlay,
.contact-page .contact-wrap,
.contact-page .contact-details,
.contact-page .contact-note {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

/* Disable click blocking from background visuals */
.contact-page .rays,
.contact-page .bull-bg,
.contact-page .hand-bg {
  pointer-events: none;
}