/* =========================================================================
 * Explore Integrations — block 2, the Integration Directory.
 *
 * A dark catalogue: a graphite background with a barely visible grid and a
 * teal glow at the top, a large search field, the main filters as big chip
 * toggles, the additional ones in an “All filters” panel that opens, the row
 * of selected filters, the card grid (4 / 3 / 2 / 1–2 columns) and “Load
 * more”. The tokens are those of the service blocks (page.css):
 * --lmx-ms-font / --lmx-ms-display, accent #52C7C6, side padding
 * --lmx-section-padding-x. The section is marked data-tall, so --ms-scale is
 * always 1 here and sizes are in px and clamp().
 *
 * Animation only on an event: the card lifting on hover / focus, new cards
 * appearing (.is-new is removed by directory.js on the next frame) and chip
 * transitions. No permanent animations and no requestAnimationFrame loops.
 * ====================================================================== */

.lmx-int-inner{position:relative;width:100%;min-height:100vh;background:#050708 !important;color:#fff;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;--int-accent:#52C7C6;--int-accent-hi:#83DAD9;--int-on-accent:#04211F;--int-line:rgba(255,255,255,.10);--int-line-hi:rgba(255,255,255,.18);--int-surface:rgba(255,255,255,.035);--int-surface-hi:rgba(255,255,255,.065);--int-muted:rgba(255,255,255,.58);--int-text:rgba(255,255,255,.86)}
.lmx-int-inner *{box-sizing:border-box;min-width:0}

/* --- background: the glow at the top and the technical grid --------------- */
.lmx-int-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 34% at 50% 0%,rgba(82,199,198,.14),transparent 70%),radial-gradient(40% 30% at 85% 60%,rgba(82,199,198,.05),transparent 70%)}
.lmx-int-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 55% at 50% 22%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 55% at 50% 22%,#000 20%,transparent 100%)}
.lmx-int-bg::after{content:'';position:absolute;left:50%;top:0;width:min(720px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(82,199,198,.55),transparent)}

.lmx-int-wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px)}

