/* ==========================================================================
   FLEXIONEX — SECTIONS
   Shared styling for section template parts.
   ========================================================================== */

/* ── HERO ────────────────────────────────────────────────────────────── */

.fx-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  padding-block: var(--fx-s9) var(--fx-s8);
  padding-block-start: calc(var(--fx-header-h) + var(--fx-s9));
  margin-block-start: calc(var(--fx-header-h) * -1);
  min-height: 62vh;
  overflow: hidden;
}

.fx-hero--home        { min-height: 88vh; }
.fx-hero--solution    { min-height: 58vh; }
.fx-hero--industry    { min-height: 66vh; }
.fx-hero--engineering { min-height: 44vh; }
.fx-hero--trust       { min-height: 56vh; }

@media (max-width: 767px) {
  .fx-hero,
  .fx-hero--home { min-height: 72vh; }
  .fx-hero--engineering { min-height: 40vh; }
}

.fx-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.fx-hero__picture,
.fx-hero__img {
  width: 100%;
  height: 100%;
}

.fx-hero__img {
  object-fit: cover;
  object-position: var(--focal-d, 50% 45%);
}

@media (max-width: 767px) {
  .fx-hero__img { object-position: var(--focal-m, 55% 45%); }
}

/* Overlay strength is per-page; the gradient keeps the lower text area darkest. */
.fx-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 23, 41, calc(var(--hero-overlay, .58) * .55)) 0%,
    rgba(6, 23, 41, var(--hero-overlay, .58)) 100%
  );
}

/* No image: fall back to a brand gradient rather than flat black. */
.fx-hero--no-image {
  background: linear-gradient(135deg, var(--fx-navy-700) 0%, var(--fx-ink-900) 60%, var(--fx-ink-700) 100%);
}

.fx-hero__inner { width: 100%; }

.fx-hero__breadcrumb { margin-block-end: var(--fx-s5); }

.fx-hero .fx-eyebrow { margin-block-end: var(--fx-s4); }

.fx-hero__title { margin-block-end: var(--fx-s5); }

.fx-hero__lead {
  color: rgba(255, 255, 255, .82);
  margin-block-end: var(--fx-s6);
}

.fx-hero__actions { margin-block-end: var(--fx-s6); }

.fx-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-s7);
  padding-block-start: var(--fx-s5);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.fx-hero__spec { display: flex; flex-direction: column; gap: var(--fx-s1); }

.fx-hero__spec-label {
  font-size: var(--fx-text-xs);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-steel-500);
}

.fx-hero__scroll {
  position: absolute;
  bottom: var(--fx-s6);
  left: 50%;
  transform: translateX(-50%);
}

.fx-hero__scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .6));
}

/* ── DIRECT ANSWER ───────────────────────────────────────────────────── */

.fx-direct-answer {
  background: var(--fx-bg-brand-tint);
  border-left: 3px solid var(--fx-orange-400);
  border-radius: 0 var(--fx-radius) var(--fx-radius) 0;
  padding: var(--fx-s5) var(--fx-s6);
  font-size: var(--fx-text-lg);
  line-height: 1.7;
  max-width: 62ch;
}

.fx-direct-answer p:last-child { margin-block-end: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.fx-faq { border-top: 1px solid var(--fx-border); }

.fx-faq__item { border-bottom: 1px solid var(--fx-border); }

.fx-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-s4);
  padding: var(--fx-s5) 0;
  font-size: var(--fx-text-lg);
  font-weight: 600;
  color: var(--fx-text-strong);
  cursor: pointer;
  list-style: none;
}

.fx-faq__question::-webkit-details-marker { display: none; }

.fx-faq__question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-xl);
  color: var(--fx-orange-400);
  transition: transform var(--fx-dur) var(--fx-ease-in-out);
}

.fx-faq__item[open] .fx-faq__question::after {
  transform: rotate(45deg);
}

.fx-faq__answer {
  padding-block-end: var(--fx-s5);
  max-width: 68ch;
  color: var(--fx-text-muted);
}

