/* ==========================================================================
   ToolsVale — Layout
   Containers, page bands, grids, and the gold rule that divides sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINER
   -------------------------------------------------------------------------- */

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

.tv-container--narrow { max-width: 840px; }
.tv-container--prose  { max-width: 760px; }


/* --------------------------------------------------------------------------
   2. SECTION BANDS
   -------------------------------------------------------------------------- */

.tv-section       { padding-block: var(--tv-section-lg); }
.tv-section--sm   { padding-block: var(--tv-section); }
.tv-section--lg   { padding-block: var(--tv-section-xl); }
.tv-section--flush-top    { padding-top: 0; }
.tv-section--flush-bottom { padding-bottom: 0; }

/* Surface variants */
.tv-section--surface { background: var(--tv-surface); }
.tv-section--sunken  { background: var(--tv-surface-sunken); }

.tv-section--invert {
  background: var(--tv-surface-invert);
  color: var(--tv-text-on-invert);
}

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

/* Hairline separators between bands */
.tv-section--ruled       { border-top: 1px solid var(--tv-border); }
.tv-section--ruled-below { border-bottom: 1px solid var(--tv-border); }

/*
   The signature: a single champagne hairline. Used sparingly as a major
   division — not between every section, or it stops meaning anything.
*/
.tv-rule-gold {
  height: 1px;
  background: var(--tv-gold);
  border: 0;
  margin: 0;
}

.tv-rule-gold--fade {
  background: linear-gradient(
    to right,
    transparent,
    var(--tv-gold) 12%,
    var(--tv-gold) 88%,
    transparent
  );
}


/* --------------------------------------------------------------------------
   3. SECTION HEADER
   Eyebrow + display heading + optional intro and trailing link.
   -------------------------------------------------------------------------- */

.tv-section-head { margin-bottom: var(--tv-space-12); }

.tv-section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tv-space-6);
  flex-wrap: wrap;
}

.tv-section-head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.tv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tv-space-2);
  font-family: var(--tv-font-body);
  font-size: var(--tv-fs-eyebrow);
  font-weight: var(--tv-fw-semibold);
  letter-spacing: var(--tv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tv-text-soft);
}

.tv-eyebrow__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--tv-radius-pill);
  background: var(--tv-gold);
  flex: none;
}

.tv-section-head .tv-eyebrow { margin-bottom: var(--tv-space-5); }

.tv-section-head__title { font-size: var(--tv-fs-3xl); }

.tv-section-head__intro {
  margin-top: var(--tv-space-5);
  font-size: var(--tv-fs-lead);
  line-height: var(--tv-lh-body);
  color: var(--tv-text-soft);
  max-width: var(--tv-measure);
}

.tv-section-head--center .tv-section-head__intro {
  margin-inline: auto;
  max-width: var(--tv-measure-narrow);
}


/* --------------------------------------------------------------------------
   4. GRIDS
   -------------------------------------------------------------------------- */

.tv-grid { display: grid; gap: var(--tv-space-6); }

.tv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Card grid that reflows on its own */
.tv-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.tv-grid--tight { gap: var(--tv-space-4); }

/*
   Editorial split: a sticky heading column beside a content column.
   Used by "what makes us different", "how it works", the FAQ, and the
   tool-page article. The heading holds position while content scrolls.
*/
.tv-split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--tv-space-24);
  align-items: start;
}

.tv-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tv-split__aside {
  position: sticky;
  top: calc(var(--tv-header-h) + var(--tv-space-8));
}

@media (max-width: 1024px) {
  .tv-split { gap: var(--tv-space-16); }
}

@media (max-width: 900px) {
  .tv-split,
  .tv-split--even { grid-template-columns: minmax(0, 1fr); gap: var(--tv-space-10); }
  .tv-split__aside { position: static; }
  .tv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .tv-grid--2,
  .tv-grid--3,
  .tv-grid--4,
  .tv-grid--auto { grid-template-columns: minmax(0, 1fr); }

  .tv-section-head--split { align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   5. STACK / FLOW UTILITIES
   Deliberately few. Reach for a component before a utility.
   -------------------------------------------------------------------------- */

.tv-stack > * + *      { margin-top: var(--tv-space-4); }
.tv-stack-sm > * + *   { margin-top: var(--tv-space-2); }
.tv-stack-lg > * + *   { margin-top: var(--tv-space-8); }

.tv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tv-space-3);
}

.tv-center { text-align: center; }