/* --- catalogue header ------------------------------------------------------ */
.lmx-int-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 32px;margin-bottom:28px}
.lmx-int-eyebrow{grid-column:1;margin:0 0 12px !important;font-family:var(--lmx-ms-font) !important;font-weight:600;font-size:13px !important;letter-spacing:.34em;text-transform:uppercase;color:var(--int-accent) !important;line-height:1.4 !important}
.lmx-int-title{grid-column:1;margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:300 !important;font-size:clamp(36px,4.6vw,64px) !important;line-height:1.05 !important;letter-spacing:-.02em;color:#fff !important;text-wrap:balance}
.lmx-int-count{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0 0 6px !important;padding:8px 14px;border:1px solid var(--int-line);border-radius:999px;background:var(--int-surface);font-family:var(--lmx-ms-font) !important;font-size:14px !important;letter-spacing:.04em;color:var(--int-text) !important;white-space:nowrap}

/* --- form: search ------------------------------------------------------------ */
.lmx-int-form{position:relative;display:block;margin:0}
.lmx-int-search{position:relative;width:100%;max-width:760px;min-width:0}
/* The theme (auxin-base) gives input[type=search] content-box and its own width — here the field always fills the column. */
.lmx-int-inner .lmx-int-search__input{box-sizing:border-box !important;width:100% !important;min-width:0 !important;max-width:100% !important}
.lmx-int-search__icon{position:absolute;left:20px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--int-accent);pointer-events:none}
.lmx-int-search__input{display:block;width:100%;height:60px;margin:0;padding:0 56px 0 56px;border:1px solid var(--int-line-hi);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;font-family:var(--lmx-ms-font);font-size:17px;line-height:1.2;letter-spacing:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.lmx-int-search__input::placeholder{color:var(--int-muted);opacity:1}
.lmx-int-search__input::-webkit-search-cancel-button,.lmx-int-search__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.lmx-int-search__input:hover{border-color:rgba(255,255,255,.28)}
.lmx-int-search__input:focus{outline:none;border-color:var(--int-accent);background:rgba(82,199,198,.06);box-shadow:0 0 0 3px rgba(82,199,198,.18),0 0 28px rgba(82,199,198,.16)}
.lmx-int-search__clear{position:absolute;right:10px;top:50%;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--int-muted);display:grid;place-items:center;cursor:pointer;transition:color .2s ease,background .2s ease}
.lmx-int-search__clear svg{width:16px;height:16px}
.lmx-int-search__clear:hover{color:#fff;background:rgba(255,255,255,.08)}
.lmx-int-search__clear[hidden]{display:none}

/* --- chips (the main and the additional filters) ------------------------------ */
.lmx-int-group{margin:22px 0 0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
.lmx-int-group__legend{width:100%;margin:0 0 12px;padding:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--int-muted)}
.lmx-int-chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--int-line);border-radius:999px;background:var(--int-surface);color:var(--int-text);font-family:var(--lmx-ms-font);font-size:14px;line-height:1;letter-spacing:.01em;cursor:pointer;user-select:none;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.lmx-int-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.lmx-int-chip__text{pointer-events:none}
.lmx-int-chip__n{pointer-events:none;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;color:var(--int-muted);font-variant-numeric:tabular-nums}
.lmx-int-chip:hover{border-color:var(--int-line-hi);background:var(--int-surface-hi);color:#fff}
.lmx-int-chip.is-on,.lmx-int-chip:has(input:checked){border-color:rgba(82,199,198,.75);background:rgba(82,199,198,.14);color:#fff;box-shadow:0 0 18px rgba(82,199,198,.16)}
.lmx-int-chip.is-on .lmx-int-chip__n,.lmx-int-chip:has(input:checked) .lmx-int-chip__n{background:rgba(82,199,198,.22);color:#c7f2f1}
.lmx-int-chip.is-focus,.lmx-int-chip:has(input:focus-visible){outline:2px solid var(--int-accent);outline-offset:3px}

.lmx-int-group--main{gap:12px}
/* The height and the padding are aligned with “All filters” (44px, 18px): that
   way the whole row — the filters and both commands — sits on one line on
   desktop from 1440px up and reads as one group rather than two. */
.lmx-int-chip--main{min-height:44px;padding:0 18px;border-color:rgba(82,199,198,.3);background:linear-gradient(180deg,rgba(82,199,198,.07),rgba(82,199,198,.02));font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e9f7f6}
.lmx-int-chip--main .lmx-int-chip__n{font-size:12px}
.lmx-int-chip--main:hover{border-color:rgba(82,199,198,.6);background:rgba(82,199,198,.10)}
.lmx-int-chip--main.is-on,.lmx-int-chip--main:has(input:checked){background:var(--int-accent);border-color:var(--int-accent);color:var(--int-on-accent);box-shadow:0 0 0 1px rgba(82,199,198,.35),0 8px 28px rgba(82,199,198,.25)}
.lmx-int-chip--main.is-on .lmx-int-chip__n,.lmx-int-chip--main:has(input:checked) .lmx-int-chip__n{background:rgba(4,33,31,.16);color:var(--int-on-accent)}

/* --- controls: All filters / Clear all / Apply (without JS) ------------------
   One row: the chips of the main filters, “All filters” and “Clear all”.
   display:contents on the groups makes the toggles direct children of the row
   so they wrap one by one instead of in blocks; the height is the same for all
   of them (44px). */
.lmx-int-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.lmx-int-filterbar .lmx-int-group--main{display:contents}
.lmx-int-filterbar .lmx-int-tools{display:contents}
/* The space between rows comes from the row gap. The old margin-bottom on a
   chip (left over from the layout where chips lived in their own group) made
   the row 12px taller than the buttons themselves, and “All filters” ended up
   6px below the chips. */
.lmx-int-filterbar .lmx-int-chip--main{margin-bottom:0}
/* Below 1440px the column is narrower while the set needs 1046px: the padding
   and the gap are tightened so that the five categories and “All filters” stay
   in one row down to 1280px (the font size and the 44px height do not change).
   Narrower than that, the row wraps. */
@media (max-width:1440px){
.lmx-int-filterbar{gap:10px}
.lmx-int-filterbar .lmx-int-chip--main{padding:0 13px}
.lmx-int-filterbar .lmx-int-more-btn{padding:0 13px}
}
/* From 1280px the row has to hold all seven elements — including “Clear all”,
   which appears on the very first selection. The full set needs 1070px while
   the column is 1000px: the rest is won back by tightening the padding, the
   gap, the tracking and the counter inside a chip. The font size (12px) and
   the 44px height do not change — readability is the same. */
@media (max-width:1320px){
.lmx-int-filterbar{gap:8px}
.lmx-int-filterbar .lmx-int-chip--main,
.lmx-int-filterbar .lmx-int-more-btn{padding:0 10px;letter-spacing:.11em}
.lmx-int-filterbar .lmx-int-chip--main .lmx-int-chip__n{padding:2px 5px}
}
.lmx-int-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.lmx-int-more-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 16px;border:1px solid var(--int-line-hi);border-radius:999px;background:transparent;color:#fff;font-family:var(--lmx-ms-font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.lmx-int-more-btn svg{width:18px;height:18px;flex:0 0 auto}
.lmx-int-more-btn__chev{transition:transform .25s ease}
.lmx-int-more-btn[aria-expanded="true"] .lmx-int-more-btn__chev{transform:rotate(180deg)}
.lmx-int-more-btn__n{color:var(--int-accent);font-variant-numeric:tabular-nums}
.lmx-int-more-btn:hover{border-color:var(--int-accent);background:rgba(82,199,198,.08)}
.lmx-int-clear{display:inline-flex;align-items:center;min-height:44px;font-family:var(--lmx-ms-font);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--int-accent) !important;text-decoration:none !important;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
/* display:inline-flex overrides the hidden attribute — only with this rule
   does “Clear all” stay hidden in the filter row while there is nothing to
   clear. */
.lmx-int-clear[hidden]{display:none}
.lmx-int-clear:hover{color:var(--int-accent-hi) !important;border-bottom-color:currentColor}
.lmx-int-clear:focus-visible{outline:2px solid var(--int-accent);outline-offset:4px}
.lmx-int-apply{margin-left:auto}
.lmx-int-js .lmx-int-apply{display:none}

/* --- the “All filters” panel -------------------------------------------------- */
.lmx-int-more{margin-top:16px;padding:20px 22px 22px;border:1px solid var(--int-line);border-radius:16px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.lmx-int-more[hidden]{display:none}
.lmx-int-more .lmx-int-group{margin-top:0}

/* --- selected filters --------------------------------------------------------- */

/* --- card grid ---------------------------------------------------------------- */
.lmx-int-results{position:relative;margin-top:34px}
.lmx-int-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;transition:opacity .2s ease}
.lmx-int-grid[hidden]{display:none}
.lmx-int-inner.is-loading .lmx-int-grid{opacity:.55}
.lmx-int-item{min-width:0;opacity:1;transform:none;transition:opacity .38s ease,transform .38s ease}
.lmx-int-item.is-new{opacity:0;transform:translateY(12px)}

.lmx-int-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;height:100%;min-height:108px;padding:16px 16px 16px 18px;border:1px solid var(--int-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));color:#fff !important;text-decoration:none !important;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
.lmx-int-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 0% 0%,rgba(82,199,198,.10),transparent 55%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.lmx-int-card:hover,.lmx-int-card:focus-visible{transform:translateY(-4px);border-color:rgba(82,199,198,.65);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(82,199,198,.35),0 18px 44px rgba(0,0,0,.5),0 0 30px rgba(82,199,198,.16)}
.lmx-int-card:hover::before,.lmx-int-card:focus-visible::before{opacity:1}
.lmx-int-card:focus{outline:none}
.lmx-int-card:focus-visible{outline:2px solid var(--int-accent);outline-offset:3px}

.lmx-int-card__logo{position:relative;display:grid;place-items:center;width:68px;height:68px;padding:9px;border-radius:14px;background:#f4f7f9;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.lmx-int-card__img{display:block;width:auto !important;height:auto !important;max-width:100% !important;max-height:100%;object-fit:contain}
.lmx-int-logo--none{background:rgba(255,255,255,.04);border-color:rgba(82,199,198,.28);color:rgba(131,218,217,.7)}
.lmx-int-logo--none svg{width:32px;height:32px}
.lmx-int-card__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.lmx-int-card__name{font-family:var(--lmx-ms-font);font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0;color:#fff;overflow-wrap:anywhere}
.lmx-int-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.lmx-int-tag{display:inline-block;max-width:100%;padding:4px 9px;border-radius:999px;background:rgba(82,199,198,.10);border:1px solid rgba(82,199,198,.22);color:#9fe3e2;font-family:var(--lmx-ms-font);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lmx-int-card__go{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--int-line-hi);border-radius:50%;color:var(--int-accent);transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.lmx-int-card__go svg{width:18px;height:18px}
.lmx-int-card:hover .lmx-int-card__go,.lmx-int-card:focus-visible .lmx-int-card__go{background:var(--int-accent);border-color:var(--int-accent);color:var(--int-on-accent);transform:translateX(3px)}

/* --- empty result ------------------------------------------------------------- */
.lmx-int-empty{display:flex;flex-direction:column;align-items:center;gap:18px;padding:56px 24px;border:1px dashed rgba(82,199,198,.35);border-radius:18px;background:rgba(82,199,198,.04);text-align:center}
.lmx-int-empty[hidden]{display:none}
.lmx-int-empty__icon{width:56px;height:56px;color:var(--int-accent);opacity:.85}
.lmx-int-empty__text{max-width:520px;margin:0 !important;font-family:var(--lmx-ms-font) !important;font-size:17px !important;line-height:1.55 !important;color:var(--int-text) !important}

/* --- Load more ------------------------------------------------------------------- */
.lmx-int-loadmore{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.lmx-int-loadmore[hidden]{display:none}
.lmx-int-loadmore__btn{min-width:220px;justify-content:center}
.lmx-int-loadmore__progress{margin:0 !important;font-family:var(--lmx-ms-font) !important;font-size:13px !important;letter-spacing:.08em;color:var(--int-muted) !important;font-variant-numeric:tabular-nums}
.lmx-int-inner.is-loading .lmx-int-loadmore__btn{pointer-events:none;opacity:.6}

/* --- layout by width ---------------------------------------------------------- */
@media (max-width:1439px){
.lmx-int-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
.lmx-int-wrap{padding-top:56px}
.lmx-int-head{grid-template-columns:minmax(0,1fr);align-items:start}
.lmx-int-count{grid-column:1;grid-row:auto;justify-self:start;margin:14px 0 0 !important}
.lmx-int-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lmx-int-search__input{height:56px;font-size:16px}
.lmx-int-chip--main{min-height:48px;padding:0 18px;font-size:12px;letter-spacing:.14em}
.lmx-int-more{padding:16px 16px 18px}
.lmx-int-apply{margin-left:0}
}
@media (max-width:640px){
.lmx-int-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lmx-int-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo go" "body body";gap:12px;padding:14px;min-height:0}
.lmx-int-card__logo{grid-area:logo;width:56px;height:56px;padding:7px;border-radius:12px}
.lmx-int-card__body{grid-area:body}
.lmx-int-card__go{grid-area:go;width:32px;height:32px}
.lmx-int-card__name{font-size:15px}
.lmx-int-title{font-size:34px !important}
.lmx-int-more-btn{width:100%;justify-content:center}
.lmx-int-tools{gap:10px}
}

/* --- less motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-int-inner *,.lmx-int-inner *::before{transition:none !important}
.lmx-int-item.is-new{opacity:1;transform:none}
.lmx-int-card:hover,.lmx-int-card:focus-visible{transform:none}
}