.fx-faq__answer p:last-child { margin-block-end: 0; }

/* ── TABLES ──────────────────────────────────────────────────────────── */

.fx-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fx-table-scroll:focus-visible {
  outline: 2px solid var(--fx-focus-ring);
  outline-offset: 4px;
}

.fx-spec-table,
.fx-comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fx-text-sm);
  font-variant-numeric: tabular-nums;
}

.fx-spec-table caption,
.fx-comparison caption {
  caption-side: bottom;
  padding-block-start: var(--fx-s3);
  text-align: start;
}

.fx-spec-table th,
.fx-comparison th,
.fx-spec-table td,
.fx-comparison td {
  padding: var(--fx-s3) var(--fx-s4);
  text-align: start;
  border-bottom: 1px solid var(--fx-border);
}

.fx-spec-table thead th,
.fx-comparison thead th {
  position: sticky;
  top: var(--fx-header-h-compact);
  z-index: 2;
  background: var(--fx-bg);
  font-size: var(--fx-text-xs);
  font-weight: 600;
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-muted);
  border-bottom: 2px solid var(--fx-border-strong);
}

.fx-spec-table tbody th,
.fx-comparison tbody th {
  font-weight: 500;
  color: var(--fx-text);
}

.fx-spec-table tbody tr:nth-child(even),
.fx-comparison tbody tr:nth-child(even) {
  background: var(--fx-bg-subtle);
}

.fx-spec-table__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fx-s4);
  flex-wrap: wrap;
}

/* Below 768px the table restacks as cards — horizontal scrolling a parameter
   table is close to unusable on a phone. */
@media (max-width: 767px) {
  .fx-spec-table,
  .fx-spec-table thead,
  .fx-spec-table tbody,
  .fx-spec-table tr,
  .fx-spec-table th,
  .fx-spec-table td { display: block; }

  .fx-spec-table thead { display: none; }

  .fx-spec-table tbody tr {
    margin-block-end: var(--fx-s4);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    overflow: hidden;
  }

  .fx-spec-table tbody th {
    background: var(--fx-bg-subtle);
    border-bottom: 1px solid var(--fx-border);
    font-weight: 600;
  }

  .fx-spec-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--fx-s4);
    border-bottom: 1px solid var(--fx-border);
  }

  .fx-spec-table tbody td:last-child { border-bottom: 0; }

  .fx-spec-table tbody td::before {
    content: attr(data-label);
    font-size: var(--fx-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--fx-tracking-wide);
    color: var(--fx-text-subtle);
  }
}

/* ── ENVIRONMENT BAR ─────────────────────────────────────────────────── */

.fx-env-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-s7);
  margin: 0;
  padding: var(--fx-s5) 0;
  border-block: 1px solid var(--fx-border);
}

.fx-env-bar__item { display: flex; flex-direction: column; gap: var(--fx-s1); }

.fx-env-bar__value { margin: 0; }

/* ── METRICS ─────────────────────────────────────────────────────────── */

.fx-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fx-s6);
  margin: 0;
}

.fx-metrics__item {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--fx-s2);
}

.fx-metrics__value {
  margin: 0;
  font-size: var(--fx-text-4xl);
  font-weight: 500;
  line-height: 1;
  color: var(--fx-text-strong);
}

.fx-metrics__label {
  font-size: var(--fx-text-xs);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-text-subtle);
}

/* ── NUMBERED LIST ───────────────────────────────────────────────────── */

.fx-numbered {
  display: grid;
  gap: var(--fx-s5);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fx-numbered;
}

@media (min-width: 768px) {
  .fx-numbered { grid-template-columns: repeat(2, 1fr); gap: var(--fx-s6) var(--fx-s7); }
}

.fx-numbered__item {
  display: flex;
  gap: var(--fx-s4);
  padding-block-start: var(--fx-s4);
  border-top: 1px solid var(--fx-border);
}

