/* ════════════════════════════════════════════════════════════════════
   EXPLORING AI — "/ai"
   Built ON the shared portfolio system, following the SAME light↔dark
   section rhythm the project pages use (dark hero → white → dark → …).
   Reuses: eu-section(-white/-dark/-glow), eu-eyebrow/eu-h1/eu-h2/eu-p,
   eu-paper is-insight, role-cards, eu-goal-list(-dark), site-footer,
   shared nav (dark theme, like OPA/ODH/NIOCCS).

   The whole page rides on ONE accent token, --ai-rgb. Flip that single
   value to recolour every accent (glow, eyebrow, underlines, badges,
   pills, CTAs, footer) — the components below are wired to it.
   ════════════════════════════════════════════════════════════════════ */

@import url('../home/home.css?v=20260605-1');       /* _base, nav.css(light), _eu-system, _case-study */
@import url('../shared/_nav.css');                   /* dark-theme nav bar (after nav.css so it wins) */
@import url('../shared/_roles.css');                 /* role / principle cards */
@import url('../shared/_goal-cards.css');            /* eu-goal cards (light + dark) */
@import url('../shared/_responsive.css');            /* shared responsive tiers */
@import url('../shared/_footer.css?v=20260601-1');   /* shared dark site footer */

/* ─── THE ONE KNOB ─────────────────────────────────────────────────
   The whole page's accent. Currently coral.
   ------------------------------------------------------------------ */
:root {
  --ai-rgb: 255, 107, 92;
  --eu-accent: rgba(var(--ai-rgb), 0.95);

  --ai-ink: #1a1d21;
  --ai-muted: #5b6066;
  --ai-line: rgba(15, 23, 42, 0.10);
}

/* Footer accent follows the page token (overrides _footer.css's own default,
   which is scoped to .site-footer and would otherwise win over :root). */
.site-footer { --footer-accent-rgb: var(--ai-rgb); }

