/* ==========================================================================
   Page: Services (services.html)
   ========================================================================== */

/* Quick-jump pills in the header (rendered by services.js → services-pills) */
.service-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Reserve the pills' height until JS renders them (prevents layout shift) */
.service-jump:empty {
  min-height: 5.6rem;  /* two rows on desktop */
}

@media (max-width: 767.98px) {
  .service-jump:empty {
    min-height: 13rem; /* rows wrap more on phones */
  }
}

.service-jump .service-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ece7da;
  text-decoration: none;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(var(--zt-gold-rgb), 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.service-jump .service-pill i {
  color: var(--zt-gold);
}

.service-jump .service-pill:hover {
  background: var(--zt-gold);
  color: var(--zt-black);
}

.service-jump .service-pill:hover i {
  color: inherit;
}

/* Reserve room for the JS-rendered rows so the CTA below doesn't jump (layout shift) */
[data-render="services-detail"]:empty {
  min-height: 300vh;
}

/* Alternating detail rows */
.service-detail {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

.service-detail + .service-detail {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.service-detail-media {
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--bs-border-color-translucent);
  box-shadow: var(--shadow-deep);
  transition: transform 0.6s var(--ease-out);
}

.service-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.service-detail-media:hover img {
  transform: scale(1.05);
}

.service-detail-num {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  font-family: var(--font-accent);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--zt-gold-rgb), 0.85);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.service-icon-static {
  margin: 0 0 1.25rem;
}

/* Optional feature checklist (services with `features` in js/config.js) */
.service-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  font-size: 0.925rem;
}

.service-features li {
  display: flex;
  gap: 0.6rem;
}

.service-features i {
  flex-shrink: 0;
  color: var(--brand-text);
}