/*
B2B-LANDING-001: styles for /business/ only. Extends the design tokens
already defined in ../styles.css's :root (colors, fonts, radii, shadow) —
does not redefine them, so both pages stay visually in sync automatically.
Sticky/fixed positioning in this file is scoped to .b2b-* classes only —
it must never leak onto the personal Matrix page (see
TestEntryLayoutScopedToEntryState precedent in test_ui_contract.py, whose
spirit this file follows for its own contract test).
*/

.b2b-body {
    overflow-x: hidden;
}

.b2b-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- header ------------------------------------------------------------ */

.b2b-header {
    margin-bottom: 32px;
}

.b2b-logo-link {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
}

.b2b-logo-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 4px;
}

.b2b-content-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.9rem;
}

.b2b-content-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 3px;
}

.b2b-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.b2b-header-tag {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* --- layout: mobile-first, single column -------------------------------
   DOM order is hero -> cta -> feed, so the sticky/compact bar decision in
   section 5 of the task ("first screen must show the invitation") is true
   by construction on narrow viewports, with no reordering trick needed. */

.b2b-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 64px;
    flex: 1;
}

.b2b-hero {
    max-width: 640px;
}

.b2b-overline {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c084fc;
    margin-bottom: 16px;
}

.b2b-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 20px;
}

.b2b-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
}

