.hero-detail { height: 70vh; position: relative; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.hero-content { position: absolute; bottom: 10%; left: 4rem; }
.hero-content h1 { font-size: 6vw; text-transform: uppercase; line-height: 1; }
.tag { background: var(--primary-red); color: #fff; padding: 5px 15px; border-radius: 5px; font-weight: 700; margin-bottom: 1rem; display: inline-block; }

.main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; padding: 4rem; max-width: 1400px; margin: 0 auto; }
.info-section h2 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--primary-red); }
.info-section p { font-size: 1.2rem; line-height: 1.8; color: #ccc; margin-bottom: 2rem; }

.sidebar { position: sticky; top: 100px; height: fit-content; background: var(--surface); padding: 2rem; border-radius: 20px; border: 1px solid #222; }
.event-meta { margin-bottom: 2rem; }
.meta-item { margin-bottom: 1.5rem; border-bottom: 1px solid #222; padding-bottom: 1rem; }
.meta-item label { display: block; font-size: 0.8rem; color: #666; text-transform: uppercase; margin-bottom: 5px; }
.meta-item span { font-size: 1.2rem; font-weight: 600; }

.btn-rsvp { background: var(--primary-red); color: #fff; width: 100%; padding: 20px; border-radius: 12px; font-size: 1.1rem; font-weight: 700; text-align: center; text-decoration: none; display: block; transition: 0.3s; border: none; }
.btn-rsvp:hover { background: #fff; color: #000; transform: translateY(-5px); }

.back-nav { position: absolute; top: 6rem; left: 4rem; z-index: 10; }
.back-nav a { color: #fff; text-decoration: none; font-weight: 600; font-family: 'Outfit'; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 50px; border: 1px solid #444; backdrop-filter: blur(5px); transition: 0.3s; }
.back-nav a:hover { border-color: var(--primary-red); }

@media (max-width: 768px) {
  .main-content { grid-template-columns: 1fr; padding: 2rem; }
  .hero-content { left: 2rem; }
  .back-nav { left: 2rem; }
}