/* ============================================
   SERVICES EXCELLENCE SECTION - UPDATED FOR DESIGN SYSTEM + CARDS
   ============================================ */

/* Component Wrapper - Handles max-width for Services Excellence */
.asl-component-wrapper.asl-services-excellence-wrapper {
  max-width: var(--max-width-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Apply full-width breakout to ALL screen sizes */
body .asl-services-excellence-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Main Section - Design System Variables */
.asl-services-excellence-section {
  width: 100%;
  padding: var(--padding-desktop) var(--padding-sides-desktop) !important;
  background: var(--color-mist) !important;
  position: relative;
}

/* White background modifier */
.asl-services-excellence-section--white {
  background: var(--color-white) !important;
}

/* Tablet Padding */
@media (max-width: 1024px) {
  .asl-services-excellence-section {
    padding: var(--padding-tablet) var(--padding-sides-desktop) !important;
  }
}

/* Mobile Padding */
@media (max-width: 768px) {
  .asl-services-excellence-section {
    padding: var(--padding-mobile) var(--padding-sides-mobile) !important;
  }
}

/* Container */
.asl-services-excellence-container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   HEADER SECTION - UPDATED
   ======================================== */

.asl-services-excellence-header {
  text-align: center;
  margin-bottom: var(--gap-large); /* UPDATED: 60px */
}

/* H2 Title - UPDATED: Design System Variables */
.asl-services-excellence-title {
  font-family: var(--font-body) !important;
  font-size: var(--font-h2) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--line-height-h2) !important;
  letter-spacing: var(--letter-spacing-h2) !important;
  color: var(--color-navy) !important;
  margin: var(--margin-h2) !important; /* UPDATED: 0 0 16px 0 */
  margin-bottom: 24px !important; /* Override for this specific case */
}

/* Mobile H2 */
@media (max-width: 768px) {
  .asl-services-excellence-title {
    font-size: var(--font-h2-mobile) !important;
  }
}

/* Subtitle/Description - UPDATED: Design System Variables */
.asl-services-excellence-subtitle {
  font-family: var(--font-body) !important;
  font-size: var(--font-body) !important;
  font-weight: var(--weight-regular) !important;
  line-height: var(--line-height-body) !important;
  letter-spacing: var(--letter-spacing-body) !important;
  color: var(--color-charcoal) !important;
  max-width: var(--max-width-content) !important; /* UPDATED: 1120px */
  margin: 0 auto;
}

/* Mobile Subtitle */
@media (max-width: 768px) {
  .asl-services-excellence-subtitle {
    font-size: var(--font-body-mobile) !important;
  }
}

/* ========================================
   SERVICES GRID - FLEXIBLE LAYOUT
   ======================================== */

.asl-services-excellence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-medium); /* UPDATED: 40px */
  max-width: 100%;
}

/* ========================================
   GRID MODIFIER - Two Card Layout
   ======================================== */

.asl-services-excellence-grid--two-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .asl-services-excellence-grid--two-cards {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   GRID MODIFIER - Four Card Layout
   ======================================== */

.asl-services-excellence-grid--four-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .asl-services-excellence-grid--four-cards {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SERVICE CARD - UPDATED: Card System Variables
   ======================================== */

.asl-service-excellence-card {
  background: var(--color-white); /* UPDATED */
  border-radius: var(--card-border-radius); /* UPDATED: 12px */
  overflow: hidden;
  box-shadow: var(--shadow-medium); /* UPDATED */
  transition: var(--transition-normal); /* UPDATED: 0.4s ease */
  position: relative;
}

.asl-service-excellence-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-large); /* UPDATED */
}

/* Top Accent Line */
.asl-service-excellence-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-terracotta) 0%,
    var(--color-gold) 50%,
    var(--color-sage) 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: var(--z-above); /* UPDATED: 10 */
}

.asl-service-excellence-card:hover::before {
  transform: scaleX(1);
}

/* ========================================
   SERVICE IMAGE - UPDATED: Card System Variables
   ======================================== */

.asl-service-excellence-image {
  width: 100%;
  height: var(--card-height-m); /* UPDATED: 240px - Medium cards */
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--color-mist) 0%,
    var(--color-border) 100%
  );
}

