/* ────────────────────────────────────────────────────────────────
   color-neutrality.css  (orchestrator-app-color-neutrality v1.1.0)
   Strips blue-tinted photo overlays from mymitap.ru pages.
   Loaded AFTER mobile-panel-fix.css + after the page-specific CSS.
   5 reset rules — no filter: hue-rotate, no blue-gradient overlay,
   covers the 100-card templates grid (C5, mymitap-templates batch).
   ──────────────────────────────────────────────────────────────── */

/* C1: HERO PHOTO OVERLAYS — strip the blue gradients */

/* On light + dark theme: keep the hero photo natural */
.hero {
  background: url("/assets/videos/hero-collage.webp") center/cover no-repeat !important;
  background-color: transparent !important;
}
/ Strip the layer overlay rules defined elsewhere */
[data-theme="dark"] .hero,
.hero[data-theme="dark"],
body[data-theme="dark"] .hero {
  background: url("/assets/videos/hero-collage.webp") center/cover no-repeat !important;
  background-color: transparent !important;
}

/* C2: PHOTO FILTERS — remove desaturating + tinting filters */
.float-card-img,
.spotlight-card-img,
.event-card-img,
.shop-mockup-img,
.quote-card-avatar,
.job-card-avatar,
.photo-stage img,
.linkedin-card img,
.browse-card img,
.hero-img,
.browse-card-photo,
input[type="file"],
img.float-card-img {
  filter: none !important;
  -webkit-filter: none !important;
}

/* C3: RBH pages — drop ALL hue-rotate() filters */
.photo-stage img,
.thumb,
.layout-editorial-proof .photo-stage,
.layout-linkedin-resume .photo-stage,
.layout-magazine-blog .photo-stage,
.layout-host-dashboard .photo-stage,
.layout-ticket-stack .photo-stage,
.layout-club-story .photo-stage,
.layout-ai-match .photo-stage,
.layout-loyalty-ladder .photo-stage,
.layout-creator-shop .photo-stage,
[class*="layout-"] img,
[data-layout] img {
  filter: none !important;
  -webkit-filter: none !important;
  hue-rotate: 0deg !important;
}

/* C4: STRIP THE OVERLAYS THAT SIT ON TOP OF PHOTOS */
.photo-stage::after,
.browse-card::after,
.event-card::after,
.spotlight-card::after,
.float-card::after {
  display: none !important;
  content: none !important;
}

/* Some photo frames had `background-image: linear-gradient(...rgba(0,76,190,...)..)` — strip those too */
.photo-stage,
.browse-card,
.event-card,
.spotlight-card,
.float-card {
  background-image: none !important;
}

/* Keep blue for BRAND ELEMENTS (cta buttons, links, accents).
   Color-neutrality applies ONLY to photo elements. */
.btn-primary,
.plan-cta,
.nav-cta,
.theme-toggle,
.lang-pill,
.hero-eyebrow,
.chapter-tag,
.plan-badge,
.section-cta-eyebrow {
  filter: none !important;
  /* These keep their blue background — that's brand color, not photo tint */
}

/* RBH layout-specific reset: each .layout-X class previously had a
   hue-rotate filter built into the photo. Force the photo to its
   natural color regardless of layout choice. */
[class*="layout-"] .photo-stage,
.photo-stage img {
  filter: none !important;
  -webkit-filter: none !important;
}

/* C5: TEMPLATES GRID (mymitap-templates batch, 100 cards) — drop hue-rotate */
.template-card img,
.template-grid img,
.template-card,
.template-grid {
  filter: none !important;
  -webkit-filter: none !important;
  hue-rotate: 0deg !important;
}

/* Image hover keeps natural colors */
.browse-card:hover,
.event-card:hover,
.spotlight-card:hover,
.float-card:hover,
.template-card:hover {
  filter: none !important;
}