[data-animate].fx-numbered__item { transform: translateY(20px); }

.fx-numbered__index {
  flex-shrink: 0;
  font-size: var(--fx-text-sm);
  color: var(--fx-orange-400);
}

.fx-numbered__content { display: flex; flex-direction: column; gap: var(--fx-s2); }

/* ── SYMPTOMS ────────────────────────────────────────────────────────── */

.fx-symptoms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fx-s4);
}

.fx-symptom {
  padding: var(--fx-s5);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
}

[data-animate].fx-symptom { transform: translateY(20px); }

.fx-symptom__label {
  display: block;
  font-weight: 600;
  color: var(--fx-text-strong);
  margin-block-end: var(--fx-s2);
}

.fx-symptom__body {
  font-size: var(--fx-text-sm);
  color: var(--fx-text-muted);
  margin: 0;
}

/* ── TIMELINE ────────────────────────────────────────────────────────── */

.fx-timeline {
  display: grid;
  gap: var(--fx-s6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .fx-timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--fx-s5);
  }
}

.fx-timeline__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fx-s4);
  align-items: start;
}

@media (min-width: 1024px) {
  .fx-timeline__step {
    grid-template-columns: 1fr;
    gap: var(--fx-s4);
  }
}

[data-animate].fx-timeline__step { transform: translateY(20px); }

.fx-timeline__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 20px;
}

@media (min-width: 1024px) {
  .fx-timeline__marker::after {
    content: "";
    position: absolute;
    left: 12px;
    right: calc(var(--fx-s5) * -1);
    height: 1px;
    background: var(--fx-border-strong);
  }

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

.fx-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fx-orange-400);
  flex-shrink: 0;
}

.fx-timeline__content { display: flex; flex-direction: column; gap: var(--fx-s2); }

.fx-timeline__index {
  font-size: var(--fx-text-xs);
  color: var(--fx-text-subtle);
}

/* ── CAPABILITY ──────────────────────────────────────────────────────── */

.fx-capability {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--fx-s6) var(--fx-s5);
}

.fx-capability__item { display: flex; flex-direction: column; gap: var(--fx-s2); }

[data-animate].fx-capability__item { transform: translateY(20px); }

.fx-capability__icon {
  width: 28px;
  height: 28px;
  color: var(--fx-steel-500);
  margin-block-end: var(--fx-s2);
}

/* ── DIAGRAM / FIGURE ────────────────────────────────────────────────── */

.fx-figure { margin: 0; }

.fx-figure img { border-radius: var(--fx-radius); }

.fx-figure figcaption { margin-block-start: var(--fx-s3); }

.fx-diagram { margin: var(--fx-s6) 0 0; }

.fx-diagram__svg svg { width: 100%; height: auto; }

.fx-formula {
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-lg);
  padding: var(--fx-s4) var(--fx-s5);
  background: var(--fx-bg-subtle);
  border-left: 2px solid var(--fx-steel-500);
  border-radius: 0 var(--fx-radius) var(--fx-radius) 0;
  margin-block-start: var(--fx-s5);
}

/* ── CTA BAND ────────────────────────────────────────────────────────── */

.fx-cta-band--center { text-align: center; }

.fx-cta-band--center .fx-section__head { align-items: center; }

.fx-cluster--center { justify-content: center; }

.fx-section__foot { margin-block-start: var(--fx-s6); }

/* ── SOLUTION LIST ───────────────────────────────────────────────────── */

.fx-solution-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx-solution-list__item { border-bottom: 1px solid var(--fx-border); }

.fx-solution-list__item a {
  display: block;
  padding: var(--fx-s3) 0;
  font-size: var(--fx-text-sm);
  color: var(--fx-text);
  text-decoration: none;
}

.fx-solution-list__item a:hover { color: var(--fx-orange-400); }

/* ── PROSE ───────────────────────────────────────────────────────────── */

.fx-prose { max-width: 68ch; }

.fx-prose > * + * { margin-block-start: var(--fx-s4); }

