/* ==========================================================================
   vxg — unified content grid + skeleton for styles/default
   The layout that both the real grid pages and their skeleton loaders share,
   so the placeholders line up with the cards by construction. Column counts
   mirror the swiper breakpoints (2/3/4/5/6/7); orientation (portrait 2:3 vs
   landscape 16:9) is driven by window.vodlixLayout and applied via a modifier
   class. Consumes only --vod-* variables; vodlix.css is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid container — responsive columns matching the swiper breakpoints
   -------------------------------------------------------------------------- */
.vxg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  /* match the swiper's .insidePadding (3% each side) so skeleton cells sit at
     the same x as the real cards */
  padding-left: 3%;
  padding-right: 3%;
  margin-bottom: 24px;
}
@media (min-width: 620px)  { .vxg { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .vxg { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .vxg { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .vxg { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1450px) { .vxg { grid-template-columns: repeat(7, 1fr); } }

/* --------------------------------------------------------------------------
   Skeleton hero — the editors-pick banner. Contained (inset + rounded, not
   edge-to-edge) with a bounded height so it reads as a hero placeholder, not a
   giant blank rectangle, and a bottom margin so it never overlaps the row
   below. Faint logo + button bars echo the real hero's overlay.
   -------------------------------------------------------------------------- */
.vxg-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* full-bleed like the real editors-pick hero, pulled up behind the header the
     same way .featureSlider is (margin-top: -6rem); bottom margin keeps it off
     the first row. Height is a touch shorter than a full 16:9 so the empty area
     below the placeholder content isn't overbearing before the first row. */
  margin: -6rem 0 28px;
  height: clamp(340px, 50vw, 720px);
  background-color: var(--vod-menu-bg);
}
@media (max-width: 767px) {
  .vxg-hero {
    margin-top: -3rem;
  }
}
/* full-screen hero (view_type 2/3) — fills the viewport minus the header on
   desktop, matching .featureSlider.heroimage */
.vxg-hero--full {
  aspect-ratio: 16 / 9;
}
@media (min-width: 992px) {
  .vxg-hero--full {
    aspect-ratio: auto;
    height: calc(100vh - 64px);
  }
}
.vxg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vod-white-color) 7%, transparent), transparent);
  animation: vxs-shimmer 1.4s ease-in-out infinite;
}
.vxg-hero__meta {
  position: relative;
  z-index: 1;
  padding: 0 0 clamp(22px, 4vw, 44px) clamp(24px, 4vw, 48px);
}
.vxg-hero__logo {
  width: clamp(170px, 24vw, 300px);
  height: clamp(26px, 3.6vw, 42px);
  margin-bottom: 16px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  background-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
}
.vxg-hero__btns {
  display: flex;
  gap: 10px;
}
.vxg-hero__btn {
  width: clamp(92px, 11vw, 132px);
  height: clamp(32px, 3.6vw, 42px);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  background-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .vxg-hero::after { animation: none; }
}

/* Content-list-group hero placeholder: shown until the editors-pick hero
   reveals itself (its own JS drops `.d-none` on `.featureSlider`) or the EP
   resolves empty (`body.notEditorPick`). Wrapped so it doesn't disturb the
   `.featureSlider + .overLapEditor` adjacency the group page relies on. */
.clg-hero-ph:has(+ .featureSlider:not(.d-none)),
body.notEditorPick .clg-hero-ph {
  display: none;
}
/* While the hero is still a skeleton (real hero hidden), the rails sit BELOW
   it instead of overlapping — the -13vw pull (`.featureSlider + .overLapEditor`)
   only makes sense once the real editors-pick hero is showing. The extra
   `.d-none` outranks every responsive variant of that rule (all 0,2,0), so no
   !important is needed and the empty-EP `notEditorPick` rule stays in charge. */
.featureSlider.d-none + .overLapEditor {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Skeleton rail — a row heading + one horizontal strip of cells, matching the
   home/movies/tv-shows swiper rows. Columns per view mirror the swiper
   breakpoints; extra cells overflow off the right like the real rail.
   -------------------------------------------------------------------------- */
.vxg-rail {
  padding-left: 3%;
  padding-right: 3%;
  margin-bottom: 28px;
}
.vxg-rail__title {
  position: relative;
  overflow: hidden;
  width: 190px;
  max-width: 45%;
  height: 20px;
  margin-bottom: 12px;
  border-radius: 6px;
  background-color: var(--vod-menu-bg);
}
.vxg-rail__row {
  display: flex;
  gap: 5px;
  overflow: hidden;
}
/* one cell per column-slot; width tracks the swiper's slidesPerView so the
   strip shows the same number of cards as the real rail */
.vxg-rail__row .vxg-cell {
  flex: 0 0 calc(100% / 2 - 5px);
}
@media (min-width: 620px)  { .vxg-rail__row .vxg-cell { flex-basis: calc(100% / 3 - 5px); } }
@media (min-width: 768px)  { .vxg-rail__row .vxg-cell { flex-basis: calc(100% / 4 - 5px); } }
@media (min-width: 1040px) { .vxg-rail__row .vxg-cell { flex-basis: calc(100% / 5 - 5px); } }
@media (min-width: 1200px) { .vxg-rail__row .vxg-cell { flex-basis: calc(100% / 6 - 5px); } }
@media (min-width: 1450px) { .vxg-rail__row .vxg-cell { flex-basis: calc(100% / 7 - 5px); } }

.vxg-rail__title::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vod-white-color) 7%, transparent), transparent);
  animation: vxs-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vxg-rail__title::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Skeleton cells — orientation-aware, shimmer shared with the vxs system
   -------------------------------------------------------------------------- */
.vxg-cell {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--vod-menu-bg);
}
/* portrait (9:16 — the platform's portrait art standard, see cards.css
   portrait-ratio note) is the default; .vxg--landscape swaps to 16:9 */
.vxg-cell {
  aspect-ratio: 9 / 16;
}
.vxg--landscape .vxg-cell {
  aspect-ratio: 16 / 9;
}
/* top-10 aspect variants — match the real slide geometry in cards.css
   (card at 55%/72% of the slide, 9:16 / 16:9) */
.vxg--top10-portrait .vxg-cell {
  aspect-ratio: 1 / 0.978;
}
.vxg--top10-landscape .vxg-cell {
  aspect-ratio: 1 / 0.405;
}
/* flat info-card variant (e.g. bundles) — fixed height, not a poster aspect */
.vxg-cell--flat {
  aspect-ratio: auto;
  height: 88px;
}

.vxg-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vod-white-color) 7%, transparent), transparent);
  animation: vxs-shimmer 1.4s ease-in-out infinite;
}
/* vxs-shimmer keyframes live in cards.css (loaded first); no need to redefine */

@media (prefers-reduced-motion: reduce) {
  .vxg-cell::after {
    animation: none;
  }
}