.asl-service-excellence-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.asl-service-excellence-card:hover .asl-service-excellence-image img {
  transform: scale(1.05);
}

/* Image Overlay */

.asl-service-excellence-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(30, 58, 95, 0.75) 100%
  ); /* UPDATED: Navy fade */
  padding: 40px 30px 30px;
  z-index: var(--z-normal);
}

/* H3 Image Title - UPDATED: Design System Variables */
.asl-service-excellence-image-title {
  font-family: var(--font-body) !important;
  font-size: var(--font-h3) !important;
  font-weight: var(--weight-medium) !important;
  line-height: var(--line-height-h3) !important;
  letter-spacing: var(--letter-spacing-h3) !important;
  color: var(--color-white) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin: 0;
  padding: 0;
}

/* Mobile H3 */
@media (max-width: 768px) {
  .asl-service-excellence-image-title {
    font-size: var(--font-h3-mobile) !important;
  }
}

/* ========================================
   SERVICE CONTENT - UPDATED: Card Padding Variables
   ======================================== */

.asl-service-excellence-content {
  padding: var(--card-padding-desktop); /* UPDATED: 30px 28px */
}

/* Tablet Card Padding */
@media (max-width: 1024px) {
  .asl-service-excellence-content {
    padding: var(--card-padding-tablet); /* UPDATED: 28px 24px */
  }
}

/* Mobile Card Padding */
@media (max-width: 768px) {
  .asl-service-excellence-content {
    padding: var(--card-padding-mobile); /* UPDATED: 25px 20px */
  }
}

/* Body Text/Description - UPDATED: Design System Variables */
.asl-service-excellence-description {
  font-family: var(--font-body) !important;
  font-size: var(--font-body) !important;
  font-weight: var(--weight-regular) !important;
  line-height: var(--line-height-body) !important;
  letter-spacing: var(--letter-spacing-body) !important;
  color: var(--color-charcoal) !important;
  margin: 0 0 var(--gap-small) 0 !important; /* UPDATED: 20px bottom margin for button spacing */
}

/* Mobile Body Text */
@media (max-width: 768px) {
  .asl-service-excellence-description {
    font-size: var(--font-body-mobile) !important;
  }
}

/* ========================================
   BUTTON - UPDATED: Design System Variables
   ======================================== */

.asl-service-excellence-button {
  display: inline-block;
  padding: var(--button-padding-nav); /* UPDATED: 12px 28px */
  background: var(--color-navy); /* UPDATED */
  color: var(--color-white) !important; /* UPDATED */
  font-family: var(--font-body) !important;
  font-size: var(--font-caption) !important; /* UPDATED: 14px */
  font-weight: var(--weight-semibold) !important; /* UPDATED: 600 */
  text-decoration: none !important;
  border-radius: var(--border-radius-full); /* UPDATED: 50px */
  transition: var(--transition-fast); /* UPDATED: 0.3s ease */
  letter-spacing: var(--letter-spacing-button); /* UPDATED: 0.05em */
  border: none;
}

.asl-service-excellence-button:hover {
  background: var(--gradient-terracotta); /* UPDATED */
  color: var(--color-white) !important; /* UPDATED */
  transform: translateX(5px);
  box-shadow: var(--button-shadow); /* UPDATED */
  text-decoration: none;
}

/* Override link styles */
a.asl-service-excellence-button:visited,
a.asl-service-excellence-button:focus {
  color: var(--color-white) !important;
  background: var(--color-navy);
}

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
   ======================================== */

@media (max-width: 1024px) {
  .asl-services-excellence-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .asl-service-excellence-image {
    height: var(--card-height-tablet); /* UPDATED: 250px */
  }
}

/* ========================================
   MOBILE RESPONSIVE (< 768px)
   ======================================== */

@media (max-width: 768px) {
  .asl-services-excellence-header {
    margin-bottom: 50px;
  }

  .asl-services-excellence-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .asl-service-excellence-image {
    height: var(--card-height-mobile); /* UPDATED: 220px */
  }
}

@media (max-width: 480px) {
  .asl-service-excellence-image {
    height: var(--card-height-s); /* UPDATED: 200px */
  }

  .asl-service-excellence-overlay {
    padding: 30px 20px 20px;
  }

  .asl-service-excellence-description {
    font-size: 16px !important;
  }
}