/*
 * Disciplines.module.css → the "disciplines" view.
 *
 * Ported by scripts/port-css.mjs. Class names are prefixed to survive being
 * flattened out of CSS Modules; design tokens are rewritten to the custom
 * properties theme.json emits. Edit this file, not the original.
 */

.px-disciplines {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.px-disciplines__item {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  padding-block: var(--wp--preset--spacing--xl);
  border-bottom: 1px solid var(--line);
  align-items: center;
}

@media (min-width: 800px) {
  .px-disciplines__item {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 14rem);
    gap: var(--wp--preset--spacing--xl);
  }
}

.px-disciplines__index {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}

.px-disciplines__title {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-disciplines__item:hover .px-disciplines__title {
  color: var(--accent-color);
}

.px-disciplines__slash {
  color: var(--accent-color);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--md);
}

.px-disciplines__copy {
  display: grid;
  gap: var(--wp--preset--spacing--sm);
}

.px-disciplines__tagline {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  line-height: 1.75;
  color: var(--fg-muted);
  max-width: 52ch;
}

.px-disciplines__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.px-disciplines__capability {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  padding: 0.2rem 0.5rem;
}

.px-disciplines__thumb {
  width: 100%;
}

@media (max-width: 799px) {
  .px-disciplines__thumb {
    max-width: 20rem;
  }
}

/*
 * Japanese titles in a narrow column.
 *
 * The port assumed English, which breaks on spaces and so always fits a
 * min-width:0 grid column. A Japanese title is one unbroken run and overflows
 * into the column beside it instead, which is what put the tagline behind the
 * headline. auto-phrase breaks it at a phrase boundary where there is one;
 * anywhere is the floor under that for a title with no boundary at all.
 */
.px-disciplines__title {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
}