/* Mobile-first home page UI modernizer
   Notes:
   - Does not change markup or page logic.
   - Overrides are intentionally light to avoid layout regressions. */

:root {
  --ui-accent: #ba1d48;
  --ui-accent-2: #d42a5a;
  --ui-text: #1f2937;
  --ui-muted: #6b7280;
  --ui-border: rgba(0, 0, 0, 0.08);
  --ui-bg: #ffffff;
  --ui-page-bg: #f3f4f6;
  --ui-radius: 16px;
}

/* Magazine-style carousel cards (mobile hero height comes from home.css #carouselMainfeature_m rules) */
#carouselMainfeature_m .feature_bg,
#carouselMainfeature .feature_bg {
  border-radius: 0 !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#carouselMainfeature .feature_bg {
  overflow: visible !important;
}

.movie-card {
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #ffffff;
}

.movie-poster {
  border-radius: 12px;
  overflow: hidden;
}

/* Carousel captions (desktop hero only): more magazine-like pill */
#carouselMainfeature .carousel-caption {
  border-radius: 0 !important;
  padding: 10px 12px !important;
}

/* Ensure the hero carousel containers don't show unexpected background tint */
#carouselMainfeature,
#carouselMainfeature_m {
  background: transparent !important;
}

html,
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ui-accent);
  text-decoration: none;
}

a:hover {
  color: var(--ui-accent-2);
  text-decoration: underline;
}

h1,
h2,
h3 {
  font-family: Montserrat, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Fixed header spacing: keep mobile readable */
@media (max-width: 767.98px) {
  .body-content {
    margin-top: 74px !important;
    padding: 16px 0 40px 0 !important;
  }
}

/* Section header (home) */
.sec_container .full {
  border-bottom: 0;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.sec_container .full a.strong.caps {
  letter-spacing: 0.02em;
  font-size: 18px;
}

.sec_container .full .section-links {
  gap: 8px;
}

/* Latest Updates cards */
.latest-updates-grid {
  gap: 14px;
}

.update-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
}

.update-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08) !important;
}

.update-card-image {
  height: 160px;
}

.update-card-content {
  padding: 14px;
}

.update-card-title {
  font-weight: 700;
}

/* Make "Latest Updates" feel more like a feed */
.home_detail_m {
  background: transparent;
}

/* On wider screens, increase card image height slightly */
@media (min-width: 768px) {
  .body-content {
    padding: 0 0 60px 0 !important;
  }

  .update-card-image {
    height: 190px;
  }

  .sec_container .full a.strong.caps {
    font-size: 22px;
  }
}

/* Fallback for variable definitions (some tooling may leave an invalid ::root selector) */
:root {
  --ui-accent: #ba1d48;
  --ui-accent-2: #d42a5a;
  --ui-text: #1f2937;
  --ui-muted: #6b7280;
  --ui-border: rgba(0, 0, 0, 0.08);
  --ui-bg: #ffffff;
  --ui-page-bg: #f3f4f6;
  --ui-radius: 16px;
}