/* ============================================================
   services.css — Page-specific styles for services.html
   Overberg Service Centre
   ============================================================ */

/* ============================================================
   Page Hero — solid surface (no image to avoid clash with
   the parallax section directly below)
   ============================================================ */
.services-hero {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  min-height: 0;
}

.services-hero .page-hero-sub {
  color: var(--color-text-muted);
}

/* ============================================================
   Parallax Section Wrapper
   ============================================================ */
.services-parallax-section {
  position: relative;
  background-image: url('../../img/services-paralax_2.jpg');
  background-image: url('../../img/services-paralax_2.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.services-parallax-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 16, 0.82);
  pointer-events: none;
}

/* ============================================================
   Sticky Split Layout
   ============================================================ */
.services-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left column — sticky */
.services-sticky-col {
  padding: var(--space-xl) var(--space-lg) var(--space-xl) max(var(--space-xl), calc((100vw - 1200px) / 2 + var(--space-lg)));
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.services-sticky-inner {
  position: sticky;
  top: var(--space-xl);
  max-width: 420px;
}

.services-sticky-inner .section-label {
  display: block;
  margin-bottom: var(--space-sm);
}

.services-sticky-inner h2 {
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  position: relative;
  padding-left: var(--space-md);
}

/* Accent bar left of heading */
.services-sticky-inner h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}

.services-sticky-inner p {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.services-sticky-cta {
  display: inline-flex;
}

/* Right column — scrollable cards */
.services-cards-col {
  padding: var(--space-xl) max(var(--space-xl), calc((100vw - 1200px) / 2 + var(--space-lg))) var(--space-xl) var(--space-lg);
}

/* ============================================================
   Services Grid — single column inside right half
   ============================================================ */
.services-full-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.service-card {
  background-color: rgba(22, 22, 30, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.service-card .tag {
  margin-top: auto;
  align-self: flex-start;
}

.service-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.service-card-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-color: var(--color-accent-dim);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.service-card-icon svg {
  width: 32px;
  height: 32px;
}

.service-card h3 {
  margin-bottom: 0;
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.service-card p + p {
  margin-top: calc(var(--space-xs) * -1);
}

/* ============================================================
   CTA Strip
   ============================================================ */
.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.cta-strip-text h2 {
  margin-bottom: var(--space-xs);
}

.cta-strip-text p {
  max-width: 48ch;
}

.cta-strip-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .services-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .services-sticky-col {
    position: static;
    height: auto;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .services-sticky-inner h2 {
    font-size: clamp(2rem, 6vw, 2.8rem);
  }

  .services-cards-col {
    padding: var(--space-lg) var(--space-md);
  }

  .cta-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}