/*
 * JKC — Integrations (/integrations/ and /integrations/{slug}/).
 *
 * Enqueued on its own from mu-plugins/jkc-integrations.php, after `main`, and
 * only on the two templates that use it. It is NOT imported by
 * assets/scss/main.scss: that file is off-limits while other work is in flight,
 * and there is no sass binary on this volume to recompile main.css with anyway.
 *
 * So this file is hand-written plain CSS, and assets/scss/blocks/_integrations.scss
 * holds the same rules, written flat (no nesting, no variables of its own) so
 * the two files can be kept byte-identical apart from this header. That partial
 * is the source to @use from main.scss the day main.scss is editable again; the
 * enqueue in the mu-plugin can go at the same time.
 *
 * Everything here leans on tokens already in main.css (--jkc-blue, --jkc-border,
 * --jkc-radius-xl, --jkc-section-py and friends) and on classes it already
 * defines (.jkc-section, .container, .jkc-eyebrow, .jkc-prose, .jkc-page-hero,
 * .jkc-faq, .jkc-cta-banner). No colour is written as a literal that a token
 * already covers, so a change in the design system reaches these pages too.
 */

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.jkc-int-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--jkc-border);
  border-radius: 999px;
  background-color: #fff;
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--jkc-blue);
}

.jkc-int-hero__eyebrow-icon {
  display: inline-flex;
  font-size: 15px;
}

/* The hub H1 is a full sentence, so it needs a wider measure than a name. */
.jkc-int-hero--hub .jkc-page-hero__title {
  max-width: 18ch;
}

@media (min-width: 768px) {
  .jkc-int-hero--hub .jkc-page-hero__title {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
 * Reading bands
 * ------------------------------------------------------------------------- */

.jkc-int-prose__inner {
  /* 896px, the same measure a news article reads at (.jkc-article__column).
     Copied as a value rather than by borrowing that class: this is a section
     wrapper, not an article body, and .jkc-article__column carries band
     spacing of its own. */
  max-width: 896px;
}

.jkc-int-prose__head h2 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
}

@media (min-width: 992px) {
  .jkc-int-prose__head h2 {
    font-size: 40px;
    line-height: 48px;
  }
}

.jkc-int-prose__body {
  margin-top: 20px;
}

.jkc-int-prose__body p {
  margin: 0 0 16px;
}

.jkc-int-prose__body p:last-child {
  margin-bottom: 0;
}

/* The tool's own sentence on a shared band: the specific case before the
   general rule, so it is set apart without becoming a pull quote. */
.jkc-int-prose__leadin {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--jkc-blue);
  font-weight: 500;
  color: var(--jkc-bodytext);
}

.jkc-int-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.jkc-int-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

.jkc-int-list__mark {
  display: inline-flex;
  margin-top: 3px;
  font-size: 18px;
  color: var(--jkc-blue);
}

.jkc-int-steps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.jkc-int-steps__item {
  padding: 24px 0;
  border-top: 1px solid var(--jkc-border);
}

.jkc-int-steps__item:last-child {
  border-bottom: 1px solid var(--jkc-border);
}

.jkc-int-steps__title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

.jkc-int-steps__item p {
  margin: 0;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

.jkc-int-prose__link {
  margin: 28px 0 0;
}

/* ---------------------------------------------------------------------------
 * Card bands
 * ------------------------------------------------------------------------- */

.jkc-int-cards__intro {
  max-width: 720px;
  margin-bottom: 40px;
}

.jkc-int-cards__intro h2 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
}

@media (min-width: 992px) {
  .jkc-int-cards__intro h2 {
    font-size: 40px;
    line-height: 48px;
  }
}

.jkc-int-cards__intro p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

.jkc-int-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .jkc-int-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .jkc-int-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jkc-int-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.jkc-int-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--jkc-border);
  border-radius: var(--jkc-radius-xl);
  background-color: #fff;
}

