/* Custom CSS rules for makersclub */
/* These are NOT tokens - they are custom overrides */

[data-product="makersclub"] h4 {
  font-family: "Standie", sans-serif;
}

[data-product="makersclub"] .cfg-wrapper h3 {
  font-family: "Standie", sans-serif;
}

/* CopyCards NOT large or WITH swiper - taller covers */
[data-product="makersclub"] [data-copy-cards="true"]:not([data-size="large"]) {
  --copy-cards-cover-height-override: 460px;
}

[data-product="makersclub"] [data-copy-cards="true"][data-size="large"][data-swiper="true"] {
  --copy-cards-cover-height-override: 460px;
}

/* Daily section: CopyCards large with swiper - full width with peek */
[data-product="makersclub"] [data-copy-cards="true"][data-size="large"][data-swiper="true"] {
  --copy-cards-large-swiper-width: min(calc(100vw - 80px), 560px);
}

[data-product="makersclub"] [data-size="full-screen"] {
  /* Use the standardized swiper vars (no custom tokens) to cap the slide width at 620px minus peek and gap */
  --swiper-slide-width: calc(100% - var(--swiper-peek-offset, 10px) - var(--swiper-gap, 5px));
  --swiper-slide-max-width: calc(640px - 20px - var(--swiper-peek-offset, 10px) - var(--swiper-gap, 5px));
}

[data-product="makersclub"] [data-size="full-screen"] [data-card-tile="true"][data-aspect="landscape"] {
  width: 100%;
  max-width: 100%;
  height: 50vh;
  border-radius: 8px;
}

[data-product="makersclub"] [data-size="full-screen"] [data-card-tile="true"][data-aspect="landscape"] img,
[data-product="makersclub"] [data-size="full-screen"] [data-card-tile="true"][data-aspect="landscape"] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-product="makersclub"] [data-size="full-screen"] [data-card-tile="true"] {
  border-radius: 8px;
}

/* Fix: Main content respecting bottom nav space on mobile */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  [data-product="makersclub"] body {
    overflow-x: hidden;
  }

  /* Fix main content height to respect bottom nav padding */
  [data-product="makersclub"] main {
    /* Ensure main doesn't overflow and respects the padding-bottom set in App.tsx */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Fix library wrapper to respect bottom nav space */
  [data-product="makersclub"] .libraryWrapper {
    max-width: 100vw;
    overflow-x: hidden;
    min-height: auto;
  }

  /* Fix library inner wrapper height - remove fixed height that doesn't account for bottom nav */
  [data-product="makersclub"] .libraryInnerWrapper {
    max-width: 100vw;
    overflow-x: hidden;
    height: auto;
    min-height: auto;
  }
}