/*
 * sections.css — section-specific layout rules that don't belong in the
 * shared component library (src/styles/components.css owns .card,
 * .card--venture-track, .badge, .badge--track, .badge--experiment, .btn,
 * .section, .eyebrow, .section-title, .reveal/.is-visible, etc. — this file
 * never redefines those selectors, only adds scoped BEM-style classes for
 * layout that is specific to one section).
 *
 * Uses only tokens.css custom properties, no raw hex/px duplication of
 * design-system values (brief §25.3).
 */

/* ------------------------------------------------------------------------ */
/* Venture Tracks (partials/08-venture-tracks.html, brief §12)              */
/* ------------------------------------------------------------------------ */

.venture-tracks__intro {
  margin-top: 20px;
  color: var(--text-on-light-muted);
}

.venture-tracks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: 48px;
}

@media (min-width: 768px) {
  .venture-tracks__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Status badge sits above the title so it reads as visually prominent
   (brief §12.5: "Статусы должны отображаться заметно"). Spacing only —
   .badge / .badge--track's own visual treatment lives in components.css. */
.venture-track-card__title {
  margin-top: 16px;
  margin-bottom: 12px;
}

.venture-track-card__text {
  color: var(--text-on-light-muted);
}

.venture-tracks__cta {
  margin-top: 48px;
}

/* ------------------------------------------------------------------------ */
/* CommonTime (partials/09-commontime.html, brief §13)                      */
/* ------------------------------------------------------------------------ */

/* Top border visually separates this from Venture Tracks above it, without
   relying only on the default section-to-section spacing (brief §13.5:
   distinct from Venture Tracks, not the same grid/row, not a venture card). */
.commontime {
  border-top: 1px solid var(--border-light);
}

.commontime__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
  background: var(--card-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .commontime__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
}

.commontime__body {
  flex: 1;
}

.commontime__title {
  margin-top: 16px;
  margin-bottom: 12px;
}

.commontime__text {
  color: var(--text-on-light-muted);
}

.commontime__action {
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------ */
/* Founder (partials/10-founder.html, brief §14)                            */
/* ------------------------------------------------------------------------ */

.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .founder__grid {
    grid-template-columns: 480px 1fr;
    align-items: center;
    gap: 56px;
  }
}

/* Rectangular portrait crop, soft radius — brief §14.5: not a circle, not
   AI-effected, not desaturated. object-fit keeps the crop stable once the
   real photo replaces the OPEN-4 placeholder path. */
.founder__photo {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* Applied by 10-founder.html's onerror handler while the real photo is
   still missing (OPEN-4). Renders a neutral, intentional-looking surface
   in place of the browser's broken-image icon and raw alt text. Delete
   this rule together with the onerror attribute once the asset lands. */
.founder__media--placeholder {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, var(--accent-soft) 0%, transparent 70%),
    var(--card-surface);
  border: 1px solid var(--border-light);
}

.founder__body-text {
  margin-top: 16px;
  max-width: 720px;
}

.founder__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* ------------------------------------------------------------------------ */
/* Founder Track Record (partials/04-founder-track-record.html, brief §8)   */
/* ------------------------------------------------------------------------ */

.track-record__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* .eyebrow carries a 20px bottom margin for normal stacked usage; inside a
   flex row it would push the label off-centre against the chip beside it. */
.track-record__head .eyebrow {
  margin-bottom: 0;
}

.track-record__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: 40px;
}

@media (min-width: 768px) {
  .track-record__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.track-record__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.track-record__value {
  font-size: var(--fs-h3-mobile);
  font-weight: var(--fw-h2);
  line-height: 1.15;
  color: var(--text-on-light);
}

@media (min-width: 768px) {
  .track-record__value {
    font-size: var(--fs-h3-desktop);
  }
}

.track-record__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-light-muted);
  max-width: 32ch;
}

/* ------------------------------------------------------------------------ */
/* Evidence-receipt chip (EVI-1, SPEC.md §22) — shared by track-record and  */
/* thesis principles; a small "evidence type" label, not a metric/count.    */
/* ------------------------------------------------------------------------ */

.evidence-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
}

/* ------------------------------------------------------------------------ */
/* Thesis + PrincipleCard (partials/05-thesis.html, brief §9)               */
/* ------------------------------------------------------------------------ */

.thesis__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.thesis__principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  counter-reset: principle;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .thesis__principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columns on desktop, NOT 5. Five 1fr columns on a 1200px container gave
   each principle card ~200px of inner width, which broke every card title
   onto 2-3 lines and turned the body copy into a narrow, hard-to-read
   ribbon. A 3-column grid lays the five cards out as 3 on top + 2 below,
   with each card wide enough for its title to fit on one or two lines and
   for the body text to reach a comfortable measure. */
