/* ========================================
   EMMA'S 30TH — 90'S REWIND
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --blue: #079bd3;
  --pink: #f45b9a;
  --yellow: #fff21c;
  --coral: #ff8063;
  --lime: #7ee638;
  --black: #121212;
  --cream: #fff8e9;
}


/* ========================================
   HERO
   ======================================== */

.event-hero {
  min-height: 66vh;
  position: relative;
  overflow: hidden;

  background: #079bd3;
  color: white;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 25%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.06), transparent 25%);

  color: white;
}


/* little 90s shapes */

.event-hero::before {
  content: "";
  position: absolute;
  width: 55px;
  height: 55px;
  left: 7%;
  top: 24%;
  background: #f45b9a;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: rotate(18deg);
}

/* .event-hero::after {
  content: "〰";
  position: absolute;
  right: 8%;
  top: 18%;
  color: #fff21c;
  font-size: 5rem;
  font-weight: 900;
  transform: rotate(-15deg);
} */
.event-hero-lightning {
  position: absolute;

  right: 6%;
  top: 35%;

  width: 65px;
  height: 110px;

  background: var(--lime);

  clip-path: polygon(
    45% 0,
    100% 0,
    62% 40%,
    88% 40%,
    25% 100%,
    42% 55%,
    10% 55%
  );
   z-index: 1;
}
.event-hero-diamond {
  position: absolute;
  left: 12%;
  bottom: 15%;

  width: 45px;
  height: 45px;

  background: var(--yellow);

  clip-path: polygon(
    50% 0,
    100% 50%,
    50% 100%,
    0 50%
  );

  transform: rotate(12deg);

  z-index: 1;
}
.event-hero-star {
  position: absolute;
  right: 18%;
  top: 15%;

  width: 50px;
  height: 50px;

  background: var(--yellow);

  clip-path: polygon(
    50% 0%,
    61% 35%,
    100% 35%,
    69% 57%,
    80% 100%,
    50% 72%,
    20% 100%,
    31% 57%,
    0 35%,
    39% 35%
  );

  z-index: 1;
}



/* NAV */

.event-nav {
  position: relative;
  z-index: 2;
  color: white;
  font-weight: 700;
}

.event-nav a {
  opacity: 1;
}


/* HERO CONTENT */

.event-hero__content {
  position: relative;
  z-index: 2;
  min-height: calc(66vh - 70px);
}

.event-hero__content .event-date {
  color: white;
}


/* BIG TITLE */

.event-hero h1 {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: .01em;

 color: #f45b9a;

  text-shadow:
    4px 4px 0 #121212,
    8px 8px 0 #fff21c;

  max-width: 850px;
  margin: 20px auto 30px;
}


/* HERO DESCRIPTION */

.event-hero__content p {
  color: white;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
  max-width: 650px;
}


/* ========================================
   HERO BUTTONS
   ======================================== */

.hero-buttons {
  margin-top: 25px;
}

.hero-buttons .button {
  border-radius: 999px;
  padding: 13px 24px;

  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;

  border: 2px solid var(--black);
}

.hero-buttons .button-light {
  background: var(--yellow);
  color: var(--black);
}

.hero-buttons .button:nth-child(2) {
  background: var(--black);
  color: white;
}

.hero-buttons .button:nth-child(3) {
  background: var(--pink);
  color: var(--black);
}

.hero-buttons .button:hover {
  background: white;
  color: var(--black);
}


/* ========================================
   HORIZONTAL PARTY DETAILS
   ======================================== */

.details-section {
  position: relative;
  background: var(--cream);
  padding: 38px 0 55px;
}

.details-section .center-heading {
  display: none;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border: none;
}

.detail-card {
  padding: 20px 18px;
  border: none !important;
  text-align: center;
}

.detail-card + .detail-card {
  border-left: 1px solid rgba(18,18,18,.18) !important;
}

.detail-label {
  color: var(--black);
  font-size: .68rem;
  letter-spacing: .18em;
}

.detail-card strong {
  font-size: 1.45rem;
}

.details-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -45px;
  height: 55px;

  background: var(--cream);

  clip-path: polygon(
    0 0,
    12.5% 70%,
    25% 0,
    37.5% 70%,
    50% 0,
    62.5% 70%,
    75% 0,
    87.5% 70%,
    100% 0,
    100% 0,
    0 0
  );

  z-index: 4;
}


