/* 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 */
.ab-car__toggle { position: absolute; left: calc(var(--ab-dots-x) + var(--ab-dots-w) + var(--sp-16)); top: var(--ab-dots-y);
  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)); }