/* Makhanley operational footage and compact supporting video features. */
.real-footage-section,
.real-footage-section *,
.real-grading-feature,
.real-grading-feature *,
.grade-live-video,
.grade-live-video * { box-sizing: border-box; }

.real-footage-section {
  padding: clamp(3.75rem, 7vw, 6rem) 1.25rem;
  background: #e8e3d9;
  color: #1a3b28;
  border-block: 1px solid #d8d2c5;
}
.real-footage-section__inner { width: min(100%, 1160px); margin-inline: auto; }
.real-footage-section__heading { max-width: 780px; }
.real-footage-section__eyebrow { margin: 0 0 .8rem; color: #a64b2a; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.real-footage-section__heading h2 { margin: 0; color: #1a3b28; font: 650 clamp(2.1rem, 4.6vw, 3.5rem)/1.08 Inter, Arial, sans-serif; letter-spacing: -.04em; }
.real-footage-section__heading > p:last-child { margin: 1rem 0 0; max-width: 700px; color: #526052; font-size: 1rem; line-height: 1.8; }

/* Horizontal, swipeable Shorts-style carousel. The 9:16 viewport is intentional;
   object-fit: contain preserves the entire source frame, including landscape clips. */
.real-footage-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) 2.7rem;
  align-items: center;
  gap: .65rem;
  width: min(100%, 1160px);
  margin-top: 2.2rem;
}
.real-footage-grid.real-footage-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: .25rem .1rem .9rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .1rem;
  scrollbar-width: thin;
  scrollbar-color: #a6a091 transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.real-footage-carousel__track::-webkit-scrollbar { height: 7px; }
.real-footage-carousel__track::-webkit-scrollbar-track { background: transparent; }
.real-footage-carousel__track::-webkit-scrollbar-thumb { border-radius: 999px; background: #a6a091; }
.real-footage-card {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  border: 1px solid #d8d2c5;
  border-radius: 1rem;
  background: #fffdf8;
  box-shadow: 0 10px 26px rgb(26 59 40 / 5%);
}
.real-footage-card__media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #102519;
}
.real-footage-card__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  background-image: var(--real-footage-poster, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(16px);
  opacity: .48;
  transform: scale(1.08);
}
.real-footage-card__media video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  cursor: pointer;
}
.real-footage-card__media video:focus-visible { outline: 3px solid #a64b2a; outline-offset: -4px; }
.real-footage-carousel__arrow {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid #c7c1b4;
  border-radius: 50%;
  background: #fffdf8;
  color: #1a3b28;
  box-shadow: 0 4px 12px rgb(26 59 40 / 8%);
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}
.real-footage-carousel__arrow:hover:not(:disabled) { background: #f7f5f0; transform: scale(1.04); }
.real-footage-carousel__arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }
.real-footage-carousel__arrow:focus-visible { outline: 3px solid #a64b2a; outline-offset: 3px; }
.real-footage-carousel__arrow svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.real-footage-carousel__hint { margin: .3rem 0 0; color: #687367; font-size: .8rem; line-height: 1.5; }
.real-footage-card__body { padding: 1.2rem 1.25rem 1.35rem; }
.real-footage-card__label { margin: 0 0 .45rem; color: #a64b2a; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.real-footage-card h3 { margin: 0; color: #1a3b28; font-size: 1.2rem; line-height: 1.3; }
.real-footage-card__body > p:last-child { margin: .55rem 0 0; color: #566256; font-size: .92rem; line-height: 1.7; }

/* Compact vertical grade samples are intentionally not autoplayed. */
.grade-live-video { width: min(100%, 184px); margin: 1.2rem auto 1.35rem; }
.grade-live-video video { display: block; width: 100%; height: auto; aspect-ratio: 478 / 850; object-fit: contain; overflow: hidden; border: 1px solid #d8d2c5; border-radius: .8rem; background: #e8e3d9; }
.grade-live-video figcaption { margin-top: .55rem; color: #697165; font-size: .75rem; line-height: 1.5; text-align: center; }

/* A real grading clip is shown beside the explanation on the bulk-supply page. */
.bulk-page .real-grading-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--bulk-line, #d8d2c5); }
.bulk-page .real-grading-feature__media { margin: 0; overflow: hidden; border: 1px solid var(--bulk-line, #d8d2c5); border-radius: 1rem; background: #173524; box-shadow: 0 12px 32px rgb(37 40 32 / 8%); }
.bulk-page .real-grading-feature__media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #173524; }
.bulk-page .real-grading-feature__copy .bulk-eyebrow { margin-bottom: .8rem; }
.bulk-page .real-grading-feature__copy h3 { margin: 0; color: var(--bulk-ink, #252820); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
.bulk-page .real-grading-feature__copy p:not(.bulk-eyebrow) { margin: .85rem 0 0; color: var(--bulk-muted, #657064); font-size: .98rem; line-height: 1.75; }
.bulk-page .real-grading-feature__copy a { display: inline-flex; margin-top: 1.1rem; color: var(--bulk-green, #203d2d); font-weight: 750; text-underline-offset: 4px; }
.bulk-page .bulk-section--real-footage { padding: var(--bulk-section-y) 0; background: var(--bulk-paper); border-top: 1px solid var(--bulk-line); }
.bulk-page .bulk-section--real-footage .real-grading-feature { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 860px) {
  .real-footage-carousel { grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem; gap: .4rem; }
  .real-footage-carousel__arrow { width: 2.25rem; height: 2.25rem; }
  .real-footage-card { flex-basis: calc((100% - 1rem) / 2); }
  .bulk-page .real-grading-feature { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .real-footage-section { padding-inline: 1rem; }
  .real-footage-carousel {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr) 1.9rem;
    gap: .35rem;
    margin-top: 1.65rem;
    width: 100%;
  }
  .real-footage-carousel__arrow { display: grid; width: 1.9rem; height: 1.9rem; }
  .real-footage-grid.real-footage-carousel__track { gap: .8rem; padding-bottom: .8rem; }
  .real-footage-card { flex-basis: 100%; border-radius: .9rem; }
  .real-footage-card__body { padding: 1rem 1.05rem 1.15rem; }
  .real-footage-carousel__hint { margin-top: .15rem; }
  .grade-live-video { width: min(100%, 176px); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-video-toggle::before,
  .mk-video-toggle::after,
  .real-footage-carousel__arrow { transition: none; }
}