/* ============================================================
   Statera — About page styles
   Loaded after css/style.css
   ============================================================ */

/* ---------- Elementor container reset ---------- */
/* The About sections are Elementor widgets inside one container. Elementor's
   default flex container adds a 20px gap and 10px padding, which would show up
   as extra space between every section; the sections carry their own
   padding, so the container is reduced to a plain block. */
.elementor .elementor-element.about-root {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  --content-width: 100%;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --gap: 0px;
}

.elementor .elementor-element[class*="elementor-widget-statera-about-"]:not(:last-child) {
  margin-block-end: 0;
}

body.wp-theme-statera /* ---------- Shared page bits ---------- */
.eyebrow-sm {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #686E76;
}

/* Blue arrow disc variant of .btn-primary (hero + CTA) */
.btn-primary .btn-disc--blue { background: var(--signal-blue); border-radius: 0 999px 999px 0; transition: background .2s ease; }
.btn-disc--blue img { transform: scaleX(-1); }
/* Touch has no persistent :hover state, so a tap on the button would leave
   this decorative disc stuck green until the visitor taps elsewhere.
   Gate :hover to devices that actually have a hovering pointer. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover .btn-disc--blue { background: var(--green-accent); }
}
  .btn-primary:active .btn-disc--blue { background: var(--green-accent); }

/* Dark pill button ("Meet Our Team") */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  background: var(--text-grey);
  border: none;
  border-radius: 80px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--white);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-dark:focus-visible {
  background: var(--green-accent);
  color: var(--charcoal);
}
/* Keyboard focus stays unguarded above so it keeps working on every input;
   :hover moves behind a hover-capable-pointer check so a tap does not leave
   the button stuck green on touch. */
@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover {
    background: var(--green-accent);
    color: var(--charcoal);
  }
}
  .btn-dark:active {
    background: var(--green-accent);
    color: var(--charcoal);
  }

.btn-dark img { width: 24px; height: 24px; transform: scaleX(-1); }

/* White pill button with inline arrow ("Read his story") */
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  background: var(--white);
  border: none;
  border-radius: 80px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.16px;
  color: var(--black);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.btn-light:focus-visible { background: var(--green-accent); color: var(--black); }
/* Same touch guard as .btn-dark above. */
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: var(--green-accent); color: var(--black); }
}
  .btn-light:active { background: var(--green-accent); color: var(--black); }

.btn-light-label { display: inline-block; line-height: 1; }
.btn-light img { display: block; width: 24px; height: 24px; flex: none; transform: scaleX(-1); }

/* Centered section header (commitment / leadership) */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.section-head-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-head-title h2 { color: #2B2B29; }
.section-sub {
  max-width: 511px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

/* ---------- Hero ---------- */
/* This section is py-80 and sits directly under the 70px nav; the 1004.005
   nav; its 1004.005 height is 80 + 291.005 + 47 + 506 + 80. */
.about-hero { padding: 80px 0; }
.about-hero .container {
  display: flex;
  flex-direction: column;
  gap: 47px;
}
.about-hero-top {
  display: flex;
  align-items: center;
  gap: 45px;
}
.about-hero-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}
.about-hero-eyebrow { opacity: .5; padding-bottom: 10px; color: var(--black); }
.about-hero-left h1 { color: var(--black); }
.about-hero-intro {
  width: 599px;
  flex: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.54px;
  color: var(--black);
  opacity: .7;
}
.about-hero-intro p + p { margin-top: 27px; }
.about-hero-media {
  position: relative;
  height: 506px;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Prefixed to outrank Elementor's `.elementor img { height: auto }`. */
body.wp-theme-statera .about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Journey ---------- */
.journey { padding: 100px 0; }
.journey-inner {
  display: flex;
  align-items: center;
  gap: 47px;
}
.journey-media {
  width: 547px;
  height: 555px;
  flex: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.journey-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journey-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.journey-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.journey-head h2 { color: #2B2B29; }
.journey-body {
  max-width: 531px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.journey-body p + p { margin-top: 25px; }

/* ---------- Commitment ---------- */
.commitment { padding: 150px 0; }
.commitment .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}
/* Pinned by js/about.js: the section is stretched by the rail's travel and
   the content sticks to the viewport top until the last card is flush. */
.commitment.is-pinned > .container {
  position: sticky;
  top: 0;
}
/* The design draws this row as a scroller already: a 1152 frame holding 1809px
   of cards (node 39:2434), so card 3 sits entirely past the edge and nothing
   says the row moves. Rather than shrink the 583px cards the design fixes, the
   rail runs to the right edge of the viewport, which leaves roughly a fifth of
   card 3 showing as the affordance. The padding lets the last card still reach
   the left gutter once it has scrolled. */
.commitment-cards {
  display: flex;
  gap: 30px;
  align-self: stretch;
  width: auto;
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-right: var(--gutter);
}

/* The section button is the shared dark-arrow-btn (st-btn markup, styles in
   home-sections.css) — st-btn carries no fixed height, so it comes from
   here. */
.commitment .dark-arrow-btn {
  height: 50px;
  padding: 0 20px;
}

/* While the rail is driven by the page scroll the native scrollbar would fight
   it, so the script takes the row over and moves it itself. */
.commitment-cards.is-scroll-driven {
  overflow-x: hidden;
  scroll-snap-type: none;
}
.commitment-cards::-webkit-scrollbar { display: none; }
.commitment-card {
  flex: 0 0 583px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 79px;
  padding: 30px;
  background: var(--green-pale-2);
  border-radius: var(--radius-lg);
}
.commitment-card .badge-num {
  background: var(--text-grey);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}
.commitment-card-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.wp-theme-statera .commitment-card-text h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--black);
}
.commitment-card-text p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--charcoal);
  opacity: .9;
}

