/* ============================================================
   ABOUT — page-specific section styles for about.html.

   No new visual language: every rule here composes existing tokens
   (color/type/spacing) and conventions already used elsewhere in the
   project —
     - "How I Create Value" reuses the homepage's own .principle-grid/
       .principle-card box treatment verbatim (Why Choose Me).
     - "Where I've Built" and the numbered-row pattern reuse the same
       --color-border top-hairline divider as .footer__bottom and
       case-study.css's .cs-challenges__item, and the same title/body
       split as .cs-role__grid there.
     - "By the Numbers" mirrors case-study.css's .cs-result__grid (big
       accent value + label-nav label).
     - .tag-list/.tag reuses the homepage's existing project-card tag
       pill component (components.css's .tag) rather than inventing a
       new pill style.
   Kept in its own file rather than appended to sections.css since
   those are the homepage's sections specifically (see that file's
   own header comment) and this page has no equivalent there to
   extend.

   Mobile-first, same as the rest of the project — base rules here
   are the mobile layout; breakpoints below layer on tablet/desktop
   overrides at the project's established 768/1024/1440 widths.
   ============================================================ */

/* ---- Shared nav active-state ----
   Only ever applied on this page (about.html sets aria-current="page"
   on its own "About" link; index.html's nav never sets it), so this
   rule is inert everywhere else despite living in a shared-looking
   selector. */
.header__link[aria-current="page"],
.header__drawer-link[aria-current="page"] {
  color: var(--color-accent);
}

/* ---- Shared tag-list container ----
   Same flex-wrap/gap as sections.css's .project-card__tags — used
   here for the working-toolkit row, work-history domain tags, and
   the What's Next capability row. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- 01 — About Hero ---- */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.about-hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about-hero__headline {
  color: var(--color-ink);
  width: 100%;
  max-width: 1100px;
  /* Reserves height for one typewriter line (only one of the 3
     rotating statements is ever on screen at a time) so the reveal
     growing/fading the line never shifts .about-hero__statement/__meta
     below it — same rationale as .hero__headline's own min-height
     reservation in sections.css. responsive.css bumps this where a
     statement wraps to 2 lines at narrower widths. */
  min-height: var(--fs-display-lg);
}

.about-hero__statement {
  color: var(--color-ink);
  max-width: 640px;
}

/* Same visual language as the homepage hero's .hero__meta row —
   small tracked labels separated by "/". */
.about-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  color: var(--color-ink);
}

.about-hero__meta-sep {
  color: var(--color-muted);
}

/* ---- 02 — Design. Build. Ship. ----
   Full-width section title (same weight as every other section
   heading on this page), then a text + supporting image row,
   asymmetric two-column at desktop — mirrors .side-project's
   text/media pairing. */
.about-build {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-build__title {
  color: var(--color-ink);
  width: 100%;
}

.about-build__row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.about-build__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 1 480px;
  max-width: 660px;
  color: var(--color-ink);
}

.about-build__statement {
  color: var(--color-ink);
}

.about-build__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.about-build__step {
  color: var(--color-ink);
}

.about-build__arrow {
  font-size: var(--fs-xl);
}

.about-build__toolkit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.about-build__toolkit-label {
  color: var(--color-muted);
}

.about-build__fluxa {
  margin-top: 8px;
}

.about-build__media {
  flex: 1 1 400px;
  max-width: 480px;
  aspect-ratio: 508 / 477;
  overflow: hidden;
}

.about-build__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 03 — How I Create Value ----
   .principle-grid/.principle-card themselves come from sections.css
   (reused verbatim, unedited); this file only adds the section
   wrapper/title and a hover lift. Safe to add hover here: index.html
   never loads about.css, so the homepage's identical Why Choose Me
   cards are unaffected. */
.about-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.about-value__title {
  color: var(--color-ink);
  width: 100%;
}

.principle-card {
  transition: transform var(--dur-fast) var(--ease-standard);
}

.principle-card:hover {
  transform: translateY(-4px);
}

/* ---- 04 — Where I've Built ----
   Interactive vertical timeline: a connecting line + dot per role
   (.timeline__marker), each row an accessible accordion — collapsed to
   dates/company/role by default, expanding to tags + contributions on
   click. Open/close is a pure CSS grid-template-rows 0fr→1fr transition
   (no JS height measurement needed); js/about.js only toggles the
   `.is-open` class and the button's `aria-expanded`. Respects
   prefers-reduced-motion automatically via global.css's blanket
   transition-duration override — no extra branching needed here. */
