/* =============================================================================
   Meaning layer — Statement · Idea · We build the online version (Phase 5)
   Editorial thought, not a services pitch. No cards. No icons.
   ============================================================================= */

/* --- Shared shell --- */
.statement,
.idea,
.build:not(.build--scope) {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  overflow: clip;
}

.build.build--scope {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  overflow: visible;
}

.statement__inner,
.idea__inner,
.build__inner {
  width: min(100% - (var(--gutter) * 2), var(--page-max));
  margin-inline: auto;
}

/* ==========================================================================
   STATEMENT — editorial pause after Work
   Different businesses → different worlds → one studio.
   ========================================================================== */

section.statement {
  /* Neutralize utility .statement type scale from typography.css */
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: normal;
  font-weight: 400;
  text-wrap: unset;
  padding-block: clamp(5.5rem, 14vh, 9rem) clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--color-hairline);
}

.statement__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: clamp(1.1rem, 2.2vh, 1.75rem);
  align-items: start;
  align-content: center;
  min-height: clamp(26rem, 58vh, 38rem);
}

.statement__primary {
  grid-column: 1 / span 8;
  margin: 0;
  font-size: clamp(2.4rem, 1.15rem + 4.6vw, 4.65rem);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-fg);
  max-width: 12ch;
}

.statement__primary span {
  display: block;
  text-wrap: balance;
}

.statement__echo {
  grid-column: 1 / span 8;
  justify-self: start;
  text-align: left;
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  padding-block: clamp(1.25rem, 3.5vh, 2rem);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  font-size: clamp(1.55rem, 0.9rem + 2.4vw, 2.65rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-fg-soft);
  max-width: 16ch;
}

.statement__echo span {
  display: block;
  text-wrap: balance;
}

.statement__aside {
  grid-column: 1 / span 5;
  margin: clamp(1.75rem, 5vh, 3rem) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--color-quiet);
  max-width: 26ch;
  justify-self: start;
  text-align: left;
}

/* ==========================================================================
   IDEA — editorial stanza; slower rhythm
   ========================================================================== */

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

.idea__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-3xl);
  align-items: start;
}

.idea__meta {
  grid-column: 1 / span 3;
  margin: 0;
  font-size: var(--text-meta);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-quiet);
  padding-top: 0.35em;
}

.idea__stanza {
  grid-column: 4 / span 6;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.idea__stanza p {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-weight: 400;
  color: var(--color-fg-soft);
  max-width: 22ch;
}

.idea__stanza p.idea__beat {
  color: var(--color-fg);
  font-weight: 500;
}

.idea__stanza p.idea__turn {
  margin-top: var(--space-xl);
  color: var(--color-fg);
  font-weight: 500;
  max-width: 24ch;
}

.idea__aside {
  grid-column: 10 / span 3;
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: 22ch;
  padding-top: 0.2em;
}

/* ==========================================================================
   BUILD — legacy static index (non-scope). Scope lives in build-scope.css.
   ========================================================================== */

.build:not(.build--scope) {
  padding-block: var(--section-y) var(--section-y-loose);
  border-top: 1px solid var(--color-hairline);
}

.build:not(.build--scope) .build__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-l);
  margin-bottom: var(--space-4xl);
  align-items: end;
}

.build:not(.build--scope) .build__meta {
  grid-column: 1 / span 4;
  grid-row: 1;
  margin: 0;
  font-size: var(--text-meta);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-quiet);
}

.build:not(.build--scope) .build__title {
  grid-column: 1 / span 8;
  grid-row: 2;
  margin: 0;
  font-size: clamp(2rem, 1rem + 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  font-weight: 500;
  text-transform: uppercase;
  max-width: 14ch;
}

.build:not(.build--scope) .build__lede {
  grid-column: 9 / span 4;
  grid-row: 2;
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-snug);
  color: var(--color-fg-soft);
  max-width: 28ch;
  justify-self: end;
  padding-bottom: 0.2em;
}

.build:not(.build--scope) .build__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  border-top: 1px solid var(--color-hairline);
}

.build:not(.build--scope) .build__pillar {
  margin: 0;
  padding: var(--space-xl) var(--space-l) var(--space-l) 0;
  border-right: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 0;
}

.build:not(.build--scope) .build__pillar:last-child {
  border-right: none;
  padding-right: 0;
}

.build:not(.build--scope) .build__pillar:first-child {
  padding-left: 0;
}

.build:not(.build--scope) .build__index {
  font-size: var(--text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-stone);
  font-variant-numeric: tabular-nums;
}