/* Wire the system's hardcoded-blue accents to the page token */
.brand-badge svg { color: rgba(var(--ai-rgb), 0.95); } /* logo glyph matches the coral accent */
.eu-emphasis { text-decoration-color: rgba(var(--ai-rgb), 0.95); }
.role-badge { background: rgba(var(--ai-rgb), 0.15); color: rgba(var(--ai-rgb), 0.95); }
.eu-section-white .role-badge,
.eu-section .role-badge { background: rgba(var(--ai-rgb), 0.92); color: #fff; }
.role-pills li { background: rgba(var(--ai-rgb), 0.12); border-color: rgba(var(--ai-rgb), 0.35); }
.eu-goal-badge.is-primary,
.eu-goal-badge-dark.is-primary { background: rgba(var(--ai-rgb), 0.15); color: rgba(var(--ai-rgb), 0.95); }
.uf-insight-card-icon { background: rgba(var(--ai-rgb), 0.12); color: rgba(var(--ai-rgb), 0.95); }
.uf-insight-emphasis { text-decoration-color: rgba(var(--ai-rgb), 0.95); }

/* My Philosophy reuses the shared .uf-insight-card (ODH "User Feedback"
   large cards). That grid is 3-up; this section has 4 cards, so lay them
   out 2×2 on desktop. Scoped to >750px so the shared 1-col mobile stack
   (in _responsive.css @media max-width:750px) still wins on phones. */
@media (min-width: 751px) {
  .ai-philosophy-list { grid-template-columns: repeat(2, 1fr); }
}

/* The eyebrow dash + flex layout now live in the shared .eu-eyebrow rule
   (_eu-system.css), coloured by --eu-accent (= --ai-rgb here). The .ai-kicker
   class is kept on the markup but no longer needs its own styling. */

/* Section headers use the shared eu-h1 scale (72px, weight 600) so they
   match the other pages' section titles. (eu-h1's default top margin already
   gives the tight eyebrow→title gap, so no extra tightening rule is needed.) */


/* ════════════════════════════════════════════════════════════════
   HERO — dark + glow (matches the project-page heroes)
   ════════════════════════════════════════════════════════════════ */
.ai-hero { position: relative; overflow: hidden; padding-top: clamp(90px, 13vh, 150px); padding-bottom: clamp(72px, 11vh, 128px); }
.ai-hero .hero-glow::before {
  background: radial-gradient(58% 80% at 72% -6%, rgba(var(--ai-rgb), 0.34), rgba(var(--ai-rgb), 0.10) 34%, transparent 62%);
}
.ai-hero .eu-wrapper { position: relative; z-index: 1; }
.ai-hero-eyebrow { color: rgba(var(--ai-rgb), 0.95) !important; }
.ai-hero-title {
  font-family: 'Cal Sans', sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.0; letter-spacing: -0.02em;
  color: #fff; margin: 22px 0 0; max-width: 18ch;
}
.ai-hero-title em { font-style: italic; color: rgba(var(--ai-rgb), 0.95); }
.ai-hero-sub {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.5;
  color: rgba(255, 255, 255, 0.74); margin: 24px 0 0; max-width: 36ch;
}
.ai-stats { display: flex; flex-wrap: wrap; gap: 36px 52px; margin-top: clamp(40px, 6vw, 60px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ai-stat-n { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: #fff; }
.ai-stat-n .u { color: rgba(var(--ai-rgb), 0.95); }
.ai-stat-l { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.55); margin-top: 8px; max-width: 22ch; }

/* ════════════════════════════════════════════════════════════════
   CAPABILITY PILLS (light)  ·  CREDENTIAL line
   ════════════════════════════════════════════════════════════════ */
/* ── Building Firsthand Understanding — editorial split ──
   Dark MindStudio credential lockup (left) + intro / 2-up capability
   icon grid / takeaway (right). */
.ai-build { display: grid; grid-template-columns: 300px 1fr; gap: 52px; margin-top: 36px; align-items: stretch; }
.ai-build-cred { display: flex; flex-direction: column; background: #16191C; border-radius: 22px; padding: 44px 32px; }
.ai-build-logo { display: block; width: 76px; height: 76px; }
.ai-build-title { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: 2.2rem; line-height: 1.08; color: #fff; margin: 30px 0 0; }
.ai-build-level { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: rgba(255, 255, 255, 0.92); margin: 10px 0 0; }
.ai-build-cohort { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin: 10px 0 0; }
.ai-build-pill { align-self: flex-start; margin: auto 0 0; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: rgba(var(--ai-rgb), 0.95); border: 1px solid rgba(var(--ai-rgb), 0.55); border-radius: 999px; padding: 9px 18px; line-height: 1.4; }
.ai-build-caps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.ai-build-caps li { display: flex; align-items: center; gap: 13px; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--ai-ink); }
.ai-build-caps svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--ai-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-inline-link { color: rgba(var(--ai-rgb), 0.95); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ai-inline-link:hover { text-decoration: underline; }

/* "I don't rely on second-hand understanding" — editorial pullquote */
.ai-pullquote { margin: 28px 0 0; padding-left: 26px; border-left: 4px solid rgba(var(--ai-rgb), 0.9); font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.14; letter-spacing: 0.01em; color: var(--ai-ink); }
.ai-pullquote-accent { color: rgba(var(--ai-rgb), 0.95); }
@media (max-width: 820px) {
  .ai-build { grid-template-columns: 1fr; gap: 28px; }
  .ai-build-caps { grid-template-columns: 1fr; }
}

.ai-subhead { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ai-ink); margin: clamp(40px, 5vw, 56px) 0 0; }
.eu-section-dark .ai-subhead { color: #fff; }

/* ════════════════════════════════════════════════════════════════
   FEATURED — Airbnb-style cards (image-led, compact grid)
   ════════════════════════════════════════════════════════════════ */
.ai-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; margin: 36px 0 clamp(80px, 9.5vw, 120px); }
@media (max-width: 900px) { .ai-fgrid { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; } }
@media (max-width: 600px) { .ai-fgrid { grid-template-columns: 1fr; } }
.ai-fcard { display: flex; flex-direction: column; }
.ai-fcard-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, #e9eef3 0%, #dde5ee 60%, #d6e0ea 100%);
  display: grid; place-items: center;
}
.ai-fcard-media::after { /* faint accent wash so the placeholder reads as 'media' */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 30% 20%, rgba(var(--ai-rgb), 0.10), transparent 70%);
}
.ai-fcard-ph { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(15,23,42,0.34); }
.ai-fcard-ph svg { width: 38px; height: 38px; }
.ai-fcard-ph span { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.ai-fcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ai-fcard-demo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(16, 19, 22, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
.ai-fcard-demo svg { width: 22px; height: 22px; margin-left: 2px; }
.ai-fcard:hover .ai-fcard-demo { transform: translate(-50%, -50%) scale(1.08); }
.ai-fcard-media .ai-fcard-zoom { transition: transform 0.4s ease; position: absolute; inset: 0; }
.ai-fcard:hover .ai-fcard-media::after { background: radial-gradient(70% 70% at 30% 20%, rgba(var(--ai-rgb), 0.16), transparent 70%); }
.ai-fcard-h { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: 1.55rem; line-height: 1.18; color: var(--ai-ink); margin: 22px 0 0; }
.ai-fcard-p { font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 24px; color: var(--ai-muted); margin: 8px 0 0; }
.ai-fcard-tech { font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(15,23,42,0.45); margin: 14px 0 0; display: flex; align-items: center; gap: 7px; }
.ai-fcard-tech::before { content: ""; width: 14px; height: 1px; background: var(--ai-line); }
/* Real tech stack with per-item icons (overrides the placeholder dash) */
.ai-fcard-tech--stack { flex-wrap: wrap; gap: 6px 16px; color: rgba(15,23,42,0.82); font-weight: 500; }
.ai-fcard-tech--stack::before { content: none; }
.ai-fcard-tech--stack span { display: inline-flex; align-items: center; gap: 6px; }
.ai-fcard-tech--stack svg { width: 17px; height: 17px; flex: 0 0 auto; color: rgba(var(--ai-rgb), 0.95); }
.ai-fcard-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 20px; }
/* Left-aligned tonal CTA — hugs its content, gives the card a base, fills on hover */
.ai-fcard-cta {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 12px 20px; border-radius: 11px;
  background: var(--ai-ink); color: #fff;
  border: 1px solid var(--ai-ink);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-fcard-cta:hover { background: #000; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); }
.ai-fcard-cta .arrow { transition: transform 0.2s ease; }
.ai-fcard-cta:hover .arrow { transform: translateX(3px); }
.ai-fcard-link {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: rgba(var(--ai-rgb), 1);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.ai-fcard-link .a { transition: transform 0.2s ease; }
.ai-fcard-link:hover .a { transform: translateX(3px); }
.ai-fcard-link[aria-disabled="true"] { color: var(--ai-muted); pointer-events: none; }

/* ── Technologies strip — icon + label chips ── */
/* Technologies & Integrations — monochrome brand-logo wall in a bordered panel */
.ai-techwall {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border: 1px solid var(--ai-line); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 14px 30px rgba(15,23,42,0.05);
}
.ai-techwall li {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 32px 16px; border-right: 1px solid var(--ai-line); border-top: 1px solid var(--ai-line);
}
.ai-techwall .mark { width: 38px; height: 38px; flex: 0 0 auto; color: var(--ai-ink); }
.ai-techwall .mark--apify { width: 30px; height: 30px; }
.ai-techwall .mark--gcloud { transform: translateY(-3px); } /* optical nudge — cloud's flat base reads low otherwise */
.ai-techwall .lbl { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--ai-muted); text-align: center; }

/* ── Numbered badge on goal cards (light + dark) ── */
.eu-goal-badge-dark.ai-num,
.eu-goal-badge.ai-num { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; display: grid; place-items: center; background: rgba(var(--ai-rgb), 0.95); }

/* ════════════════════════════════════════════════════════════════
   CLOSING finale — the intersection
   ════════════════════════════════════════════════════════════════ */
/* Editorial left-aligned pull quote — matches the About "Why I'm Drawn to
   Product Management" quote (left accent border bar), coloured by --ai-rgb here. */
.ai-close-quote {
  font-family: 'Cal Sans', sans-serif; font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px); line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ai-ink); max-width: 780px; margin: 48px 0;
  padding-left: 26px; border-left: 4px solid rgba(var(--ai-rgb), 0.55);
}
.ai-close-accent { color: rgba(var(--ai-rgb), 0.98); }
/* Body copy — site's eu-p measure (936px), left-aligned editorial block */
.ai-close-copy { max-width: 936px; margin: 30px 0 0; }
.ai-close-copy .eu-p { margin: 0; }
.ai-close-copy .eu-p + .eu-p { margin-top: 18px; }

/* Intersection: 2×2 discipline cards converging on a glowing core */
.ai-venn { position: relative; max-width: 760px; margin: 44px 0 0; }
.ai-venn::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--ai-rgb), 0.14), transparent 70%);
}
.ai-venn-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ai-venn-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding: 48px 28px; background: #fff; border: 1px solid var(--ai-line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 12px 28px rgba(15,23,42,0.07);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ai-venn-card:hover { transform: translateY(-3px); border-color: rgba(var(--ai-rgb), 0.4); }
.ai-venn-card svg { width: 38px; height: 38px; fill: none; stroke: rgba(var(--ai-rgb), 0.95); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-venn-card span { font-family: 'Cal Sans', sans-serif; font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--ai-ink); }
.ai-venn-card.is-ai { background: rgba(var(--ai-rgb), 0.07); border-color: rgba(var(--ai-rgb), 0.4); }
.ai-venn-card.is-ai svg, .ai-venn-card.is-ai span { color: rgba(var(--ai-rgb), 1); }
.ai-venn-card.is-ai svg { stroke: rgba(var(--ai-rgb), 1); }
/* Center node = me — a solid white person silhouette where all four
   disciplines converge. Filled (not outlined) so it reads as an avatar,
   distinct from the outlined person icon on the User Experience card. */
.ai-venn-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--ai-rgb), 0.98);
  box-shadow: 0 0 0 8px #fff, 0 12px 30px rgba(var(--ai-rgb), 0.45);
}
.ai-venn-core svg { width: 44px; height: 44px; fill: #fff; }
@media (max-width: 540px) { .ai-venn-card { padding: 32px 18px; } .ai-venn-core { width: 64px; height: 64px; box-shadow: 0 0 0 7px #fff, 0 8px 22px rgba(var(--ai-rgb), 0.45); } .ai-venn-core svg { width: 36px; height: 36px; } }