/* Skeleton placeholders for lazy-loaded homepage sections.
   Each placeholder reserves layout space (min-height) so content
   swap-in does not jump the page, and shows a shimmering gray
   block roughly shaped like the real section it will become.

   The .skeleton-shape primitive (shimmer animation, gray background,
   reduced-motion handling) lives centrally in /css/skeleton.css and
   is loaded site-wide. This file only defines section-specific
   layout (heights, grids, structural padding). */

.section-skeleton-section,
.section-skeleton-banner_group {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ─── Benefits section skeleton ─────────────────────────────────── */

/* Wrapper-level structural rules are scoped to .lazy-load so they fall
   off once the real section is injected and the lazy-load class is
   removed. Otherwise the placeholder's padding + min-height would keep
   forcing extra space inside the now-real section. */
.lazy-load.section-skeleton-section {
  /* Real <h2> title + skeleton cards row. min-height keeps the page
     from jumping when the real benefits.php response replaces this. */
  /* display:block wins over homepage.css .sections>section (flex) — skeleton needs block so children fill full width naturally */
  display: block;
  padding: 24px 0;
  min-height: 480px;
}

.section-skeleton-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* mirrors benefit-section__header desktop padding: right=--cards-side-pad(65),
     left=--cards-side-pad+--pill-width+10(205) */
  padding: 0 65px 0 205px;
  margin-bottom: 4px;
}

.section-skeleton-section__header h2 {
  margin: 0;
  /* no flex:1 — arrows stay adjacent to the title (like the real section) */
}

/* Skeleton stand-ins for the prev/next swiper arrows in the header */
.section-skeleton-section__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.section-skeleton-section__cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  /* mirrors swiper-row desktop padding: right=--cards-side-pad(65), left=--cards-side-pad+--pill-width(195) */
  padding: 0 65px 0 195px;
}

.section-skeleton-section__card {
  height: 240px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .lazy-load.section-skeleton-section {
    min-height: 700px;
  }

  .section-skeleton-section__header {
    padding: 0; /* .sections already has 20px side padding on mobile */
    margin-bottom: 2px;
  }

  /* Real section hides arrows on mobile (touch users swipe directly) */
  .section-skeleton-section__arrow {
    display: none;
  }

  .section-skeleton-section__cards {
    grid-template-columns: repeat(2, 1fr);
    padding: 0; /* .sections already has 20px side padding on mobile */
    gap: 8px;
  }

  .section-skeleton-section__card {
    height: 200px;
  }

  /* Only render two rows worth of cards on mobile */
  .section-skeleton-section__card:nth-child(n+5) {
    display: none;
  }
}

/* ─── Banner group skeleton ─────────────────────────────────────── */

.lazy-load.section-skeleton-banner_group {
  display: block;
  padding: 16px 0;
}

.section-skeleton-banner_group__row {
  display: grid;
  gap: 16px;
  padding: 0 24px;
}

/* items_per_view = 1: a single hero-shaped rectangle. */
.section-skeleton-banner_group[data-items-per-view="1"] .section-skeleton-banner_group__row {
  grid-template-columns: 1fr;
}

.section-skeleton-banner_group[data-items-per-view="1"] .section-skeleton-banner_group__shape {
  height: 200px;
}

/* items_per_view = 3: three rectangles side-by-side. */
.section-skeleton-banner_group[data-items-per-view="3"] .section-skeleton-banner_group__row {
  grid-template-columns: repeat(3, 1fr);
}

.section-skeleton-banner_group[data-items-per-view="3"] .section-skeleton-banner_group__shape {
  height: 240px;
}

@media (max-width: 768px) {
  .section-skeleton-banner_group__row {
    padding: 0 20px;
  }

  .section-skeleton-banner_group[data-items-per-view="1"] .section-skeleton-banner_group__shape {
    height: 140px;
  }

  .section-skeleton-banner_group[data-items-per-view="3"] .section-skeleton-banner_group__row {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-skeleton-banner_group[data-items-per-view="3"] .section-skeleton-banner_group__shape {
    height: 265px;
  }
}