/* About me (Figma 1322:32805) — builds on the homepage nav/footer (components.css). Values from tokens.css. */
.ab-page { width: auto; max-width: var(--page-w); padding-top: calc(var(--nav-h) + var(--sp-80)); }
.nav { max-width: 100%; }                                   /* fluid below 1440 */
.ab-intro, .ab-bento { margin: 0 var(--page-margin); }

/* Intro 1728:51654 */
.ab-intro { display: flex; gap: var(--sp-40); }
.ab-intro__photo { flex: none; width: var(--ab-photo-w); height: var(--ab-photo-h); border-radius: var(--r-ab-photo); object-fit: cover; }
.ab-intro__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-11); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-787878); }
.ab-intro__h { font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }

/* Bento 2776:141179: three columns, gap 16 */
.ab-bento { margin-top: var(--sp-80); display: flex; gap: var(--sp-16); }
.ab-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.ab-card { padding: var(--sp-24); border-radius: var(--r-16); background: var(--c-ab-card); display: flex; flex-direction: column; gap: var(--sp-24); }
.ab-card__title { font-weight: var(--fw-semibold); font-style: italic; font-size: var(--fs-20); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.ab-card--summary { gap: var(--sp-12); }
.ab-card--certs { flex: none; min-height: var(--ab-certs-h); }
.ab-card--tools { flex: 1 1 auto; }
.ab-card--community, .ab-card--growth { flex: 1 1 auto; }
.ab-summary { font-size: var(--fs-24); line-height: var(--lh-150); color: var(--c-white); }
.ab-summary__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); }
.ab-socials { display: flex; gap: var(--sp-12); }
.ab-social, .ab-resume { position: relative; display: flex; align-items: center; justify-content: center; border-radius: var(--r-24); }
.ab-social { width: var(--ab-social); height: var(--ab-social); background: var(--g-social); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646); color: var(--c-grey-dddeea); }
.ab-social::before, .ab-resume::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity var(--dur-social) var(--ease-out); }
.ab-social::before { background: var(--g-social-hover); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646); }
.ab-social svg { position: relative; width: var(--icon-20); height: var(--icon-20); }
.ab-resume { width: var(--ab-resume-w); height: var(--ab-social); padding: 0 var(--sp-16); gap: var(--sp-4); background: var(--c-grey-232324); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-272729); font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.ab-resume::before { background: var(--g-social); box-shadow: inset 0 0 0 var(--bw-1) var(--c-grey-464646); }   /* Figma hover variant 1322:31974 */
.ab-resume > * { position: relative; }
.ab-social:hover::before, .ab-social:focus-visible::before, .ab-resume:hover::before, .ab-resume:focus-visible::before { opacity: 1; }

/* Rows with a link (Component 167): name 16 white, link 16 #8E8E8E + arrow; Figma's underline has opacity 0 */
.ab-list { display: flex; flex-direction: column; gap: var(--sp-12); }
.ab-item { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.ab-item__name { font-size: var(--fs-16); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.ab-link { align-self: flex-start; display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-4); font-size: var(--fs-16); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-grey-8e8e8e); }
.ab-link:hover, .ab-link:focus-visible { color: var(--c-grey-e6e9f3); }
.ab-link__icon { width: var(--icon-16); height: var(--icon-16); padding: var(--sp-2) var(--sp-3); transform: rotate(-135deg); }
.ab-community { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.ab-community .ab-item { flex: 1 1 auto; }
.ab-stat { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-white); }
.ab-stat svg { width: var(--icon-24); height: var(--icon-24); }
.ab-row { display: flex; align-items: flex-start; column-gap: var(--ab-gap-100); flex-wrap: wrap; }
.ab-row--98 { column-gap: var(--ab-gap-98); }
.ab-row__year { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.ab-card--work .ab-item__name { text-transform: capitalize; }
.ab-growth { display: flex; flex-direction: column; gap: var(--sp-11); font-size: var(--fs-16); line-height: var(--lh-190); color: var(--c-grey-8e8e8e); }
.ab-card--growth { gap: var(--sp-8); }
.ab-tools { display: flex; flex-wrap: wrap; gap: var(--sp-20); }
.ab-tool { width: var(--ab-tile); height: var(--ab-tile); border-radius: var(--r-16); }

/* Photo carousel 2776:141231 (set 1322:32001) */
.ab-car { position: relative; width: 100%; max-width: var(--ab-car-w); aspect-ratio: var(--ab-car-ar); }
.ab-car:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.ab-car__track { position: absolute; inset: 0; overflow: hidden; }
.ab-car__slide { position: absolute; inset: 0; margin: 0; transform: translateX(calc(var(--d, 0) * (100% + var(--ab-car-gap)))); opacity: var(--o, 1);
  transition: transform var(--dur-ab-car) var(--ease-ab-car), opacity var(--dur-ab-car) var(--ease-ab-car); }
.ab-car__slide.no-move { transition: opacity var(--dur-ab-car) var(--ease-ab-car); }
.ab-car__slide img { display: block; width: 100%; height: 100%; border-radius: var(--r-16); object-fit: cover; }
.ab-car__dots { position: absolute; left: var(--ab-dots-x); top: var(--ab-dots-y); display: flex; gap: var(--sp-8); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-16); background: var(--g-ab-dots); }
.ab-car__dot { width: var(--ab-dot); height: var(--ab-dot); border-radius: 50%; background: var(--c-ab-dot); }
.ab-car__dot.is-on { background: var(--c-white); }
.ab-car__dot { position: relative; }
/* tap area: the dot's whole 16 px slot x 44 px (owner's decision: no visual change, no overlap) */
.ab-car__dot::before { content: ""; position: absolute; inset: calc((var(--tap) - var(--ab-dot)) / -2) calc(var(--sp-8) / -2); }
/* pause/play (WCAG 2.2.2): pill-style circle right of the dots, 44 px tap area */
/* placed from the dot row's REAL width (the active dot is a --ab-dot-on-w pill, owner 2026-10-10) so its 44 px tap area
   ends --ab-toggle-clear before the last dot's tap area: row right - padding + half dot gap + clearance + half the
   toggle's tap overhang (it overlapped dot 9 before: clicking dot 9 paused the slideshow) */
