/* ═══════════════════════════════════════════════════════════
   IT BOY — v6 Refinements CSS
   R01 Seamless section blending (stats ↔ about ↔ services)
   R06 Favicon path references
   R07 Portfolio image display
   R08 Client logo image display in slider
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   R01 — SEAMLESS SECTION BLENDING
   Target: stats-section ↔ preview-about ↔ preview-services
   Method: remove hard borders, replace with gradient
   atmosphere transitions that match bg color per theme
══════════════════════════════════════════════════ */

/* ── 1. Remove ALL hard border-top lines from the blend zone ── */
#stats-section,
#preview-about,
#preview-services {
  border-top: none !important;
}
/* The global .preview-section::before accent stripe — keep on other
   sections but suppress on the ones in the blend zone */
#preview-about::before,
#preview-services::before {
  display: none !important;
}

/* ── 2. Stats section: fade bottom edge into section below ── */
#stats-section {
  position: relative;
  /* Remove the stats-grid's solid border background "gap" color */
}
#stats-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-primary) 100%
  );
  pointer-events: none;
  z-index: 2;
  transition: background 0.55s ease;
}

/* ── 3. Blend zone wrapper — continuous background ── */
/* Make stats + about + services share one unbroken bg plane */
#stats-section,
#preview-about,
#preview-services {
  background: var(--bg-primary);
  transition: background 0.55s ease;
}

/* ── 4. About section: ambient depth bleed top & bottom ── */
#preview-about {
  position: relative;
  overflow: visible;
  padding-top: 40px;   /* reduce gap from stats */
  padding-bottom: 40px;
}
/* Top atmospheric bleed — from stats into about */
#preview-about::before {
  display: none !important; /* was the accent stripe — replaced below */
}
#preview-about .section-blend-top {
  position: absolute;
  top: -60px; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    rgba(26, 86, 219, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  transition: background 0.55s ease;
}
/* Bottom atmospheric bleed — from about into services */
#preview-about .section-blend-bottom {
  position: absolute;
  bottom: -60px; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 100%,
    rgba(26, 86, 219, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  transition: background 0.55s ease;
}

/* ── 5. Services section: reciprocal top blend ── */
#preview-services {
  position: relative;
  padding-top: 40px;
}
#preview-services::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    var(--bg-primary) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: background 0.55s ease;
}

/* ── 6. Stats grid: soften the card grid's hard rectangle ── */
.stats-grid {
  /* Remove the gap-color that creates visible lines */
  background: transparent !important;
  gap: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.stat-item {
  background: transparent !important;
  border-right: 1px solid var(--border);
  border-top: none;
  position: relative;
}
.stat-item:last-child { border-right: none; }

/* Subtle top accent on each stat item instead of a hard grid border */
.stat-item::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(26,86,219,0.25),
    transparent
  );
}

/* ── 7. Dark mode: atmospheric depth between sections ── */
[data-theme="dark"] #preview-about::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%,
      rgba(26,86,219,0.04) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 20% 70%,
      rgba(59,130,246,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── 8. Light mode atmospheric adaptations ── */
[data-theme="light"] #preview-about .section-blend-top,
[data-theme="light"] #preview-about .section-blend-bottom {
  background: radial-gradient(
    ellipse 80% 100% at 50% 50%,
    rgba(26,86,219,0.04) 0%,
    transparent 70%
  );
}
[data-theme="light"] .stat-item {
  border-right-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .stat-item::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(26,86,219,0.12),
    transparent
  );
}
[data-theme="light"] #stats-section::after {
  background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 100%);
}
[data-theme="light"] #preview-services::after {
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

/* ── 9. Ensure preview-layout content sits above blend layers ── */
#preview-about .container,
#preview-about .preview-layout,
#preview-about .preview-text,
#preview-about .preview-visual {
  position: relative;
  z-index: 2;
}

/* ── 10. Remove the v5.css temp-img effects (image unchanged) ── */
/* The R01 in v5.css added frames/wrappers ON the image — suppress those
   since the request is to blend the SECTIONS, not frame the image */
.temp-img-atmosphere,
.temp-img-atmosphere-2,
.temp-img-vignette {
  display: none !important;
}
.temp-img-wrapper {
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}
/* Image remains completely unmodified */
.temp-img-main {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  width: 100%;
  height: auto;
  display: block;
}


/* ══════════════════════════════════════════════════
   R08 — Client logo image display in slider
══════════════════════════════════════════════════ */
.client-logo {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  transition: transform 0.3s ease;
}
.client-logo img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.client-logo:hover img {
  transform: scale(1.05);
}

/* ── cl-light-bg: logos with white/light background ─────────────────────
   Dark mode: wrap in a soft white card so the logo stays visible.
   Light mode: show as-is (white bg merges naturally).               */
[data-theme="dark"] .cl-light-bg img,
:not([data-theme]) .cl-light-bg img {
  background: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
[data-theme="light"] .cl-light-bg img {
  background: transparent;
  box-shadow: none;
}

/* ── cl-dark-bg: logos with dark/black background ────────────────────────
   Light mode: wrap in a dark card so the logo stays visible.
   Dark mode: show as-is (dark bg merges with dark theme).           */
[data-theme="light"] .cl-dark-bg img {
  background: rgba(30,30,40,0.90);
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* ── No class: self-contained logos (e.g. HAP circular badge) ────────────
   Work in both themes without any wrapper.                           */
.client-logo:not(.cl-light-bg):not(.cl-dark-bg) img {
  filter: none;
}


/* ══════════════════════════════════════════════════
   R07 — Portfolio lightbox: show real images
══════════════════════════════════════════════════ */
.plb-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}


/* ══════════════════════════════════════════════════
   Ensure blend zone sections don't have extra
   top/bottom margins that break the flow
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #preview-about    { padding-top: 32px; padding-bottom: 32px; }
  #preview-services { padding-top: 32px; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:last-child { border-bottom: none; }
}