/* TSNOP VMS visual completion layer
 * Static CSS only: no DOM/image replacement scripts.
 * Uses the verified root /logo.png NOP mark and existing TSNOP surveillance assets.
 */

:root {
  --tsnop-orange: #f46800;
  --tsnop-orange-soft: rgba(244,104,0,.18);
  --tsnop-surface: #101010;
  --tsnop-text: #f4f4f4;
  --tsnop-muted: #b9b9b9;
}

/* ---------- Brand visibility ---------- */
/* Header logo sizing lives in includes/header.php */
.footer-brand img {
  height: 62px !important;
  max-width: 235px !important;
  object-fit: contain !important;
}

/* ---------- Never allow visited-link purple on cards ---------- */
.home-card,.home-card:visited,.home-card:hover,
.workflow-card,.workflow-card:visited,.workflow-card:hover,
.solution-card,.solution-card:visited,.solution-card:hover,
.catalogue-card,.catalogue-card:visited,.catalogue-card:hover,
.feature-card,.feature-card:visited,.feature-card:hover,
.category-card,.category-card:visited,.category-card:hover,
.v2-card,.v2-card:visited,.v2-card:hover {
  color: var(--tsnop-text) !important;
  text-decoration: none !important;
}
.home-card h3,.workflow-card h3,.solution-card h3,.catalogue-card h3,
.feature-card h3,.category-card h3,.v2-card h3 {
  color: #fff !important;
}
.home-card p,.workflow-card p,.solution-card p,.catalogue-card p,
.feature-card p,.category-card p,.v2-card p {
  color: var(--tsnop-muted) !important;
}

/* ---------- Make actual visuals visible instead of nearly-black ---------- */
.home-card-media img,.workflow-card > img,.solution-card > img,
.catalogue-card > img.bg,.feature-media img,.v2-card-media img,
.v2-hero-card img,.custom-media img,.architecture-media img,.v2-band-media img,
.info-visual img {
  filter: brightness(1.08) saturate(1.05) contrast(1.02);
}
.home-card-media:after {
  background: linear-gradient(to top,rgba(8,8,8,.63),rgba(8,8,8,.04) 62%) !important;
}
.workflow-card:after {
  z-index: 1;
  background: linear-gradient(to top,rgba(7,7,7,.82),rgba(7,7,7,.06) 72%) !important;
}
.workflow-content { z-index: 3 !important; }
.solution-card:after {
  background: linear-gradient(to top,rgba(7,7,7,.82),rgba(7,7,7,.04) 70%) !important;
}
.catalogue-card:after {
  background: linear-gradient(to top,rgba(7,7,7,.84),rgba(7,7,7,.08) 72%) !important;
}
.feature-media:after,.v2-card-media:after {
  background: linear-gradient(to top,rgba(8,8,8,.48),rgba(8,8,8,.02) 60%) !important;
}

/* ---------- Homepage: AI FEATURES uses a real Indian surveillance scene ---------- */
.home-grid-3 .home-card:nth-child(2) .home-card-media {
  background:
    linear-gradient(180deg,rgba(4,4,4,.08),rgba(4,4,4,.22)),
    url('/assets/images/features/smart city surveillance/Crowd_Density_Monitoring.webp') center/cover no-repeat !important;
}
.home-grid-3 .home-card:nth-child(2) .home-card-media > img {
  opacity: 0 !important;
}
.home-grid-3 .home-card:nth-child(2) .home-card-media:before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 17px;
  top: 16px;
  width: 124px;
  height: 53px;
  background: rgba(0,0,0,.48) url('/logo.png?v=20260827f') center/105px auto no-repeat;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

/* ---------- Homepage: AI EVENT WORKFLOWS gets a dedicated visual + NOP mark ---------- */
.workflow-grid .workflow-card:nth-child(3) {
  background:
    linear-gradient(180deg,rgba(4,4,4,.04),rgba(4,4,4,.18)),
    url('/assets/images/features/smart city surveillance/Unattended_Object_Detection.webp') center/cover no-repeat !important;
}
.workflow-grid .workflow-card:nth-child(3) > img {
  opacity: 0 !important;
}
.workflow-grid .workflow-card:nth-child(3):before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 18px;
  width: 108px;
  height: 46px;
  background: rgba(0,0,0,.42) url('/logo.png?v=20260827f') center/92px auto no-repeat;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
}

/* ---------- Platform/custom pages: remove generic dark feature-hero placeholders ---------- */
.v2-card:nth-child(3n+1) .v2-card-media {
  background: url('/assets/images/solution/smart_City.webp') center/cover no-repeat;
}
.v2-card:nth-child(3n+2) .v2-card-media {
  background: url('/assets/images/solution/industrial_safety.webp') center/cover no-repeat;
}
.v2-card:nth-child(3n) .v2-card-media {
  background: url('/assets/images/solution/dashboard-retail.webp') center/cover no-repeat;
}
.v2-card-media img[src*='features-hero-bg'] {
  opacity: 0 !important;
}
.v2-hero-card {
  background:
    linear-gradient(180deg,rgba(8,8,8,.1),rgba(8,8,8,.18)),
    url('/assets/images/solution/dashboard-smartcity.webp') center/cover no-repeat !important;
}
.v2-hero-card img[src*='features-hero-bg'] {
  opacity: 0 !important;
}

