/* Current company record fields only. Future fields can receive a later pass. */

.company {
  width: min(calc(100% - (var(--pad) * 2)), var(--max));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3.5rem);

  > .company__header {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
    color: var(--ink);
  }

  .company__icon {
    display: flex;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .cp-tools-image-or-initials__image,
  .cp-tools-image-or-initials__fallback {
    display: grid;
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 0.75rem;
    background: var(--header-bg);
    color: var(--header-text);
    font-family: var(--font-heading);
    font-size: var(--type-2xl);
    font-weight: 600;
    line-height: 1;
    object-fit: cover;
  }

  .company__copy {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-content: start;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    min-width: 0;
  }

  .company__title {
    > div,
    .field__item {
      font-family: var(--font-heading);
      font-size: var(--type-2xl);
      font-weight: 700;
      line-height: var(--leading-tight);
      text-wrap: balance;
    }
  }

  .company__description {
    max-width: 70ch;
    font-size: var(--type-md);
    line-height: var(--leading-body);

    .field__item > *:first-child { margin-top: 0; }
    .field__item > *:last-child { margin-bottom: 0; }
  }

  > .company__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(1rem, 3vw, 2rem);

    > .field {
      min-width: 0;
      margin: 0;
      color: var(--ink);
    }

    > .company__detail {
      min-width: 0;
      padding: clamp(1rem, 2vw, 1.5rem);
      border: 1px solid var(--line);
      border-radius: 0.75rem;
      background: var(--surface);
      color: var(--ink);
    }

    .company__detail--map .leaflet-container {
      width: 100% !important;
    }

    .company__detail--regions > div > :first-child,
    .company__detail--office-hours > div > :first-child {
      font-weight: 700;
    }

    .company__detail--office-hours {
      .office-hours {
        max-width: 100%;
        overflow-x: auto;
      }

      .office-hours__table {
        display: block;
        width: 100%;
        border-collapse: collapse;
      }

      .office-hours__table tbody {
        display: grid;
        gap: 0.25rem;
      }

      .office-hours__table + .office-hours__table,
      .office-hours + .office-hours {
        margin-top: 1.25rem;
      }

      .office-hours__table thead th {
        padding-block: 0.5rem;
        text-align: start;
        text-indent: 0;
        font-weight: 700;
      }

      .office-hours__item > td {
        padding-block: 0.25rem;
        vertical-align: top;
      }

      .office-hours__item {
        display: grid;
        grid-template-columns: max-content max-content minmax(0, 1fr);
        width: 100%;
        align-items: baseline;
      }

      .office-hours__item-label {
        width: 1%;
        padding-inline-end: 0.75rem;
        white-space: nowrap;
      }

      .office-hours__item-slots {
        width: 1%;
        white-space: nowrap;
      }

      .office-hours__item-comments {
        padding-inline-start: 0.75rem;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .office-hours__item:has(.office-hours__item-slots:empty) {
        grid-template-columns: max-content minmax(0, 1fr);

        .office-hours__item-slots {
          display: none;
        }

        .office-hours__item-comments {
          grid-column: 2;
          min-width: 0;
          padding-inline-start: 0;
        }
      }

      .office-hours__table_exception {
        margin-top: 1.25rem;
        border-top: 1px solid var(--line);
      }
    }

    > .field--name-uid,
    > .field--name-status,
    > .field--name-path {
      display: none;
    }
  }

  > .company__contact {
    margin-top: clamp(1rem, 3vw, 2rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface-alt);
    color: var(--ink);
  }

  .company__contact-title {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: var(--type-lg);
    line-height: var(--leading-heading);
  }

  .company__contact-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem clamp(1.5rem, 4vw, 3rem);
  }

  .company__contact-item {
    min-width: 0;

    p { margin-block: 0; }
  }

  .company__contact-label {
    margin-bottom: 0.25rem;
    font-weight: 700;
  }

  > .company__additional {
    margin-top: clamp(1rem, 3vw, 2rem);
  }

  &.company--unpublished {
    outline: 2px dashed var(--warn);
    outline-offset: 0.5rem;
  }

  @media (min-width: 720px) {
    padding-block: clamp(2rem, 5vw, 4rem);

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

      &:not(:has(.company__detail--office-hours)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }

  @media (max-width: 480px) {
    > .company__header {
      grid-template-columns: 1fr;
    }

    .company__icon,
    .company__copy {
      grid-column: 1;
      grid-row: auto;
    }

    > .company__details {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    > .company__header { animation: company-record-enter 420ms ease both; }
  }
}

body:has(.company) #block-cp-page-title {
  display: none;
}

@keyframes company-record-enter {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}