/* Shared UI polish for tri-site static HTML pages.
   Scope: poster heroes + card/module icon photos.
   Keep functional icons (nav, checks) unchanged; JS only applies to targeted containers. */

:root {
  --ui-poster-fallback: url('./industry/camera-05.jpg');
}

/* ---------- Poster Hero (first visual on every page) ---------- */
.page-hero.ui-poster-hero {
  position: relative;
  overflow: hidden;
  background: #0B1220;
  color: #F8FAFC;
  display: flex;
  align-items: center;
}

.page-hero.ui-poster-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(105deg, rgba(2, 6, 23, 0.82) 0%, rgba(15, 23, 42, 0.62) 52%, rgba(15, 23, 42, 0.18) 100%),
    radial-gradient(120% 120% at 80% 8%, rgba(37, 99, 235, 0.26) 0%, rgba(37, 99, 235, 0) 60%),
    var(--ui-poster, var(--ui-poster-fallback));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.02);
}

.page-hero.ui-poster-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.38) 100%);
  pointer-events: none;
}

.page-hero.ui-poster-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
}

.page-hero.ui-poster-hero.ui-poster-tall {
  min-height: clamp(420px, 62vh, 720px);
  padding: 140px 0 88px;
}

.page-hero.ui-poster-hero.ui-poster-compact {
  min-height: clamp(300px, 45vh, 480px);
  padding: 120px 0 64px;
}

.page-hero.ui-poster-hero .poster-title,
.page-hero.ui-poster-hero .heading-hero,
.page-hero.ui-poster-hero .heading-section,
.page-hero.ui-poster-hero h1,
.page-hero.ui-poster-hero h2 {
  color: #F8FAFC;
  text-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
}

.page-hero.ui-poster-hero .poster-sub,
.page-hero.ui-poster-hero .text-body,
.page-hero.ui-poster-hero p {
  color: rgba(226, 232, 240, 0.86);
  text-shadow: 0 10px 28px rgba(2, 6, 23, 0.35);
}

.page-hero.ui-poster-hero .tag {
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.34);
  color: #E2E8F0;
}

@media (max-width: 900px) {
  .page-hero.ui-poster-hero.ui-poster-tall { padding: 122px 0 72px; }
  .page-hero.ui-poster-hero.ui-poster-compact { padding: 112px 0 56px; }
}

@media (max-width: 560px) {
  .page-hero.ui-poster-hero.ui-poster-tall { min-height: 420px; padding: 112px 0 56px; }
  .page-hero.ui-poster-hero.ui-poster-compact { min-height: 300px; padding: 104px 0 48px; }
}

/* ---------- Card / Module Icon Photos ---------- */
.ui-photo-icon {
  background-image:
    linear-gradient(135deg, rgba(248, 250, 252, 0.22) 0%, rgba(248, 250, 252, 0.06) 100%),
    var(--ui-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  position: relative;
  overflow: hidden;
}

.ui-photo-icon > i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #F8FAFC !important;
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

/* Larger, cleaner photo treatment for technology/service icon slots */
.tech-icon.ui-photo-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 14px !important;
}

.coop-icon.ui-photo-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
}

.scenario-icon.ui-photo-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

/* Remove "sticker" feeling on real-photo icon blocks */
.tech-icon.ui-photo-icon > i,
.coop-icon.ui-photo-icon > i,
.industry-thumb.ui-photo-icon > i,
.scenario-icon.ui-photo-icon > i {
  display: none !important;
}

/* ---------- Real-Photo CTA / Partner / Sales Banners ---------- */
.ui-photo-banner {
  position: relative;
  overflow: hidden;
}

.ui-photo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(108deg, rgba(2, 6, 23, 0.78) 0%, rgba(15, 23, 42, 0.58) 52%, rgba(15, 23, 42, 0.28) 100%),
    radial-gradient(130% 120% at 86% 8%, rgba(37, 99, 235, 0.24) 0%, rgba(37, 99, 235, 0) 64%),
    var(--ui-banner, var(--ui-poster-fallback));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ui-photo-banner > * {
  position: relative;
  z-index: 1;
}

.ui-photo-banner h1,
.ui-photo-banner h2,
.ui-photo-banner h3,
.ui-photo-banner .heading-section,
.ui-photo-banner .heading-hero {
  color: #F8FAFC !important;
  text-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}

.ui-photo-banner p,
.ui-photo-banner .text-body,
.ui-photo-banner .section-desc {
  color: rgba(226, 232, 240, 0.9) !important;
  text-shadow: 0 10px 24px rgba(2, 6, 23, 0.35);
}

.ui-photo-banner .tag {
  background: rgba(15, 23, 42, 0.48) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #E2E8F0 !important;
}

/* ---------- Product Page Palette Unification ---------- */
body[data-ui-page="products.html"] {
  background:
    radial-gradient(ellipse 110% 44% at 72% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 58%),
    radial-gradient(ellipse 62% 34% at 0% 92%, rgba(14, 165, 233, 0.04) 0%, transparent 52%),
    #FFFFFF !important;
}

body[data-ui-page="products.html"] .catalog-panel,
body[data-ui-page="products.html"] .catalog-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

body[data-ui-page="products.html"] .catalog-card:hover {
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1) !important;
}

body[data-ui-page="products.html"] .catalog-spec {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

body[data-ui-page="products.html"] .btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22) !important;
}

body[data-ui-page="products.html"] .btn-primary:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.26) !important;
}

body[data-ui-page="products.html"][data-ui-site="ae"] .btn-gold,
body[data-ui-page="products.html"][data-ui-site="ch"] .btn-gold {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22) !important;
}

body[data-ui-page="products.html"][data-ui-site="ae"] .btn-gold:hover,
body[data-ui-page="products.html"][data-ui-site="ch"] .btn-gold:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.26) !important;
}

body[data-ui-page="products.html"][data-ui-site="ae"] .uae-note,
body[data-ui-page="products.html"][data-ui-site="ch"] .ch-note {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #1E3A8A !important;
}

body[data-ui-page="products.html"][data-ui-site="ae"] .product-type-tag.uae,
body[data-ui-page="products.html"][data-ui-site="ch"] .prod-type-tag.ch {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}