/* services section — smartphone
--------------------------------------------- */

.services-section {
  overflow: hidden;
}

.services-section__header {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.services-section__header h2 {
  max-width: 48rem;
  margin-bottom: 0;
}

.services-section__intro {
  max-width: 38rem;
  margin-bottom: 0;
  color: rgb(36 36 36 / 76%);
  font-size: 1rem;
}

.services-list {
  border-top: 1px solid rgb(36 36 36 / 18%);
}

.service-item {
  border-bottom: 1px solid rgb(36 36 36 / 18%);
  transition: background-color 180ms ease;
}

.service-item[open] {
  background: var(--color-soft);
}

.service-item__summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  min-height: 4.75rem;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.25rem;
  cursor: pointer;
  list-style: none;
}

.service-item__summary::-webkit-details-marker {
  display: none;
}

.service-item__title {
  color: var(--color-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  transition: color 180ms ease;
}

.service-item__icon {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  justify-self: end;
  color: var(--color-green);
}

.service-item__icon::before,
.service-item__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: currentcolor;
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}

.service-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.service-item[open] .service-item__icon::after {
  transform: translate(-50%, -50%) rotate(0);
}

.service-item__content {
  padding: 0 3rem 1.5rem 0.25rem;
}

.service-item__content p {
  max-width: 42rem;
  margin-bottom: 0;
  color: rgb(36 36 36 / 78%);
}

.service-item[open] .service-item__title {
  color: var(--color-green);
}

/* Tablet
--------------------------------------------- */

@media screen and (min-width: 48rem) {
  .services-section__header {
    margin-bottom: 3.5rem;
  }

  .service-item__summary {
    grid-template-columns: minmax(0, 1fr) 2.25rem;
    min-height: 5.25rem;
    padding-inline: 0.75rem;
  }

  .service-item__title {
    font-size: 1.9rem;
  }

  .service-item__content {
    padding: 0 4rem 1.75rem 0.75rem;
  }
}

/* Desktop
--------------------------------------------- */

@media screen and (min-width: 72rem) {
  .services-section__header {
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
    align-items: start;
    gap: 5rem;
    margin-bottom: 5rem;
  }

  .services-section__intro {
    position: relative;
    padding-block: 2rem;
    border-top: 1px solid rgb(36 36 36 / 18%);
    border-bottom: 1px solid rgb(36 36 36 / 18%);
  }

  .services-section__intro::before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 4rem;
    height: 0.15rem;
    background: var(--color-red);
    content: "";
  }

  .service-item__summary {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    min-height: 6rem;
    padding-inline: 1.25rem;
  }

  .service-item__title {
    font-size: clamp(2rem, 2.5vw, 2.6rem);
  }

  .service-item__content {
    padding: 0 7rem 2rem 1.25rem;
    font-size: 1.05rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .service-item:not([open]):hover {
    background: rgb(234 225 216 / 45%);
  }

  .service-item__summary:hover .service-item__title {
    color: var(--color-green);
  }
}