/* ---------- Leadership ---------- */
.leadership { padding: 150px 0; }
.leadership .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}
.leader-grid {
  display: flex;
  gap: 46px;
  align-items: stretch;
}
.leader-card {
  width: 549px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 30px;
  background: var(--footer-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.leader-photo {
  height: 455px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: none;
}
.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leader-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
.leader-text {
  display: flex;
  flex-direction: column;
  gap: 34px;
  color: var(--white);
}
.leader-name-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.wp-theme-statera .leader-name {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.leader-role {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  opacity: .6;
}
.leader-bio {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 449px;
}

/* ---------- Legal ---------- */
.legal { padding: 150px 0; }
.legal-card {
  display: flex;
  align-items: flex-end;
  gap: 47px;
  padding: 40px;
  background: var(--text-grey);
  border-radius: var(--radius-lg);
}
.legal-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.legal-eyebrow { color: var(--signal-blue); }
.legal-heading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--white);
}

body.wp-theme-statera .legal-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.32px;
  color: var(--white);
}

body.wp-theme-statera .legal-heading p {
  max-width: 467px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.54px;
}
.legal-cards {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 14px;
}
.legal-cta {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 21px;
  padding: 14px;
  background: #202124;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.legal-cta:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
/* Same touch guard as .btn-dark above. */
@media (hover: hover) and (pointer: fine) {
  .legal-cta:hover { box-shadow: 0 8px 24px rgba(0,0,0,.3); }
}
  .legal-cta:active { box-shadow: 0 8px 24px rgba(0,0,0,.3); }

.legal-icon-badge {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 10px;
  background: var(--footer-ink);
}
.legal-icon-badge img { width: 28px; height: 28px; }
.legal-cta-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
}
.legal-cta-sub { color: var(--white); }
.legal-cta-title {
  color: var(--signal-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legal-cta-ext {
  position: absolute;
  right: 13px;
  top: 13px;
  width: 20px;
  height: 20px;
  color: var(--white);
}
.legal-cta:focus-visible .legal-cta-ext { color: var(--signal-blue); }
@media (hover: hover) and (pointer: fine) {
  .legal-cta:hover .legal-cta-ext { color: var(--signal-blue); }
}
  .legal-cta:active .legal-cta-ext { color: var(--signal-blue); }

/* ---------- CTA ---------- */
.about-cta { padding: 0 0 54px; }
.about-cta-card {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 30px 30px 30px 50px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-cta-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: none;
}
.about-cta-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 542px;
  max-width: 100%;
}
.about-cta-text h2 { color: var(--black); }
.about-cta-text p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}
.about-cta-media {
  flex: 1 1 0;
  min-width: 0;
  height: 530px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.about-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .commitment-card { flex-basis: 480px; }
  .leader-grid { gap: 24px; }
  .leader-card { width: auto; flex: 1 1 0; }
}

@media (max-width: 900px) {
  .about-hero { padding-top: 32px; padding-bottom: 48px; }
  .about-hero-top { flex-direction: column; align-items: flex-start; gap: 32px; }
  .about-hero-left { gap: 32px; }
  .about-hero-intro { width: 100%; }
  .about-hero-media { height: 360px; }

  .journey { padding: 48px 0; }
  .journey-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .journey-text { gap: 28px; }
  .journey-media { width: 100%; height: 360px; }

  .commitment, .leadership, .legal { padding: 48px 0; }
  .commitment .container { gap: 48px; }
  .commitment-cards { gap: 20px; }
  .commitment-card { flex-basis: 85%; gap: 48px; padding: 24px; }
  .leadership .container { gap: 48px; }
  .leader-grid { flex-direction: column; gap: 24px; }
  .leader-card { width: 100%; flex: none; gap: 32px; padding: 24px; }
  .leader-photo { height: 360px; }
  .leader-info { gap: 32px; }
  .leader-text { gap: 20px; }

  .legal-card { flex-direction: column; align-items: flex-start; gap: 32px; padding: 30px; }
  .legal-left { gap: 28px; }
  .legal-cards { width: 100%; flex-direction: column; }

  .about-cta { padding: 0 0 40px; }
  .about-cta-card { flex-direction: column; align-items: flex-start; gap: 32px; padding: 30px; }
  .about-cta-left { gap: 28px; }
  .about-cta-text { width: 100%; gap: 20px; }
  .about-cta-media { width: 100%; height: 320px; }
}