.b2b-hero-addendum {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- CTA (inline, mobile-first) ----------------------------------------
   On mobile this is a normal in-flow card, fully visible on the first
   screen right after the hero (section 5's requirement). At >=1024px it
   becomes the sticky right-hand column instead — see the media query. */

.b2b-cta {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.b2b-cta-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.b2b-cta-prompt {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    min-height: 1.6em;
}

.b2b-cta-explain {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.b2b-cta-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: not-allowed;
}

.b2b-cta-btn:disabled {
    opacity: 0.75;
}

/* --- feed / blocks ------------------------------------------------------
   Deliberately not seven identical heavy cards: each block is a plain,
   left-bordered strip that grows slightly wider/heavier as the scale of
   the idea grows (deals -> ... -> greater_matrix), so scrolling reads as a
   gradual widening of scope rather than a repeated component. */

.b2b-feed {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b2b-block {
    padding: 22px 0 22px 20px;
    border-left: 2px solid var(--border-color);
    transition: border-color 0.3s ease, background-color 0.3s ease;
    scroll-margin-top: 24px;
}

.b2b-block h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.b2b-block p {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 560px;
}

.b2b-block--wide h2 {
    font-size: 1.3rem;
}

.b2b-block--wide p {
    font-size: 1.02rem;
    max-width: 620px;
}

/* Active-block emphasis: a light/line change only, per section 7 — no new
   background block, no motion beyond a border-color transition (which
   prefers-reduced-motion below turns instant). */
.b2b-block.is-active {
    border-left-color: var(--accent-primary);
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.06), transparent 60%);
}

.b2b-final {
    margin-top: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
    max-width: 620px;
}

.b2b-final h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.b2b-final p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 14px;
}

/* B2B-MANIFEST-001: this is now a real <a href="/business/how-it-works/">
   — same visual shape as the previous inert button (border pill, not a
   bold gradient CTA — the final block already has a lot going on), but
   cursor/hover/focus now read as genuinely interactive. */
.b2b-final-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.b2b-final-btn:hover {
    border-color: var(--border-focus);
    color: var(--text-primary);
}

.b2b-final-btn:focus-visible,
.b2b-cta-btn:focus-visible,
.b2b-block a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* --- mobile compact CTA bar ----------------------------------------------
   Hidden by default and whenever JS is unavailable — a page with no JS
   simply keeps the full inline .b2b-cta card in the document flow, which
   already satisfies "understandable without JavaScript". */

/* B2B-LANDING-001-FIX-01: was a single-row flex (prompt + nowrap button
   side by side) — at 375px the button's ~264px intrinsic width squeezed
   the prompt column down to ~59px, wrapping the question into 6-8 unreadable
   slivers with no formal box overlap but effectively broken UX (the exact
   dynamic-prompt legibility this bar exists for). Stacked column: the
   question gets the FULL inner width, the button sits on its own row below
   it, matching the task's own recommended layout. Height is intentionally
   NOT constrained (no max-height/overflow clipping) — content decides it,
   per the task's explicit "без фиксированной обрезки". */
.b2b-cta-compact {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.b2b-cta-compact.is-visible {
    display: flex;
}

.b2b-cta-compact-prompt {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    width: 100%;
}

.b2b-cta-btn--compact {
    /* Inherits width: 100% from .b2b-cta-btn (both classes are present on
       the same element) — no override here anymore. white-space stays at
       its normal default so the label can wrap onto a second line on the
       narrowest tested viewports instead of ever being clipped or forcing
       overflow. */
    padding: 10px 16px;
    font-size: 0.85rem;
    text-align: center;
}

/* --- footer -------------------------------------------------------------- */

.b2b-footer {
    margin-top: 48px;
    padding: 24px 0 32px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.b2b-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.b2b-footer a:hover,
.b2b-footer a:focus-visible {
    color: var(--text-primary);
}

/* Reserve room at the bottom of the page on narrow viewports so the fixed
   compact bar (when shown) never overlaps the footer's own links.
   business.js toggles this class on <body> in lockstep with
   .b2b-cta-compact.is-visible — a plain class toggle, not :has(), so it
   works identically across browsers. */
@media (max-width: 1023.98px) {
    body.b2b-compact-active .b2b-footer {
        /* B2B-LANDING-001-FIX-01: the stacked compact bar is taller than
           the old single-row one (measured up to ~120px across all 7
           blocks and 320-640px widths); 160px keeps a comfortable margin
           above the tallest observed case without hardcoding an exact
           value the content is free to exceed slightly on an unusual
           device/font-rendering combination. */
        padding-bottom: 160px;
    }
}

/* --- mobile compaction ----------------------------------------------------
   Tightened so the hero + the full inline CTA card fit within the first
   screen on common mobile viewport heights, per section 5's requirement. */

@media (max-width: 1023.98px) {
    .b2b-container {
        padding: 16px 16px 0;
    }

    .b2b-header {
        margin-bottom: 20px;
    }

    .b2b-layout {
        gap: 24px;
    }

    .b2b-overline {
        margin-bottom: 10px;
        font-size: 0.72rem;
    }

    .b2b-hero h1 {
        font-size: 1.55rem;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .b2b-subtitle {
        font-size: 0.92rem;
        margin-bottom: 8px;
    }

    .b2b-hero-addendum {
        font-size: 0.82rem;
    }

    .b2b-cta {
        padding: 16px;
    }

    .b2b-cta-title {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .b2b-cta-prompt {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .b2b-cta-explain {
        font-size: 0.82rem;
        margin-bottom: 14px;
    }

    .b2b-cta-btn {
        padding: 11px 16px;
        font-size: 0.85rem;
    }
}

/* --- desktop: two columns, sticky CTA ------------------------------------ */

@media (min-width: 1024px) {
    .b2b-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        grid-template-areas:
            "hero cta"
            "feed cta";
        column-gap: 56px;
        row-gap: 12px;
    }

    .b2b-hero {
        grid-area: hero;
        max-width: none;
    }

    .b2b-cta {
        grid-area: cta;
        position: sticky;
        top: 24px;
        align-self: start;
        height: fit-content;
    }

    .b2b-feed {
        grid-area: feed;
    }

    /* The compact mobile bar never applies at desktop widths. */
    .b2b-cta-compact {
        display: none !important;
    }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .b2b-block,
    .b2b-cta-btn,
    .b2b-final-btn,
    .b2b-logo-link {
        transition: none !important;
    }
}