/* Partners · "Backed by the companies building India": the twelve marks of the 2025 and 2026 sponsor network.
   The marks are the site's PNGs trimmed to their ink (section-lab/assets/partners) and used as masks, so each
   takes the band's type colour. Optical balance: every mark gets the same area, width = k × √(aspect),
   height = width ÷ aspect (--ar per mark, inline), with --s for the two marks the eye reads off (Hindustan
   Unilever's thin line, Rakuten's heavy word). Short by design. Nothing overlaps type. No motifs. */

.lg-band {
  --lg-k: calc(var(--sp-section) * 0.62);
}

.lg__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

/* The titles are fitted (lab.js [data-fit]): the widest line runs flush across the title's own columns. */
.lg__head .q__title {
  grid-column: 2 / 6;
}

/* The label closes the title's last line on the right edge. */
.lg__head .lg__label {
  justify-self: end;
  text-align: right;
}

.lg__head .q__title > span,
.lg2__head .q__title > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.lg__label {
  grid-column: 6 / 8;
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* ---- A cell holds one mark, centred, at equal optical area ---- */
/* min-width 0 and a minmax(0, 1fr) track: otherwise the cell (and its own track) grow to the mark's width and
   the mark's cap at 100% never bites. */
.lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: var(--sp-stack-sm);
  min-height: calc(var(--lg-k) * 1.6);
}

/* Capped at its cell, so a narrow cell scales the mark down rather than letting it run into its neighbour. */
.lg-logo {
  display: block;
  width: calc(var(--lg-k) * sqrt(var(--ar)) * var(--s, 1));
  max-width: 100%;
  aspect-ratio: var(--ar);
  background: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.lg-name {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--quiet);
}

/* ================= L1 · wall of twelve, paper ================= */
/* evosoft's ruled entries: a hairline over every cell, broken at the column gaps, so the wall reads as the grid. */
.lg1 {
  --lg-k: calc(var(--sp-section) * 0.72);
}

.lg1__wall {
  row-gap: var(--sp-stack-md);
  margin-top: calc(var(--sp-section) * 0.5);
}

.lg1__wall .lg {
  border-top: var(--stroke-hairline) solid;
  min-height: calc(var(--lg-k) * 1.45);
}

.lg1__wall .lg:nth-child(6n + 1) {
  grid-column-start: 2;
}

/* ================= L2 · title + wall, lapis ================= */
.lg2__body {
  row-gap: var(--sp-stack-lg);
  align-items: center;
}

/* minmax(0, 1fr): the fitted title is measured against its two columns, never against its own unwrapped line. */
.lg2__head {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--sp-stack-md);
}

.lg2__head .q__title {
  line-height: 0.92;
}

.lg2__head .lg__label {
  grid-column: auto;
  color: var(--palette-jodhpuri-blue);
}

.lg2__wall {
  grid-column: 4 / 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-stack-md) var(--q-gap);
}

.lg2__wall .lg {
  border-top: var(--stroke-hairline) solid var(--palette-jodhpuri-blue);
}

/* ================= L3 · cascade + wall card, crimson ================= */
.lg3__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--sp-stack-lg);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin-inline: auto;
  align-items: center;
}

.lg3__words {
  container-type: inline-size;
}

.lg3__words h2 {
  font-size: 13cqi;
  line-height: 0.95;
}

.lg3__words h2 > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.lg3__words h2 > span:nth-child(2) { margin-inline-start: 10%; }
.lg3__words h2 > span:nth-child(3) { margin-inline-start: 4%; }

.lg3__words .lg__label {
  margin-top: var(--sp-stack-md);
  color: var(--palette-rose-tint);
}

/* The card is the wall: a ruled sheet, three to a row. The card's ground is the rule colour and each cell is
   paper, so the hairline gaps draw the inner lines only and the card's edge stays clean. */
.lg3__card {
  --lg-k: calc(var(--sp-section) * 0.55);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stroke-hairline);
  background: var(--palette-dusty-rose);
  color: var(--primary);
}

.lg3__card .lg {
  min-height: calc(var(--lg-k) * 1.5);
  padding: var(--sp-inset-md);
  background: var(--background);
}

/* ================= L4 · named wall, Jodhpuri ================= */
.lg4 {
  --lg-k: calc(var(--sp-section) * 0.66);
}

.lg4__wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-stack-md) var(--q-gap);
  margin-top: calc(var(--sp-section) * 0.5);
  padding-inline: var(--lay-gutter);
}

/* Two-level entries: a rule, the company's name on it, the mark set left beneath. */
.lg4__wall .lg {
  grid-template-rows: auto 1fr;
  place-items: center start;
  align-content: stretch;
  min-height: calc(var(--lg-k) * 1.55);
  padding-top: var(--sp-stack-sm);
  border-top: var(--stroke-hairline) solid;
}

.lg4__wall .lg-name {
  color: var(--ink);
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .lg1__wall {
    grid-template-columns: calc(var(--lay-gutter) - var(--q-gap)) repeat(4, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  }

  .lg1__wall .lg:nth-child(n) {
    grid-column-start: auto;
  }

  .lg1__wall .lg:nth-child(4n + 1) {
    grid-column-start: 2;
  }
}

/* The titles keep their columns, L4 its four a row, and L2 and L3 their split down to 900. Stacked, L2's fitted title keeps to four columns and L3's cascade
   steps down, so neither title runs gutter to gutter over a short wall. */
@media (max-width: 899px) {
  .lg__head .q__title,
  .lg__label {
    grid-column: 2 / 8;
  }

  .lg__head .lg__label {
    justify-self: start;
    text-align: left;
  }

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

  .lg2__head {
    grid-column: 2 / 6;
  }

  .lg2__wall {
    grid-column: 2 / 8;
  }

  .lg3__stage {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .lg3__words h2 {
    font-size: 9cqi;
  }
}

@media (max-width: 599px) {
  .lg2__head {
    grid-column: 2 / 8;
  }

  .lg-band {
    --lg-k: calc(var(--sp-section) * 0.45);
  }

  /* The card's padding narrows its cells, so its marks step down once more. */
  .lg3__card {
    --lg-k: calc(var(--sp-section) * 0.36);
  }

  .lg3__card .lg {
    padding: var(--sp-inset-sm);
  }


  .lg1__wall {
    grid-template-columns: calc(var(--lay-gutter) - var(--q-gap)) repeat(3, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  }

  .lg1__wall .lg:nth-child(n) {
    grid-column-start: auto;
  }

  .lg1__wall .lg:nth-child(3n + 1) {
    grid-column-start: 2;
  }

  .lg2__wall,
  .lg3__card,
  .lg4__wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg3__words h2 > span:nth-child(n) {
    margin-inline-start: 0;
    white-space: normal;
  }
}