@media (max-width: 600px) {
  .about-hero { padding-top: 24px; }
  .about-hero .container { gap: 28px; }
  .about-hero-top { gap: 24px; padding-top: 12px; }
  .about-hero-left { gap: 24px; }
  .about-hero-intro { font-size: 16px; letter-spacing: -0.32px; }
  .about-hero-intro p + p { margin-top: 18px; }
  .about-hero-media { height: 260px; }

  .journey { padding: 48px 0; }
  .journey-inner { gap: 24px; }
  .journey-text { gap: 20px; }
  .journey-body { font-size: 16px; }
  .journey-body p + p { margin-top: 18px; }
  .journey-media { height: 260px; }

  .commitment, .leadership, .legal { padding: 48px 0; }
  .commitment .container { gap: 32px; }
  .section-head { gap: 20px; }
  .section-head-title { gap: 12px; }
  .section-sub { font-size: 16px; }
  /* DECISION: below 600px "What Sets Us Apart" (the eyebrow of this very
     section, id=commitment) ships as a plain vertical stack, not a native
     swipeable rail. Desktop scroll-hijacks the row — js/about.js drives
     rail.scrollLeft off page-scroll progress — and that script already
     opts out at max-width:900px, handing the row back as a plain scroller.
     A rail a visitor must also horizontally drag is a known mobile trap:
     the drag gesture fights the page's own vertical scroll, and node
     39:2434's 583px cards cannot fit a 350px mobile content width without
     either shrinking past readability or reducing to a one-card sliver.
     Stacking full-width removes the ambiguous gesture entirely and lines
     up with the mobile system's stacked-card gap (30px, from the site's
     only mobile frame, node 40:5175). Between 600 and 900px the row stays
     a native swipe rail instead (see the max-width:900px block above) —
     there is enough width there to peek the next card without hijacking
     the scroll. */
  .commitment-cards {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 30px;
    /* Stacked, there is nothing to scroll to, so the rail stops running past
       the right edge of the viewport. */
    margin-right: 0;
    padding-right: 0;
  }
  .commitment-card { flex: none; width: 100%; gap: 32px; padding: 24px; }
  .commitment-card .badge-num { width: 56px; height: 56px; font-size: 16px; }
  .commitment-card-text { gap: 14px; }

body.wp-theme-statera .commitment-card-text h3 { letter-spacing: -0.4px; }
  .commitment-card-text p { font-size: 16px; }

  .leadership .container { gap: 32px; }
  .leader-grid { gap: 16px; }
  .leader-card { gap: 24px; padding: 20px; }
  .leader-photo { height: 280px; }
  .leader-info { gap: 24px; }
  .leader-text { gap: 16px; }

body.wp-theme-statera .leader-name { font-size: 24px; letter-spacing: -0.4px; }
  .leader-role { font-size: 17px; }
  .leader-bio { font-size: 16px; max-width: none; }

  .legal-card { gap: 24px; padding: 24px; }
  .legal-left { gap: 20px; }
  .legal-heading { gap: 12px; }

body.wp-theme-statera .legal-title { font-size: 32px; letter-spacing: -0.8px; }

body.wp-theme-statera .legal-heading p { font-size: 16px; letter-spacing: -0.32px; }
  .legal-cards { gap: 12px; }
  .legal-cta { gap: 16px; padding: 16px; }
  .legal-icon-badge { width: 48px; height: 48px; }
  .legal-icon-badge img { width: 24px; height: 24px; }
  .legal-cta-text { font-size: 13px; }
  .legal-cta-title { white-space: normal; }

  .about-cta { padding: 0 0 32px; }
  .about-cta-card { gap: 24px; padding: 24px; }
  .about-cta-left { gap: 24px; }
  .about-cta-text { gap: 16px; }
  .about-cta-text p { font-size: 17px; }
  .about-cta-media { height: 260px; }

  .btn-dark,
  .btn-light { height: 46px; font-size: 15px; }
  .btn-dark img,
  .btn-light img { width: 20px; height: 20px; }
}