/* ========================================
   MENU
   ======================================== */

.menu-section {
  width: 100%;
  max-width: none;
  position: relative;
  overflow: hidden;

  background: var(--pink);
  color: var(--black);

  padding: 80px max(20px, calc((100% - 1100px) / 2));
   padding-top: 120px;
}


/* Menu heading */

.menu-section .center-heading {
  margin-bottom: 45px;
}

.menu-section h2 {
  display: inline-block;
  position: relative;

  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  text-transform: uppercase;

  color: var(--black);
  transform: rotate(-2deg);
}

.menu-section h2::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: 6px;
  height: 18px;

  background: var(--yellow);
  z-index: -1;

  transform: rotate(1deg);
}


/* Course headings */

.menu-course {
  padding: 26px 0;
  text-align: center;
}

/* Horizontal food row */

.food-course .menu-items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 20px;

  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.food-course .menu-item {
  flex: 1 1 180px;
  max-width: 240px;
  margin: 0;
  padding: 18px 20px;

  text-align: center;

  border: 2px solid var(--black);
  background: rgba(255,255,255,.12);

  transform: rotate(-1deg);
}

.food-course .menu-item:nth-child(even) {
  transform: rotate(1deg);
}

.food-course .menu-item strong {
  font-size: 1.4rem;
}


.menu-section::before {
  content: "";
  position: absolute;

  width: 52px;
  height: 52px;

  top: 115px;
  left: 4%;

  background: var(--yellow);

  clip-path: polygon(
    50% 0%,
    61% 35%,
    100% 35%,
    69% 57%,
    80% 100%,
    50% 72%,
    20% 100%,
    31% 57%,
    0 35%,
    39% 35%
  );
}

.menu-section::after {
  content: "";
  position: absolute;

  width: 80px;
  height: 80px;

  right: 4%;
  bottom: 110px;

  background: var(--blue);

  clip-path: polygon(0 0, 100% 50%, 0 100%);

  transform: rotate(15deg);
}

/* Menu items */

.menu-item {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 18px 30px;

  text-align: center;
}

.menu-item strong {
  display: block;

  font-family: "DM Sans", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;

  color: var(--black);
}

.menu-item span {
  display: block;
  margin-top: 7px;

  font-size: 1.1rem;
  line-height: 1.5;

  color: rgba(0,0,0,.68);
}

/* Host note */

.menu-note {
  background: var(--yellow);
  border: 3px solid var(--black);
  color: var(--black);

  box-shadow: 7px 7px 0 var(--black);
}

.menu-note p {
  color: var(--black);
}

/* ========================================
   PHOTOS → MENU ZIG-ZAG
   ======================================== */





/* ========================================
   RETRO CUBE
   ======================================== */

.retro-cube {
  position: absolute;
  right: -25px;
  bottom: -12px;

  width: 210px;
  height: 210px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  background: var(--black);
  border: 8px solid var(--black);

  transform: rotate(8deg);

  box-shadow: 10px 10px 0 rgba(18,18,18,.2);

  z-index: 1;
}

.retro-cube span {
  border: 5px solid var(--black);
}

.retro-cube span:nth-child(1) {
  background: var(--yellow);
}

.retro-cube span:nth-child(2) {
  background: var(--coral);
}

.retro-cube span:nth-child(3) {
  background: var(--blue);
}

.retro-cube span:nth-child(4) {
  background: var(--lime);
}

.retro-cube span:nth-child(5) {
  background: var(--pink);
}

.retro-cube span:nth-child(6) {
  background: var(--yellow);
}

.retro-cube span:nth-child(7) {
  background: var(--blue);
}

.retro-cube span:nth-child(8) {
  background: var(--coral);
}

.retro-cube span:nth-child(9) {
  background: var(--lime);
}

/* ========================================
   PHOTO SECTION
   ======================================== */

.photos-section {
  position: relative;
  z-index: 2;

  background: var(--black);
  color: white;

  padding-top: 60px;
  padding-bottom: 90px;
}