.ab-car__toggle { position: absolute; top: var(--ab-dots-y);
  left: calc(var(--ab-dots-x) + var(--ab-dots-w) + var(--ab-dot-on-w) - var(--ab-dot) - var(--sp-8) + var(--sp-8) / 2 + var(--ab-toggle-clear) + (var(--tap) - var(--ab-toggle)) / 2);
  display: grid; place-items: center; width: var(--ab-toggle); height: var(--ab-toggle); padding: 0; border: 0; border-radius: 50%;
  background: var(--g-ab-dots); color: var(--c-white); cursor: pointer; }
.ab-car__toggle::before { content: ""; position: absolute; inset: calc((var(--tap) - var(--ab-toggle)) / -2); }
.ab-car__toggle svg { width: var(--ab-toggle-icon); height: var(--ab-toggle-icon); fill: currentColor; }
.ab-car__toggle .ab-car__ico-play, .ab-car__toggle.is-paused .ab-car__ico-pause { display: none; }
.ab-car__toggle.is-paused .ab-car__ico-play { display: inline; }
.ab-car__toggle:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-2); }
.ab-car.no-anim .ab-car__slide { transition: none; }
@media (prefers-reduced-motion: reduce) { .ab-car__slide { transition: none; } }

/* Footer: homepage component; starts 16 below the bento (Figma y 1420) */
.ab-footer { margin-top: var(--sp-16); }
.ab-footer .to-top { left: auto; right: var(--page-margin); }
@media (max-width: 1439.98px) {
  .ab-footer .section-title { font-size: min(var(--fs-138), calc((100vw - 2 * var(--page-margin)) / var(--ab-title-ratio))); }
}
@media (max-width: 1189.98px) {
  .ab-footer .section-title { font-size: var(--fs-r-display); }   /* responsive type scale; wraps on phone */
}
.ab-car { touch-action: pan-y pinch-zoom; }   /* horizontal swipe = next / previous; vertical scroll stays with the browser */
@media (hover: none) {   /* touch: default state */
  .ab-social:hover:not(:focus-visible)::before, .ab-resume:hover:not(:focus-visible)::before { opacity: 0; }
  .ab-link:hover:not(:focus-visible) { color: var(--c-grey-8e8e8e); }
}

/* =====================================================================
   RESPONSIVE (build 3). >= 1190 unchanged. Reading order below 1190:
   summary, photos, Work, Career Growth, Certifications, Figma community, Tools.
   ===================================================================== */
