/* Shared company cards: public website and the editor preview. */
.companies-section {
   max-width: 1200px;
   margin: 0 auto;
   padding: 80px 24px;
   scroll-margin-top: 110px;
}

.companies-eyebrow {
   color: #81baff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .17em;
   text-transform: uppercase;
   margin-bottom: 16px;
}

.companies-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 30px;
}

.companies-heading h2 {
   margin-bottom: 12px;
}

.companies-intro {
   max-width: 620px;
   color: #abbad0;
   font-size: 16px;
}

.companies-controls {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
}

.companies-arrow {
   width: 46px;
   height: 46px;
   border: 1px solid #34445c;
   border-radius: 50%;
   color: white;
   background: transparent;
   font-size: 22px;
   cursor: pointer;
}

.companies-arrow:hover {
   background: #1c3457;
}

.companies-arrow:disabled {
   opacity: .3;
   cursor: default;
}

.companies-track {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 40px) / 3);
   gap: 20px;
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scroll-snap-type: x mandatory;
   scrollbar-width: thin;
   scrollbar-color: #446389 transparent;
   padding: 2px 2px 18px;
}

.companies-track.is-grid {
   grid-auto-flow: row;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   overflow: visible;
}

.company-card {
   background: #fff;
   color: #172b46;
   border-radius: 16px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   min-width: 0;
   scroll-snap-align: start;
   border: 1px solid #dfe7f0;
   box-sizing: border-box;
}

.company-image {
   height: 172px;
   flex: 0 0 172px;
   overflow: hidden;
   background: #f1f5f9;
   border-bottom: 1px solid #e3eaf1;
   position: relative;
   display: grid;
   place-items: center;
}

/* The legacy mobile stylesheet forces img height:auto!important. Keep both
   portrait photos and logos inside this fixed frame, clear of the card text. */
.company-image img {
   display: block;
   box-sizing: border-box;
   width: 100%;
   height: 100% !important;
   max-height: 100%;
   min-height: 0;
   object-fit: contain;
   padding: 24px;
   position: absolute;
   inset: 0;
}

.company-image img.is-cover {
   object-fit: cover;
   padding: 0;
}

.company-monogram {
   color: #476a99;
   font: 700 36px 'Inter', sans-serif;
   letter-spacing: -.03em;
}

.company-body {
   padding: 24px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.company-card h3 {
   font: 700 21px/1.3 'Inter', sans-serif;
   color: #172b46;
   margin: 0 0 12px;
   overflow-wrap: anywhere;
}

.company-card p {
   font: 400 14px/1.7 'Inter', sans-serif;
   color: #596b80;
   margin: 0 0 24px;
   overflow-wrap: anywhere;
   white-space: pre-line;
}

.company-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid #e4eaf1;
   color: #235a9f;
   text-decoration: none;
   font: 600 13px/1.5 'Inter', sans-serif;
}

.company-link span:last-child {
   font-size: 20px;
}

.company-link:hover {
   color: #0a2d5c;
}

.companies-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-top: 22px;
   color: #9aaec8;
   font-size: 13px;
}

.companies-all {
   color: #fff;
   background: #162d4c;
   border: 1px solid #345076;
   border-radius: 8px;
   padding: 12px 18px;
   cursor: pointer;
   font: 600 13px 'Inter', sans-serif;
}

.companies-empty {
   border: 1px dashed #345076;
   border-radius: 16px;
   padding: 36px;
   color: #b1c2d8;
}

.companies-empty a {
   color: #a8d0ff;
}

.companies-section [hidden] {
   display: none !important;
}

.company-card a:focus-visible,
.companies-section button:focus-visible,
.companies-track:focus-visible {
   outline: 3px solid #61acff;
   outline-offset: 3px;
}

@media(max-width: 850px) {
   .companies-track {
      grid-auto-columns: calc((100% - 20px) / 2);
   }

   .companies-track.is-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media(max-width: 560px) {
   .companies-section {
      padding: 56px 20px;
   }

   .companies-heading {
      align-items: center;
      gap: 12px;
   }

   .companies-heading h2 {
      font-size: 29px;
   }

   .companies-controls {
      align-self: flex-end;
   }

   .companies-arrow {
      width: 36px;
      height: 36px;
   }

   .companies-track {
      grid-auto-columns: 88%;
      gap: 14px;
   }

   .companies-track.is-grid {
      grid-template-columns: minmax(0, 1fr);
   }

   .companies-bottom {
      align-items: flex-start;
      flex-direction: column;
   }

   .company-body {
      padding: 21px;
   }
}

@media(prefers-reduced-motion: reduce) {
   .companies-track {
      scroll-behavior: auto;
   }
}