/* "Working with AI" page (ai.html). Shares css/style.css; the resources block uses blog/tab-resources.css */
.ai-page { padding-top: 40px; }
.ai-hero, .ai-blog, .ai-page .tab-res { max-width: 760px; }

.ai-back { display: inline-block; margin-bottom: 28px; font-weight: 700; font-size: .9rem; color: var(--deep-teal); }
.ai-back:hover { text-decoration: underline; }
.ai-title { margin-top: 12px; font-size: 2rem; line-height: 1.15; color: var(--ink); }
.ai-lead { margin-top: 16px; font-size: 1.1rem; line-height: 1.55; color: var(--text-soft); }

.ai-blog { margin-top: 48px; }
.ai-section-label { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.ai-blog-card { margin-top: 12px; display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.ai-blog-photo { display: block; border-bottom: 1px solid var(--line); }
.ai-blog-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.ai-blog-body { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 20px 24px; }
.ai-blog-meta { font-size: .875rem; font-weight: 600; color: var(--deep-teal); }
.ai-blog-title { margin-top: 8px; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.ai-blog-title a:hover { color: var(--deep-teal); }
.ai-blog-text { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--text-soft); }
.ai-blog-btn { margin-top: 20px; padding: 10px 20px; }

.ai-page .tab-res { margin-top: 56px; margin-bottom: 72px; }

@media (min-width: 640px) {
  .ai-page { padding-top: 56px; }
  .ai-title { font-size: 2.6rem; }
  .ai-blog-card { grid-template-columns: 50% minmax(0, 1fr); }
  .ai-blog-photo { border-bottom: 0; border-right: 1px solid var(--line); }
  .ai-blog-photo img { aspect-ratio: auto; min-height: 100%; object-position: 62% 45%; }
  .ai-blog-body { justify-content: center; padding: 28px; }
  .ai-blog-btn { margin-top: 24px; }
  .ai-page .tab-res { margin-bottom: 96px; }
}