/* Individual electronics service pages.
   Loaded after css/services.css, which owns the shared sd- design system
   (hero, cards, process, tech grid, FAQ, contact). Only the components that
   service detail pages need on top of that system are defined here, so the
   new markup stays visually identical to electronics.surfytech.com/services.html. */

/* ---------- Overview strip: at-a-glance facts ---------- */
.sd-page .sd-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin: 0; padding: 0; list-style: none;
}
.sd-page .sd-facts li {
  position: relative; overflow: hidden;
  border: 1px solid var(--sd-line); border-radius: 14px;
  background: #fff; padding: 22px 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sd-page .sd-facts li::after {
  content: ''; position: absolute; right: -22%; bottom: -42%;
  width: 68%; aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, #00adee1f, #61e7c212 52%, transparent 70%);
  transform: translate3d(22%, 22%, 0) scale(.88); opacity: 0;
  transition: opacity .45s ease, transform .55s ease;
}
.sd-page .sd-in-view .sd-facts li::after {
  opacity: 1; transform: translate3d(0, 0, 0) scale(1);
  animation: sd-bubble-drift 13s ease-in-out var(--sd-delay, 0ms) infinite alternate;
}
.sd-page .sd-facts li > * { position: relative; z-index: 1; }
.sd-page .sd-facts strong {
  display: block; font-size: 17px; line-height: 1.35; margin-bottom: 6px; color: var(--sd-ink);
}
.sd-page .sd-facts small { display: block; color: #536278; font-size: 13px; line-height: 1.6; }

/* ---------- Deliverables / scope list ---------- */
.sd-page .sd-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 0; padding: 0; list-style: none; }
.sd-page .sd-deliverables li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--sd-line);
}
.sd-page .sd-deliverables li::before {
  content: ''; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: #e6f7f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%2300796b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sd-page .sd-deliverables strong { display: block; font-size: 15px; margin-bottom: 2px; }
.sd-page .sd-deliverables small { display: block; color: #536278; font-size: 13px; line-height: 1.6; }

/* ---------- Engagement / engagement models ---------- */
.sd-page .sd-engage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sd-page .sd-engage .sd-card h3 { font-size: 19px; }
.sd-page .sd-engage .sd-card p { font-size: 14px; }
.sd-page .sd-engage .sd-tag {
  align-self: flex-start; display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; color: #00796b;
  background: #e6f7f2; border: 1px solid #bfe6dc; border-radius: 12px; padding: 3px 11px; margin-bottom: 12px;
}

/* ---------- Related service links (internal linking) ---------- */
.sd-page .sd-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sd-page .sd-related a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--sd-blue);
  background: #f7faff; border: 1px solid var(--sd-line); border-radius: 12px; padding: 14px 18px;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.sd-page .sd-related a::after { content: '\2192'; color: #008a7a; font-size: 13px; opacity: .65; transition: transform .2s ease, opacity .2s ease; }
.sd-page .sd-related a:hover { text-decoration: none; border-color: #9cbedf; background: #fff; transform: translateY(-2px); }
.sd-page .sd-related a:hover::after { opacity: 1; transform: translateX(3px); }

/* ---------- Hero art panel: keeps long service names legible ---------- */
.sd-page .sd-hero .sd-art > svg { max-width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .sd-page .sd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-page .sd-engage, .sd-page .sd-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .sd-page .sd-facts, .sd-page .sd-deliverables, .sd-page .sd-engage, .sd-page .sd-related { grid-template-columns: minmax(0, 1fr); }
  .sd-page .sd-facts li { padding: 18px; }
}