@media (min-width: 1024px) {
  .thesis__principles {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.thesis__principle {
  counter-increment: principle;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* Sequential 01-05 motif (brief §9.5 visual logic), generated purely in CSS
   — principle objects in content.json have no order/number field. */
.thesis__principle-index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-on-light-muted);
}

.thesis__principle-index::before {
  content: counter(principle, decimal-leading-zero);
}

.thesis__principle-chip {
  align-self: flex-start;
}

/* EVI-1 chip word per card — safe only because brief §9.4 fixes this exact
   principle order and content.json's thesis.principles array mirrors it. */
.thesis__principle:nth-child(1) .thesis__principle-chip::after { content: "Traceable"; }
.thesis__principle:nth-child(2) .thesis__principle-chip::after { content: "Verified"; }
.thesis__principle:nth-child(3) .thesis__principle-chip::after { content: "Uncertain"; }
.thesis__principle:nth-child(4) .thesis__principle-chip::after { content: "Audited"; }
.thesis__principle:nth-child(5) .thesis__principle-chip::after { content: "Abstained"; }

.thesis__principle h3 {
  margin-top: 4px;
}

.thesis__principle p {
  color: var(--text-on-light-muted);
}

/* ------------------------------------------------------------------------ */
/* What We Build (partials/06-what-we-build.html, brief §10)                */
/* ------------------------------------------------------------------------ */

.process-types {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: 40px;
}

@media (min-width: 768px) {
  .process-types {
    grid-template-columns: repeat(3, 1fr);
  }
}

.process-card {
  transition: border-color var(--transition-duration) var(--transition-easing);
}

/* EVI-2 — static CSS-only cross-reference to the Hero evidence-flow visual;
   hover/focus-within only, no JS, no :target wiring (§25.4). Status colors
   reused from tokens.css carry EVI-3's evidence-signal semantics. */
.process-card[data-process-type="Research-heavy"]:hover,
.process-card[data-process-type="Research-heavy"]:focus-within {
  border-color: var(--status-research);
}

.process-card[data-process-type="Data-fragmented"]:hover,
.process-card[data-process-type="Data-fragmented"]:focus-within {
  border-color: var(--status-warning);
}

.process-card[data-process-type="Decision-critical"]:hover,
.process-card[data-process-type="Decision-critical"]:focus-within {
  border-color: var(--status-error);
}

.capability-layer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}

.capability-layer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.capability-chip {
  font-size: var(--fs-small);
  color: var(--text-on-light);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  padding: 8px 14px;
}

/* ------------------------------------------------------------------------ */
/* Operating Model (partials/07-operating-model.html, brief §11)            */
/* ------------------------------------------------------------------------ */

.operating-model__statement {
  margin-top: 20px;
  color: var(--text-on-light-muted);
}

.stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  margin-top: 56px;
}

@media (min-width: 768px) {
  .stages {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stages {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stage {
  padding-top: 24px;
  border-top: 2px solid var(--border-light);
}

.stage__number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-body-large);
  color: var(--accent);
  margin-bottom: 8px;
}

.stage h3 {
  margin-bottom: 8px;
}

.stage p {
  color: var(--text-on-light-muted);
}

.operating-model__callout {
  margin-top: 64px;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
}

.operating-model__callout h3 {
  margin-bottom: 8px;
}

.operating-model__callout p {
  color: var(--text-on-light-muted);
}

/* Footer (12-footer.html) — brief §16.1 composition: brand block, nav,
   external links, legal + copyright. Dark surface per §17.2 (footer=dark)
   handled by .section--dark on the <footer>; these rules only lay out its
   internal grid. No matching rules existed anywhere in src/styles/*.css
   prior to this — flagged by code review as a Critical (unstyled footer). */
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 56px var(--side-padding-mobile) 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-h3);
  font-size: 20px;
  color: var(--text-on-dark);
  margin: 0;
}

.footer-description {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  max-width: 32ch;
  margin: 0;
}

.footer-nav ul,
.footer-external,
.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-external {
  display: flex;
}

.footer-nav a,
.footer-external a,
.footer-legal a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: var(--fs-small);
}

.footer-nav a:hover,
.footer-external a:hover,
.footer-legal a:hover,
.footer-nav a:focus-visible,
.footer-external a:focus-visible,
.footer-legal a:focus-visible {
  color: var(--text-on-dark);
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 248, 252, 0.12);
}

.footer-legal {
  flex-direction: row;
  gap: 20px;
}

.footer-copyright {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  margin: 0;
}

@media (max-width: 767px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px var(--side-padding-mobile) 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}