.build:not(.build--scope) .build__name {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.65rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-fg);
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .statement__inner {
    min-height: clamp(22rem, 52vh, 32rem);
  }

  .statement__primary {
    grid-column: 1 / span 10;
    max-width: 12ch;
  }

  .statement__echo {
    grid-column: 1 / span 10;
    justify-self: start;
    text-align: left;
    max-width: 15ch;
  }

  .statement__aside {
    grid-column: 1 / span 8;
    justify-self: start;
    text-align: left;
    margin-top: var(--space-3xl);
    max-width: 30ch;
  }

  .idea__meta {
    grid-column: 1 / -1;
  }

  .idea__stanza {
    grid-column: 1 / span 9;
  }

  .idea__aside {
    grid-column: 1 / span 8;
    max-width: 36ch;
  }

  .build:not(.build--scope) .build__title {
    grid-column: 1 / span 10;
    grid-row: 2;
  }

  .build:not(.build--scope) .build__lede {
    grid-column: 1 / span 8;
    grid-row: 3;
    justify-self: start;
  }

  .build:not(.build--scope) .build__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build:not(.build--scope) .build__pillar:nth-child(2) {
    border-right: none;
  }

  .build:not(.build--scope) .build__pillar:nth-child(1),
  .build:not(.build--scope) .build__pillar:nth-child(2) {
    border-bottom: 1px solid var(--color-hairline);
  }

  .build:not(.build--scope) .build__pillar:nth-child(odd) {
    padding-right: var(--space-l);
  }

  .build:not(.build--scope) .build__pillar:nth-child(even) {
    padding-left: var(--space-l);
  }
}

@media (max-width: 719px) {
  section.statement {
    padding-block: clamp(4rem, 14vw, 5.75rem) clamp(3.75rem, 12vw, 5rem);
  }

  .statement__inner {
    row-gap: var(--space-m);
    min-height: 0;
    align-content: start;
  }

  .statement__primary {
    grid-column: 1 / -1;
    font-size: clamp(2rem, 9vw, 2.85rem);
    max-width: 11ch;
  }

  .statement__echo {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    padding-left: 0;
    padding-block: var(--space-l);
    font-size: clamp(1.35rem, 6.2vw, 1.85rem);
    max-width: 14ch;
  }

  .statement__aside {
    grid-column: 1 / -1;
    margin-top: var(--space-2xl);
    max-width: 28ch;
    padding-left: 0;
    justify-self: start;
    text-align: left;
  }

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

  .idea__inner {
    row-gap: var(--space-2xl);
  }

  .idea__stanza {
    grid-column: 1 / -1;
    gap: var(--space-xl);
  }

  .idea__stanza p {
    max-width: 18ch;
    font-size: clamp(1.2rem, 5.2vw, 1.55rem);
  }

  .idea__stanza p.idea__turn {
    margin-top: var(--space-l);
    max-width: 20ch;
  }

  .idea__aside {
    grid-column: 1 / -1;
    max-width: 28ch;
    padding-top: var(--space-m);
  }

  .build:not(.build--scope) {
    padding-block: var(--section-y) var(--section-y-loose);
  }

  .build:not(.build--scope) .build__meta,
  .build:not(.build--scope) .build__lede {
    grid-column: 1 / -1;
  }

  .build:not(.build--scope) .build__title {
    grid-column: 1 / -1;
    font-size: clamp(2rem, 10vw, 3.25rem);
    max-width: 11ch;
  }

  .build:not(.build--scope) .build__lede {
    max-width: 28ch;
    font-size: var(--text-body);
  }

  .build:not(.build--scope) .build__head {
    margin-bottom: var(--space-3xl);
    row-gap: var(--space-l);
  }

  .build:not(.build--scope) .build__pillars {
    grid-template-columns: 1fr;
  }

  .build:not(.build--scope) .build__pillar {
    border-right: none;
    border-bottom: 1px solid var(--color-hairline);
    min-height: 0;
    padding: var(--space-l) 0;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-l);
  }

  .build:not(.build--scope) .build__pillar:nth-child(odd),
  .build:not(.build--scope) .build__pillar:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--color-hairline);
  }

  .build:not(.build--scope) .build__pillar:last-child {
    border-bottom: none;
  }
}

/* --- Hungarian optical measures (avoid forced ch breaks) --- */
html[lang="hu"] .build:not(.build--scope) .build__title {
  max-width: min(100%, 18ch);
}

html[lang="hu"] .statement__primary {
  max-width: min(100%, 14ch);
}

html[lang="hu"] .statement__echo {
  max-width: min(100%, 18ch);
}

html[lang="hu"] .statement__aside {
  max-width: min(100%, 32ch);
}

@media (max-width: 719px) {
  html[lang="hu"] .build:not(.build--scope) .build__title {
    max-width: min(100%, 16ch);
  }

  html[lang="hu"] .statement__primary {
    max-width: min(100%, 12ch);
  }

  html[lang="hu"] .statement__echo {
    max-width: min(100%, 12ch);
  }
}