/**
 * Services Section Block Pattern Styles
 * 
 * Block-specific styles for the 5-card services section.
 * Uses global variables from blocks-global.css for colors and fonts.
 * 
 * @package HT_Blue
 * @since 1.0.0
 */



/* Main Services Section Container */
.services-section {
  background: var(--blocks-bg-primary);
  color: var(--blocks-text-primary);
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(16px, 4vw, 48px) !important;
  border-radius: 0 !important;
}

/* Inner content wrapper with max-width */
.services-section > .wp-block-group {
  max-width: 1400px !important;
  margin: 50px auto !important;
  border-radius: 0 !important;
}

/* Services Header Section */
.services-hero {
  display: grid !important;
  grid-template-columns: 1.3fr 0.7fr !important;
  gap: 24px !important;
  align-items: center !important;
  padding: clamp(18px, 3vw, 28px) !important;
  background: var(--blocks-bg-primary) !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.services-hero h1,
.services-hero .wp-block-heading {
  margin: 0 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--blocks-text-primary) !important;
}

.services-hero-right {
  display: grid !important;
  gap: 12px !important;
  justify-items: end !important;
  border-radius: 0 !important;
}

.services-hero-right p,
.services-hero-right .wp-block-paragraph {
  margin: 0 !important;
  max-width: 38ch !important;
  color: var(--blocks-text-muted) !important;
  text-align: right !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.services-hero-cta .wp-block-button__link {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  color: var(--blocks-button-prominent-text) !important;
  background: var(--blocks-button-prominent) !important;
}

/* Services Cards Grid */
.services-cards {
  margin-top: clamp(18px, 4vw, 34px) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(5, 1fr) !important;
  border-radius: 0 !important;
}

/* Card Wrapper - Contains icon + card */
.card-wrapper {
  position: relative !important;
  border-radius: 0 !important;
}

/* Individual Card - simplified approach with rounded corners */
.card {
  background: var(--blocks-panel) !important;
  position: relative !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Notch - simple square cutout for now */
.card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 16% !important;
  height: 15.5% !important;
  background: var(--blocks-bg-primary) !important;
  border-radius: 0 0 12px 0 !important;
  z-index: 1 !important;
}

.card:hover {
  transform: translateY(-4px);
}

/* Icon in negative space (top-left corner) - positioned in card-wrapper, not card */
.card-wrapper .card__icon {
  position: absolute !important;
  top: 10px !important;
  left: 3px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.card__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.card__icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card Body */
.card__body {
  padding: clamp(24px, 10%, 50px) 16px 50px 16px !important;
  display: grid !important;
  gap: 10px !important;
  flex: 1 !important;
  border-radius: 0 !important;
}

.card h3,
.card .wp-block-heading {
  margin: 0 !important;
  margin-left: 20px !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: var(--blocks-text-primary) !important;
}

.card p,
.card .wp-block-paragraph {
  margin: 0 !important;
  color: var(--blocks-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Card List Items */
.card ul,
.card .wp-block-list {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 6px !important;
}

.card ul li,
.card .wp-block-list li {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
  color: rgba(233, 238, 246, 0.9) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.card ul li::before,
.card .wp-block-list li::before {
  content: "✓" !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--blocks-overlay-light) !important;
  border: 1px solid var(--blocks-border) !important;
  font-size: 11px !important;
  color: var(--blocks-text-primary) !important;
}

/* Card CTA Button (Arrow) - must be positioned relative to .card */
.card .card__cta {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 5 !important;
}

.card__cta .wp-block-button,
.card__cta .wp-block-button__link {
  margin: 0 !important;
}

.card__cta .wp-block-button__link {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--blocks-border) !important;
  background: var(--blocks-overlay-light) !important;
  color: var(--blocks-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.card__cta .wp-block-button__link:hover {
  background: var(--blocks-button-prominent-bright) !important;
  transform: translate(2px, -2px) !important;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
  .services-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .services-hero {
    grid-template-columns: 1fr !important;
  }
  
  .services-hero-right {
    justify-items: start !important;
  }
  
  .services-hero-right p,
  .services-hero-right .wp-block-paragraph {
    text-align: left !important;
  }
  
  .services-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .services-cards {
    grid-template-columns: 1fr !important;
  }
}