/**
 * HADAFIN homepage — hero contrast, fluid hero scale, Popular Modules polish.
 * Additive layout/visual only; routes/modules unchanged.
 */

/* —— Task 1: Hero contrast (WCAG AA) ——
   White large text (#fff) over ~#0b1628 effective scrim ≈ 16:1.
   Body/tagline #f1f5f9 over same ≈ 14:1 (≥ 4.5:1). */
.home-mp-hero,
.home-mp-hero--split,
.home-mp--premium .home-mp-hero--split,
body.home-marketplace .home-mp--premium .home-mp-hero--split {
  width: 100% !important;
  border-radius: 0 !important;
  /* Fluid height: grows/shrinks with viewport, not fixed px */
  aspect-ratio: 4 / 5;
  min-height: clamp(16rem, 52vw, 22rem) !important;
  max-height: clamp(22rem, 48vh, 34rem) !important;
  height: auto !important;
}
@media (min-width: 768px) {
  .home-mp-hero,
  .home-mp-hero--split,
  .home-mp--premium .home-mp-hero--split,
  body.home-marketplace .home-mp--premium .home-mp-hero--split {
    aspect-ratio: 16 / 9;
    min-height: clamp(18rem, 38vw, 26rem) !important;
    max-height: clamp(26rem, 52vh, 36rem) !important;
  }
}
@media (min-width: 1440px) {
  .home-mp-hero,
  .home-mp-hero--split,
  .home-mp--premium .home-mp-hero--split,
  body.home-marketplace .home-mp--premium .home-mp-hero--split {
    min-height: clamp(22rem, 32vw, 30rem) !important;
    max-height: min(40rem, 56vh) !important;
  }
}

.home-mp-hero-slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.home-mp-hero-overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(105deg, rgba(6, 16, 31, 0.88) 0%, rgba(6, 16, 31, 0.62) 48%, rgba(6, 16, 31, 0.38) 100%) !important;
}

/* Text-side scrim — extra guarantee behind copy */
.home-mp-hero-copy {
  position: relative;
  z-index: 3;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border-radius: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 12, 24, 0.55) 0%,
    rgba(4, 12, 24, 0.28) 70%,
    transparent 100%
  );
}

.home-mp-hero--split h1,
.home-mp--premium .home-mp-hero--split h1,
body.home-marketplace .home-mp--premium .home-mp-hero--split h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

.home-mp-hero--split .tagline,
.home-mp--premium .home-mp-hero--split .tagline,
body.home-marketplace .home-mp--premium .home-mp-hero--split .tagline {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important;
}

.home-mp-brand-mark,
body.home-marketplace .home-mp--premium .home-mp-brand-mark {
  color: #bbf7d0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Theme variants — keep brand palette; only deepen scrim for readability */
body.theme-navy_blue .home-mp-hero-overlay,
body.theme-dark_green .home-mp-hero-overlay,
body.theme-black_gold .home-mp-hero-overlay,
body.theme-crystal_glass .home-mp-hero-overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(105deg, rgba(2, 8, 20, 0.9) 0%, rgba(2, 8, 20, 0.68) 50%, rgba(2, 8, 20, 0.4) 100%) !important;
}

body.theme-black_gold .home-mp-brand-mark {
  color: #fde68a !important;
}

.home-mp-hero-grid {
  z-index: 2;
  padding: clamp(1rem, 2.5vw, 2.1rem) clamp(0.85rem, 2vw, 1.6rem) !important;
}

/* —— Task 4: Popular Modules — uniform cards —— */
.home-mp-cats {
  gap: 0.75rem !important;
}

.home-mp-cat,
.home-mp-map {
  height: auto !important;
  min-height: 7.25rem !important;
  max-height: none !important;
  border-radius: 14px !important;
  border: 1px solid #d8e0e6 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
  padding: 0.65rem 0.75rem 0.7rem !important;
  outline: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-mp-cat:hover,
.home-mp-cat:focus-visible,
.home-mp-map:hover,
.home-mp-map:focus-visible {
  transform: translateY(-2px);
  border-color: #2E9B3A !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14) !important;
}

.home-mp-cat .label {
  font-size: 0.86rem !important;
  line-height: 1.2 !important;
  margin: 0;
}

.home-mp-cat .sub {
  margin-top: 0.15rem !important;
  font-size: 0.62rem !important;
  min-height: 0.9rem;
}

.home-mp-cat .badge {
  margin-top: 0.35rem !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  padding: 0.16rem 0.55rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent;
  color: #14532d !important;
  background: #ecfdf5 !important;
}

.home-mp-cat .badge--live,
.home-mp-cat .badge--count,
.home-mp-cat .badge--open,
.home-mp-cat .badge--public {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac;
}

.home-mp-cat .badge--preview {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1;
}

.home-mp-cat .badge--master {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border-color: #c4b5fd;
}

.home-mp-cat .badge--secure {
  background: #e0f2fe !important;
  color: #075985 !important;
  border-color: #7dd3fc;
}

.home-mp-cat .badge--read,
.home-mp-cat .badge--join,
.home-mp-cat .badge--ai {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fdba74;
}

@media (max-width: 413px) {
  .home-mp-cats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
  }
  .home-mp-cat .sub { display: none; }
}