/* home-menu/index.css — Wave 8b composition. Mobile-first.
   Variant of home with mobile-menu drawer pre-opened over a dimmed backdrop. */

/* ─── Atoms ────────────────────────────────────────────────────────── */
@import url('../../_components/atoms/page-shell/page-shell.css');
@import url('../../_components/atoms/btn-tag/btn-tag.css');
@import url('../../_components/atoms/btn-show-more/btn-show-more.css');
@import url('../../_components/atoms/section-row/section-row.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/card-leak/card-leak.css');
@import url('../../_components/molecules/card-product/card-product.css');
@import url('../../_components/molecules/card-mini/card-mini.css');
@import url('../../_components/molecules/creator-chip/creator-chip.css');

/* ─── Sections ─────────────────────────────────────────────────────── */
@import url('../../_components/sections/header-full/header-full.css');
@import url('../../_components/sections/footer-full/footer-full.css');
@import url('../../_components/sections/mobile-menu/mobile-menu.css');
@import url('../../_components/sections/age-gate-modal/age-gate-modal.css');
@import url('../../_components/sections/page-glow/page-glow.css');
@import url('../../_components/sections/card-grid/card-grid.css');
@import url('../../_components/sections/mini-grid/mini-grid.css');
@import url('../../_components/sections/creator-chip-row/creator-chip-row.css');
@import url('../../_components/sections/reviews-grid/reviews-grid.css');
@import url('../../_components/sections/vip-banner/vip-banner.css');

/* ─── Page-scoped overrides ────────────────────────────────────────── */

.page-home-menu .home-main {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-home-menu .home-container {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
}

.page-home-menu section[data-region] {
  display: block;
  width: 100%;
}

.page-home-menu .card-grid {
  gap: 24px;
  margin-top: 24px;
}

/* Always-dark force overrides for Featured + Random sections (same as home) */
.page-home-menu [data-region="featured"] .card-leak,
.page-home-menu [data-region="random"] .card-leak,
.page-home-menu [data-region="featured"] .card-leak__body,
.page-home-menu [data-region="random"] .card-leak__body {
  background: #1B1F31 !important;
  border-radius: 8px;
}
.page-home-menu [data-region="featured"] .card-leak__gradient,
.page-home-menu [data-region="random"] .card-leak__gradient {
  background: linear-gradient(to bottom, transparent 30%, #1B1F31 100%) !important;
}
.page-home-menu [data-region="featured"] .card-leak__title,
.page-home-menu [data-region="random"] .card-leak__title,
.page-home-menu [data-region="featured"] .card-leak__username,
.page-home-menu [data-region="random"] .card-leak__username {
  color: #FFFFFF !important;
}
.page-home-menu [data-region="featured"] .section-row__heading,
.page-home-menu [data-region="random"] .section-row__heading {
  color: #FFFFFF !important;
}

/* Home review card (inline pattern) */
.page-home-menu .home-review-card {
  background: rgb(var(--color-soft));
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-home-menu .home-review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.page-home-menu .home-review-card__stars .icon-star-01-solid {
  width: 16px;
  height: 16px;
  background-color: rgb(var(--color-warn));
}
.page-home-menu .home-review-card__text {
  margin: 0;
  font-family: 'Nationale', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: rgb(var(--color-subs));
}
.page-home-menu .home-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.page-home-menu .home-review-card__author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.page-home-menu .home-review-card__name {
  font-family: 'Nationale', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgb(var(--color-lead));
}

/* ── Dimmed backdrop layer behind drawer (CSS only) ── */
.page-home-menu .home-menu-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998; /* sits under drawer (drawer is z=999/1000 in mobile-menu.css) */
  pointer-events: none;
}

/* Tablet */
@media (min-width: 768px) {
  .page-home-menu .home-container {
    padding: 32px 24px 80px;
    gap: 56px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .page-home-menu .home-container {
    padding: 40px 16px 96px;
    gap: 56px;
  }

  .page-home-menu .home-decor-hero-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 510px;
    background: #08090E;
    border-bottom: 1px solid #1B1F31;
    z-index: 0;
    pointer-events: none;
  }

  .page-home-menu .home-decor-random-bg-outer {
    display: block;
    position: absolute;
    top: 1416px;
    left: 0;
    right: 0;
    height: 384px;
    background: rgb(var(--color-mute));
    z-index: 0;
    pointer-events: none;
  }

  .page-home-menu .home-decor-random-bg-inner {
    display: block;
    position: absolute;
    top: 1416px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 384px;
    background: #08090E;
    z-index: 0;
    pointer-events: none;
  }
}

/* Hide decorations on mobile */
.page-home-menu .home-decor-hero-bg,
.page-home-menu .home-decor-random-bg-outer,
.page-home-menu .home-decor-random-bg-inner {
  display: none;
}
@media (min-width: 1024px) {
  .page-home-menu .home-decor-hero-bg,
  .page-home-menu .home-decor-random-bg-outer,
  .page-home-menu .home-decor-random-bg-inner {
    display: block;
  }
}