/* ============================================
   Homepage Live Experience — compact video trio
   Linked directly with ?v=filemtime (not @import alone).
   Desktop/tablet: capped 3-col grid | Mobile: horizontal rail
   ============================================ */

.page-home #experience-live.page-section,
.page-home #experience-live[data-world="energy"] {
  padding-block: 2rem !important;
  overflow: hidden;
  box-shadow: none;
}

.page-home #experience-live.home-section-transition::before {
  height: 1.5rem;
  opacity: 0.25;
}

.page-home #experience-live .experience-live__shell {
  width: min(calc(100% - 80px), 1240px);
  max-width: 1240px;
  margin-inline: auto;
}

.page-home #experience-live .experience-live__header {
  margin-bottom: 1rem;
}

.page-home #experience-live .experience-live__header .eyebrow {
  color: var(--color-magma);
}

.page-home #experience-live .experience-live__brand {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}

/* —— Mobile default: horizontal rail —— */
.page-home #experience-live ul.live-home-grid {
  --lv-gap: 0.85rem;
  --lv-card-w: 380px;
  --lv-frame-h: 240px;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--lv-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.page-home #experience-live ul.live-home-grid::-webkit-scrollbar {
  display: none;
}

.page-home #experience-live ul.live-home-grid > .live-home-grid__item {
  flex: 0 0 auto;
  width: min(82vw, 17rem);
  max-width: var(--lv-card-w);
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
}

.page-home #experience-live .live-home-grid__card {
  display: block;
  width: 100%;
  max-width: var(--lv-card-w);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  font: inherit;
}

.page-home #experience-live a.live-home-grid__card {
  cursor: pointer;
}

.page-home #experience-live .live-home-grid__card:focus-visible .live-home-grid__frame {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.page-home #experience-live .live-home-grid__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--lv-frame-h);
  max-height: 320px;
  background: var(--color-mineral, #0c0c0e);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.page-home #experience-live .live-home-grid__frame img,
.page-home #experience-live .live-home-grid__frame picture,
.page-home #experience-live .live-home-grid__frame picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 300ms ease;
}

.page-home #experience-live .live-home-grid__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.35) 0%, transparent 45%);
  pointer-events: none;
  transition: background 300ms ease;
}

.page-home #experience-live .live-home-grid__play {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  opacity: 0.88;
}

.page-home #experience-live .live-home-grid__play-mark {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent rgba(247, 247, 247, 0.92);
}

.page-home #experience-live .live-home-grid__play-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white, #f7f7f7);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.page-home #experience-live .live-home-grid__caption {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.45rem;
  max-width: var(--lv-card-w);
}

.page-home #experience-live .live-home-grid__type {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-home #experience-live .live-home-grid__title {
  color: var(--color-white, #f7f7f7);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home #experience-live .live-home-grid__meta {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home #experience-live .live-home-grid__foot {
  display: flex;
  justify-content: flex-end;
}

.page-home #experience-live ul.live-home-grid > [data-reveal] {
  --reveal-rise: 0;
}

/* Kill legacy huge live stage only when compact grid is active */
.page-home #experience-live:has(.live-home-grid) .experience-live__stage,
.page-home #experience-live:has(.live-home-grid) .experience-live__rail,
.page-home #experience-live:has(.live-home-grid) .media-crop--cinematic {
  display: none !important;
  width: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

@media (max-width: 767px) {
  .page-home #experience-live .experience-live__shell {
    width: min(100% - 2rem, 1240px);
  }

  .page-home #experience-live ul.live-home-grid {
    --lv-frame-h: clamp(210px, 52vw, 260px);
    margin-inline: -1rem;
    padding-inline: 1rem;
    width: calc(100% + 2rem);
  }
}

/* —— ≥768: 3 capped tracks, empty space if 1–2 videos —— */
@media (min-width: 768px) {
  .page-home #experience-live ul.live-home-grid {
    --lv-gap: clamp(14px, 1.8vw, 22px);
    --lv-card-w: 340px;
    --lv-frame-h: 230px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--lv-card-w)));
    justify-content: start;
    justify-items: start;
    align-items: start;
    gap: var(--lv-gap);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }

  .page-home #experience-live ul.live-home-grid > .live-home-grid__item {
    flex: none;
    width: 100%;
    max-width: var(--lv-card-w);
    scroll-snap-align: none;
  }

  .page-home #experience-live .live-home-grid--count-1 > .live-home-grid__item:nth-child(1),
  .page-home #experience-live .live-home-grid--count-2 > .live-home-grid__item:nth-child(1) {
    grid-column: 1;
  }

  .page-home #experience-live .live-home-grid--count-2 > .live-home-grid__item:nth-child(2) {
    grid-column: 2;
  }
}

@media (min-width: 1024px) {
  .page-home #experience-live ul.live-home-grid {
    --lv-gap: clamp(18px, 2vw, 28px);
    --lv-card-w: 380px;
    --lv-frame-h: 260px;
    grid-template-columns: repeat(3, minmax(0, var(--lv-card-w)));
  }

  .page-home #experience-live .live-home-grid__frame {
    max-height: 300px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-home #experience-live .live-home-grid__card:hover .live-home-grid__frame img,
  .page-home #experience-live .live-home-grid__card:focus-visible .live-home-grid__frame img {
    transform: scale(1.015);
  }

  .page-home #experience-live .live-home-grid__card:hover .live-home-grid__veil,
  .page-home #experience-live .live-home-grid__card:focus-visible .live-home-grid__veil {
    background: linear-gradient(to top, rgba(5, 5, 5, 0.45) 0%, rgba(0, 0, 0, 0.12) 50%, transparent 70%);
  }

  .page-home #experience-live .live-home-grid__card:hover .live-home-grid__play,
  .page-home #experience-live .live-home-grid__card:focus-visible .live-home-grid__play {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home #experience-live .live-home-grid__frame img {
    transition: none;
  }
}