/* ==========================================================================
   Tower Performance LLC — layout primitives
   ========================================================================== */

.tp-container {
  width: 100%;
  max-width: var(--tp-container);
  margin-inline: auto;
  padding-inline: var(--tp-gutter);
}

.tp-container--wide {
  max-width: var(--tp-container-wide);
}

.tp-container--narrow {
  max-width: 60rem;
}

/* Caps body copy at the 62–72 character measure. */
.tp-measure {
  max-width: var(--tp-measure);
}

/* --- Sections ----------------------------------------------------------- */
.tp-section {
  padding-block: var(--tp-section-y);
}

.tp-section--tight {
  padding-block: var(--tp-section-y-tight);
}

.tp-section--alt {
  background: var(--tp-surface-alt);
}

.tp-section--sunken {
  background: var(--tp-surface-sunken);
}

.tp-section--inverse {
  background: var(--tp-surface-inverse);
  color: var(--tp-text-inverse);
}

.tp-section--inverse h1,
.tp-section--inverse h2,
.tp-section--inverse h3,
.tp-section--inverse h4 {
  color: var(--tp-text-inverse);
}

/* --- Dark surfaces: re-point anything with an explicit light-surface colour --
   Setting `color` on the section only covers descendants that inherit. Anything
   with its own declared colour keeps it, and every one of those colours was
   chosen against white. `.tp-prose strong` was the worst case: charcoal on
   charcoal, 1:1, so the bold lead-in of every numbered step rendered as a blank
   gap. .tp-feature paints the same charcoal without being a --inverse section,
   so it needs the same treatment.
   Buttons are excluded — they carry their own fill and label colour.
   The `strong` override lives in components.css instead, next to the
   `.tp-prose strong` rule it has to outrank: components.css loads after this
   file and the two selectors have equal specificity, so putting it here would
   silently lose the cascade. */
.tp-section--inverse .tp-prose__lead,
.tp-section--inverse .tp-section-head__lead,
.tp-section--inverse .tp-pagehead__lead,
.tp-feature .tp-prose__lead,
.tp-feature .tp-section-head__lead {
  /* 12.2:1 on charcoal. Reads as secondary without going dim. */
  color: rgb(255 255 255 / 0.86);
}

.tp-section--inverse .tp-figure__caption,
.tp-feature .tp-figure__caption {
  color: var(--tp-gray-300); /* 9.3:1 on charcoal */
}

.tp-section--inverse a:not([class*="tp-btn"]),
.tp-feature a:not([class*="tp-btn"]) {
  /* green-700 is the link green for white backgrounds and falls to 2.5:1 here.
     green-400 is 6.3:1 on charcoal. */
  color: var(--tp-green-400);
}

.tp-section--inverse a:not([class*="tp-btn"]):hover,
.tp-feature a:not([class*="tp-btn"]):hover {
  color: var(--tp-green-300);
}

/* --- Section header ----------------------------------------------------- */
.tp-section-head {
  margin-bottom: var(--tp-space-12);
}

.tp-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.tp-section-head > :last-child {
  margin-bottom: 0;
}

.tp-section-head__lead {
  max-width: var(--tp-measure);
  margin-top: var(--tp-space-5);
  color: var(--tp-text-secondary);
  font-size: var(--tp-lead);
  line-height: 1.55;
}

.tp-section-head--center .tp-section-head__lead {
  margin-inline: auto;
}

/* --- Grid --------------------------------------------------------------- */
.tp-grid {
  display: grid;
  gap: var(--tp-space-6);
}

.tp-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.tp-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.tp-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Asymmetric split for text beside a photograph. */
.tp-split {
  display: grid;
  gap: clamp(var(--tp-space-8), 5vw, var(--tp-space-16));
  align-items: center;
}

@media (min-width: 60rem) {
  .tp-split {
    grid-template-columns: 1fr 1fr;
  }

  .tp-split--text-first > :first-child {
    order: 0;
  }

  /* Photograph leads on wide screens, text leads on narrow. */
  .tp-split--media-first > :first-child {
    order: 1;
  }

  .tp-split--wide-text {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* --- Stack -------------------------------------------------------------- */
.tp-stack > * + * {
  margin-top: var(--tp-space-4);
}

.tp-stack--lg > * + * {
  margin-top: var(--tp-space-8);
}

/* --- Full-bleed --------------------------------------------------------- */
.tp-bleed {
  width: 100%;
}

/* --- Controlled diagonal ------------------------------------------------
   The directive asks for controlled diagonal movement. It comes from the
   tower's battered sides and the arrow's rising arc — never from tilting
   boxes. At most one per viewport, always rising left to right, and never
   steeper than about 2.5deg because the mark's own angles are subtle.       */

.tp-diagonal-top {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}

.tp-diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}

@media (prefers-reduced-motion: no-preference) {
  /* One subtle reveal per section: 16px rise plus fade. */
  .tp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--tp-slow) var(--tp-ease),
      transform var(--tp-slow) var(--tp-ease);
  }

  .tp-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}