/* AI Automation Services – UK SMEs
   Namespaced to .ai-uk to avoid theme collisions
   File: /assets/css/aiautomation.css
*/
.ai-uk { --indigo:#4f46e5; --ink:#0f172a; --muted:#64748b; --bg:#f8fafc; --card:#ffffff; --ring:#e5e7eb; }
.ai-uk, .ai-uk * { box-sizing: border-box; }
.ai-uk { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); width:100%; overflow-x:hidden; }

/* layout */
.ai-uk .wrap { max-width: 1100px; width:100%; margin: 0 auto; padding: 0 20px; }
.ai-uk .section { padding: 52px 0; }
.ai-uk .section-tight { padding: 10px 0 0; } /* small gap under header */
.ai-uk .hero { background: linear-gradient(180deg, #eef2ff, #ffffff); padding: 16px 0 40px; margin-top:0; }

/* header / brand */
.ai-uk .headerbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.ai-uk .brand { display:flex; align-items:center; gap:10px; }
.ai-uk .brand .logo{
  width:34px; height:34px; border-radius:10px; background:var(--indigo);
  color:#fff !important; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; line-height:1; text-transform:uppercase; overflow:hidden;
}

/* nav (desktop default) */
.ai-uk nav { display:flex; gap:16px; font-size:14px; align-items:center; flex:0 0 auto; }
.ai-uk nav a { text-decoration:none; color:inherit; }
.ai-uk nav a:hover { color: var(--indigo); }

/* components */
.ai-uk .btn { display:inline-block; background:var(--indigo); color:#fff; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; max-width:100%; }
.ai-uk .btn:hover { opacity:.95; }
.ai-uk .btn.alt { background:transparent; color:var(--ink); border:1px solid var(--ring); }

.ai-uk .pill { display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--ring); background:#fff; font-size:12px; color:#334155; margin:4px 6px 0 0; }

.ai-uk .grid { display:grid; gap:18px; }
.ai-uk .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-uk .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-uk .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai-uk .grid-hero { grid-template-columns: 1.2fr minmax(0,.8fr); align-items: center; }

/* contact: auto-layout by structure (no special classes needed) */
.ai-uk #contact .wrap > .card {
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap:18px;
  align-items:center;
}

/* content blocks */
.ai-uk .card { background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:18px; text-align:left; min-width:0; }
.ai-uk .card h3, .ai-uk .card p, .ai-uk .card ul, .ai-uk .card li { text-align:left; }
.ai-uk .stat { background:#fff; border:1px solid var(--ring); border-radius:16px; padding:16px; text-align:center; }
.ai-uk .stat .v { font-size:28px; font-weight:700; }
.ai-uk .stat .l { font-size:12px; color:var(--muted); }

.ai-uk .eyebrow { color:var(--indigo); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }

/* type + safe wrapping */
.ai-uk h1 { font-size:40px; line-height:1.1; margin:0; }
.ai-uk h2 { font-size:28px; margin:0 0 6px; }
.ai-uk h3 { font-size:18px; margin:0 0 6px; }
.ai-uk p, .ai-uk li, .ai-uk a { color:#334155; word-break:break-word; overflow-wrap:anywhere; }

.ai-uk .footer-note { color:#64748b; font-size:13px; }

/* lists */
.ai-uk .list { margin:10px 0 0; padding-left:18px; list-style:disc outside; color:#334155; }
.ai-uk .list li { margin:6px 0; }

/* project links */
.ai-uk .projects a { color:var(--indigo); text-decoration:none; font-weight:600; }
.ai-uk .projects a:hover { text-decoration:underline; }

/* ---------- Responsive ---------- */
/* ≤ 980px: stack hero; cards → 2 cols; contact → 1 col */
@media (max-width: 980px) {
  .ai-uk .grid-hero { grid-template-columns: 1fr; }
  .ai-uk .cards-3, .ai-uk .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ai-uk #contact .wrap > .card { grid-template-columns: 1fr; }
  /* header nav wraps and fills width */
  .ai-uk .headerbar { align-items:flex-start; }
  .ai-uk nav { flex:1 1 100%; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .ai-uk nav a { display:inline-block; padding:8px 12px; border:1px solid var(--ring); border-radius:10px; background:#fff; }
}

/* ≤ 860px: ALL card grids → 1 col */
@media (max-width: 860px) {
  .ai-uk .cards-2, .ai-uk .cards-3, .ai-uk .cards-4 { grid-template-columns: 1fr; }
}

/* ≤ 640px: smaller headings; full-width CTAs; make nav pill row comfy */
@media (max-width: 640px) {
  .ai-uk h1 { font-size:32px; }
  .ai-uk .btn { display:block; width:100%; text-align:center; }
  .ai-uk .wrap { padding: 0 16px; }
  .ai-uk nav { gap:8px; }
  .ai-uk nav a { padding:10px 12px; font-size:14px; }
  /* nuke grid on tiny screens inside contact to avoid overflow entirely */
  .ai-uk #contact .wrap > .card { display:block; }
  .ai-uk #contact .wrap > .card > * { margin-bottom:12px; }
}

/* media hygiene */
.ai-uk img, .ai-uk svg, .ai-uk video, .ai-uk iframe { max-width:100%; height:auto; display:block; }
/* --- NAV: compact spacing --- */
.ai-uk nav { gap:10px; } /* was 16px */

@media (max-width: 980px) {
  .ai-uk .headerbar { row-gap:4px; }
  .ai-uk nav { gap:6px; margin-top:4px; }           /* was 10px / 8px */
  .ai-uk nav a { padding:6px 10px; }                /* was 8px 12px */
}

@media (max-width: 640px) {
  .ai-uk nav { gap:4px; }                           /* was 8px */
  .ai-uk nav a { padding:6px 8px; font-size:13px; } /* was 10px 12px / 14px */
}