/* ORIGEX — ORX-P01 | PG05 About Composition | Copyright © ORVEAX
 * M7 second pass: editorial hierarchy, directional flow and responsive mass control.
 * Frozen content/IA preserved; no new runtime dependency or feature family.
 */

/* --------------------------------------------------------------------------
   Hero — credible company introduction, controlled media mass
   -------------------------------------------------------------------------- */
.orx-about-hero {
  padding-block: clamp(3.75rem, 6vw, 6rem);
}

.orx-about-hero .orx-hero__grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.orx-about-hero .orx-hero__grid > div:first-child {
  max-inline-size: 44rem;
}

.orx-about-hero .orx-media--hero {
  position: relative;
  min-inline-size: 0;
  min-block-size: clamp(21rem, 36vw, 32rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border-color: var(--orx-border-strong);
  box-shadow: var(--orx-shadow-e2);
}

.orx-about-hero .orx-media--hero img,
.orx-about-editorial-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.orx-about-hero__facts {
  position: absolute;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.orx-about-hero__fact {
  min-inline-size: 0;
  background: color-mix(in srgb, var(--orx-primary-strong) 90%, transparent);
  color: var(--orx-surface);
  border: 1px solid color-mix(in srgb, var(--orx-surface) 22%, transparent);
  border-radius: var(--orx-radius-md);
  padding: .9rem 1rem;
  backdrop-filter: blur(8px);
}

.orx-about-hero__fact strong {
  display: block;
  line-height: 1.45;
}

.orx-about-hero__fact span {
  display: block;
  margin-block-start: .2rem;
  font-size: var(--orx-fs-small);
  line-height: 1.45;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   Who we are — editorial split rather than a generic card grid
   -------------------------------------------------------------------------- */
.orx-about-who__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.orx-about-who__grid > div:first-child {
  max-inline-size: 45rem;
}

.orx-about-who__grid > div:first-child p:not(.orx-lead) {
  max-inline-size: 62ch;
  color: var(--orx-text-muted);
}

.orx-about-editorial-media {
  min-block-size: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--orx-border);
  border-radius: var(--orx-radius-lg);
  background: var(--orx-surface-soft);
  box-shadow: var(--orx-shadow-e1);
}

.orx-about-facts {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 1rem;
  border-block-start: 1px solid var(--orx-border);
}

.orx-about-fact-item {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem .85rem;
  border-block-end: 1px solid var(--orx-border);
}

.orx-about-fact-item:nth-child(odd) {
  border-inline-end: 1px solid var(--orx-border);
}

.orx-about-fact-item .orx-icon-box {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Vision / mission — two complementary editorial statements
   -------------------------------------------------------------------------- */
.orx-about-values,
.orx-about-trust-grid,
.orx-about-final-grid {
  display: grid;
  gap: 1rem;
}

.orx-about-values {
  margin-block-start: 2rem;
}

.orx-about-value-card,
.orx-about-final-panel {
  block-size: 100%;
}

.orx-about-value-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: none;
}

.orx-about-value-card:first-child {
  border-color: var(--orx-border-strong);
  background:
    radial-gradient(circle at 90% 10%, rgba(14, 117, 103, .10), transparent 34%),
    var(--orx-surface);
}

.orx-about-value-card:last-child {
  background:
    radial-gradient(circle at 10% 90%, rgba(196, 122, 74, .10), transparent 34%),
    var(--orx-surface);
}

.orx-about-value-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--orx-secondary);
}

.orx-about-value-card:last-child::after {
  background: var(--orx-accent);
}

/* --------------------------------------------------------------------------
   Commercial role — one route, with direction-aware connectors
   -------------------------------------------------------------------------- */
.orx-about-flow {
  display: grid;
  gap: .75rem;
  align-items: stretch;
  margin-block-start: 2rem;
}

.orx-about-flow__node {
  min-inline-size: 0;
  min-block-size: 10.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-shadow: none;
}

.orx-about-flow__node:not(.orx-about-flow__node--brand) {
  background: var(--orx-surface-soft);
}