@media (max-width: 1189.98px) {
  .ab-page { padding-top: var(--ab-top-tablet); }
  .ab-intro__text, .ab-intro__h, .ab-summary { font-size: var(--fs-r-body-24); }
  /* Bento: 2 columns, rows of equal height; Tools spans both */
  .ab-bento { margin-top: var(--ab-bento-gap-tablet); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .ab-col { display: contents; }
  .ab-card--summary { order: 1; }
  .ab-car { order: 2; justify-self: center; }   /* keeps its 442 px max (2x images); centred in a wider cell */
  .ab-card--work { order: 3; }
  .ab-card--growth { order: 4; }
  .ab-card--certs { order: 5; min-height: 0; }
  .ab-card--community { order: 6; }
  .ab-card--tools { order: 7; grid-column: 1 / -1; }
  .ab-row, .ab-row--98 { flex-direction: column; }   /* year above the role in every row (Figma's 100 / 98 gaps would wrap some rows and not others) */
}
@media (max-width: 767.98px) {
  .ab-page { padding-top: var(--ab-top-phone); }
  .ab-intro { flex-direction: column; gap: var(--ab-intro-gap-phone); }
  .ab-bento { margin-top: var(--ab-bento-gap-phone); grid-template-columns: 1fr; }
  .ab-card { padding: var(--ab-card-pad-phone); }
  .ab-card--tools { grid-column: auto; }
}

/* Heading + card spacing (owner rule, all widths) */
.ab-intro__text { gap: var(--gap-heading-text); }
.ab-intro__text > p + .ab-intro__h { margin-top: var(--sp-11); }   /* paragraph -> next heading stays 11 */
.ab-card--growth { gap: var(--gap-heading-text); }
@media (max-width: 1189.98px) { .ab-bento { gap: var(--card-gap); } }

/* === Tap areas (C1): at least 44 x 44 (--tap), invisible; elements larger than 44 keep their own size === */
:is(.ab-social, .ab-resume, .ab-link) { position: relative; }
:is(.ab-social, .ab-resume, .ab-link)::after { content: ""; position: absolute;
  inset: min(0px, calc((100% - var(--tap)) / 2)) min(0px, calc((100% - var(--tap)) / 2)); }

/* =====================================================================
   BRAND (owner 2026-10-10; reference design/brand/about-brand-v2.html, "Branded"; the "What I Work On" tags card
   is NOT built). Yellow only as an accent; text on yellow is always --c-on-brand.
   ===================================================================== */
.ab-intro__photo { box-shadow: var(--ab-photo-ring); }                       /* 1 photo ring */
.ab-dot { color: var(--c-brand); font-weight: var(--fw-extrabold); }        /* 2 heading full stops (font unchanged) */
/* 3 summary card: Resume = yellow button that lifts on hover; socials fill yellow on hover */
.ab-resume { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; font-weight: var(--fw-bold); transition: transform var(--dur-hover) var(--ease-out); }
.ab-resume::before { content: none; }
.ab-resume:hover, .ab-resume:focus-visible { transform: translateY(-2px); }
.ab-social { transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.ab-social:hover, .ab-social:focus-visible { background: var(--c-brand); color: var(--c-on-brand); }
.ab-social:hover::before, .ab-social:focus-visible::before { opacity: 0; }
/* 4 links with ↗ turn yellow on hover */
.ab-link { transition: color var(--dur-hover) var(--ease-out); }
.ab-link:hover, .ab-link:focus-visible { color: var(--c-brand); }
/* 5 current job: small yellow dot with a soft halo, the year in full white */
/*   the dot takes no layout space: it hangs in the left margin, centred on the year text */
.ab-row--now .ab-row__year { position: relative; color: var(--c-white); }
.ab-now { position: absolute; right: calc(100% + var(--sp-6)); top: 50%; width: var(--sp-8); height: var(--sp-8); margin-top: calc(var(--sp-8) / -2); border-radius: 50%; background: var(--c-brand); box-shadow: var(--ab-now-halo); }
/* work experience: ONE column layout for all rows (owner 2026-10-10) - a grid on the list, each row a subgrid,
   so every year starts at one x and every title / company link at one x (the year column = the widest year) */
.ab-card--work .ab-list { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--sp-40); row-gap: var(--sp-12); }   /* 40 px gap (owner 2026-10-10) */
.ab-card--work .ab-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: normal; }   /* normal = the list's gap (no per-row 100 / 98) */
@media (max-width: 1189.98px) { .ab-card--work .ab-list { grid-template-columns: 1fr; } }   /* year above the role, as before */
@media (min-width: 768px) { .ab-card--work .ab-item__name { white-space: nowrap; } }   /* titles on one line; wrapping only on phone */
/* 6 carousel: the active dot is a yellow pill */
.ab-car__dot { transition: width var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out); }
.ab-car__dot.is-on { width: var(--ab-dot-on-w); height: var(--ab-dot-on-h); border-radius: var(--ab-dot-on-h); background: var(--c-brand); }
@media (prefers-reduced-motion: reduce) { .ab-resume, .ab-social, .ab-link, .ab-car__dot { transition: none; } .ab-resume:hover, .ab-resume:focus-visible { transform: none; } }
/* Task B (owner 2026-10-10): Figma Community stat icons; the numbers stay white */
.ab-stat--likes svg { color: var(--c-heart); }
.ab-stat--users svg { color: var(--c-brand); }