/* Custom AI service — additive styles for the existing Synesys theme. */
.ai-project-promo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-bottom: 2rem;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.ai-project-promo > *, .ai-project-usecase, .ai-project-steps li > div { min-width: 0; }
.ai-project-promo h3 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); margin-bottom: 1rem; }
.ai-project-promo p, .ai-project-examples span { color: var(--text-muted); font-size: .95rem; }
.ai-project-examples { list-style: none; }
.ai-project-examples li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.ai-project-examples li:first-child { padding-top: 0; }
.ai-project-examples li:last-child { border-bottom: 0; padding-bottom: 0; }
.ai-project-examples strong, .ai-project-examples span { display: block; }
.ai-project-examples span { margin-top: .3rem; }
#egyedi-ai { scroll-margin-top: 110px; }
.ai-project-usecases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.5rem 0 2rem;
}
.ai-project-usecase { padding-top: .8rem; border-top: 1px solid var(--border); }
.ai-project-usecase:last-child { grid-column: 1 / -1; }
.ai-project-detail .ai-project-usecase h4 { margin: .3rem 0 .6rem; font-size: 1rem; }
.ai-project-process { border-top: 1px solid var(--border); }
.ai-project-detail .ai-project-process > h4 { font-size: 1rem; }
.ai-project-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.ai-project-steps li { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.ai-project-steps strong { display: block; font-size: .9rem; line-height: 1.5; }
.ai-project-steps p { margin-top: .4rem; font-size: .85rem; }
.ai-project-promo .btn-row > a, .ai-project-detail .btn-row > a { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 900px) {
  .ai-project-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-project-promo, .ai-project-usecases { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ai-project-promo .btn-row, .ai-project-detail .btn-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) {
  .ai-project-steps { grid-template-columns: minmax(0, 1fr); }
}