/* =====================
   m_services — «When it makes sense to work with me»
   Desktop: Figma 1:368 (1142×928) — full viewport, justify-between:
            H2 48/1.1 #000 top, 3-col card grid bottom (gap 20,
            card: image 480h + title 24/1.2 + body 16/1.3, gap 12).
   Mobile:  Figma 1:645 (353×1065) — flow gap 36, cards stacked gap 32,
            card: image 180h + text block (gap 6), title 20/1.2, title #262626.
===================== */

.m_services {
  min-height: calc(100svh - 40px); /* page_main pad-block 20×2 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 16px;
  gap: 36px; /* safety gap if content exceeds viewport; Figma relies on justify-between */
}

.m_services_title {
  font-size: var(--font-size--h2);
  line-height: var(--line-height--tight);
  color: var(--swatch--black); /* as designed (off-token vs Charcoal — flagged in UI Kit) */
}

.m_services_grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.m_services_card {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m_services_card_media {
  width: 100%;
  height: 480px;
}
.m_services_card_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m_services_card_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m_services_card_title {
  font-size: var(--font-size--h3);
  line-height: var(--line-height--card);
}

.m_services_card_desc {
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
}

@media (max-width: 991px) {
  .m_services {
    min-height: 0;
    justify-content: flex-start;
    padding-block: 0;
    gap: 36px;
  }

  .m_services_title {
    font-size: var(--font-size--h1-mob);
    color: var(--swatch--charcoal); /* mobile title is Charcoal in Figma */
  }

  .m_services_grid {
    flex-direction: column;
    gap: 32px;
  }

  .m_services_card { width: 100%; flex: none; }
  .m_services_card_media { height: 180px; }
  .m_services_card_text { gap: 6px; }
  .m_services_card_title { font-size: var(--font-size--h3-mob); }
}