/* ============================================================
   Project template
   Extends css/style.css and css/event.css — reuses their design
   tokens and shared components (.media-card, .masonry-gallery,
   .closing, .badge-pill, .media-placeholder, lightbox/video-modal).

   This file only adds the project-specific hero and overview
   sections, which are deliberately different from the event
   template's hero/highlights/stats/sponsors structure.

   Content is data-driven: js/projects-data/<slug>.js supplies the
   values, js/project.js renders them into the containers below.
   ============================================================ */

/* ============================================================
   1. Hero
   ============================================================ */
.project-hero{
  position: relative;
  margin-top: -124px;
  min-height: calc(88vh + 124px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 124px;
}
.project-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.project-hero__media img,
.project-hero__media video{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 85%;
}
.project-hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(10,10,10,.96) 45%, rgba(10,10,10,.88) 100%),
    linear-gradient(90deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.55) 30%, rgba(10,10,10,.55) 70%, rgba(10,10,10,.75) 100%);
}
.project-hero.has-placeholder-media .project-hero__scrim{
  background: linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,.4) 100%);
}
.project-hero__media .media-placeholder{
  justify-content: flex-start;
  padding-top: 15vh;
}
.project-hero__content{
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.project-hero__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.08;
  color: var(--bone-white);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.project-hero__subtitle{
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-text);
  max-width: 56ch;
  margin: 0 auto 16px;
}
.project-hero__meta{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin-bottom: 32px;
}
.project-hero__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 18px;
}

@media (max-width: 700px){
  .project-hero{ align-items:center; padding-top: 96px; min-height: calc(80vh + 88px); margin-top: -88px; }
  .project-hero__content{ padding-bottom: 40px; }
  .project-hero__actions{ flex-direction:column; align-items:center; }
  .project-hero__actions .btn{ justify-content:center; }
}