/* Partner lockup: LabelInn wordmark, a thin "x", then the partner program as plain text.
   Markup comes from scripts/seo/partials/zebra-partner.js (the one place to swap in an official badge).
   Colours follow the surrounding text (currentColor), so the lockup reads on light pages and on dark bands.
   Loaded by v3 pages (site-v3.css tokens) and by the older main.css pages; every token has a fallback. */

.li-partner {
    --lp-rule: rgba(16, 18, 20, .22);
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .6em;
    color: inherit;
    font-family: inherit;
    line-height: 1;
    vertical-align: middle;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .li-partner { --lp-rule: color-mix(in srgb, currentColor 24%, transparent); }
}
.li-partner-mark {
    flex: 0 0 auto;
    font-size: 1.3em;
    font-weight: 900;
    letter-spacing: -.055em;
    white-space: nowrap;
}
.li-partner-x {
    position: relative;
    flex: 0 0 auto;
    width: .78em;
    height: .78em;
    opacity: .55;
}
.li-partner-x::before,
.li-partner-x::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    content: "";
}
.li-partner-x::before { transform: rotate(45deg); }
.li-partner-x::after { transform: rotate(-45deg); }
.li-partner-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .32em;
    padding-left: .6em;
    border-left: 1px solid var(--lp-rule);
}
.li-partner-side strong {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: -.015em;
    white-space: nowrap;
}
.li-partner-side small {
    font-family: var(--li-mono, "SFMono-Regular", Consolas, "Liberation Mono", monospace);
    font-size: .6em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .72;
}
.li-partner-badge { display: block; max-width: 100%; height: auto; }

.li-partner--sm { font-size: 15px; }
.li-partner--lg { font-size: clamp(18px, 3.4vw, 30px); gap: .55em; }
/* Inside the hero panel the lockup scales with the panel, not the window, so it never touches the frame. */
@container (min-width: 1px) { .li-partner-hero-stage .li-partner--lg { font-size: clamp(13px, 4.5cqi, 30px); } }
.li-partner--lg .li-partner-mark { font-size: 1.45em; }

/* One line plus the small lockup, linking to the partner page. */
.li-partner-strip { max-width: 760px; margin: 22px 0 0; }
.li-partner-strip-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 14px 16px;
    border: 1px solid var(--li-ink, rgba(16, 18, 20, .8));
    background: var(--li-panel, transparent);
    color: var(--li-ink, inherit);
    text-decoration: none;
}
.li-partner-strip-link:hover,
.li-partner-strip-link:focus-visible {
    border-color: var(--li-blue, #155dfc);
    box-shadow: 3px 3px 0 var(--li-blue, #155dfc);
    outline: none;
}
.li-partner-strip-text {
    min-width: 0;
    flex: 1 1 240px;
    font-size: 14px;
    line-height: 1.45;
}
.li-partner-strip-go { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
/* Three classes (0,3,0), so hero paragraph rules of the host page (.printer-seo-page .printer-seo-hero p is 0,2,1)
   do not restyle it. */
.li-partner-strip .li-partner-tm.li-partner-tm,
.li-partner-tm {
    max-width: none;
    margin: 7px 0 0;
    color: var(--li-muted, #67655f);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
}
.li-partner-strip--center { margin-right: auto; margin-left: auto; text-align: left; }

/* The partner page hero: the large lockup on a framed panel. */
.li-partner-hero { min-width: 0; margin: 0; border: 1px solid var(--li-ink, #101214); background: var(--li-panel, #fffdf7); color: var(--li-ink, #101214); }
.li-partner-hero-stage {
    container-type: inline-size;
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
}
.li-partner-hero figcaption {
    padding: 12px 14px;
    border-top: 1px solid var(--li-ink, #101214);
    color: var(--li-muted, #67655f);
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 520px) {
    .li-partner--sm { font-size: 14px; }
    .li-partner-strip-link { padding: 12px; }
    .li-partner-hero-stage { min-height: 200px; padding: 36px 16px; }
}
@media (max-width: 340px) {
    .li-partner--sm { flex-wrap: wrap; }
}