/* ---------- Feature catalogue: generic fallback entries get real scene images ---------- */
.feature-card:nth-child(3n+1) .feature-media {
  background: url('/assets/images/features/smart city surveillance/Crowd_Density_Monitoring.webp') center/cover no-repeat;
}
.feature-card:nth-child(3n+2) .feature-media {
  background: url('/assets/images/solution/industrial_safety.webp') center/cover no-repeat;
}
.feature-card:nth-child(3n) .feature-media {
  background: url('/assets/images/solution/retail_intelligence.webp') center/cover no-repeat;
}
.feature-media img[src*='features-hero-bg'] {
  opacity: 0 !important;
}

/* AI catalogue hero: brighter real-world visual instead of an abstract black wall */
.features-hero:before {
  background:
    linear-gradient(180deg,rgba(6,6,6,.30),rgba(9,9,9,.86) 94%),
    url('/assets/images/features/smart city surveillance/Crowd_Density_Monitoring.webp') center/cover no-repeat !important;
  opacity: .72 !important;
}
.features-hero:after {
  content: '';
  position: absolute;
  z-index: 0;
  right: 5%;
  top: 28px;
  width: 190px;
  height: 82px;
  background: url('/logo.png?v=20260827f') center/contain no-repeat;
  opacity: .34;
  filter: drop-shadow(0 12px 25px rgba(0,0,0,.32));
  pointer-events: none;
}
.features-hero > * { position: relative; z-index: 1; }

/* ---------- Fill large black-only gaps with very subtle real imagery ---------- */
.home-section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.home-section.alt {
  background:
    linear-gradient(rgba(11,11,11,.88),rgba(11,11,11,.91)),
    url('/assets/images/solution/smart_City.webp') center/cover no-repeat !important;
}
.content-wrap {
  position: relative;
  background:
    linear-gradient(rgba(10,10,10,.94),rgba(10,10,10,.96)),
    url('/assets/images/solution/dashboard-smartcity.webp') center top/cover no-repeat;
}
.v2-shell {
  position: relative;
  background:
    linear-gradient(rgba(10,10,10,.94),rgba(10,10,10,.965)),
    url('/assets/images/v2/core/tsnop-vms-edge-architecture.webp') center top/cover no-repeat;
}
.custom-band,.architecture,.home-cta {
  margin-bottom: 58px !important;
}
.v2-band,.v2-cta {
  margin-top: 54px !important;
}

/* CTA blocks should also contain a visual instead of being an empty black slab. */
.home-cta-box {
  background:
    linear-gradient(90deg,rgba(12,12,12,.98) 0%,rgba(12,12,12,.92) 48%,rgba(12,12,12,.55) 100%),
    url('/assets/images/solution/dashboard-smartcity.webp') right center/58% auto no-repeat !important;
}
.v2-cta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,rgba(14,14,14,.98) 0%,rgba(14,14,14,.93) 52%,rgba(14,14,14,.55) 100%),
    url('/assets/images/v2/core/tsnop-vms-edge-architecture.webp') right center/58% auto no-repeat !important;
}
.v2-cta > * { position: relative; z-index: 1; }

/* Contact cards already have icons; give the form side some visual depth without harming usability. */
.form-panel {
  background:
    radial-gradient(circle at 92% 5%,rgba(244,104,0,.10),transparent 23%),
    #111 !important;
}
.location-copy {
  background:
    linear-gradient(rgba(17,17,17,.92),rgba(17,17,17,.96)),
    url('/assets/images/solution/smart_City.webp') center/cover no-repeat !important;
}

/* Ensure image containers never collapse into black emptiness. */
.home-card-media,.feature-media,.v2-card-media,.info-visual,.architecture-media,.custom-media,.v2-band-media {
  min-height: 170px;
  background-color: #151515;
}

@media (max-width: 1020px) {
  .features-hero:after { width: 145px; height: 62px; right: 4%; }
}

@media (max-width: 700px) {
  .home-section { padding-top: 50px !important; padding-bottom: 50px !important; }
  .home-head:before,.v2-head:before,.section-heading:before,.section-head:before { width: 70px; height: 30px; }
  .features-hero:after { width: 110px; height: 47px; top: 18px; opacity: .25; }
  .home-grid-3 .home-card:nth-child(2) .home-card-media:before { width: 98px; height: 42px; background-size: 82px auto; }
  .workflow-grid .workflow-card:nth-child(3):before { width: 90px; height: 38px; background-size: 76px auto; }
  .home-cta-box,.v2-cta { background-size: cover !important; }
}