/* ============================================================
   Community Partnerships
   cp- prefix throughout. Reuses tokens.css + styles.css globals
   (.eyebrow, .lead, .btn, .reveal). Photo focal points are set
   per-image with inline object-position.
   ============================================================ */

/* ===========================================================
   HERO  — bottom-anchored editorial over the gold-confetti shot
   =========================================================== */
.cp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 0 9vh;
}
.cp-hero__bg {
  position: absolute;
  inset: 0;
  background: url('/assets/community_partnerships_photos/spotlight-checks.jpg') center 30%/cover no-repeat;
}
/* Two stacked gradients: a left wash for headline legibility, a
   bottom wash so the copy sits on near-solid dark. */
.cp-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22,23,25,0.55) 0%, rgba(22,23,25,0.05) 26%, rgba(22,23,25,0.30) 58%, rgba(22,23,25,0.97) 100%),
    linear-gradient(90deg, rgba(22,23,25,0.82) 0%, rgba(22,23,25,0.30) 52%, rgba(22,23,25,0) 100%);
}
.cp-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}
.cp-hero__h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.9;
  color: #F4F4F4;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  opacity: 0;
  animation: cpFadeUp 0.9s ease 0.35s forwards;
}
.cp-hero__h1 em {
  color: #00BDFF;
  font-style: normal;
  display: block;
}
.cp-hero__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #B0B2B5;
  max-width: 520px;
  margin: 0;
  opacity: 0;
  animation: cpFadeUp 0.9s ease 0.5s forwards;
}
@keyframes cpFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================
   STORY SECTIONS  — shared scaffold, three media treatments
   =========================================================== */
.cp-story { padding: 104px 0; scroll-margin-top: 90px; }
.cp-story.inlay { background: var(--jg-dark-inlay); }
.cp-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 40px;
}
/* photo-lead = give the media column a touch more room */
.cp-story--lead .cp-story__grid { grid-template-columns: 0.92fr 1.08fr; }
.cp-story.flip .cp-story__copy { order: 2; }
.cp-story.flip .cp-story__media { order: 1; }

.cp-story__copy h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--jg-light);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.92;
  margin: 0 0 22px;
}
.cp-story__copy .lead { max-width: 480px; }

/* shared photo tile */
.cp-photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #0d0e10;
}
.cp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
}
.cp-photo:hover img { transform: scale(1.045); }
/* photo caption overlay + corner stripe removed */

/* --- treatment: single marquee photo --- */
.cp-media--single .cp-photo { aspect-ratio: 5 / 4; }

/* --- treatment: 3-photo collage (wide lead + two below) --- */
.cp-media--collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cp-media--collage .cp-photo--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.cp-media--collage .cp-photo:not(.cp-photo--main) { aspect-ratio: 4 / 3; }

/* --- treatment: two stacked landscape frames --- */
.cp-media--duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cp-media--duo .cp-photo { aspect-ratio: 3 / 2; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 920px) {
  .cp-hero__content,
  .cp-story__grid { padding-left: 28px; padding-right: 28px; }

  .cp-story__grid,
  .cp-story--lead .cp-story__grid { grid-template-columns: 1fr; gap: 38px; }
  .cp-story.flip .cp-story__copy,
  .cp-story.flip .cp-story__media { order: initial; }
  .cp-media--single .cp-photo { aspect-ratio: 16 / 11; }
}

@media (max-width: 560px) {
  .cp-story { padding: 72px 0; }
  .cp-media--collage .cp-photo--main { aspect-ratio: 16 / 10; }
  .cp-media--collage .cp-photo:not(.cp-photo--main) { aspect-ratio: 1 / 1; }
}