/* On a subtle band the cards would disappear into it, so they invert: the
   same trick .jkc-section--subtle already plays on the person card. */
.jkc-section--subtle .jkc-int-card {
  background-color: #fff;
}

.jkc-int-card__icon {
  display: inline-flex;
  font-size: 24px;
  color: var(--jkc-blue);
}

.jkc-int-card__number {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--jkc-blue);
}

.jkc-int-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

.jkc-int-card__body {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--jkc-text-secondary);
}

.jkc-int-card__instead {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--jkc-border);
}

.jkc-int-card__instead p {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--jkc-text-secondary);
}

.jkc-int-card__instead-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jkc-green) !important;
}

/* ---------------------------------------------------------------------------
 * "What can be connected"
 * ------------------------------------------------------------------------- */

.jkc-int-rows__list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.jkc-int-rows__row {
  padding: 20px 0;
  border-top: 1px solid var(--jkc-border);
}

.jkc-int-rows__row:last-child {
  border-bottom: 1px solid var(--jkc-border);
}

.jkc-int-rows__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}

.jkc-int-rows__dir {
  flex: none;
  width: 28px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--jkc-blue);
  text-align: center;
}

.jkc-int-rows__name {
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

.jkc-int-rows__body {
  margin: 0 0 0 38px;
  font-size: 15px;
  line-height: 24px;
  color: var(--jkc-text-secondary);
}

.jkc-int-rows__outro {
  margin-top: 24px;
}

.jkc-int-rows__outro p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Related
 * ------------------------------------------------------------------------- */

.jkc-int-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .jkc-int-related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .jkc-int-related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jkc-int-related__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--jkc-border);
  border-radius: var(--jkc-radius-lg);
  background-color: #fff;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.jkc-int-related__card:hover,
.jkc-int-related__card:focus-visible {
  border-color: var(--jkc-blue);
  box-shadow: var(--jkc-shadow-md);
}

.jkc-int-related__icon {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  font-size: 20px;
  color: var(--jkc-blue);
}

.jkc-int-related__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jkc-int-related__name {
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

.jkc-int-related__meta {
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jkc-text-tertiary);
}

.jkc-int-related__line {
  margin-top: 4px;
  font-size: 15px;
  line-height: 23px;
  color: var(--jkc-text-secondary);
}

.jkc-int-related__go {
  display: inline-flex;
  flex: none;
  margin: 4px 0 0 auto;
  font-size: 16px;
  color: var(--jkc-blue);
}

.jkc-int-related__all {
  margin: 32px 0 0;
}

/* ---------------------------------------------------------------------------
 * Hub
 * ------------------------------------------------------------------------- */

.jkc-int-hub__controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--jkc-border);
}

.jkc-int-hub__search-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--jkc-blue);
}

.jkc-int-hub__search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  padding: 12px 16px;
  border: 1px solid var(--jkc-border-strong);
  border-radius: var(--jkc-radius-lg);
  background-color: #fff;
  color: var(--jkc-text-tertiary);
}

.jkc-int-hub__search-field:focus-within {
  border-color: var(--jkc-blue);
}

.jkc-int-hub__search-field span {
  display: inline-flex;
  font-size: 17px;
}

.jkc-int-hub__search-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--jkc-bodytext);
}

.jkc-int-hub__search-field input:focus {
  outline: none;
}

.jkc-int-hub__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jkc-int-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--jkc-border-strong);
  border-radius: 999px;
  background-color: #fff;
  font-size: 14px;
  line-height: 20px;
  color: var(--jkc-text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.jkc-int-pill:hover {
  border-color: var(--jkc-blue);
  color: var(--jkc-blue);
}

.jkc-int-pill.is-active {
  border-color: var(--jkc-blue);
  background-color: var(--jkc-blue);
  color: var(--jkc-text-inverse);
}

.jkc-int-pill__count {
  font-size: 12px;
  line-height: 16px;
  opacity: 0.7;
}

.jkc-int-hub__group + .jkc-int-hub__group {
  margin-top: 56px;
}

.jkc-int-hub__group-head {
  max-width: 720px;
  margin-bottom: 20px;
}

.jkc-int-hub__group-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 26px;
  line-height: 34px;
}