.orx-about-flow__node--brand {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .10), transparent 46%),
    var(--orx-primary-strong);
  color: var(--orx-surface);
  border-color: var(--orx-primary-strong);
  box-shadow: var(--orx-shadow-e1);
}

.orx-about-flow__node--brand .orx-card__title {
  color: var(--orx-surface);
}

.orx-about-flow__node--brand .orx-card__copy {
  color: color-mix(in srgb, var(--orx-surface) 74%, transparent);
}

.orx-about-flow__node--brand .orx-icon-box {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.orx-about-flow__arrow {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 2.75rem;
  color: var(--orx-secondary);
}

.orx-about-flow__arrow::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 1px;
  background: var(--orx-border-strong);
}

.orx-about-flow__arrow .orx-icon {
  position: relative;
  z-index: 1;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  padding: .18rem;
  background: var(--orx-surface);
  transform: rotate(-90deg);
}

[dir="rtl"] .orx-about-flow__arrow .orx-icon {
  transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Commercial clarity — trust controls, not decorative cards
   -------------------------------------------------------------------------- */
.orx-about-trust-grid {
  margin-block-start: 1.75rem;
}

.orx-about-trust-grid .orx-card {
  min-inline-size: 0;
  padding: 1.25rem;
  border-block-start: 3px solid var(--orx-border-strong);
  box-shadow: none;
}

.orx-about-trust-grid .orx-card:nth-child(2) {
  border-block-start-color: var(--orx-secondary);
}

.orx-about-trust-grid .orx-card:nth-child(3) {
  border-block-start-color: var(--orx-accent);
}

.orx-about-trust-grid .orx-card:nth-child(4) {
  border-block-start-color: var(--orx-primary);
}

.orx-about-boundary {
  margin-block-start: 1.5rem;
  border-inline-start: 4px solid var(--orx-accent);
  background: var(--orx-surface-soft);
  border-radius: var(--orx-radius-md);
  padding: 1.1rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Final conversion — resources secondary, opportunity primary
   -------------------------------------------------------------------------- */
.orx-about-final-grid {
  margin-block-start: 1.75rem;
}

.orx-about-final-panel {
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: none;
}

.orx-about-final-panel:last-child {
  border-color: var(--orx-border-strong);
  background:
    radial-gradient(circle at 88% 12%, rgba(14, 117, 103, .10), transparent 34%),
    var(--orx-surface);
  box-shadow: var(--orx-shadow-e1);
}

.orx-about-demo-note {
  max-inline-size: 80ch;
  margin-block-start: 1.25rem;
  color: var(--orx-text-muted);
  font-size: var(--orx-fs-small);
}

/* --------------------------------------------------------------------------
   Tablet and desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .orx-about-values,
  .orx-about-final-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 992px) {
  .orx-about-who__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    align-items: center;
  }

  .orx-about-flow {
    grid-template-columns: minmax(0, 1fr) minmax(2.75rem, auto) minmax(0, 1.08fr) minmax(2.75rem, auto) minmax(0, 1fr);
    gap: 0;
  }

  .orx-about-flow__arrow {
    min-inline-size: 2.75rem;
    min-block-size: 0;
  }

  .orx-about-flow__arrow::before {
    inset-inline: 0;
    inset-block: 50% auto;
    inline-size: auto;
    block-size: 1px;
  }

  .orx-about-flow__arrow .orx-icon {
    transform: rotate(180deg);
  }

  [dir="rtl"] .orx-about-flow__arrow .orx-icon {
    transform: none;
  }

  .orx-about-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .orx-about-hero {
    padding-block: 2.75rem 3.25rem;
  }

  .orx-about-hero .orx-hero__grid {
    gap: 1.5rem;
  }

  .orx-about-hero .orx-media--hero {
    min-block-size: 0;
    aspect-ratio: auto;
  }

  .orx-about-hero .orx-media--hero img {
    aspect-ratio: 4 / 3;
  }

  .orx-about-hero__facts,
  .orx-about-facts {
    grid-template-columns: 1fr;
  }

  .orx-about-hero__facts {
    position: static;
    padding: .75rem;
    gap: .5rem;
    background: var(--orx-primary-strong);
  }

  .orx-about-hero__fact {
    padding: .75rem .85rem;
    backdrop-filter: none;
  }

  .orx-about-facts {
    border-block-start: 0;
  }

  .orx-about-fact-item,
  .orx-about-fact-item:nth-child(odd) {
    border-inline-end: 0;
  }

  .orx-about-flow__node {
    min-block-size: 0;
  }

  .orx-about-final-panel .orx-card__actions,
  .orx-about-final-panel .orx-cluster {
    align-items: stretch;
  }

  .orx-about-final-panel .orx-btn {
    inline-size: 100%;
    justify-content: center;
  }
}


/* M7 first-six re-audit — hero geometry hardening */
@media (min-width: 992px) {
  .orx-about-hero .orx-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr);
  }
}
@media (max-width: 991.98px) {
  .orx-about-hero {
    padding-block: 2.5rem 3rem;
  }
  .orx-about-hero .orx-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .orx-about-hero .orx-media--hero {
    min-block-size: 0;
    aspect-ratio: auto;
  }
  .orx-about-hero .orx-media--hero img {
    aspect-ratio: 16 / 7;
    object-position: center;
  }
  .orx-about-hero__facts {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .65rem;
    gap: .5rem;
    background: var(--orx-primary-strong);
  }
}
@media (max-width: 575.98px) {
  .orx-about-hero {
    padding-block: 1.75rem 2.25rem;
  }
  .orx-about-hero .orx-hero__grid {
    gap: 1rem;
  }
  .orx-about-hero .orx-media--hero img {
    aspect-ratio: 16 / 8.5;
  }
  .orx-about-hero__fact {
    padding: .65rem .7rem;
  }
}


