/* reel-values.css */

/* Section wrapper */
#reel-values {
  background-color: var(--white);
}

/* REEL SECTION 1 */
.reel-values {
  color: var(--navy);
  padding: clamp(1rem, 0.75rem + 1.5vw, 2rem) 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1rem + 2vw, 2.5rem);

  align-items: center;
}

/* Desktop / large tablets */
@media (min-width: 900px) {
  .reel-values {
    grid-template-columns: 0.9fr 1.1fr; /* slightly favor video */
  }
}

/* LEFT column: values always centered */
.reel-values__left {
  font-family: var(--font-heading-2);
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.25rem + 0.8vw, 1rem);

  text-align: center;
  align-items: center;
}

/* Each row (stars + word) */
.banner-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.2rem + 0.6vw, 0.75rem);
}

/* Stars — smaller on mobile */
.banner-row img {
  width: clamp(1.25rem, 0.9rem + 1.8vw, 3.5rem);
  height: auto;
  display: block;
}

/* Titles — smaller minimum size */
.banner-title {
  line-height: 1;
  font-size: clamp(1.25rem, 0.9rem + 2.6vw, 3.75rem);
  margin: 0;
  color: var(--navy);

}
/* RIGHT column: keep video as close to natural size as possible */
.reel-values__right {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 900px) {
  .reel-values__right {
    justify-content: flex-end;
  }
}

/* Frame does NOT force a tall box; it hugs content */
.reel-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/*
  Video sizing:
  - natural feel
  - scales with screen
  - never cropped
*/
.reel-video {
  display: block;
  width: auto;
  height: auto;

  /* Base (mobile / tablet) */
  max-width: min(100%, 420px);
  max-height: 560px;

  object-fit: contain;
  background: #000;
}

/* Large screens */
@media (min-width: 1200px) {
  .reel-video {
    max-width: 520px;
    max-height: 680px;
  }
}

/* Very large screens */
@media (min-width: 1600px) {
  .reel-video {
    max-width: 600px;
    max-height: 760px;
  }
}

/* ------------------------------------
   Reel Values scroll push (desktop only)
------------------------------------- */

/* Top-align the two-column layout */
.reel-values {
  align-items: start;
}

/* Allow JS-driven vertical push */
#reel-values .reel-values__left {
  transform: translateY(var(--values-push, 0px));
  will-change: transform;
}

/* Disable effect on small screens */
@media (max-width: 899px) {
  #reel-values .reel-values__left {
    transform: none;
  }
}