.jkc-int-hub__group-icon {
  display: inline-flex;
  font-size: 22px;
  color: var(--jkc-blue);
}

.jkc-int-hub__group-head p {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

.jkc-int-hub__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .jkc-int-hub__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .jkc-int-hub__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jkc-int-hub__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--jkc-border);
  border-radius: var(--jkc-radius-lg);
  background-color: #fff;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.jkc-int-hub__card:hover,
.jkc-int-hub__card:focus-visible {
  border-color: var(--jkc-blue);
  box-shadow: var(--jkc-shadow-md);
}

.jkc-int-hub__card--flat {
  opacity: 0.7;
}

.jkc-int-hub__card-name {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

.jkc-int-hub__card-line {
  font-size: 15px;
  line-height: 23px;
  color: var(--jkc-text-secondary);
}

.jkc-int-hub__card-go {
  display: inline-flex;
  margin-top: 6px;
  font-size: 16px;
  color: var(--jkc-blue);
}

.jkc-int-hub__empty {
  margin: 32px 0 0;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

/* ---------------------------------------------------------------------------
 * The mark: a logo file if we have one, a monogram if we do not.
 *
 * Muted at rest and in colour on hover, which is the same rule and the same two
 * declarations the client logo strip already uses (_logo-row.scss). Thirty
 * vendor logos at full saturation would fight each other and the page.
 *
 * The monogram is JKC's own two colours for all thirty, on purpose: one flat
 * look means a strip that is half logos and half monograms still reads as a
 * designed row rather than as a row with holes in it.
 * ------------------------------------------------------------------------- */

.jkc-int-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jkc-int-mark__logo {
  display: block;
  flex: none;
  width: auto;
  height: auto;
  max-width: 108px;
  max-height: 30px;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.2s ease, filter 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Same guard the client strip needs: an image-optimisation plugin can wrap the
   <img> in a <picture> and move the class onto the wrapper, which would leave
   the inner image with no cap at all. */
.jkc-int-mark__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: inherit;
}

.jkc-int-mark__monogram {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--jkc-radius);
  background-color: var(--jkc-blue-subtle);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--jkc-blue);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jkc-int-mark__name {
  min-width: 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--jkc-bodytext);
}

/* ---------------------------------------------------------------------------
 * The strip.
 *
 * Same mechanics as .jkc-logo-row: a track holding the group twice, moved by
 * exactly -50% so the loop has no seam, with the keyframes as the no-JS
 * fallback and `.is-js` handing the motion to initLogoCarousel()'s rAF loop.
 * @keyframes jkc-logo-marquee is already defined in main.css; this reuses it
 * rather than declaring a second identical one.
 *
 * No `data-reveal` anywhere below the intro: the marks are painted visible by
 * the server and the motion starts from there, so a fast scroll, a screenshot
 * and a crawler all get the full row.
 * ------------------------------------------------------------------------- */

/* Its own band whatever it is dropped between: the same hairline the logo strip
   and the page header close themselves off with. */
.jkc-int-strip-band {
  border-top: 1px solid var(--jkc-border);
  border-bottom: 1px solid var(--jkc-border);
}

.jkc-int-strip__intro {
  max-width: 720px;
  margin: 0 auto 40px;
}

.jkc-int-strip__intro h2 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
}

@media (min-width: 992px) {
  .jkc-int-strip__intro h2 {
    font-size: 40px;
    line-height: 48px;
  }
}

.jkc-int-strip__intro p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 26px;
  color: var(--jkc-text-secondary);
}