/* zig zag */
.photos-section::after {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  bottom: -44px;

  height: 45px;
  background: var(--black);

  clip-path: polygon(
    0 0,
    12.5% 75%,
    25% 0,
    37.5% 75%,
    50% 0,
    62.5% 75%,
    75% 0,
    87.5% 75%,
    100% 0,
    100% 0,
    0 0
  );

  z-index: 3;
}

.photos-section h2 {
  font-family: "Anton", Impact, sans-serif;

  font-size: clamp(3rem, 8vw, 5.5rem);

  text-transform: uppercase;

  color: white;

  transform: rotate(-2deg);
}

.photos-section .eyebrow {
  color: var(--yellow);
}

.photos-section .section-heading > p {
  color: rgba(255,255,255,.75);
}


/* Photo navigation arrows */

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 58px;
  height: 58px;

  border: 3px solid var(--black);
  border-radius: 50%;

  background: var(--yellow);
  color: var(--black);

  font-size: 2rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  box-shadow: 5px 5px 0 var(--pink);

  transition:
    transform .2s ease,
    background .2s ease;
}

.gallery-prev {
  left: 12px;
}

.gallery-next {
  right: 12px;
}

.gallery-prev:hover,
.gallery-next:hover {
  background: white;
  transform: translateY(-50%) scale(1.08);
}

.gallery-prev:active,
.gallery-next:active {
  transform: translateY(-50%) scale(.96);
}

.gallery-prev,
.gallery-next {
  opacity: 1;
  visibility: visible;

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease,
    background .2s ease;
}

.gallery-prev.hidden,
.gallery-next.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ========================================
   HORIZONTAL PHOTO STRIP
   ======================================== */

.gallery-scroll-wrap {
  position: relative;
}

.gallery {
  display: flex;
  gap: 18px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 8px 65px 18px 4px;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar */
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery-item,
.gallery-item.tall,
.gallery-item.wide {
  flex: 0 0 320px;

  width: 320px;
  height: 260px;
  min-height: 0;

  grid-column: auto;
  grid-row: auto;

  scroll-snap-align: start;

  border-radius: 12px;
  border: 3px solid white;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-next {
  position: absolute;

  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  z-index: 5;

  width: 58px;
  height: 58px;

  border: 3px solid var(--black);
  border-radius: 50%;

  background: var(--yellow);
  color: var(--black);

  font-size: 2rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  box-shadow: 5px 5px 0 var(--pink);

  transition:
    transform .2s ease,
    background .2s ease;
}

.gallery-next:hover {
  background: white;
  transform: translateY(-50%) scale(1.08);
}

.gallery-next:active {
  transform: translateY(-50%) scale(.96);
}

/* ========================================
   PHOTO BUTTONS
   ======================================== */

.photo-actions .button-light {
  background: var(--yellow);
  color: var(--black);

  border: 2px solid var(--yellow);
}

.photo-actions .button-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}


/* ========================================
   FOOTER
   ======================================== */

.event-footer {
  background: var(--blue);

  color: white;

  border: none;

  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-footer a {
  text-decoration: none;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {

  .event-hero {
    min-height: 60svh;
  }

  .event-hero__content {
    min-height: calc(60svh - 60px);
  }

  .event-hero h1 {
    font-size: clamp(3.7rem, 18vw, 6rem);

    text-shadow:
      3px 3px 0 var(--black),
      5px 5px 0 var(--pink);
  }

  .hero-buttons {
    gap: 8px;
  }

  .hero-buttons .button {
    padding: 11px 16px;
    font-size: .75rem;
  }

  .details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-card + .detail-card {
    border-left: none !important;
  }

  .detail-card:nth-child(even) {
    border-left: 1px solid rgba(18,18,18,.18) !important;
  }

  .detail-card:nth-child(n+3) {
    border-top: 1px solid rgba(18,18,18,.18) !important;
  }


  .menu-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* rubix cube to not disply on phone */
  .retro-cube {
    display: none;
  }

  /* photo gallery scroll */
  .gallery-item,
  .gallery-item.tall,
  .gallery-item.wide {
     flex: 0 0 82vw;
    width: 82vw;
    height: 240px;
  }

  .gallery-next {
    width: 48px;
    height: 48px;
    right: 8px;
    font-size: 1.6rem;
  }


}