/* ==========================================================================
   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; }
}

/* --------------------------------------------------------------------------
   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 (2:3) is the default; .vxg--landscape swaps every cell to 16:9 */
.vxg-cell {
  aspect-ratio: 2 / 3;
}
.vxg--landscape .vxg-cell {
  aspect-ratio: 16 / 9;
}
/* top-10 aspect variants, if a surface ever renders skeletons for them */
.vxg--top10-portrait .vxg-cell {
  aspect-ratio: 1 / 0.8;
}
.vxg--top10-landscape .vxg-cell {
  aspect-ratio: 1 / 0.48;
}
/* 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;
  }
}