.jkc-int-strip__viewport {
  /* Room for the hover lift and the focus ring, taken back out of the layout:
     the mask clips to the border box, so the room has to be padding. */
  padding-block: 10px;
  margin-block: -10px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.jkc-int-strip[data-dragging="true"] {
  user-select: none;
}

.jkc-int-strip[data-dragging="true"] .jkc-int-strip__viewport {
  cursor: grabbing;
}

.jkc-int-strip__track {
  display: flex;
  width: max-content;
  animation: jkc-logo-marquee var(--jkc-int-strip-duration, 90s) linear infinite;
}

/* initLogoCarousel() adds this once it takes the motion over. */
.jkc-int-strip__track.is-js {
  animation: none;
  will-change: transform;
}

.jkc-int-strip__group {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

.jkc-int-strip__item {
  display: flex;
}

.jkc-int-strip__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--jkc-border);
  border-radius: 999px;
  background-color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.jkc-int-strip__link:hover,
a.jkc-int-strip__link:focus-visible {
  border-color: var(--jkc-blue);
  box-shadow: var(--jkc-shadow-md);
  transform: translateY(-2px);
}

a.jkc-int-strip__link:focus-visible {
  outline: 2px solid var(--jkc-blue);
  outline-offset: 4px;
}

/* The colour comes back on the mark itself and not on the anchor, so a tool
   without a page (no link, see strip.php) lights up the same way on hover. */
.jkc-int-strip__item:hover .jkc-int-mark__logo,
.jkc-int-strip__link:focus-visible .jkc-int-mark__logo {
  opacity: 1;
  filter: none;
}

.jkc-int-strip__item:hover .jkc-int-mark__monogram,
.jkc-int-strip__link:focus-visible .jkc-int-mark__monogram {
  background-color: var(--jkc-blue);
  color: var(--jkc-text-inverse);
}

.jkc-int-strip__cta {
  margin-top: 40px;
  text-align: center;
}

.jkc-int-strip__note {
  max-width: 560px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--jkc-text-secondary);
}

@media (max-width: 767.98px) {
  .jkc-int-strip__group {
    gap: 12px;
    padding-inline: 6px;
  }

  .jkc-int-strip__link {
    padding: 10px 14px;
  }

  .jkc-int-mark__name {
    font-size: 15px;
    line-height: 22px;
  }
}

/* Desktop pause-on-hover in CSS, so it works before and without JS. */
@media (hover: hover) and (pointer: fine) {
  .jkc-int-strip__viewport:hover .jkc-int-strip__track {
    animation-play-state: paused;
  }
}

/* Nothing moves. The row still has to be reachable, so it becomes a
   horizontally scrollable band — the same answer _logo-row.scss gives. */
@media (prefers-reduced-motion: reduce) {
  .jkc-int-strip__track {
    animation: none;
  }

  .jkc-int-strip__viewport {
    overflow-x: auto;
    scrollbar-width: none;
    cursor: default;
  }

  .jkc-int-strip__viewport::-webkit-scrollbar {
    display: none;
  }

  a.jkc-int-strip__link:hover,
  a.jkc-int-strip__link:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * The mark inside the two card grids.
 * ------------------------------------------------------------------------- */

.jkc-int-hub__card-mark,
.jkc-int-related__mark {
  margin-bottom: 2px;
}

.jkc-int-hub__card-mark .jkc-int-mark__name {
  font-size: 18px;
  line-height: 26px;
}

.jkc-int-hub__card:hover .jkc-int-mark__logo,
.jkc-int-hub__card:focus-visible .jkc-int-mark__logo,
.jkc-int-related__card:hover .jkc-int-mark__logo,
.jkc-int-related__card:focus-visible .jkc-int-mark__logo {
  opacity: 1;
  filter: none;
}

.jkc-int-hub__card:hover .jkc-int-mark__monogram,
.jkc-int-related__card:hover .jkc-int-mark__monogram {
  background-color: var(--jkc-blue);
  color: var(--jkc-text-inverse);
}