/* Refinamentos finais de UI e UX — preserva a identidade visual existente. */

/* Hierarquia dos serviços: Fisioterapia e Pilates como serviços principais. */
.service-grid.service-grid-five article:nth-child(1),
.service-grid.service-grid-five article:nth-child(2) {
  grid-column: span 3;
  padding: clamp(26px, 3vw, 34px);
  border-color: rgba(36, 163, 155, 0.24);
  background: linear-gradient(145deg, #ffffff 0%, #eff9f7 100%);
  box-shadow: 0 18px 42px rgba(8, 42, 82, 0.09);
}

.service-grid.service-grid-five article:nth-child(1) h3,
.service-grid.service-grid-five article:nth-child(2) h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
}

.service-grid.service-grid-five article:nth-child(3),
.service-grid.service-grid-five article:nth-child(4),
.service-grid.service-grid-five article:nth-child(5) {
  grid-column: span 2;
}

.service-grid.service-grid-five article {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .service-grid.service-grid-five article:hover {
    transform: translateY(-4px);
    border-color: rgba(36, 163, 155, 0.34);
    box-shadow: 0 22px 48px rgba(8, 42, 82, 0.12);
  }
}

/* Foto profissional compacta e estável na página inicial. */
.professional-home .professional-photo {
  width: min(100%, 340px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  border-radius: 26px;
}

.professional-home .professional-photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

/* Cargo e especialidades em duas linhas para leitura mais clara. */
.professional-role {
  display: grid;
  gap: 5px;
  max-width: 720px;
  line-height: 1.45;
}

.professional-role-main {
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
}

.professional-role-specialties {
  color: var(--therapy-dark);
  font-size: 0.94rem;
  font-weight: 650;
}

/* LinkedIn vira uma ação secundária e não disputa com os CTAs principais. */
.professional-actions .professional-linkedin {
  flex-basis: 100%;
  width: max-content;
  min-width: 0;
  min-height: 38px;
  justify-content: flex-start;
  padding: 7px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #0a66c2;
  font-size: 0.92rem;
  font-weight: 700;
}

.professional-actions .professional-linkedin:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #084f96;
  text-decoration: underline;
  transform: none;
}

.professional-actions .professional-linkedin:focus-visible {
  outline: 3px solid rgba(10, 102, 194, 0.24);
  outline-offset: 3px;
}

.professional-actions .professional-linkedin svg {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .professional-home .professional-photo {
    width: min(100%, 290px);
  }
}

@media (max-width: 767px) {
  .service-grid.service-grid-five article:nth-child(1),
  .service-grid.service-grid-five article:nth-child(2),
  .service-grid.service-grid-five article:nth-child(3),
  .service-grid.service-grid-five article:nth-child(4),
  .service-grid.service-grid-five article:nth-child(5) {
    grid-column: auto !important;
  }

  .service-grid.service-grid-five article:nth-child(1),
  .service-grid.service-grid-five article:nth-child(2) {
    padding: 25px 22px;
  }

  .professional-home .professional-photo {
    width: min(100%, 240px);
    border-radius: 20px;
  }

  .professional-role {
    gap: 4px;
    margin-bottom: 20px;
  }

  .professional-role-main {
    font-size: 0.98rem;
  }

  .professional-role-specialties {
    font-size: 0.88rem;
  }

  .professional-actions .professional-linkedin {
    width: auto !important;
    min-width: 0 !important;
    justify-self: start;
    padding: 8px 1px;
  }
}