/* M7 first-six re-audit correction — keep hero proof inside the media frame
 * on tablet/mobile so the About introduction remains editorial, not a full
 * viewport stack. Content and information hierarchy are unchanged. */
@media (max-width: 991.98px) {
  .orx-about-hero .orx-media--hero {
    position: relative;
    overflow: hidden;
  }
  .orx-about-hero__facts {
    position: absolute;
    inset-inline: .75rem;
    inset-block-end: .75rem;
    z-index: 2;
    padding: 0;
    background: transparent;
  }
  .orx-about-hero__fact {
    background: color-mix(in srgb, var(--orx-primary-strong) 92%, transparent);
  }
}
@media (max-width: 575.98px) {
  .orx-about-hero__facts {
    inset-inline: .55rem;
    inset-block-end: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .orx-about-hero__fact span {
    font-size: .72rem;
  }
}


/* M7 first-six re-audit correction — desktop About hero should remain a
 * concise company introduction, not consume a full desktop viewport. */
@media (min-width: 992px) {
  .orx-about-hero {
    padding-block: clamp(3rem, 4vw, 4.5rem);
  }
}


/* M7 first-six re-audit gate — explicit page-local media geometry wins over
 * the shared 4/5 mobile media ratio. */
@media (max-width: 991.98px) {
  .orx-about-hero .orx-media.orx-media--hero {
    block-size: 220px !important;
    min-block-size: 220px !important;
    aspect-ratio: auto !important;
  }
  .orx-about-hero .orx-media--hero img {
    block-size: 100% !important;
    aspect-ratio: auto !important;
  }
}
@media (max-width: 575.98px) {
  .orx-about-hero .orx-media.orx-media--hero {
    block-size: 180px !important;
    min-block-size: 180px !important;
  }
  .orx-about-hero h1 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }
  .orx-about-hero .orx-lead {
    line-height: 1.6;
  }
}

/* M7 first-six re-audit final phone trim: preserves content and 44px+ actions
 * while keeping the longer English About hero within the 900px QA budget. */
@media (max-width: 575.98px) {
  .orx-about-hero {
    padding-block: 1.25rem 1.75rem;
  }
}