/* stylelint-disable property-allowed-list, declaration-property-value-disallowed-list -- visual section composition */
@layer components.features {
  @font-face {
    font-family: "Company Abhaya Libre";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/company-abhaya-libre-latin-400.woff2") format("woff2");
  }

  @scope ([data-section="company"]) {
    :scope {
      /* Figma 481:6136 starts 54px below 485:6182; the bank's final
         line ends 114px before the section background ends. */
      padding-block: 3.375rem 7.125rem;
      background: var(--color-surface-subtle);
      color: var(--color-ink-strong);

      --color-border: #d9d9d9;
    }

    .heading-en {
      margin: 0;
      font-family: "Company Abhaya Libre", var(--font-label-latin);
      font-size: 0.75rem;
      font-weight: 400;
      line-height: calc(14 / 12);
      letter-spacing: 0.1em;
      text-align: center;
      text-indent: 0.1em;
    }

    .heading {
      margin: 0 0 1.3125rem;
      font-family: var(--font-display-ja);
      font-size: 2rem;
      font-weight: 500;
      line-height: calc(46 / 32);
      letter-spacing: 0.2em;
      text-align: center;

      /* Figma omits the final tracking space; CSS centers it as part of
         the line. Compensate so the visible heading shares its center. */
      text-indent: 0.2em;
    }

    .facts {
      display: flex;
      flex-direction: column;

      /* SP dividers 481:6163..6180 run from x30 to x340 at 375px. */
      width: min(calc(100% - 4.0625rem), var(--layout-content-max));
      margin: 0 auto;
      margin-inline-start: max(1.875rem, calc((100% - var(--layout-content-max)) / 2));
      font-family: var(--font-display-ja);
      font-size: 0.75rem;
      letter-spacing: 0.1em;
    }

    .fact {
      display: grid;
      grid-template-columns: 4.3125rem minmax(0, 1fr);
      column-gap: 0.5625rem;
      align-items: stretch;
      border-bottom: 1px solid var(--color-border);
    }

    .fact:last-child {
      border-bottom: none;
    }

    .fact-label {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-ink);
      font-weight: 500;
      line-height: 1;
      padding-block: 0.5313rem;
      border-right: 1px solid var(--color-border);
    }

    .fact-value {
      margin: 0;
      color: var(--color-ink-soft);
      font-family: var(--font-body-ja);
      font-weight: 350;
      line-height: 1.5;
      padding-block: 0.5313rem;
    }

    .fact-value-list {
      display: flex;
      flex-direction: column;
    }

    .value-item {
      display: block;
    }

    .fact-link {
      color: inherit;
      text-decoration: none;
      text-underline-offset: 0.2em;
    }

    .fact-link:hover {
      text-decoration: underline;
    }

    .fact-link:focus-visible {
      outline: 2px solid var(--color-focus-ring);
      outline-offset: 2px;
    }

    .fact-link-icon {
      display: inline-block;
      margin-inline-start: 0.35em;
      vertical-align: middle;
      filter: brightness(0);
    }

    .fact-value-joined-sp .value-item:not(:last-child)::after {
      content: "、";
    }

    .fact-value-list.fact-value-space {
      display: block;
    }

    .fact-value-space .value-item {
      display: inline;
      white-space: nowrap;
    }

    .fact-value-list.fact-value-space .value-item:not(:last-child)::after {
      content: "\3000";
    }

    .fact-sp-break {
      display: inline;
    }

    .fact-full-space {
      display: inline-block;
      width: 1.1em;
    }

    .fact-pc-break {
      display: none;
    }

    @media (width < 1024px) {
      .fact {
        display: block;
        padding-block: 0.5625rem;
      }

      .fact:first-child {
        padding-top: 0.625rem;
      }

      .fact:last-child {
        padding-bottom: 0;
      }

      .fact[data-fact="関連企業"] {
        /* 897:41's three values end 15px before divider 481:6166. */
        padding-bottom: 0.9375rem;
      }

      .fact-label {
        display: block;
        padding: 0;
        border-right: none;
        line-height: calc(17 / 12);
        text-align: left;
      }

      .fact:nth-child(-n + 3) .fact-label {
        line-height: 1.5;
      }

      .fact-value {
        padding: 0;
        font-size: 0.875rem;
        font-weight: 350;
        line-height: calc(18 / 14);
        letter-spacing: 0.1em;
      }

      .fact[data-fact="関連企業"] .fact-value,
      .fact[data-fact="建設業許可"] .fact-value,
      .fact[data-fact="塗装工事業許可"] .fact-value {
        /* High-fidelity contexts 897:41, 897:43 and 1198:17 use zero
           tracking; the other SP values retain their 10% tracking. */
        letter-spacing: normal;
      }

      .fact-value-joined-sp {
        letter-spacing: 0.1em;
      }

      .fact-value-space .value-item {
        display: block;
        white-space: normal;
      }

      .fact-value-list.fact-value-space .value-item:not(:last-child)::after {
        content: none;
      }

      .fact-value-list.fact-value-pc-wrap {
        margin-inline-start: 0;
      }

      .fact-value-pc-wrap .value-item-hanging {
        /* 481:6176 hangs full-width brackets 10px to the left of x30.
           Unbracketed organization names keep the normal left edge. */
        margin-inline-start: -0.625rem;
      }

      .fact-value-pc-wrap .value-item:not(.value-item-hanging) {
        /* 481:6176 prefixes the unbracketed name with a full-width
           space: x20 + 14px, rather than the brackets' optical x30. */
        margin-inline-start: 0.25rem;
      }
    }

    @media (width >= 1024px) {
      :scope {
        /* 100:388 is y9679, after History ends at y9549. */
        padding-block: 8.125rem 8.6875rem;
        background: var(--color-surface);
      }

      .heading-en {
        margin-bottom: -0.25rem;
        font-size: 1.25rem;
        line-height: 1.2;
      }

      .heading {
        margin-bottom: 3.5rem;
        font-size: 3.5rem;
        line-height: calc(80 / 56);
      }

      .facts {
        width: min(calc(100% - (2 * var(--layout-gutter))), var(--layout-content-max));
        margin-inline: auto;
        font-size: 1.25rem;
      }

      .fact {
        /* fluid-tracks-ok: the label track is the divider's x position, which
           must stay constant down the whole table — the value track is the one
           that should absorb width. Deliberately not the P24 pattern. */
        grid-template-columns: 14.25rem minmax(0, 1fr);
        column-gap: 3.875rem;
        align-items: center;
        padding-block: 0;
      }

      .fact[data-fact="所在地"] .fact-value,
      .fact[data-fact="所属団体"] .fact-value {
        padding-block: 1.625rem;
      }

      .fact[data-fact="関連企業"] .fact-value {
        padding-block: 0.8438rem;
      }

      .fact[data-fact="営業種目"] .fact-value,
      .fact[data-fact="建設業許可"] .fact-value,
      .fact[data-fact="塗装工事業許可"] .fact-value {
        padding-block: 0.5938rem;
      }

      .fact[data-fact="得意先"] {
        min-height: 6rem;
      }

      .fact-label {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        line-height: calc(29 / 20);
        padding: 0 0.5rem 0 0;
        border-right: 1px solid var(--color-border);
      }

      .fact-value {
        max-width: none;
        line-height: 1.35;
        padding: 0.8125rem 0;
      }

      .fact-value-pc-wrap {
        padding-block: 0.8125rem;
      }

      .fact-value-list.fact-value-pc-wrap {
        /* 106:967 is 900px wide; its full-width brackets hang at x367. */
        max-width: calc(56.25rem + 0.1em);
        margin-inline-start: -0.8125rem;
      }

      .fact-value-list {
        display: block;
      }

      .value-item {
        display: inline;
      }

      .fact-value-list .value-item:not(:last-child)::after {
        content: "、";
      }

      .fact-value-space-pc .value-item:not(:last-child)::after {
        content: "\3000";
      }

      .fact-value-stacked-pc {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        padding-block: 0.8125rem;
      }

      .fact:last-child .fact-value {
        /* 106:971 ends 38px before vertical divider 185:234; the
           remaining 139px is section padding (177px below the value). */
        padding-block: 1rem 2.375rem;
      }

      .fact-value-stacked-pc .value-item {
        display: block;
      }

      .fact-value-stacked-pc .value-item:not(:last-child)::after {
        content: none;
      }

      .fact-sp-break {
        display: none;
      }

      .fact-pc-break {
        display: inline;
      }
    }
  }
}