.about-timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.about-timeline__title {
  color: var(--color-ink);
  width: 100%;
}

.timeline {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.timeline__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 20px;
  width: 100%;
}

.timeline__marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline__marker::before {
  content: '';
  position: relative;
  top: 26px;
  z-index: 1;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-border);
}

.timeline__marker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -32px;
  left: 50%;
  width: 1px;
  background: var(--color-border);
}

.timeline__item:last-child .timeline__marker::after {
  display: none;
}

.timeline__item--current .timeline__marker::before {
  background: var(--color-accent);
}

.timeline__content {
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.timeline__item:last-child .timeline__content {
  border-bottom: none;
}

.timeline__heading {
  width: 100%;
}

.timeline__trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  width: 100%;
  padding-block: 12px;
  text-align: left;
  color: var(--color-ink);
}

.timeline__dates {
  color: var(--color-muted);
  width: 100%;
}

.timeline__company {
  color: var(--color-ink);
}

.timeline__role {
  color: var(--color-muted);
}

/* Plus/minus indicator — same aria-expanded-driven transform technique
   as .header__hamburger's open-state icon. */
.timeline__toggle {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}

.timeline__toggle::before,
.timeline__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}

.timeline__toggle::before {
  width: 12px;
  height: 1.5px;
}

.timeline__toggle::after {
  width: 1.5px;
  height: 12px;
}

.timeline__trigger[aria-expanded="true"] .timeline__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.timeline__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-standard);
}

.timeline__panel.is-open {
  grid-template-rows: 1fr;
}

/* No padding/border on this element — anything declared here renders
   unconditionally regardless of min-height:0, which stops the parent
   .timeline__panel's grid-template-rows:0fr from ever reaching a true
   0px when collapsed. .timeline__content's constant 32px bottom
   padding already provides breathing room below the revealed content
   when open, so no extra spacing is needed here. */
.timeline__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  min-height: 0;
}

.timeline__contributions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  color: var(--color-ink);
}

.timeline__contributions li {
  position: relative;
  padding-left: 20px;
}

.timeline__contributions li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

/* ---- 05 — By the Numbers ----
   Mirrors case-study.css's .cs-result__grid: big accent value + ink
   label, generous gaps, no dashboard chrome. */
.about-numbers {
  display: flex;
  flex-direction: column;
  gap: 48px;
  border-top: 1px solid var(--color-border);
}

.about-numbers__title {
  color: var(--color-ink);
  width: 100%;
}

.about-numbers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  width: 100%;
}

.about-numbers__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-numbers__value {
  color: var(--color-accent);
}

.about-numbers__label {
  color: var(--color-ink);
}

/* ---- 06 — Currently Exploring ---- */
.about-exploring {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.about-exploring__title {
  color: var(--color-ink);
  width: 100%;
}

.about-exploring__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
  color: var(--color-ink);
}

.about-exploring__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-exploring__heading {
  font-weight: 700;
  text-transform: uppercase;
}

/* "Currently Building" callout — a single full-width link row, same
   hairline-divider + hover-color language as the contact page's
   .contact-details__link. */
.about-exploring__building {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-standard);
}

.about-exploring__building:hover {
  color: var(--color-accent);
}

.about-exploring__building-label {
  color: var(--color-muted);
}

.about-exploring__building-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.about-exploring__building:hover .about-exploring__building-arrow {
  transform: rotate(-90deg) translate(3px, -3px);
}

/* ---- 07 — What's Next ---- */
.about-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  border-top: 1px solid var(--color-border);
}

.about-next__title {
  color: var(--color-ink);
  width: 100%;
}

.about-next__statement {
  color: var(--color-ink);
  max-width: 720px;
}

.about-next__location {
  color: var(--color-muted);
}

/* ---- Responsive ---- */

/* Tablet: 768–1023px */
@media (min-width: 768px) {
  .timeline__item {
    flex-direction: row;
    gap: 32px;
  }

  .timeline__meta {
    flex: 0 0 auto;
    width: 220px;
  }

  .about-numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-exploring__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Laptop/Desktop: 1024px+ */
@media (min-width: 1024px) {
  .timeline__meta {
    width: 260px;
  }

  .about-exploring__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}