/*
 * sections.css — section-specific layout rules that don't belong in the
 * shared component library (src/styles/components.css owns .card,
 * .card--current-work, .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).
 */

/* ------------------------------------------------------------------------ */
/* Current Work (partials/06-current-work.html, SPEC.md §24.4/§24.6.1) —    */
/* replaces the former Venture Tracks section (brief §12) at this position. */
/* Card markup is hand-authored per project rather than looped (see the     */
/* partial's own header comment) but this grid/layout stays generic.        */
/* ------------------------------------------------------------------------ */

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

.current-work__grid {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  margin-top: 48px;
}

/* 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. */
.current-work-card__title {
  margin-top: 16px;
  margin-bottom: 12px;
}

.current-work-card__text {
  color: var(--text-on-light-muted);
}

.current-work-card__text + .current-work-card__text {
  margin-top: 12px;
}

/* Grill-pass-1 fix (SPEC.md §24.6.1): description/expandedText/secondary/
   lookingFor stay always visible — this file only ever lays them out, it
   never gates their display (no <details>, no JS toggle anywhere here).
   Mobile: everything in one column, main block then the aside stacked
   below it with a top-border separator. Desktop: the card splits into a
   main zone (badge/title/description/expandedText) and a detail rail
   (secondary/lookingFor) — see the @media block below. */
.current-work-card__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.current-work-card__meta-item {
  color: var(--text-on-light-muted);
}

.current-work-card__meta-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-medium);
  color: var(--text-on-light);
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .card--current-work {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--grid-gap);
  }

  .current-work-card__main {
    flex: 1.4 1 0%;
  }

  .current-work-card__aside {
    flex: 1 1 0%;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

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

/* Top border visually separates this from the section above it (Operating
   Model — SPEC.md §24.4 inserted it between Current Work and CommonTime;
   this section previously sat directly below Venture Tracks). Brief §13.5:
   distinct section, 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)                            */
/* ------------------------------------------------------------------------ */

/* Single-column block — no photo/media column for now (removed on explicit
   user request; re-add a 2-col grid + .founder__photo/.founder__media--
   placeholder rules here if a photo is added back later). max-width keeps
   the text measure readable instead of stretching full container width. */
.founder__grid {
  max-width: 720px;
}

.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);
}

/* ------------------------------------------------------------------------ */
/* 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;
  }
}