/**
 * Services Landing Page Styles
 */

.olympus-services-landing {
  padding: 2rem 0;
  width: 100%;

  /* Variables locales avec fallback */
  --services-icon-color: var(
    --services-primary,
    var(--wp--preset--color--primary, #2e2f85)
  );
  /* Secondary pas utilisé actuellement sauf si sélectionné ? */
}

.olympus-services-landing .services-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Mobile first */
  gap: 20px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .olympus-services-landing .services-grid {
    grid-template-columns: repeat(3, 1fr); /* 3x3 grid as requested */
  }
}

/* --- Common Styles --- */
.olympus-services-landing .service-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px;
  transition: all 0.3s ease;
  cursor: default;
}

.olympus-services-landing .service-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.olympus-services-landing .service-icon {
  color: var(--services-icon-color); /* Default color from variable */
  flex-shrink: 0;
}

/* --- Theme 1 (Default) --- */
/* Simple layout already handled by common styles */

/* --- Theme 2 (landingpage2) --- */
.olympus-services-landing.theme-landingpage2 .service-item {
  cursor: pointer; /* Selectable */
  border: 1px solid transparent;
  border-radius: 50px;
}

/* Icon in a circle for Theme 2 */
.olympus-services-landing.theme-landingpage2 .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.olympus-services-landing.theme-landingpage2 .service-item:hover .icon-wrapper {
  background-color: #e0e0e0;
}

/* Selected State for Theme 2 */
.olympus-services-landing.theme-landingpage2 .service-item.is-selected {
  background-color: #f9f9f9;
  border-color: var(
    --services-icon-color
  ); /* Utilisation de la couleur primaire */
}

.olympus-services-landing.theme-landingpage2
  .service-item.is-selected
  .icon-wrapper {
  background-color: var(--services-icon-color);
}

.olympus-services-landing.theme-landingpage2
  .service-item.is-selected
  .service-icon
  path {
  fill: white; /* Invert icon color when selected */
}

.olympus-services-landing.theme-landingpage2
  .service-item.is-selected
  .service-title {
  color: var(--services-icon-color);
  font-weight: bold;
}