/* =========================================================
   LINXAS GROUP — ABOUT
   Page-level polish, reveal stagger, and interaction.
   Tokens: navy #0E2340, accent #7A2F3B, cream #F6F4EF
   ========================================================= */

body.page-about {
  --navy: #0E2340;
  --accent: #7A2F3B;
  --cream: #F6F4EF;
  --about-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-about main {
  overflow-wrap: break-word;
}

body.page-about .page-hero h1 {
  text-wrap: balance;
}

body.page-about .page-hero p,
body.page-about .who-body p,
body.page-about .experience-intro,
body.page-about .value-block p,
body.page-about .principle-block p,
body.page-about .final-cta h2 {
  text-wrap: pretty;
}

/* ---------- Who we are ---------- */

body.page-about .who-we-are {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.page-about .who-body {
  width: 100%;
  max-width: min(70ch, 100%);
}

/* ---------- Experience: full-width grid, no clipped text ---------- */

body.page-about section.experience .experience-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

body.page-about section.experience .experience-item {
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: visible;
  padding: 26px 24px 28px;
  border-top: 2px solid transparent;
  transition:
    background-color 280ms var(--about-ease),
    border-top-color 280ms var(--about-ease),
    box-shadow 320ms var(--about-ease),
    transform 320ms var(--about-ease);
}

body.page-about section.experience .experience-item:hover {
  background: #1a385a;
  border-top-color: var(--accent);
}

body.page-about section.experience .experience-item h4,
body.page-about section.experience .experience-item p {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  overflow-wrap: break-word;
  word-break: normal;
}

body.page-about section.experience .experience-item h4 {
  line-height: 1.35;
  text-wrap: balance;
}

body.page-about section.experience .experience-item p {
  font-size: 14px;
  line-height: 1.6;
  color: #C4CEDB;
}

body.page-about section.experience .experience-intro {
  width: 100%;
  max-width: min(70ch, 100%);
}

/* Stagger experience cards (site.js sets .is-visible; --d delays the fade) */
body.page-about .experience-grid > [data-reveal]:nth-child(1) { --d: 0ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(2) { --d: 55ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(3) { --d: 110ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(4) { --d: 165ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(5) { --d: 220ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(6) { --d: 275ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(7) { --d: 330ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(8) { --d: 385ms; }
body.page-about .experience-grid > [data-reveal]:nth-child(9) { --d: 440ms; }

/* ---------- Value ---------- */

body.page-about section.value > [data-reveal] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.page-about .value-block {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 40px);
}

body.page-about .value-block > * {
  min-width: 0;
}

body.page-about .value-block p {
  width: 100%;
  max-width: none;
  overflow: visible;
}

body.page-about .value-block .section-head {
  margin: 0;
}

/* ---------- Principles: full content width, hover rows ---------- */

body.page-about .principle-block {
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 30px 0;
  margin: 0;
  border-radius: 0;
  transition:
    background-color 280ms var(--about-ease),
    padding-inline 280ms var(--about-ease),
    box-shadow 280ms var(--about-ease);
}

body.page-about .principle-block h3,
body.page-about .principle-block p {
  min-width: 0;
  width: 100%;
  max-width: none;
  overflow: visible;
  white-space: normal;
}

body.page-about .principle-block h3 {
  text-wrap: balance;
  line-height: 1.28;
  position: relative;
  padding-left: 14px;
}

body.page-about .principle-block h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 2px;
  height: 1.1em;
  background: var(--accent);
  transform: scaleY(0.55);
  transform-origin: center top;
  transition: transform 320ms var(--about-ease);
}

/* section-head is child 1; principle rows start at child 2 */
body.page-about .principles > .principle-block[data-reveal]:nth-child(2) { --d: 0ms; }
body.page-about .principles > .principle-block[data-reveal]:nth-child(3) { --d: 50ms; }
body.page-about .principles > .principle-block[data-reveal]:nth-child(4) { --d: 100ms; }
body.page-about .principles > .principle-block[data-reveal]:nth-child(5) { --d: 150ms; }
body.page-about .principles > .principle-block[data-reveal]:nth-child(6) { --d: 200ms; }

/* ---------- Final CTA ---------- */

body.page-about .final-cta > [data-reveal] {
  width: 100%;
  max-width: 100%;
}

body.page-about .final-cta h2 {
  width: 100%;
  max-width: min(34ch, 100%);
  margin-inline: auto;
}

/* ---------- Hover / micro-motion (motion OK only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  body.page-about.js-reveal .experience-item[data-reveal].is-visible,
  body.page-about.js-reveal .principle-block[data-reveal].is-visible {
    transition:
      opacity 640ms var(--ease) var(--d, 0ms),
      transform 300ms var(--about-ease),
      background-color 300ms var(--about-ease),
      border-top-color 300ms var(--about-ease),
      box-shadow 300ms var(--about-ease),
      padding-inline 280ms var(--about-ease);
  }

  body.page-about section.experience .experience-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    z-index: 1;
  }

  body.page-about .principle-block:hover {
    background: rgba(255, 255, 255, 0.55);
  }

  body.page-about .principle-block:hover h3::before {
    transform: scaleY(1);
  }

  body.page-about .final-cta a.btn-primary {
    transition:
      background-color 280ms var(--about-ease),
      border-color 280ms var(--about-ease),
      transform 360ms var(--about-ease),
      box-shadow 360ms var(--about-ease);
  }

  body.page-about .final-cta a.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(14, 35, 64, 0.18);
  }
}

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

@media (max-width: 1080px) {
  body.page-about section.experience .experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.page-about section.experience .experience-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-about .value-block,
  body.page-about .principle-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.page-about section.experience .experience-item {
    padding: 22px 18px 24px;
  }

  body.page-about .principle-block h3 {
    padding-left: 12px;
  }
}

/* ---------- Reduced motion: visible, no motion ---------- */

@media (prefers-reduced-motion: reduce) {
  body.page-about [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  body.page-about section.experience .experience-item:hover {
    transform: none;
    box-shadow: none;
  }

  body.page-about .principle-block h3::before,
  body.page-about .principle-block:hover h3::before {
    transform: scaleY(0.55);
  }

  body.page-about .final-cta a.btn-primary:hover {
    transform: none;
    box-shadow: none;
  }
}