.fx-prose h2 {
  font-size: var(--fx-text-2xl);
  font-weight: 650;
  letter-spacing: var(--fx-tracking-tight);
  color: var(--fx-text-strong);
  margin-block-start: var(--fx-s7);
}

.fx-prose h3 {
  font-size: var(--fx-text-xl);
  font-weight: 600;
  color: var(--fx-text-strong);
  margin-block-start: var(--fx-s6);
}

.fx-prose ul,
.fx-prose ol { padding-inline-start: var(--fx-s5); }

.fx-prose li + li { margin-block-start: var(--fx-s2); }

.fx-prose img { border-radius: var(--fx-radius); }

/* ── GLOSSARY ────────────────────────────────────────────────────────── */

.fx-glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-s2);
  padding-block: var(--fx-s5);
  border-block: 1px solid var(--fx-border);
  position: sticky;
  top: var(--fx-header-h-compact);
  background: var(--fx-bg);
  z-index: 5;
}

.fx-glossary-index__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  font-size: var(--fx-text-sm);
  color: var(--fx-text-muted);
  text-decoration: none;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-xs);
}

.fx-glossary-index__link:hover {
  color: var(--fx-orange-400);
  border-color: var(--fx-orange-400);
}

.fx-glossary-group { padding-block-start: var(--fx-s7); }

.fx-glossary-group__letter {
  font-size: var(--fx-text-2xl);
  color: var(--fx-steel-500);
  margin-block-end: var(--fx-s5);
}

.fx-glossary-term { padding-block: var(--fx-s3); }

.fx-term__notation { display: flex; gap: var(--fx-s2); align-items: baseline; }

.fx-term__related { margin-block-start: var(--fx-s7); }

/* ── SEARCH / RESULTS / EMPTY ────────────────────────────────────────── */

.fx-search__row { display: flex; gap: var(--fx-s2); }

.fx-search__input {
  flex: 1;
  min-height: var(--fx-touch-min);
  padding: var(--fx-s3) var(--fx-s4);
  font-size: var(--fx-text-base);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-sm);
  color: var(--fx-text);
}

.fx-search__input:focus-visible {
  outline: 2px solid var(--fx-focus-ring);
  outline-offset: 1px;
}

.fx-result { padding-block-end: var(--fx-s5); border-bottom: 1px solid var(--fx-border); }

.fx-result > * + * { margin-block-start: var(--fx-s2); }

.fx-empty { padding-block: var(--fx-s8); }

/* ── PAGINATION ──────────────────────────────────────────────────────── */

.fx-pagination { margin-block-start: var(--fx-s8); }

.fx-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx-pagination__item a,
.fx-pagination__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fx-touch-min);
  min-height: var(--fx-touch-min);
  padding-inline: var(--fx-s3);
  font-size: var(--fx-text-sm);
  text-decoration: none;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-xs);
  color: var(--fx-text-muted);
}

.fx-pagination__item a:hover {
  border-color: var(--fx-navy-800);
  color: var(--fx-text-strong);
}

.fx-pagination__item .current {
  background: var(--fx-navy-800);
  border-color: var(--fx-navy-800);
  color: var(--fx-white);
}

/* ── ADMIN WARNING ───────────────────────────────────────────────────── */

.fx-admin-warning {
  margin: var(--fx-s4) auto;
  max-width: var(--fx-container);
  padding: var(--fx-s4) var(--fx-s5);
  background: var(--fx-warning-bg);
  border-left: 3px solid var(--fx-warning);
  border-radius: 0 var(--fx-radius) var(--fx-radius) 0;
  font-size: var(--fx-text-sm);
}

.fx-admin-warning ul { margin: var(--fx-s2) 0 0; padding-inline-start: var(--fx-s5); }

/* ── UNIT TOGGLE ─────────────────────────────────────────────────────── */

.fx-unit-toggle { flex-shrink: 0; }

/* ── ICON ────────────────────────────────────────────────────────────── */

.fx-icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; }